Web Intents入門
- 1. Web Intents入 門 白石俊平 @Shumpei
- 2. 自己紹介 株式会社オープンウェブ・テクノロジー代表 今年からシーエー・モバイル株式会社 Web先 端技術 フェローに就任しました。 HTML5とか勉強会主催、html5j.org管理人 Google API Expert (HTML5) Microsoft Most Valuable Professional 2011 (IE) Twitter ID: @Shumpei
- 3. アジェンダ Web Intentsとは何か？ Web Intentsをプログラムから利用する Web IntentsはWebをどう変えるか？
- 5. Web Intentsとは何か？ Androidの「インテント」をWebアプリどう しで実現する仕組み 2011年6月にGoogleがアイデアを公開し、 現在はW3Cで標準化作業中（仕様書） App1 App Platform App App2
- 6. インテントの登場人物は三種類。 クライアント・・・インテントの呼び出し 元となるアプリケーション UA・・・Web Intentsを管理するプラット フォーム。通常はWebブラウザ サービス・・・インテントを処理するWeb アプリ クライア UA サービス ント
- 7. サービスの登録 ユーザがサービスのWebページにアクセスする。Webアプリ2の <head>内には、<intent>要素が含まれている • ブラウザは、このWebサービスをインテント処理可能なアプリケー ションとして登録する
- 8. サービスの登録UI Grenn Jonesさんのブログより引用
- 9. サービスの管理UI Grenn Jonesさんのブログより引用
- 10. インテント処理の流れ ユーザがWebアプリ（クライアント）上で、インテントを要求するような操作を行う クライアントは、ブラウザに対してインテントの処理を要求する • ブラウザは、登録済みのWebアプリ（サービス）の中からインテン トを処理できるアプリの一覧を表示する • ユーザはサービスを選択する • ブラウザはそのサービスを起動し、インテントを渡す • サービスは、渡されたインテントを元に処理を行い、結果を返す • ブラウザは、処理結果をクライアントに戻す • クライアントに処理が戻る
- 11. サービスの選択UI Grenn Jonesさんのブログより引用
- 13. 説明にあたっての前提 以下は、「Web Intents - W3C Editor's Draft 04 January 2012」を元 に解説します。 今後も仕様は変更される可能性が高いです。 また、webintents.orgで配布されているJavaScript shimを使って、 デモの動作検証を行なっています。 JavaScript shimは、Web Intentsを使用したいページに以下の <script>要素を含めることで利用できます。 <script src="//webintents.org/webintents.js"></script>
- 14. サービスの登録 <intent>要素を含むWebアプリにアクセスす ると、ブラウザはそのアプリケーションを 「インテント処理可能なアプリ」として登 録する <intent>は複数指定可能 <intent action="インテントのアクション（URL形式）" type="処理可能なコンテントタイプ" href="アプリケーションのURI" title="アプリケーションのタイトル" disposition="アプリケーションの開き方（window|inline）" />
- 15. インテントのアクション URL形式の文字列で指定。この文字列を キーとしてアプリが登録される 以下のようなアクションがデフォルトで利 用可能 http://webintents.org/discover 登録されたAPI/サービスを検索 http://webintents.org/share データの共有 http://webintents.org/edit データの編集 http://webintents.org/view データの閲覧 http://webintents.org/pick ファイルを外部サービスから取得 http://webintents.org/subscribe データの購読 http://webintents.org/save データの保存
- 16. <intent>要素の使用例 テキストデータの編集を行えるアプリケーション <intent action="http://webintents.org/edit" type="text/*" href="editor.html" title="マイエディタ" disposition="window" /> 短縮URL生成サービス（独自のアクションを定義） <intent action="http://example.com/shorten" type="text/uri-list" href="shorten.html" title="Goo.gl URL Shorter" disposition="inline" />
- 17. インテント処理の呼び出し // Intentオブジェクトの生成 var intent = new Intent( "http://webintents.org/edit", // アクション "text/plain", // コンテントタイプ "data" // データ ); // action/type/dataと言ったプロパティを持つ console.log("action:" + intent.action); console.log("type:" + intent.type); console.log("data:" + intent.data); // インテント処理の呼び出し navigator.startActivity(intent, onSuccess, onFailure)
- 18. インテントデータの処理 // Intentオブジェクトの生成 var intent = window.intent; var data = intent.data; …渡されたデータを処理… // 結果を呼び出し元に返す intent.postResult(result);
- 20. Webサービス間連携をよりス ムーズに 「Tweet」ボタンや「いいね！」ボタンが消える
- 21. Webサービス間連携をよりス ムーズに ファイルの処理方法を自由に選べる →ひいては、個々のWebアプリの単機能化が促進されるだろう
- 22. Webサービス間連携をよりス ムーズに 一度でもアクセスされたWebアプリが「忘れられる」ことが減るので は？ 少なくとも、そう考える事業者が多くなれば、Web Intentsは圧倒的な 速度で広まると思える。 その他、様々なユースケースが考えられる 認証 課金処理
- 23. ローカルとクラウドの境界を 超えて 例：コンタクト情報の取得を、ローカル／クラウドのアドレス帳から 行う 例：画像編集ソフトにおいて、編集対象の画像を、ローカル／クラウ ドのギャラリーから取得する App2 App1 UA App2
- 24. ホームネットワークでの応用 も検討中 例：スマホで遭遇したYoutubeコンテンツをTVで視聴・操作 例：HDDレコーダー内の動画をタブレットで視聴
- 25. ホームネットワーク+Web Intentsの検討課題 「UAにデバイス（サービス）をどう登録するか」と、「Webアプリ⇔ デバイス間の通信処理をどう実現するか」が主な論点 デバイスのディスカバリを、誰がどこまで行うか？ デバイスとの永続的な通信の確立方法 現在のWeb Intentsは、一回限りのRPCモデル MessagePortを使用して、永続的な接続を確立しては？ デバイスとの通信プロトコルを処理するのはUA？アプリケーショ ン？
- 26. まとめ
- 27. まとめ Web Intentsは、Webアプリ間でインテント を実現するだけでなく、Webアプリとネイ ティブアプリの境界や、デバイスの境界を またいだサービス連携を実現する！ ホームネットワークでも存在感を発揮する はず Webサービスのあり方が大きく変わる可能 性も？ これからもWeb Intentsに刮目せよ！
- 28. 参考文献 webintents.org Web Intentsを試すことの出来るJavaScript shimを利用できる。手軽 にWeb Intentsを知りたければ、このサイトを参照すべし。 Web IntentsタスクフォースのWiki Web Intentsに関する情報のポータルと言っても良い。Web Intentsに ついて多少詳しく知りたければこちら。 Web Intentsとホームネットワークについてのページは参考になる。 W3Cのメーリングリスト。最新動向を知るならこちら。 Web Intents (Editor's Draft) 参照可能なドラフト仕様。 Web Intentsに深く関わっている、Glenn Jonesさんのブログポスト
- 29. 参考リンク Chromium BlogでもWeb Intentsに言及 Networked Service Discovery and Messaging サービスディスカバリや通信に関する、Operaによる非公式の仕様 Requirements for Home Networking Scenarios ホームネットワークにおける要件をまとめたW3Cのレポート Web Intentsに関する、スタッフ小松さんのブログポスト。貴重な日本語情報 Activity Streams インテントのアクションやデータ形式をここから参照しようか、という話はよく見受 けられる Web Introducer・・・関連はありそうだが、おそらくもうアップデートされなそうな W3C仕様 TwitterのWeb Intents・・・直接の関連はないが、UXの参考によく挙げられる
- 30. ご清聴ありがとうございました！ @Shumpei