Web Intents使ってみた

javascript

太字がジョニー。小字がボブ。

ヘイボブ、聴いてくれよ！

今度作るWebアプリにTwitterもFacebookもGoogle+もほげほげにも投稿できる機能を実装しなくちゃいけなくて大変だって？ならジョニー、Web Intentsの出番だ。

Web Intents？それはおいしいのかい？

ハーハー！徹夜続きでついにいかれちかまったのか？いいかよくきけよ。AndroidにIntentってあるだろ、あれがWebでも使えるんだ。

Intentなんて俺がわかると思うかい？

ふーんそれはWebだとどう使うんだ？

ジョニー、つまりクライアントアプリの開発者、がすることは二つだけだ。
まず投稿機能を実装するWebページにこのコードを入れるんだ。

<script src="http://webintents.org/webintents.org/webintents.min.js"></script>

そしたら後は自分の好きなタイミングでこのコードを読み出せばいい。そうだな、ボタンが押されたときにでもしようか。あ、画像のURLは自分の好きなURLに変えてくれよ。

var intent = new Intent("http://webintents.org/share", "image/*", "http://hige/hoge.jpg")
window.navigator.startActivity(intent);

なあボブ、小窓は出てきたが何も表示されないぞ？

ソーリーソーリー！俺としたことが肝心なことを忘れちまったよ。intentを呼び出す前に投稿先のWebサイトを訪れておくんだ。そうだな、今のところどこもWeb Intentsを実装してないからここに飛ぶといい。そしたらもう一度トライだ！
http://webintents.herokuapp.com/pic

面倒くさいな・・サンプルを見せてくれ

おいおいジョニーそんなんで大丈夫なのか。まあいい。さっきのWebページ（ http://webintents.herokuapp.com/pic ）にはもうアクセスしたか？ならここ（ http://examples.webintents.org/intents/share/index.html ）の「Share an Image」を試してみろ。

Web Intentsの技術的なこと

javascript

f:id:grapswiz:20111112011241p:image
Intentの登録や呼び出しはwebintents.orgのlocalStorageを介して行われる。
現時点でwebintents.jsを読み込むとwebintents.org内のWebページがiframeで追加される。
Webサービスがintentを登録しようとする（タグを宣言する）と

  1. parseIntentDocumentメソッドの実行
  2. registerメソッドの実行
  3. Intentの中身をiframe側に送信
  4. MessageHandlerのhandlerメソッドが（ここでwebintents-server.jsに処理が移る）

ABCも近いので名刺を作ることにした

入れる情報

  • grapswiz
  • ブログURL
  • メールアドレス
  • twitterとかgoogle+とか

コンセプト

レトロゲーム。特にMOTHER2！ネス！！
最後の最後で泣いた。

イメージ

モチーフ
書体

ドラクエフォントがそれっぽいな。

画像素材