2012年10月23日火曜日

第9回 #gtuggirls Web Intentsのコードラボを行いました

こちらのブログを書いて以降も、GTUG Girls は継続的に活動しています。

第6回は「Androidアプリ開発 STEP2」ということで、STEP1の時に作ったAndroidウィジェットのレイアウトをあれこれいじって改良してみるというコードラボを開催しました。(STEP1.ウィジェットを作ろう! 開発環境構築資料ハンズオン資料  STEP2.ウィジェットをカスタマイズしよう!ウィジェット開発のプロジェクトファイルハンズオン資料

第7回は Google App Engine のコードラボ、資料はこちら

第8回は Google+ History API のコードラボ、資料はこちら

そして、第9回Web Intents のコードラボをOperaさんのオフィスをお借りして開催しました。ハロウィンが近いということで、Operaさんのオフィスはハロウィン風に飾り付けられていて素敵でした :Dハロウィンの小道具も置いてあり、使わせてくださいました。

GTUGGirls WebIntents

GTUG Girlsでは、毎回コードを書く、みんなで助け合う、そして全員、動く物を自分で書いておうちに帰る。。。ようにしています。  というわけでまずは仲良くなるためのなごみタイム。「隣の席に座っている人の顔も名前もわからない」 では助けあって教えあうなんてことはできないので、まずはお菓子と飲み物片手にminglingします。 

GTUGGirls WebIntents

さっそくセッション開始。まずは小松さんからWeb Intentsの概要の解説。 

Androidのアプリを使っている人は、よくIntentsを見かけることがあると思います。 例えば写真のアプリを作ったとする。その写真を友達と共有する機能を自分が作ったアプリはもっていなくても Androidの Intents を使えば、TwitterやFacebookなどの共有機能で共有することができる、とか。色々な形でアプリとアプリをつなぎ、Android の Intents は有効活用されています。 Web Intents はそれの Web 版のようなもの。

Untitled

「何を」「どうしたいのか」を決めて、動かしていく。例えば下の例で行くと、左から「動画を」「再生したい」、「画像を」「共有したい」、「URLのリストを」「共有したい」、「画像を」「選択したい」。。。こうして規定した activity をwebアプリで連携させ、実現していく。

Untitled

ここで Web Intents を使って YouTube とテレビを連携させ、web で YouTube を再生したり音量をコントロールしたりして、それをテレビに連携して動かしちゃおう!というデモ。

Untitled

YouTube のページから Web Intents を使えるようにする Chrome Extensions を作ってインストールしておくと、いつもの YouTube のページに Web Intents 用のボタンが出てくる。(下記画像で、動画の下に Invoke WebIntentというボタンが出てます)

Untitled

飛んだ先に「Start discovery」ボタンがあるので、ボタンを押してデバイスを探しにいく。

Untitled

DLNA で接続してあったテレビ(Bravia)が見つかりました!

Untitled

ブラウザ上で YouTube の動画を再生したり、止めたり、音量を変えたりすると、テレビに動画が表示されたり音量がコントロールされたりします。

Untitled

Untitled

おおおお!というわけで、このアプリのソースは github で公開されています。DLNA をラップした REST の Web サーバーを立てていて、テレビの操作は、この REST を叩く普通のウェブアプリなんだそうです。

小松さんのスライドはこちら。



なお、小松さんはこのデモのために雨の中、テレビを持ってきて下さったのです。ありがとうございました!

GTUGGirls WebIntents

さて、それではやってみよう!ということで田中よういちろうさんに「Web Intents の基本のキ」のコードラボを行なって頂きました。

Untitled

スライドはこちらです。非常に丁寧にスライドを作ってくださっているので、コードラボに出なかった方でも、これを見れば同じことができると思いますので、やってみてください。



まずは Filtamatic という画像を加工することができる Web アプリと、Picstore という画像を登録することができる Web App をインストールし、たちあげてみます。

Filtamatic という画像加工アプリを作った開発者としては、他のサイトの画像を利用したいなーとかデジカメにある写真を利用したいなーとか思った時に、いちいちそういうのを作ると大変なので、Web Intents を使って「画像ちょーだい!」と他のアプリに訴えたら(Intentを送信)、画像をくれるという風にしたいわけです。そうすれば、Filtamatic の開発者は「画像の加工」という部分の開発に集中できる。



さっそくコードを書いて、実装してみる。

Untitled





画像をPicStoreから持って来ました。



あとは加工するだけ。便利です!


続いて、次は逆に Intent を受け取り、他のサービスに自分のサービスを提供してあげる、ということをやってみます。「この画像を送るから、加工して送り返してちょーだい!」と他のアプリからお願いされたら(Intentを受信)、画像を加工してどうぞと送ってあげる、という風にしたいわけです。



というわけでまたコードを書き書きφ(`д´)。

Untitled






できた!


まとめ。今までのアプリ開発は、全ての機能を自分のアプリの中で作らなければいけなかった。


これからのアプリ開発は、Web Intents を使って、色々なアプリやサービスと連携して機能を利用しあって行くようになるかもしれません。もちろんウェブアプリだけじゃなくて、最初のデモのようにウェブアプリとテレビとか。ウェブアプリとロボットとか。ウェブアプリと炊飯器とか。


というわけで、「Web Intents の基本のキ」をやってみることで、GTUG Girls の女子たちはまた一つ強くなったのでした。

Untitled


Untitled

講師をつとめてくださったよういちろうさん・小松さん、チューターをつとめてくださったえーじさん、スタッフの皆さんと来場者の皆さん、会場とお菓子をご提供くださったオペラさん、ありがとうございました!

よういちろうさんがブログを書いておられました。

まだWebSocketも取り上げられていないのに、Web Intentsです。なんて尖ってるんでしょうか。いや、きっといいことです。そうに違いない。
いいんです。みんながやりたいことをやるのが、学びたいことを学ぶのが一番!

Disclaimer このブログは山崎富美の個人的なものです。ここで述べられていることは私の個人的な意見に基づくものであり、私の雇用者には一切の関係はありません。