CEATEC Glassware(Google Glassアプリ)開発の指南と開発事例

  • 6,288 views
Uploaded on

CEATEC 2013 10/4 モバイルセッション4 講演資料です。

CEATEC 2013 10/4 モバイルセッション4 講演資料です。

More in: Technology
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
No Downloads

Views

Total Views
6,288
On Slideshare
0
From Embeds
0
Number of Embeds
6

Actions

Shares
Downloads
50
Comments
1
Likes
22

Embeds 0

No embeds

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
    No notes for slide

Transcript

  • 1. Google Glassアプリ開発 指南と開発事例 わかめ まさひろCEATEC 2013 http://goo.gl/O6oz5h Friday, October 4, 13
  • 2. わかめ まさひろ@vvakame GAE Android TypeScript AngularJS Glass Friday, October 4, 13
  • 3. • Google App Engine • Android • Google Apps などなど、 Google 技術に特化した会社です Friday, October 4, 13
  • 4. Google Glassのできること 本講演の内容は XE9に基づきます Friday, October 4, 13
  • 5. Google Glassとは? Google の開発している メガネ型のウェアラブルデバイス Friday, October 4, 13
  • 6. 写真・動画を撮る \カシャ/ Friday, October 4, 13
  • 7. 情報を見る Friday, October 4, 13
  • 8. 誰かと話す \話す相手がいない/ Friday, October 4, 13
  • 9. 外観 http://goo.gl/J4vqo より Friday, October 4, 13
  • 10. 外観 ディスプレイ 視界の右上にサブモニタが 置いてあるイメージです 景色と画面を同時に見るのは 人間には難しいです Friday, October 4, 13
  • 11. 外観 タッチパネル 下方向にスライドが AndroidでいうBackキー Friday, October 4, 13
  • 12. 外観 ジャイロセンサー センサー類は他にも色々! Friday, October 4, 13
  • 13. 外観 上部についてます 長押しで録画 シャッターボタン カメラ Friday, October 4, 13
  • 14. 外観 普通のAndroid端末と同じで DDMSでスクリーンキャプチャしたりできます microUSB 電源ボタン(裏 Friday, October 4, 13
  • 15. 外観 耳の裏がスピーカが来るので 聞き取りにくいです バッテリー 骨伝導スピーカ(裏 Friday, October 4, 13
  • 16. 画面表示 Friday, October 4, 13
  • 17. 画面表示 Friday, October 4, 13
  • 18. 指や動作で操作 • ちょんとタッチでスリープから復帰 • 上むいてスリープから復帰 • スワイプで横方向に画面移動 • タップで選択 後ろにスワイプ 前にスワイプ Friday, October 4, 13
  • 19. 声で操作 この画面で Ok, glass から開始 Friday, October 4, 13
  • 20. 声で操作 手でも同じ操作が できます • ok glass, • google • take a picture • record a video • get directions to • send a message to • make a call to • make a video call to • take a note with • post an update with Friday, October 4, 13
  • 21. スペック • Android ICS (4.0.4)  • 画面解像度 • 640x360  • 電池容量 570mAh • スマホの1/3ぐらい… • 普通に使うと8時間程度もつ • 写真・動画撮るともりもり減る Friday, October 4, 13
  • 22. Google Glass FAQ Friday, October 4, 13
  • 23. Google Glassの位置づけ ブティックのような 場所で受け渡し Friday, October 4, 13
  • 24. 便利? インターネットに接続して いないとまるで役に立ちません。 単独で役に立つデバイスでは ありません。 独自に何かを作れば別かも? Friday, October 4, 13
  • 25. 着けてて疲れない? 大丈夫です! ずっと動画撮ると熱くなって 困りはします。 着用できないほどではない Friday, October 4, 13
  • 26. Androidアプリとの互換性 “今は” Play Storeが載ってません ADBで転送すれば動かせます GDKという開発キットの提供が 予定されているようです(後述 Friday, October 4, 13
  • 27. プライバシーは? 今後の課題です。 撮影する時は音が鳴ります。 ディスプレイも光ります。 http://goo.gl/bCoZp KickStarterにて 3Dプリンタで 蓋を作った人も Friday, October 4, 13
  • 28. 他人の声にも反応する? します。 ただし、時計の画面の時のみ。 直近のバージョンだと 音声入力できるタイミング増えてるようです Friday, October 4, 13
  • 29. 通信方式は? Glassが自力でWi-Fi。 AndroidでBluetoothテザリング。 Androidには専用アプリがあります。 http://goo.gl/pfzc8 Friday, October 4, 13
  • 30. 道に迷わない? たぶん迷いません。 頭の向きにあわせて地図も動くので、 青い線を歩いていけば良いです。 スマホでも同じ事 できますけどね Friday, October 4, 13
  • 31. 日本語への対応? 表示はできます。 音声入力は全部英語です。 Googleは日本語の音声入力技術も 持っているので、何かハード的な 制約があるのかも…? Friday, October 4, 13
  • 32. ARっぽく使える? 現実の何かに 映像重ねたりは難しいです ハード的な制約 Mirror API上の制約 サブディスプレイが視界の隅にあるだけ Weak! 本当は猫の気持ちいい ポイントを オーバーレイしたい Friday, October 4, 13
  • 33. Mirror APIの制約? Glass本体にアプリを インストールできません。 全てのアプリは何をするにも必ず Google Serverを中継します。 詳しくはこの後! Friday, October 4, 13
  • 34. 頑丈? 箔が剥がれる 折れる が2大パターン Friday, October 4, 13
  • 35. 誰でも開発できる? Mirror API がまだ一般に 公開されていません ハードも出回ってません Google Glassの開発は Google Glassがないと なかなか難しいです iOSユーザにAndroidアプリを 作らせるのに等しいです Friday, October 4, 13
  • 36. Glasswareのできること Glassware = Mirror API を 用いたGlass アプリのこと Friday, October 4, 13
  • 37. アンケート • Android開発できます! • Webアプリ開発できます! • on Webサーバ! • on ブラウザ! Friday, October 4, 13
  • 38. アンケート • Android開発できます! • Webアプリ開発できます! • on Webサーバ! • on ブラウザ! 即座に開発可能! Friday, October 4, 13
  • 39. 構成 apkも使えますが 配布方法がない GoogleServer Glassware Server Glass apk install Friday, October 4, 13
  • 40. 要点 Web屋さん 大活躍の時! GoogleServer Glassware Server Glass RESTful API 逆に考えると ブラウザからGlassの全機能を 利用できるとも言える Friday, October 4, 13
  • 41. 必要な知識 Mirror API以外の Google APIで練習する と良いです • Webサービスの作り方 • OAuth2周り • AccessTokenの取得 & scope など • GoogleのAPIの使い方 • Cloud Console • API Explorer Friday, October 4, 13
  • 42. Reference曰く… • Timeline • Subscriptions • Locations • Contacts 4つ! Friday, October 4, 13
  • 43. Timeline Friday, October 4, 13
  • 44. Timeline 概念図です! ↑ 時計が基準 ←新しい  古い→ ↓Glass上ではこの単位で表示 メモ ↓ピン留めされたカードは更に左に Friday, October 4, 13
  • 45. Timeline メモ ↓sub timeline ←ドッグイア タップで潜る スワイプダウンで戻る Friday, October 4, 13
  • 46. Timelineが行うこと • ユーザの作成したアイテムの表示 • ユーザに情報の配信を行う • テキスト・HTMLの配信 • 利用できるHTMLタグは限定的 • JavaScript・音声・動画はダメ • 画像・動画の配信 • ユーザのリアクションを受ける Friday, October 4, 13
  • 47. ユーザによるアイテム \take a picture/ \record a video/ \take a note with/ GoogleServer Glassware Server ユーザが望めば 後述のSubscriptionsを使って Glasswareに通知できます Friday, October 4, 13
  • 48. ユーザへの配信 • HTML, テキスト, 画像, 動画 など • 公式にPlaygroundがあります! • 雰囲気をつかむのに最適 • http://goo.gl/L4t6y9 PCのWebブラウザで使える CSSも配布されています! Friday, October 4, 13
  • 49. ユーザへの配信 • 複数ページに渡るアイテムも配信 可能です。 • Gmailの場合 Friday, October 4, 13
  • 50. ユーザのリアクション • 配信時にメニュー設定を行う • Subscriptions経由で通知が来る • REPLY, REPLY_ALL • DELETE • SHARE • READ_ALOUD • VOICE_CALL • NAVIGATE • TOGGLE_PINNED • VIEW_WEBSITE • PLAY_VIDEO • CUSTOM 全てのリアクションは Subscriptionsを使って、 Google Server経由で 伝わってきます。 つまりリアルタイム性は低いです。 Friday, October 4, 13
  • 51. Subscriptions 更新通知のAPIです Friday, October 4, 13
  • 52. Subscriptions • 事前指定のURLにコールバック • 2種類あります • Timeline の挿入・更新・削除 • Locations の挿入・更新・削除 • 注意点 • 登録時に自システム固有のuserTokenを指定 していないと誰についてのコールバックか判 別できない Friday, October 4, 13
  • 53. Locations Friday, October 4, 13
  • 54. Locations • 位置情報が取れます • 過去の位置情報が時系列で取れる • 最新の位置情報のみも取得可能 10分間隔で 新しい位置が更新されます Friday, October 4, 13
  • 55. Contacts Friday, October 4, 13
  • 56. Contacts • だいたいアドレス帳みたいなもの • 単体の何か(人物) • グループ • Glassware もここに表示される アプリも人も同じ Friday, October 4, 13
  • 57. That’s all あなたは Mirror APIの 全てを理解しました Friday, October 4, 13
  • 58. 開発ガイドライン https://developers.google.com/glass/guidelines Friday, October 4, 13
  • 59. Glassのためのデザイン • Google Glassは既存のモバイルプ ラットフォームとは違う • GlasswareはGoogle Glass専用に作 ろう • テストもかならず実機上で行おう Friday, October 4, 13
  • 60. 邪魔をしない • あるべき時に起こることをユーザ は望んでいる • 頻繁であったり、期待に反する通 知をしないようにする • ユーザが通知を無視しても問題な いように作る Friday, October 4, 13
  • 61. ナイスタイミング! • 最新の情報を小気味よいサイズで 届ける • ユーザの反応にも、予測可能なタ イミングで、タイムリーに行う Friday, October 4, 13
  • 62. びっくりを避ける • どのプラットフォームでも言える ことですが、ユーザの期待しない 動作で驚かさないこと • 何かをユーザに変わって行う前 に、明示的に許可をとること Friday, October 4, 13
  • 63. デザインガイドライン http://goo.gl/yqLZu 推奨されるデザインについての 記述があります。 画像素材の推奨されるサイズも。 Friday, October 4, 13
  • 64. GDKについて Friday, October 4, 13
  • 65. Glass Development Kit • Google Glass用ネイティブアプリ 開発が行える開発キット • GlassらしいUI, Experienceに • Android SDK+!のようです • 現時点で未公開 • Android SDKだけ使ったサンプル アプリは既に公開されています Friday, October 4, 13
  • 66. Google Glassとアップデート Friday, October 4, 13
  • 67. 月1 Version Up •XE5 → XE9 まであがっている • eXplorer Edition の略? •XE6 • ビデオストリーミング再生対応 • 写真共有時にキャプション追加 •XE7 • 共有先を明示的に登録しなくてよ くなった Friday, October 4, 13
  • 68. 月1 Version Up • XE8 • Glasswareでボイスコマンドを受 けられるようになった • Take a note with...  • Post an update...  • WebSiteを開けるようになった • アイテムにURLを添付できる Friday, October 4, 13
  • 69. 月1 Version Up • XE9 • XE6で追加されたビデオのスト リーミング再生のやり方が変 わった • 古い方法はdeprecatedに • ビルトインのアクションの表示 名が変更できるようになった Friday, October 4, 13
  • 70. 開発事例 Friday, October 4, 13
  • 71. Third Party •The New York Times •Path •Facebook •Twitter •ELLE •Evernote •Tumblr •CNN Google I/O 発表時 Friday, October 4, 13
  • 72. 作り •向いている • 友達に写真をシェアする • 稀に興味あるの情報が送られてく る •向いていない • 頻繁にくる通知(1分に1回とか Twitterの場合、 mentionとDMのみ通知がきます Friday, October 4, 13
  • 73. Glass Tasks 弊社製Glasswareです Friday, October 4, 13
  • 74. 機能 •Google Tasks と連携 •Google Glass上にタスク表示 •Google Glassからタスク登録 •最寄りのタスクがあれば通知 Mirror API Only! Friday, October 4, 13
  • 75. コンセプト ✓ 原稿を書く ✓ 牛乳を買う (スーパー) ✓ 同僚に1000円返す (会社) チェック & タッチで消化 ok, glass. take a note with Glass Tasks. Buy a milk! 音声でタスク登録! Friday, October 4, 13
  • 76. コンセプト 自宅 スーパー 猫カフェ 会社 牛乳! 一部タスクは場所に 依存します! Friday, October 4, 13
  • 77. 利用方法 他 Webブラウザ Friday, October 4, 13
  • 78. 利用方法 タスク一覧 タスク完了 CUSTOMアクション Friday, October 4, 13
  • 79. 利用方法 タスク一覧 ピン留め ピン留めすると時計の左側に 常時表示できます。 Friday, October 4, 13
  • 80. 利用方法 タスクに設定された緯度経度の 近くを通ると通知がきます。 そのままナビゲートもできます。 Friday, October 4, 13
  • 81. 構成 + on GAE/Java Mirror API & Tasks API and Friday, October 4, 13
  • 82. 必要な権限 •OAuth2認証 • https://www.googleapis.com/auth/userinfo.profile • ユーザ情報取得 • https://www.googleapis.com/auth/glass.timeline • GlassのTimelineの操作 • https://www.googleapis.com/auth/glass.location • Glassの位置情報の取得 • https://www.googleapis.com/auth/tasks • タスク情報の書込 • https://www.googleapis.com/auth/tasks.readonly • タスク情報の読込 Friday, October 4, 13
  • 83. ユーザ登録時処理 •ユーザ情報の取得 •Subscriptions 2種の登録 • ノートの追加 • 位置情報の取得 •ボイスコマンドを受け付ける Contactの追加 •Timelineにタスク一覧を表示 Friday, October 4, 13
  • 84. Subscriptions コールバック •本アプリでは3種類の通知に対応 • タスクを完了にする通知 • 新しいタスクを起こす通知 • 位置情報アップデートの通知 上2つがTimeline Itemの通知 下1つがLocationsの通知 Friday, October 4, 13
  • 85. 定期処理 •3時間に1回 タスクを読込み TimelineのItemを更新する Tasksの更新があったら Callbackが欲しいです… Friday, October 4, 13
  • 86. ソースコード お問い合わせください! 弊社から提供も可能です。 https://tg-glasstasks.appspot.com/ Friday, October 4, 13
  • 87. まとめ •AR(拡張現実) ではない •Google Glassは気の利いた情報を 摂取するためのもの •現状はWeb API (Mirror API)のみ Friday, October 4, 13
  • 88. ご清聴ありがとうございました。 教育請負や技術コンサル 受託開発の依頼承り www.topgate.co.jp/contact Friday, October 4, 13