Sencha TouchでGoogle Glassの開発

こんにちは、ゼノフィnakamuraです。

この記事は、US Sencha社ブログ Developing for Google Glass with Sencha Touch を翻訳したものです。

去年は、ウェアラブルな電気製品がはやりました。主なものは電話にでたり、またはゲームができる器用な腕時計の採用でした。Googleは次に大ブームするウェアラブル技術を所有していると思っていて、今日はそれがどう我々開発者に影響するか検討します。

現在はexplorer state（探検状態）いわゆるベータ版にですので、Google Glassは大衆的に採用されるまでは時間がかかります。そのため、この技術の利用、機能、ウェアラブル名電気製品の未来をどう変えるか、様々なことを今検討するのがベストなタイミングです。Google Glassが次の大ブームになるかどうかは分かりませんが、今言えることはGoogle Glassはこれまでになかったものです。これをどう使い、どう問題を解決し、人々の生活をもっと楽に、良く、安全に、面白くするかを考えるのは我々の役割です。

Senchaでは、複数のプラットフォームのモバイル開発の場合は、HTML5とそれをサポートするテクノロジーがベストな選択肢と信じてきました。 Google Glassの場合は完璧な例となります。なぜならSencha Touchさえあればアプリケーション開発を行えるからです。

ハイブリッドアプリケーションの世界で作業している開発者には、Glassへの開発は自然な感じがします。画面の解像度が低いのといくつか新しいUIの制限を扱うことだけです。これまでにタブレット、デスクトップ、スマートフォンに対応していますので、要件は理解できます。

デモ動画

ほとんどの人はGoogle Glassをまだ手に入れることはできてないため、シンプルなSencha TouchアプリケーションがGlassで動作している短い動画を用意しました。

はじめに

まずは他のSencha Touchアプリケーションと同じように、最初はSencha Cmdを使って、基本のスケルトンをスキャフォールディングします。

sencha -sdk /path/to/sdk generate app {AppName} /path/to/app

次に、このアプリケーションをブラウザから操作できるようにします。アプリケーションを生成したフォルダ（/path/to/app）に移動して、で次のコマンドを実行して下さい。

sencha web start

そうするとWebサーバーがアプリケーションを走らせ、ブラウザでhttp://localhost:54321 を表示すればアプリケーションを確認できます。

ローカル開発のフロー

さて、Google Glassの詳細をご覧ください。ほとんどの人はGlassにアクセスできませんから、Google Chromeをローカル開発プラットフォームにとして説明します。しかし、後でSencha CmdとCordovaを使って、ネイティブのGlassアプリケーションを生成について説明します。

この段階でChromeでアプリケーションが開いているはずです。次は右上のメニューからTools → Developer Toolsを選択して下さい。このショートカットは Command + Option + i です。Developer Toolsのウィンドウから、右上の歯車のアイコンを選択して、Overrides セクションを選択して下さい。 “Show ‘Emulation’ view in console drawer” が選択されているか確認して下さい。その後は設定メニューを閉じても大丈夫です。

次にDeveloper ToolsウィンドウからConsole以外のタブをどれか選択して下さい。今はSourcesを利用します。ここでキーボードのESCキーを押すと、コンソール画面を表示できます。Chromeが適用できるオーバーライドを全て表示するために、上のEmulationタブを選択して下さい。

Deviceセクションに移動すると、エミュレートできるデバイスのドロップダウンリストがありますが、Google Glassはその中には入っていません。いずれはこのオプションも追加されると思いますが、今のところは自分たちでセットする必要があります。ドロップダウンリストからGoogle Nexus 4を選択して、エミュレートをクリックして下さい。次に全ての設定をカスタマイズします。

Screenセクションに次の設定を適用して下さい：

Resolution: 640×360
Device pixel ratio: 1
Font scale factor: 1
Emulate Viewport チェックします
Enable text autosizing チェックします
Shrink to fit チェックします
CSS Media チェックを外します

User Agent セクションで次の設定を適用して下さい：

Spoof user agent チェックします
ドロップダウンは“Other”にします
ユーザーエージェントを次にセットして下さい: Mozilla/5.0 (Linux; U; Android 4.0.4; en-us; Glass 1 Build/IMM76L; XE12) AppleWebKit/534.30 (KHTML, like Gecko) Version/4.0 Mobile Safari/534.30

Sensorsのセクションでは、お好みのデバイスセンサーエミュレーションを有効にできますが、最低“Emulate touch screen”をチェックしていることを確認して下さい。

あなたのSencha TouchアプリケーションはChrome内の小さい640×360ウィンドウに表示されます。これはGoogle Glass内でユーザーの目の前に現れるビューと一致しています。これが最終的のエミュレーション設定となるかどうかは確保できませんが、自分でGlassを使って、画面を見てテストをしましたので、このオーバーレイはChromeのウィンドウと完璧に一致します。確かにこれはGoogle Glass開発に良いスタートになると思います。

UIノート

これでChromeで全てが動作したので、アプリケーションの開発を始められます。ユーザー入力の範囲があまりないので、GlassのUIはとてもシンプルです。プライマリーナビゲーションのコンポーネントとして、最初はカルーセルでスタートするのがおすすめです。その後 ‘activeitemchange’ のリスナーを使って、どの子アイテムをメインビューにするか決められます。 Glassの移動はスワイプで、選択はタップで実行しますので、普通のアプリケーションのユーザーフローは次のようになります：

アプリケーションが起動する
ユーザーが必要な画面情報を動かすためにスワイプします
ユーザーがその情報のアクションオプションを取得するためにタップします
メニューが元の画面をマスクするように表示されます
ユーザーがスワイプで必要なオプションまで移動するためにメニューを動かします
ユーザーがアクションを実行するためにタップします

Google Glass UIに対して、もっと詳しい情報は Google Glass Developers UI Docs page のページにあります。

Glassのアプリケーションを開発する

あなたの名作が完成したら、それをGlass explorersの世界に導入するときにSencha CmdとそのCordovaサポートが役に立ちます。Cordovaでネイティブパッケージングをする詳しい情報は Sencha Touch Cordova Guide をご覧下さい。今は主なポイントを説明します。

アプリケーションにCordovaサポートを追加するに、全ての前提条件が揃っていることを確認して、次のコマンドをアプリケーションのルートから実行して下さい。{AppID} はアプリケーションのリバースドメインデスクリプタです。例えば、com.sencha.glass.TestAppです。{AppName} はオプションなので、指定しなければSencha Touchアプリケーションの名前がデフォルトになります。ネイティブアプリケーションに違う名前を付けたい場合は、ここで指定することができます：

sencha cordova init {AppID} {AppName}

プロジェクトのルートにあるcordova.local.propertiesファイルを開いて、次をセットして下さい：

cordova.platforms=android

次の手順は、あなたのアプリケーションを正確にGoogle Glass用に設定するために、我々が作ったCordovaプラグインを追加することです。これを行うために、Terminalの中で {app-root}/cordova に移動して、次の三つのコマンドを実行して下さい。

cordova plugin add https://github.com/aphex/cordova-glass-core
cordova plugin add https://github.com/aphex/cordova-glass-touch
cordova plugin add https://github.com/aphex/cordova-glass-gesture

プラグインノート

ここで各プラグインが何を提供しているか少し説明します。

cordova-glass-core : これはGoogle GlassでCordova Androidプロジェクトが正確に動作するように変更します。これのお陰で、アプリケーションを起動させる音声コマンドの設定ができます。またオプションとして、アプリケーションが起動する前の音声プロンプトが可能となり、ユーザーが話した文字列を取得するためのJavaScript APIが含まれています。例えば、“Launch Trigger” は “open Sencha Movies” （「Sencha Moviesを開いて」）になって、そのプロンプトは“What movie would you like to search for”（「どの映画を検索したいですか？」）と聞くようにセットされて、JavaScript APIがアプリケーションが起動したらこの情報を取得するようになっています。

cordova-glass-touch : これはwebviewのGoogle Glassタッチパッドからtouchstartとtouchendイベントを発信するシンプルなプラグインです。これでSencha Touchのイベントシステムが受け継ぐようになって、普通通りにタッチイベントを管理するようになります。

cordova-glass-gesture : このプラグインはオプションですが、開発者はアプリケーションで利用したいと思うでしょう。 Sencha Touchはタッチイベントから自動的にジェスチャーを検出します。このように構築されているので、このように動作しますが、もし開発者がSencha Touchジェスチャーではなくて、タッチパッドからネイティブジェスチャーを取得したい場合はこのプラグインが役に立ちます。このプラグインは全てのタッチパッドジェスチャーをwebviewドキュメントオブジェクトに発送します。このイベントをリッスンすることについて、詳しくはこのプラグインのGitHub リポジトリの README をご覧ください。

起動をカスタマイズ

アプリケーションにGlassサポートを追加しました。カスタマイズする部分は一つしか残っていません。まずは次のコマンドを{app-root}/cordova フォルダから実行して、CordovaプロジェクトにAndroidプラットフォームを追加して下さい：

cordova add platform android

次に{app-root}/cordova/platforms/android/values/glass.xml ファイルを開いて下さい。そこに次のような要素があります：

<string name="app_launch_voice_trigger"&gt;hello cordova&lt;/string>

ここでアプリケーションを起動させる文字列を“hello cordova”から好きに変更できます。オプションで、次の要素もあります：

<string name="app_launch_voice_prompt">prompt question</string>

起動前にアプリケーションがユーザー入力をプロンプトするようにしたい場合、“prompt question”を好きな質問に変更できます。プロンプト質問を有効にする場合は、 “{app-root}/cordova/platforms/android/xml/app_launch_voice_trigger.xml” を開いて、次のラインのコメントを外す必要があります：

<input prompt="@string/app_launch_voice_prompt">

Glassの設定についてはそれで充分だと思います。この処理をより合理化するためにApache Cordovaのメンバーと協力していますが、現在はプラグイン経由でこの設定を正確に変更できません。解決させたいと思っていますが、それまで皆様は自分でセットする必要があります。そのため、もしこのプラグインを外して、また追加するとそれらの変更をクリーンアップして文字列をリセットする必要があります。しかし、これは滅多に無いことだと考えています。

構築とデプロイ

さて、アプリケーションルートから次のコマンドを実行して、Google Glassようにアプリケーションをビルドできます：

sencha app build native

これでSencha Command Cordova Supportを呼び出して、アプリケーションをネイティブAndroid apkファイルにバンドルします。このファイルは {app-root}/cordova/platforms/android/bin/{AppName}-debug.apk. にあります。この時点で、（もしGoogle Glassを持っていたら）このアプリケーションを次のコマンドでGlassにロードできます：

adb install -r /path/to/{AppName}-debug.apk

一つのコツ

Androidデバイス開発を加速したい方には、Sencha CMDは次のコマンドを通して、アプリケーションをエミュレータを通して動作できるようになっています：

sencha app build -run native

USBで接続されているAndroidデバイス（Google Glassのような）にアプリケーションをインストールしたければ、“{app-root}/.sencha/app/cordova-impl.xml”ファイルを開いて、“-cordova-emulate”ターゲット内の次のコマンド：

cordova emulate ${cordova.platforms.clean}

を次に変更して下さい：

cordova run ${cordova.platforms.clean}

ここで“sencha app build -run native”を動作させると、接続されているデバイスにアプリケーションがインストールされます。

未来へ

この情報が、ネイティブAndroidパッケージングと今の技術の限界を超えて、未来に向くアプリケーションを開発したい開発者に役に立てば嬉しいです。弊社も皆様と一緒に進んでいきたいです。皆様が何を開発するか楽しみにしていますので、コメントとフィードバックを共有して下さい。

Sencha Blog