zico's blog

zico は ジーコ と読んでください。

Firefox OS ハッカソンに参加しました

1月31日、六本木にあるMozilla Japanのオフィス(のファクトリースペース)にてFirefox OSハッカソンが行われました。イベント管理者(id:masawada)が大学の友人で、そのつながりで誘われたので軽いノリで参加しました。もう1人の友人と2人でチームを組みました。

ちょっぴり新春 Firefox OSハッカソン 2015 : ATND

そのためFxOSについて話にはよく聞いていました。

Firefox OS は、Mozillaスマートフォン向けに開発した新しいオープンなオペレーティングシステムで、業界の大手各社に支持されています。 HTML5 と他のオープンな Web 標準技術を使用して開発されているため、既存の独自仕様のプラットフォームによる支配や規制を受けることはありません。

Web ブラウザ Mozilla Firefox — Firefox OS に関する FAQ — Mozilla

オープンなWebの技術が使われているということですが、JavaScriptを書いたことが無かったのでとりあえず基礎文法だけ頭に入れて行きました。

JavaScript基礎文法最速マスター - gifnksmの雑多なメモ

ファクトリースペースはIT系っぽい(?)オシャレなところでした。

http://fxos.org/wp-content/uploads/2013/05/office-550x364.jpg
Mozilla Japan オフィスのファクトリースペース)

コミュニティについて | Firefox OS コミュニティ!

写真はFxOSコミュニティのWebサイトのもので、今回のハッカソン等はMozilla JapanというよりFxOSコミュニティが運営しています。

当日はまずmasawadaがオープニングを終え、早速開発が始まりました。以下、ハッカソンの記録です。

Open Web Board

今回の趣旨としてはFxOS環境の整ったボード「Open Web Board」(以下OWB)を頂いてその上で通信機器や入出力機器を用いたアプリを作るというものでした。

OWBはAndroid Debug Bridge (ADB)デバイスとして認識されるので、まずHomebrewでAndroidSDKを入れました。

brew install android-sdk

そしたらJDKが必要だということでJDKも入れてしまいました。
Java SE Development Kit 8 - Downloads

そこからはmasawadaのガイドによりVNCで画面共有しました。HDMIでディスプレイに出力するのがよいのですが、使えるディスプレイが限られていたので最初のセットアップ(Wi-Fiや地域などの設定)はもっさりな画面共有で頑張りました。

セットアップはGUIに従ってすんなり進みました。ホーム画面的な画面が現れました。
f:id:zico1222:20150201152811p:plain

次にFirefoxブラウザ搭載のWebIDEを使うためにWebIDEからOWBを認識しようとしました。これがなかなかうまく行かず、ついにmasawadaのゴッドハンドを駆使してなんとか開発環境構築を終えました。午前中はほとんどこの作業に費やしました。とりあえずHello, world!的なアプリを作りました。
f:id:zico1222:20150201160603j:plainf:id:zico1222:20150201160356p:plain

環境構築がうまくいかない合間には、HDMIでディスプレイに画面を出力してYoutubeの動画を再生したり、その音声をBluetooth経由でスピーカーから再生したり、無線のマウスで快適にソリティアを楽しみました。

見る/聴くチャンネルをサイコロで決めるアプリ

PanasonicがFxOS搭載のテレビを発売するということで、今回はテレビ向けのアプリを作ろうということになりました。

パナソニックがFirefox OS搭載4Kスマートテレビを2015年春にもリリース予定 - GIGAZINE

事前に構想を練っていたわけではなかったので深く考えず、サイコロを振って見るチャンネルを決めるアプリを作ることにしました。サイコロのJavaScriptプログラムはほとんどedo_m18さんのコードのコピペでした。

と、ここでNHKの番組表APIも使ってみようということになりました。1人で参加していた大学の後輩がNHKの番組表APIを使ったアプリを考えていたため、この考えに至りました。その後輩にはjqueryの使い方も含めてAPIについて教えてもらいました。持つべきは優しい後輩。
NHK番組表API

簡単なユーザ登録を済ませたら、APIキーを取得してNow On Air API (Ver. 1)を使ってみました。Webサイトが親切なため簡単に使えました。
Now On Air API (Ver.1) | NHK番組表API

というわけでチャンネルはNHKと(なぜか)調布ワンセグに限定し、サイコロの目はNHKのチャンネルのロゴで置き換えました。また右下に出る数字は出た目のチャンネルで現在放送中の番組名に置き換えました。

$.get("http://api.nhk.or.jp/v1/pg/now/130/g1.json?key=_ENTER_YOUR_KEY_",
      function(json) {showNum("NHK総合:" + json.nowonair_list.g1.following.title);});

手抜き感毎歳のアプリが出来上がりました。背景のテクスチャが反映されなかったのが残念です。
f:id:zico1222:20150201165800p:plain

夕方に各自成果を発表しました。その後はOWBを譲り受けるための承諾をして、懇親会に移りました。今回のハッカソンにはOWB目当てで参加した方が多かったようで、全体的にゆるい感じで終わりました。

感想

アプリのほとんどがコピペでしたが、そもそもここまでコピペで出来てしまうのも面白いなあと思いました。時間があればまた違うものを作ってみたいです。

今回のハッカソンは京都クリエイティブワークショップが毎月ほぼ定期的に行っているものの1つでした。他のFxOS コードリーディングなどのイベントもMozilla Japanが主催しているわけではありませんが、場所などはMozillaが積極的に提供しているようです。ハッカソンのスタッフにもMozilla Japanの社員が少なかったそうで、その辺にもゆるさが垣間見えてなんとなく好感が持てました。

PanasonicのテレビではFxOSからどこまでテレビを操作できるのかまだわかりませんが、FxOSと放送との関係にも期待しています。

f:id:zico1222:20150201174808j:plainハッカソンで頂いたOpen Web Board