88
Google Glassアプリ開発 指南と開発事例 わかめ まさひろ CEATEC 2013 http://goo.gl/O6oz5h Friday, October 4, 13

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

Embed Size (px)

DESCRIPTION

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

Citation preview

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

Google Glassアプリ開発指南と開発事例

わかめ まさひろCEATEC 2013http://goo.gl/O6oz5h

Friday, October 4, 13

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

わかめ まさひろ@v vakame

GAE

AndroidTypeScript

AngularJSGlass

Friday, October 4, 13

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

• Google App Engine• Android• Google Appsなどなど、

Google技術に特化した会社です

Friday, October 4, 13

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

Google Glassのできること

本講演の内容はXE9に基づきます

Friday, October 4, 13

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

Google Glassとは?

Google の開発しているメガネ型のウェアラブルデバイス

Friday, October 4, 13

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

写真・動画を撮る

\カシャ/

Friday, October 4, 13

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

情報を見る

Friday, October 4, 13

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

誰かと話す

\話す相手がいない/

Friday, October 4, 13

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

外観

http://goo.gl/J4vqo より

Friday, October 4, 13

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

外観

ディスプレイ視界の右上にサブモニタが置いてあるイメージです

景色と画面を同時に見るのは人間には難しいです

Friday, October 4, 13

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

外観

タッチパネル

下方向にスライドがAndroidでいうBackキー

Friday, October 4, 13

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

外観ジャイロセンサー

センサー類は他にも色々!

Friday, October 4, 13

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

外観

上部についてます長押しで録画

シャッターボタン

カメラ

Friday, October 4, 13

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

外観

普通のAndroid端末と同じでDDMSでスクリーンキャプチャしたりできます

microUSB

電源ボタン(裏

Friday, October 4, 13

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

外観

耳の裏がスピーカが来るので聞き取りにくいです

バッテリー

骨伝導スピーカ(裏

Friday, October 4, 13

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

画面表示

Friday, October 4, 13

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

画面表示

Friday, October 4, 13

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

指や動作で操作• ちょんとタッチでスリープから復帰• 上むいてスリープから復帰• スワイプで横方向に画面移動• タップで選択

後ろにスワイプ 前にスワイプ

Friday, October 4, 13

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

声で操作

この画面で Ok, glass から開始

Friday, October 4, 13

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

声で操作

手でも同じ操作ができます

• 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

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

スペック• Android ICS (4.0.4) • 画面解像度

• 640x360 • 電池容量 570mAh

• スマホの1/3ぐらい…• 普通に使うと8時間程度もつ• 写真・動画撮るともりもり減る

Friday, October 4, 13

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

Google Glass FAQ

Friday, October 4, 13

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

Google Glassの位置づけ

ブティックのような場所で受け渡し

Friday, October 4, 13

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

便利?インターネットに接続して

いないとまるで役に立ちません。単独で役に立つデバイスでは

ありません。

独自に何かを作れば別かも?

Friday, October 4, 13

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

着けてて疲れない?大丈夫です!

ずっと動画撮ると熱くなって困りはします。

着用できないほどではない

Friday, October 4, 13

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

Androidアプリとの互換性“今は”

Play Storeが載ってませんADBで転送すれば動かせますGDKという開発キットの提供が予定されているようです(後述

Friday, October 4, 13

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

プライバシーは?今後の課題です。

撮影する時は音が鳴ります。ディスプレイも光ります。

http://goo.gl/bCoZp

KickStarterにて3Dプリンタで蓋を作った人も

Friday, October 4, 13

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

他人の声にも反応する?

します。ただし、時計の画面の時のみ。

直近のバージョンだと音声入力できるタイミング増えてるようです

Friday, October 4, 13

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

通信方式は?

Glassが自力でWi-Fi。AndroidでBluetoothテザリング。

Androidには専用アプリがあります。http://goo.gl/pfzc8

Friday, October 4, 13

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

道に迷わない?たぶん迷いません。

頭の向きにあわせて地図も動くので、青い線を歩いていけば良いです。

スマホでも同じ事できますけどね

Friday, October 4, 13

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

日本語への対応?

表示はできます。音声入力は全部英語です。

Googleは日本語の音声入力技術も持っているので、何かハード的な

制約があるのかも…?

Friday, October 4, 13

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

ARっぽく使える?

現実の何かに映像重ねたりは難しいです

ハード的な制約Mirror API上の制約

サブディスプレイが視界の隅にあるだけ

Weak!本当は猫の気持ちいい

ポイントをオーバーレイしたい

Friday, October 4, 13

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

Mirror APIの制約?Glass本体にアプリを

インストールできません。全てのアプリは何をするにも必ず

Google Serverを中継します。

詳しくはこの後!

Friday, October 4, 13

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

頑丈?

箔が剥がれる折れる

が2大パターンFriday, October 4, 13

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

誰でも開発できる?Mirror API がまだ一般に公開されていませんハードも出回ってません

Google Glassの開発はGoogle Glassがないとなかなか難しいです

iOSユーザにAndroidアプリを作らせるのに等しいです

Friday, October 4, 13

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

Glasswareのできること

Glassware = Mirror API を用いたGlass アプリのこと

Friday, October 4, 13

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

アンケート

• Android開発できます!

• Webアプリ開発できます!

• on Webサーバ!

• on ブラウザ!

Friday, October 4, 13

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

アンケート

• Android開発できます!

• Webアプリ開発できます!

• on Webサーバ!

• on ブラウザ!即座に開発可能!

Friday, October 4, 13

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

構成

apkも使えますが配布方法がない

GoogleServer

Glassware Server

Glass

apk install

Friday, October 4, 13

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

要点

Web屋さん大活躍の時!

GoogleServer

Glassware Server

Glass

RESTful API

逆に考えるとブラウザからGlassの全機能を利用できるとも言える

Friday, October 4, 13

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

必要な知識

Mirror API以外のGoogle APIで練習する

と良いです

• Webサービスの作り方

• OAuth2周り

• AccessTokenの取得 & scope など

• GoogleのAPIの使い方

• Cloud Console• API Explorer

Friday, October 4, 13

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

Reference曰く…

• Timeline• Subscriptions• Locations• Contacts

4つ!

Friday, October 4, 13

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

Timeline

Friday, October 4, 13

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

Timeline

概念図です!

↑時計が基準 ←新しい  古い→

↓Glass上ではこの単位で表示

メモ

↓ピン留めされたカードは更に左に

Friday, October 4, 13

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

Timeline

メモ

↓sub timeline

←ドッグイア

タップで潜るスワイプダウンで戻る

Friday, October 4, 13

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

Timelineが行うこと• ユーザの作成したアイテムの表示• ユーザに情報の配信を行う

• テキスト・HTMLの配信• 利用できるHTMLタグは限定的• JavaScript・音声・動画はダメ

• 画像・動画の配信• ユーザのリアクションを受ける

Friday, October 4, 13

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

ユーザによるアイテム\take a picture/\record a video/

\take a note with/

GoogleServer

Glassware Server

ユーザが望めば後述のSubscriptionsを使ってGlasswareに通知できます

Friday, October 4, 13

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

ユーザへの配信• HTML, テキスト, 画像, 動画 など• 公式にPlaygroundがあります!

• 雰囲気をつかむのに最適• http://goo.gl/L4t6y9

PCのWebブラウザで使えるCSSも配布されています!

Friday, October 4, 13

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

ユーザへの配信• 複数ページに渡るアイテムも配信可能です。• Gmailの場合

Friday, October 4, 13

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

ユーザのリアクション• 配信時にメニュー設定を行う• 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

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

Subscriptions

更新通知のAPIです

Friday, October 4, 13

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

Subscriptions• 事前指定のURLにコールバック• 2種類あります

• Timeline の挿入・更新・削除• Locations の挿入・更新・削除

• 注意点• 登録時に自システム固有のuserTokenを指定していないと誰についてのコールバックか判別できない

Friday, October 4, 13

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

Locations

Friday, October 4, 13

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

Locations

• 位置情報が取れます

• 過去の位置情報が時系列で取れる

• 最新の位置情報のみも取得可能

10分間隔で新しい位置が更新されます

Friday, October 4, 13

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

Contacts

Friday, October 4, 13

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

Contacts

• だいたいアドレス帳みたいなもの

• 単体の何か(人物)

• グループ

• Glassware もここに表示されるアプリも人も同じ

Friday, October 4, 13

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

That’s all

あなたはMirror APIの

全てを理解しました

Friday, October 4, 13

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

開発ガイドラインhttps://developers.google.com/glass/guidelines

Friday, October 4, 13

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

Glassのためのデザイン

• Google Glassは既存のモバイルプラットフォームとは違う

• GlasswareはGoogle Glass専用に作ろう

• テストもかならず実機上で行おう

Friday, October 4, 13

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

邪魔をしない

• あるべき時に起こることをユーザは望んでいる

• 頻繁であったり、期待に反する通知をしないようにする

• ユーザが通知を無視しても問題ないように作る

Friday, October 4, 13

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

ナイスタイミング!

• 最新の情報を小気味よいサイズで届ける

• ユーザの反応にも、予測可能なタイミングで、タイムリーに行う

Friday, October 4, 13

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

びっくりを避ける

• どのプラットフォームでも言えることですが、ユーザの期待しない動作で驚かさないこと

• 何かをユーザに変わって行う前に、明示的に許可をとること

Friday, October 4, 13

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

デザインガイドライン

http://goo.gl/yqLZu推奨されるデザインについての

記述があります。画像素材の推奨されるサイズも。

Friday, October 4, 13

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

GDKについて

Friday, October 4, 13

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

Glass Development Kit• Google Glass用ネイティブアプリ開発が行える開発キット• GlassらしいUI, Experienceに

• Android SDK+!のようです• 現時点で未公開• Android SDKだけ使ったサンプルアプリは既に公開されています

Friday, October 4, 13

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

Google Glassとアップデート

Friday, October 4, 13

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

月1 Version Up•XE5 → XE9 まであがっている

• eXplorer Edition の略?•XE6

• ビデオストリーミング再生対応• 写真共有時にキャプション追加

•XE7• 共有先を明示的に登録しなくてよくなった

Friday, October 4, 13

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

月1 Version Up

• XE8• Glasswareでボイスコマンドを受けられるようになった• Take a note with... • Post an update... 

• WebSiteを開けるようになった• アイテムにURLを添付できる

Friday, October 4, 13

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

月1 Version Up

• XE9• XE6で追加されたビデオのストリーミング再生のやり方が変わった• 古い方法はdeprecatedに

• ビルトインのアクションの表示名が変更できるようになった

Friday, October 4, 13

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

開発事例

Friday, October 4, 13

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

Third Party•The New York Times•Path•Facebook•Twitter•ELLE•Evernote•Tumblr•CNN Google I/O 発表時

Friday, October 4, 13

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

作り•向いている

• 友達に写真をシェアする• 稀に興味あるの情報が送られてくる

•向いていない• 頻繁にくる通知(1分に1回とか

Twitterの場合、mentionとDMのみ通知がきます

Friday, October 4, 13

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

Glass Tasks

弊社製Glasswareです

Friday, October 4, 13

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

機能

•Google Tasks と連携

•Google Glass上にタスク表示

•Google Glassからタスク登録

•最寄りのタスクがあれば通知Mirror API Only!

Friday, October 4, 13

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

コンセプト✓原稿を書く

✓牛乳を買う (スーパー)

✓同僚に1000円返す (会社)チェック & タッチで消化

ok, glass. take a note with Glass Tasks. Buy a milk!

音声でタスク登録!

Friday, October 4, 13

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

コンセプト

自宅

スーパー

猫カフェ

会社

牛乳!一部タスクは場所に依存します!

Friday, October 4, 13

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

利用方法

他 Webブラウザ

Friday, October 4, 13

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

利用方法タスク一覧

タスク完了

CUSTOMアクション

Friday, October 4, 13

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

利用方法タスク一覧

ピン留め

ピン留めすると時計の左側に常時表示できます。

Friday, October 4, 13

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

利用方法

タスクに設定された緯度経度の近くを通ると通知がきます。そのままナビゲートもできます。

Friday, October 4, 13

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

構成

+on

GAE/Java

Mirror API & Tasks APIand

Friday, October 4, 13

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

必要な権限•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

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

ユーザ登録時処理•ユーザ情報の取得•Subscriptions 2種の登録

• ノートの追加• 位置情報の取得

•ボイスコマンドを受け付けるContactの追加

•Timelineにタスク一覧を表示

Friday, October 4, 13

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

Subscriptions コールバック•本アプリでは3種類の通知に対応

• タスクを完了にする通知• 新しいタスクを起こす通知• 位置情報アップデートの通知

上2つがTimeline Itemの通知下1つがLocationsの通知

Friday, October 4, 13

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

定期処理

•3時間に1回 タスクを読込みTimelineのItemを更新する

Tasksの更新があったらCallbackが欲しいです…

Friday, October 4, 13

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

ソースコード

お問い合わせください!弊社から提供も可能です。

https://tg-glasstasks.appspot.com/Friday, October 4, 13

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

まとめ•AR(拡張現実) ではない

•Google Glassは気の利いた情報を摂取するためのもの

•現状はWeb API (Mirror API)のみ

Friday, October 4, 13

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

ご清聴ありがとうございました。教育請負や技術コンサル受託開発の依頼承り〼

www.topgate.co.jp/contact

Friday, October 4, 13