Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Web Intents入門

31,216 views

Published on

Web Intentsについて、第25回HTML5とか勉強会で講演した資料です。

Published in: Technology
  • Want to preview some of our plans? You can get 50 Woodworking Plans and a 440-Page "The Art of Woodworking" Book... Absolutely FREE ★★★ http://tinyurl.com/y3hc8gpw
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
  • Want to preview some of our plans? You can get 50 Woodworking Plans and a 440-Page "The Art of Woodworking" Book... Absolutely FREE ■■■ http://ishbv.com/tedsplans/pdf
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
  • これは面白いなぁ。
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
  • 今年はweb Intentsが来るのではないか
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here

Web Intents入門

  1. 1. Web Intents入 門 白石俊平 @Shumpei
  2. 2. 自己紹介 株式会社オープンウェブ・テクノロジー代表 今年からシーエー・モバイル株式会社 Web先 端技術 フェローに就任しました。 HTML5とか勉強会主催、html5j.org管理人 Google API Expert (HTML5) Microsoft Most Valuable Professional 2011 (IE) Twitter ID: @Shumpei
  3. 3. アジェンダ Web Intentsとは何か? Web Intentsをプログラムから利用する Web IntentsはWebをどう変えるか?
  4. 4. Web Intentsとは何か?
  5. 5. Web Intentsとは何か?  Androidの「インテント」をWebアプリどう しで実現する仕組み  2011年6月にGoogleがアイデアを公開し、 現在はW3Cで標準化作業中(仕様書) App1App PlatformApp App2
  6. 6. インテントの登場人物は三種類。  クライアント・・・インテントの呼び出し 元となるアプリケーション  UA・・・Web Intentsを管理するプラット フォーム。通常はWebブラウザ  サービス・・・インテントを処理するWeb アプリクライア UA サービス ント
  7. 7. サービスの登録 ユーザがサービスのWebページにアクセスする。Webアプリ2の <head>内には、<intent>要素が含まれている• ブラウザは、このWebサービスをインテント処理可能なアプリケー ションとして登録する
  8. 8. サービスの登録UI Grenn Jonesさんのブログより引用
  9. 9. サービスの管理UI Grenn Jonesさんのブログより引用
  10. 10. インテント処理の流れ ユーザがWebアプリ(クライアント)上で、インテントを要求するような操作を行う クライアントは、ブラウザに対してインテントの処理を要求する• ブラウザは、登録済みのWebアプリ(サービス)の中からインテン トを処理できるアプリの一覧を表示する• ユーザはサービスを選択する• ブラウザはそのサービスを起動し、インテントを渡す• サービスは、渡されたインテントを元に処理を行い、結果を返す• ブラウザは、処理結果をクライアントに戻す• クライアントに処理が戻る
  11. 11. サービスの選択UI Grenn Jonesさんのブログより引用
  12. 12. Web Intentsをプログラムから利用する
  13. 13. 説明にあたっての前提  以下は、「Web Intents - W3C Editors Draft 04 January 2012」を元 に解説します。  今後も仕様は変更される可能性が高いです。  また、webintents.orgで配布されているJavaScript shimを使って、 デモの動作検証を行なっています。  JavaScript shimは、Web Intentsを使用したいページに以下の <script>要素を含めることで利用できます。<script src="//webintents.org/webintents.js"></script>
  14. 14. サービスの登録  <intent>要素を含むWebアプリにアクセスす ると、ブラウザはそのアプリケーションを 「インテント処理可能なアプリ」として登 録する  <intent>は複数指定可能<intent action="インテントのアクション(URL形式)" type="処理可能なコンテントタイプ" href="アプリケーションのURI" title="アプリケーションのタイトル" disposition="アプリケーションの開き方(window|inline)"/>
  15. 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. 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. 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. 18. インテントデータの処理// Intentオブジェクトの生成var intent = window.intent;var data = intent.data;…渡されたデータを処理…// 結果を呼び出し元に返すintent.postResult(result);
  19. 19. Web IntentsはWebをどう変えるか?
  20. 20. Webサービス間連携をよりス ムーズに 「Tweet」ボタンや「いいね!」ボタンが消える
  21. 21. Webサービス間連携をよりス ムーズに ファイルの処理方法を自由に選べる →ひいては、個々のWebアプリの単機能化が促進されるだろう
  22. 22. Webサービス間連携をよりス ムーズに 一度でもアクセスされたWebアプリが「忘れられる」ことが減るので は? 少なくとも、そう考える事業者が多くなれば、Web Intentsは圧倒的な 速度で広まると思える。 その他、様々なユースケースが考えられる  認証  課金処理
  23. 23. ローカルとクラウドの境界を 超えて 例:コンタクト情報の取得を、ローカル/クラウドのアドレス帳から 行う 例:画像編集ソフトにおいて、編集対象の画像を、ローカル/クラウ ドのギャラリーから取得する App2 App1 UA App2
  24. 24. ホームネットワークでの応用 も検討中 例:スマホで遭遇したYoutubeコンテンツをTVで視聴・操作 例:HDDレコーダー内の動画をタブレットで視聴
  25. 25. ホームネットワーク+Web Intentsの検討課題 「UAにデバイス(サービス)をどう登録するか」と、「Webアプリ⇔ デバイス間の通信処理をどう実現するか」が主な論点  デバイスのディスカバリを、誰がどこまで行うか?  デバイスとの永続的な通信の確立方法  現在のWeb Intentsは、一回限りのRPCモデル  MessagePortを使用して、永続的な接続を確立しては?  デバイスとの通信プロトコルを処理するのはUA?アプリケーショ ン?
  26. 26. まとめ
  27. 27. まとめ Web Intentsは、Webアプリ間でインテント を実現するだけでなく、Webアプリとネイ ティブアプリの境界や、デバイスの境界を またいだサービス連携を実現する! ホームネットワークでも存在感を発揮する はず Webサービスのあり方が大きく変わる可能 性も? これからもWeb Intentsに刮目せよ!
  28. 28. 参考文献 webintents.org  Web Intentsを試すことの出来るJavaScript shimを利用できる。手軽 にWeb Intentsを知りたければ、このサイトを参照すべし。 Web IntentsタスクフォースのWiki  Web Intentsに関する情報のポータルと言っても良い。Web Intentsに ついて多少詳しく知りたければこちら。  Web Intentsとホームネットワークについてのページは参考になる。 W3Cのメーリングリスト。最新動向を知るならこちら。 Web Intents (Editors Draft)  参照可能なドラフト仕様。 Web Intentsに深く関わっている、Glenn Jonesさんのブログポスト
  29. 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. 30. ご清聴ありがとうございました! @Shumpei

×