Firefox OS アプリハンズオン 〜関東Firefox OS勉強会 7.5〜 に参加しました

IMG_1489 2

Firefox OS アプリハンズオン

1月18日にMozilla Japanオフィスで開催された『Firefox OS アプリハンズオン ~関東Firefox OS勉強会 7.5~』に参加してきました。

IMG_1489

当日は35名が参加。Firefox OS端末を使って自分の手でアプリ開発を体験できるイベントでした。

FirefoxOSの概要解説

まずはMozilla Japan浅井さんより、Firefox OSの概要解説。

IMG_1473

昨年12月に発売されたFx0で行列ができたことが話題に。

スクリーンショット 2015-01-19 13.04.46

Chromecastの対抗馬とも言えるMatchstickにも注目です。

スクリーンショット 2015-01-19 13.05.20

Firefox OS 3.0に向けて頑張っています。

スクリーンショット 2015-01-19 13.05.30

▼当日の資料はこちら

Fx0について

KDDIプロダクト企画本部の山部さんからは、Fx0の開発秘話的なお話が聞けました。

IMG_1475

注目されがちな外観の話以外にも、ソフト面ではFirefox OS 2.2の機能を先取りしている点があるなど、Mozillaの協力があったからこそ実現できたことが多々あったそうです。

IMG_1480

当日は製品版とは異なる仕様のFx0開発機も提供していただきました。残念ながら端末の写真はお見せできませんが「こちらを一般向けに販売しても良いのでは?」と思う外観をしていました。

ハンズオン① FirefoxOSアプリの概要

ハンズオンではFirefox OSアプリの概要に触れるところから。本イベントの主催者めこさんからFirefox OSの現状、アプリの構成や権限の話をしていただきました。

IMG_1486

Androidアプリ開発者が気になる点の解説などもありました。

▼当日の資料はこちら

ハンズオン② HelloWorldまで

概要解説に続き、アプリ開発のはじめの一歩と言えるHelloWorldを動かしてみました。解説は清水さんFirefox Developer Editionを使い、Fx0やFlameなど実機を繋いでのハンズオンです。

IMG_1492

Firefoxの開発ツールであるWebIDEにはHelloWorld用のテンプレートがあります。これを使うとコードをまったく書かずにHelloWorldアプリができてしまいます。

スクリーンショット 2015-01-18 14.21.21

以前はマニフェストファイルやhtmlファイルを自分で用意する必要があったのですが、こういった手間が徐々に減りつつあるなどFirefox OSアプリの開発環境はかなり整ってきた印象です。

スクリーンショット 2015-01-18 16.01.59

WebIDEについても補完機能がわりと優秀だったり、スタイルエディタの書き換えがリアルタイムに実機に反映されるなど、これだけでも十分開発できるレベルになっていました。


このハンズオンでは環境光センサーを使ってスタイルを変更させるという面白いアプリを体験することができました。


サンプルコードのコピペで簡単に動かせるので、端末をお持ちの方はぜひやってみてください。

▼当日の資料はこちら

ハンズオン③ サンプルアプリ(目覚ましアプリ)の実装

最後は目覚ましアプリを作るハンズオン。音を鳴らしたりバックグラウンドからの復帰、端末を振ってアラームの音を止めるなど、複数の要素が盛り込まれたアプリを作りました。

こちらはHelloWorldアプリと比べてコード量も多く、皆さんかなり苦戦していました。

微妙に資料のコードが間違っていたり、うまく動かないところがあったりと、悩みながらもデバッグ作業を行なうのは非常に楽しかったです(笑)

▼当日の資料はこちら

完成形のソースコードも公開されていますので、こちらもぜひ挑戦してみてください。

▼目覚ましアプリのソースコード
meco300/AlarmAppForFirefoxOS · GitHub

Togetter

当日のつぶやきをTogetterにまとめました。少しでも会場の雰囲気が伝われば幸いです。

Firefox OS関連イベントの発表資料

これまでのFirefox OS関連イベントの発表資料はこちらにまとまっています。

Firefox OS関連のドキュメント

Firefox OS関連書籍

書籍の方は少し内容が古くなっていますが、Firefox OSアプリの概要は網羅しています。これから開発に挑戦される方は目を通しておいて損はないと思います。

Firefox OSアプリ開発ガイド
本間 雅史 宮家 秀二 秋葉 秀樹 今村 博宜 山本 祐輔 秋葉 ちひろ 小森田 賢史 リックテレコム 売り上げランキング: 180,043
Firefox OSアプリ開発スタートアップマニュアル
技術評論社 (2013-06-07) 売り上げランキング: 11,601
HTML5でつくる Firefox OSアプリケーション開発入門
管理工学研究所 HTML5技術研究WG 秀和システム 売り上げランキング: 395,876