Firefox OS 触ってみた

Firefox OS 触ってみたおおつかなおや

13年6月25日火曜日

もくじ

• Firefox OS ってなに？

• アプリの作り方

• 開発環境を整える

• アプリ開発の流れ

• Hello world!

• ハッカソンに向けて


Firefox OS ってなに？

• Mozilla が作っている OS

• 電源入れたら Firefox が立ち上がるみたいな認識でたぶん OK

• HTML, CSS, Javascript でアプリ開発ができる

• 要するに web ページ作るのと同じ

• Java とか Objective-C 要らない -> 簡単


開発環境を整える

• 必要なもの

• Firefox (Web ブラウザ)

• Add-on: “Firefox OS Simulator”

• 好きなテキストエディタ

• HTML, CSS, Javascript などを書くため

• Emacs

• ５分でできます

• WS に参加する人は今日中にやれ


Firefox のインストール

http://www.mozilla.jp/firefox/




Firefox OS Simulator のインストール

https://addons.mozilla.org/ja/firefox/addon/firefox-os-simulator/




Firefox OS Simulator の起動


アプリ開発の流れ

• manifest.webapp を書く

• HTML, CSS, Javascript を必要に応じて書く

• Firefox OS Simulator で動作を確認












Hello world!

hello/

!"" img# %"" icon.jpg!"" index.html%"" manifest.webapp


Hello world!


少し時間がかかってもいいなら、Live codingしますが？


Demo


ハッカソンに向けて





本書を読む前に

• 本書の狙いは「既にこれら HTML5 等の知識をある程度揺する人が、Firefox OS という新たなプラットフォームの上で、新たにアプリケーションを開発するための手助けをすること」です。


本書を読む前に

• 本書の狙いは「既にこれら HTML5 等の知識をある程度揺する人が、Firefox OS という新たなプラットフォームの上で、新たにアプリケーションを開発するための手助けをすること」です。

HTML, CSS, Javascript は自分でやれ！


ハッカソンに向けて

• HTML, CSS, Javascript を学ぶべし

• Firefox OS アプリ開発ガイドを読むべし

• 1～3章ぐらいでいいよ

• とにかく手を動かせ。話はそれからだ。

• 来週、勉強会やります？

• 7/1, 2, 3 ?

• 人が集まれば

• HTML, CSS, Javascript hacker 募集


昨日、ハッカソンしました。

• 期間

• 2013/06/23 20:30 ～ 06/24 02:30

• 参加者

• Programmer: 大塚

• Designer: 大塚

• Concept: 大塚

• jQuery mobile 使ってみました

• 成果物見せます！


ハマったところ

• Javascript (jQuery) のイベントのタイミングがよくわからん

• Javascript の変数スコープが謎

• クロスドメイン制約

• Ajax では外部ドメインにアクセスできない

• 結果が xml で返ってくる API は Javascript からどう叩くの？

• 動的ページ生成


おわり質問あればどうぞ


Technology

Firefox OS 触ってみた