20150118 firefoxos-handson-helloworld
TRANSCRIPT
![Page 2: 20150118 firefoxos-handson-helloworld](https://reader031.vdocuments.net/reader031/viewer/2022032420/55a4f2b81a28ab2e188b45a9/html5/thumbnails/2.jpg)
もくじ
• Firefox OS アプリを作るために必要な準備 • Firefox OS Developer Edition のダウンロード • シミュレータの準備 • ADB / デバイスドライバの準備 • "Hello world!" アプリの作成
![Page 3: 20150118 firefoxos-handson-helloworld](https://reader031.vdocuments.net/reader031/viewer/2022032420/55a4f2b81a28ab2e188b45a9/html5/thumbnails/3.jpg)
@chikoski
• 六本木にあるWeb系の会社で働いてます • フロント周り中心にやってます
• Web Audio API 周り • 関数とか好きです • サッカーネタ多め
![Page 4: 20150118 firefoxos-handson-helloworld](https://reader031.vdocuments.net/reader031/viewer/2022032420/55a4f2b81a28ab2e188b45a9/html5/thumbnails/4.jpg)
Firefox OS アプリ作成環境構築
![Page 5: 20150118 firefoxos-handson-helloworld](https://reader031.vdocuments.net/reader031/viewer/2022032420/55a4f2b81a28ab2e188b45a9/html5/thumbnails/5.jpg)
アプリ作成に必要な準備をしましょう
• 次のソフトをインストールします • Firefox Developer Edition • Firefox OS シミュレータ • Windowsの方はドライバもインストールします • 作成に「必要無い」こと • SDKのダウンロード • 開発者登録(アプリの公開には必要、無料)
![Page 6: 20150118 firefoxos-handson-helloworld](https://reader031.vdocuments.net/reader031/viewer/2022032420/55a4f2b81a28ab2e188b45a9/html5/thumbnails/6.jpg)
• 普通のFirefoxでも開発できますが、開発者が必要とする機能が充実しているため、こちらのほうが効率良く開発が行えます。
• https://mozilla.org/firefox/channel/ よりダウンロードできます
![Page 7: 20150118 firefoxos-handson-helloworld](https://reader031.vdocuments.net/reader031/viewer/2022032420/55a4f2b81a28ab2e188b45a9/html5/thumbnails/7.jpg)
Firefox のインストール
https://www.mozilla.org/firefox/channel/ へアクセス
![Page 8: 20150118 firefoxos-handson-helloworld](https://reader031.vdocuments.net/reader031/viewer/2022032420/55a4f2b81a28ab2e188b45a9/html5/thumbnails/8.jpg)
Firefox のインストール(つづき)
クリック
![Page 9: 20150118 firefoxos-handson-helloworld](https://reader031.vdocuments.net/reader031/viewer/2022032420/55a4f2b81a28ab2e188b45a9/html5/thumbnails/9.jpg)
Firefox のインストール(つづき)
ボタンをクリックして、ダウンロード開始
![Page 10: 20150118 firefoxos-handson-helloworld](https://reader031.vdocuments.net/reader031/viewer/2022032420/55a4f2b81a28ab2e188b45a9/html5/thumbnails/10.jpg)
あとはOSの作法でインストールしましょう
![Page 11: 20150118 firefoxos-handson-helloworld](https://reader031.vdocuments.net/reader031/viewer/2022032420/55a4f2b81a28ab2e188b45a9/html5/thumbnails/11.jpg)
起動画面
![Page 12: 20150118 firefoxos-handson-helloworld](https://reader031.vdocuments.net/reader031/viewer/2022032420/55a4f2b81a28ab2e188b45a9/html5/thumbnails/12.jpg)
デフォルトブラウザの設定
「次回から確認しない」にチェックを入れておくと、次からは確認されません。
![Page 13: 20150118 firefoxos-handson-helloworld](https://reader031.vdocuments.net/reader031/viewer/2022032420/55a4f2b81a28ab2e188b45a9/html5/thumbnails/13.jpg)
開発に必要な機能はWebIDEに集約されています
![Page 14: 20150118 firefoxos-handson-helloworld](https://reader031.vdocuments.net/reader031/viewer/2022032420/55a4f2b81a28ab2e188b45a9/html5/thumbnails/14.jpg)
WebIDE
詳細は下記のページを参照してください:https://developer.mozilla.org/ja/docs/Tools/WebIDE
![Page 15: 20150118 firefoxos-handson-helloworld](https://reader031.vdocuments.net/reader031/viewer/2022032420/55a4f2b81a28ab2e188b45a9/html5/thumbnails/15.jpg)
Web IDEの起動
ツールバーにあるアイコンをクリックして、起動
![Page 16: 20150118 firefoxos-handson-helloworld](https://reader031.vdocuments.net/reader031/viewer/2022032420/55a4f2b81a28ab2e188b45a9/html5/thumbnails/16.jpg)
WebIDEの初期設定として、 Firefox OSシミュレータをインストールしましょう
![Page 17: 20150118 firefoxos-handson-helloworld](https://reader031.vdocuments.net/reader031/viewer/2022032420/55a4f2b81a28ab2e188b45a9/html5/thumbnails/17.jpg)
シミュレータのインストール
「ランタムを選択」をクリックします。
クリック
![Page 18: 20150118 firefoxos-handson-helloworld](https://reader031.vdocuments.net/reader031/viewer/2022032420/55a4f2b81a28ab2e188b45a9/html5/thumbnails/18.jpg)
シミュレータのインストール(つづき)
「シミュレータをインストール」をクリックします。
クリック
![Page 19: 20150118 firefoxos-handson-helloworld](https://reader031.vdocuments.net/reader031/viewer/2022032420/55a4f2b81a28ab2e188b45a9/html5/thumbnails/19.jpg)
シミュレータのインストール(つづき)
「Firefox OS 2.1 シミュレータ」をインストールします。
![Page 20: 20150118 firefoxos-handson-helloworld](https://reader031.vdocuments.net/reader031/viewer/2022032420/55a4f2b81a28ab2e188b45a9/html5/thumbnails/20.jpg)
シミュレータのインストール(つづき)
クリック
「閉じる」をクリックして終了です。
![Page 21: 20150118 firefoxos-handson-helloworld](https://reader031.vdocuments.net/reader031/viewer/2022032420/55a4f2b81a28ab2e188b45a9/html5/thumbnails/21.jpg)
シミュレータの起動
クリック
シミュレータの欄にある"Firefox OS 2.1"をクリックして起動します。
![Page 22: 20150118 firefoxos-handson-helloworld](https://reader031.vdocuments.net/reader031/viewer/2022032420/55a4f2b81a28ab2e188b45a9/html5/thumbnails/22.jpg)
シミュレータ
• ロケールはen-US • 日本語表示はできます • Marketplaceからアプリのインストールも可能です
![Page 23: 20150118 firefoxos-handson-helloworld](https://reader031.vdocuments.net/reader031/viewer/2022032420/55a4f2b81a28ab2e188b45a9/html5/thumbnails/23.jpg)
シミュレータのホームボタン
ここにあります
![Page 24: 20150118 firefoxos-handson-helloworld](https://reader031.vdocuments.net/reader031/viewer/2022032420/55a4f2b81a28ab2e188b45a9/html5/thumbnails/24.jpg)
ボタンで、端末の向きを切り替えます
ここにあります
![Page 25: 20150118 firefoxos-handson-helloworld](https://reader031.vdocuments.net/reader031/viewer/2022032420/55a4f2b81a28ab2e188b45a9/html5/thumbnails/25.jpg)
以上で、開発の準備は完了です
![Page 26: 20150118 firefoxos-handson-helloworld](https://reader031.vdocuments.net/reader031/viewer/2022032420/55a4f2b81a28ab2e188b45a9/html5/thumbnails/26.jpg)
"HelloWorld"
![Page 27: 20150118 firefoxos-handson-helloworld](https://reader031.vdocuments.net/reader031/viewer/2022032420/55a4f2b81a28ab2e188b45a9/html5/thumbnails/27.jpg)
HelloWorldアプリの作成
画面左上にある「アプリを開く」をクリックします。
クリック
![Page 28: 20150118 firefoxos-handson-helloworld](https://reader031.vdocuments.net/reader031/viewer/2022032420/55a4f2b81a28ab2e188b45a9/html5/thumbnails/28.jpg)
HelloWorldアプリの作成(つづき)
メニュー中の「新規アプリ」をクリックします。
クリック
![Page 29: 20150118 firefoxos-handson-helloworld](https://reader031.vdocuments.net/reader031/viewer/2022032420/55a4f2b81a28ab2e188b45a9/html5/thumbnails/29.jpg)
HelloWorldアプリの作成(つづき)
テンプレートの中から"HelloWorld"を選択します。
クリック
![Page 30: 20150118 firefoxos-handson-helloworld](https://reader031.vdocuments.net/reader031/viewer/2022032420/55a4f2b81a28ab2e188b45a9/html5/thumbnails/30.jpg)
HelloWorldアプリの作成(つづき)
プロジェクト名を入力します。ここではmyFirstAppとしました。
プロジェクト名を入力
![Page 31: 20150118 firefoxos-handson-helloworld](https://reader031.vdocuments.net/reader031/viewer/2022032420/55a4f2b81a28ab2e188b45a9/html5/thumbnails/31.jpg)
HelloWorldアプリの作成(つづき)
"OK"ボタンをクリックして、テンプレートからアプリを作成します。
クリック
![Page 32: 20150118 firefoxos-handson-helloworld](https://reader031.vdocuments.net/reader031/viewer/2022032420/55a4f2b81a28ab2e188b45a9/html5/thumbnails/32.jpg)
HelloWorldアプリの作成(つづき)
このように表示されたら、無事アプリが作られています。
![Page 33: 20150118 firefoxos-handson-helloworld](https://reader031.vdocuments.net/reader031/viewer/2022032420/55a4f2b81a28ab2e188b45a9/html5/thumbnails/33.jpg)
シミュレータ内で動かしてみましょう!
![Page 34: 20150118 firefoxos-handson-helloworld](https://reader031.vdocuments.net/reader031/viewer/2022032420/55a4f2b81a28ab2e188b45a9/html5/thumbnails/34.jpg)
HelloWorldアプリの起動
ウィンドウの上部中央にある、「▶」ボタンを押すとアプリが起動します。
クリック
![Page 35: 20150118 firefoxos-handson-helloworld](https://reader031.vdocuments.net/reader031/viewer/2022032420/55a4f2b81a28ab2e188b45a9/html5/thumbnails/35.jpg)
注意: 初回起動時は次のように表示されます
• スマートコレクションが位置情報を利用するのを許可するかどうかを確認するダイアログが表示されます
• これは初めてアプリをインストールする際に表示されます。
• 2回目以降は表示されません
![Page 36: 20150118 firefoxos-handson-helloworld](https://reader031.vdocuments.net/reader031/viewer/2022032420/55a4f2b81a28ab2e188b45a9/html5/thumbnails/36.jpg)
起動されたHello Worldアプリ
![Page 37: 20150118 firefoxos-handson-helloworld](https://reader031.vdocuments.net/reader031/viewer/2022032420/55a4f2b81a28ab2e188b45a9/html5/thumbnails/37.jpg)
"HelloWorld"を改造しよう!
![Page 38: 20150118 firefoxos-handson-helloworld](https://reader031.vdocuments.net/reader031/viewer/2022032420/55a4f2b81a28ab2e188b45a9/html5/thumbnails/38.jpg)
"HelloWorld"を改造しよう
ウィンドウの左にあるファイルのリストにある"index.html"をクリックします。
クリック
![Page 39: 20150118 firefoxos-handson-helloworld](https://reader031.vdocuments.net/reader031/viewer/2022032420/55a4f2b81a28ab2e188b45a9/html5/thumbnails/39.jpg)
"HelloWorld"を改造しよう(つづき)
右側にエディタが表示されます。ここでファイルを編集できます。
![Page 40: 20150118 firefoxos-handson-helloworld](https://reader031.vdocuments.net/reader031/viewer/2022032420/55a4f2b81a28ab2e188b45a9/html5/thumbnails/40.jpg)
"HelloWorld"を改造しよう(つづき)
<body> <h1>こんにちは!せかい!</h1> </body>
index.html の本文部分を上記のように書き換え、保存します。
![Page 41: 20150118 firefoxos-handson-helloworld](https://reader031.vdocuments.net/reader031/viewer/2022032420/55a4f2b81a28ab2e188b45a9/html5/thumbnails/41.jpg)
"HelloWorld"を改造しよう(つづき)
再読み込みボタンを押します。
キーボードショートカットは、Ctrl-r(もしくはCmd-r)です。
クリック
![Page 42: 20150118 firefoxos-handson-helloworld](https://reader031.vdocuments.net/reader031/viewer/2022032420/55a4f2b81a28ab2e188b45a9/html5/thumbnails/42.jpg)
"HelloWorld"を改造しよう(つづき)
• 表示される文字が変わりました!
• このように再読み込みを行うことで、変更内容を即座に反映できます。
![Page 43: 20150118 firefoxos-handson-helloworld](https://reader031.vdocuments.net/reader031/viewer/2022032420/55a4f2b81a28ab2e188b45a9/html5/thumbnails/43.jpg)
"HelloWorld"にスタイルを追加しよう
![Page 44: 20150118 firefoxos-handson-helloworld](https://reader031.vdocuments.net/reader031/viewer/2022032420/55a4f2b81a28ab2e188b45a9/html5/thumbnails/44.jpg)
ここから先に行う変更はこちらからもご覧になれます: https://gist.github.com/chikoski/fffbf16faf32389decda
![Page 45: 20150118 firefoxos-handson-helloworld](https://reader031.vdocuments.net/reader031/viewer/2022032420/55a4f2b81a28ab2e188b45a9/html5/thumbnails/45.jpg)
ファイルの新規作成
• 画面左側のファイルブラウザで右クリック
画面左のファイルブラウザで右クリックして、「新規作成」を選びます。
キーボードショートカットはCtrl(Cmd) + n です。
![Page 46: 20150118 firefoxos-handson-helloworld](https://reader031.vdocuments.net/reader031/viewer/2022032420/55a4f2b81a28ab2e188b45a9/html5/thumbnails/46.jpg)
ファイルの新規作成(つづき)
ファイル名を変更します。
ここでは"app.css"とします。
![Page 47: 20150118 firefoxos-handson-helloworld](https://reader031.vdocuments.net/reader031/viewer/2022032420/55a4f2b81a28ab2e188b45a9/html5/thumbnails/47.jpg)
ファイルの新規作成(つづき)
空のファイルが作成されます。
画面右側のエディタ部分でCSSを書いて行きましょう。
![Page 48: 20150118 firefoxos-handson-helloworld](https://reader031.vdocuments.net/reader031/viewer/2022032420/55a4f2b81a28ab2e188b45a9/html5/thumbnails/48.jpg)
CSSの内容
body{ overflow: hidden; }
h1{ font-size: 640%; border-style: none; line-height: .9; transform: rotate(-15deg); margin-left: -0.2em; width: 130%; }
上記のように記述したら、保存 (Ctrl / Cmd + s)します。
![Page 49: 20150118 firefoxos-handson-helloworld](https://reader031.vdocuments.net/reader031/viewer/2022032420/55a4f2b81a28ab2e188b45a9/html5/thumbnails/49.jpg)
app.cssとindex.htmlとのリンク
<title>Hello World</title> <style> body { border: 1px solid black; } </style>
<title>Hello World</title> <link rel="stylesheet" href="app.css">
左のようになっている部分を、右のように変更します。
変更したら保存します。
![Page 50: 20150118 firefoxos-handson-helloworld](https://reader031.vdocuments.net/reader031/viewer/2022032420/55a4f2b81a28ab2e188b45a9/html5/thumbnails/50.jpg)
再読み込み後の画面
• 文字の大きさと、傾きが変わっています。
• またh1要素の枠線も無くなっています。
![Page 51: 20150118 firefoxos-handson-helloworld](https://reader031.vdocuments.net/reader031/viewer/2022032420/55a4f2b81a28ab2e188b45a9/html5/thumbnails/51.jpg)
スタイルの確認
画面上部にあるスパナのアイコンをクリックして、開発ツールを表示させます。
クリック
![Page 52: 20150118 firefoxos-handson-helloworld](https://reader031.vdocuments.net/reader031/viewer/2022032420/55a4f2b81a28ab2e188b45a9/html5/thumbnails/52.jpg)
スタイルの確認(つづき)
画面下部に開発ツールが表示されます。
![Page 53: 20150118 firefoxos-handson-helloworld](https://reader031.vdocuments.net/reader031/viewer/2022032420/55a4f2b81a28ab2e188b45a9/html5/thumbnails/53.jpg)
スタイルの確認(つづき)
「インスペクタ」タブをクリックすると、要素とそのスタイルを確認できます。
![Page 54: 20150118 firefoxos-handson-helloworld](https://reader031.vdocuments.net/reader031/viewer/2022032420/55a4f2b81a28ab2e188b45a9/html5/thumbnails/54.jpg)
スタイルの確認(つづき)
インスペクタ上で、要素をポイントするとシミュレータでその要素がハイライトされます。
ポイント
![Page 55: 20150118 firefoxos-handson-helloworld](https://reader031.vdocuments.net/reader031/viewer/2022032420/55a4f2b81a28ab2e188b45a9/html5/thumbnails/55.jpg)
センサーの値を使ってみよう!
![Page 56: 20150118 firefoxos-handson-helloworld](https://reader031.vdocuments.net/reader031/viewer/2022032420/55a4f2b81a28ab2e188b45a9/html5/thumbnails/56.jpg)
作成するもの
暗くすると、色が変わる
![Page 57: 20150118 firefoxos-handson-helloworld](https://reader031.vdocuments.net/reader031/viewer/2022032420/55a4f2b81a28ab2e188b45a9/html5/thumbnails/57.jpg)
app.js を編集します
window.addEventListener("load", function() { var threshold = 50; var className = "night"; var body = document.querySelector("body"); window.addEventListener("devicelight", function(event){ if(event.value < threshold){ body.classList.add(className); }else{ body.classList.remove(className); } }); });
![Page 58: 20150118 firefoxos-handson-helloworld](https://reader031.vdocuments.net/reader031/viewer/2022032420/55a4f2b81a28ab2e188b45a9/html5/thumbnails/58.jpg)
CSSも修正します
body{ overflow: hidden; } body.night{ background-color: black; color: white; }
body要素に関するルールを上記のように修正します。
![Page 59: 20150118 firefoxos-handson-helloworld](https://reader031.vdocuments.net/reader031/viewer/2022032420/55a4f2b81a28ab2e188b45a9/html5/thumbnails/59.jpg)
再読み込みをして実験します
Webカメラのあたりを手で覆うと変化します
![Page 60: 20150118 firefoxos-handson-helloworld](https://reader031.vdocuments.net/reader031/viewer/2022032420/55a4f2b81a28ab2e188b45a9/html5/thumbnails/60.jpg)
アプリを実機に転送してみよう!
![Page 61: 20150118 firefoxos-handson-helloworld](https://reader031.vdocuments.net/reader031/viewer/2022032420/55a4f2b81a28ab2e188b45a9/html5/thumbnails/61.jpg)
実機の設定を開発用に変更します
![Page 62: 20150118 firefoxos-handson-helloworld](https://reader031.vdocuments.net/reader031/viewer/2022032420/55a4f2b81a28ab2e188b45a9/html5/thumbnails/62.jpg)
実機の設定変更
環境設定アプリを起動し、「端末情報」をタップします。
タップ
![Page 63: 20150118 firefoxos-handson-helloworld](https://reader031.vdocuments.net/reader031/viewer/2022032420/55a4f2b81a28ab2e188b45a9/html5/thumbnails/63.jpg)
実機の設定変更(つづき)
「その他の情報」をタップします。
タップ
![Page 64: 20150118 firefoxos-handson-helloworld](https://reader031.vdocuments.net/reader031/viewer/2022032420/55a4f2b81a28ab2e188b45a9/html5/thumbnails/64.jpg)
実機の設定変更(つづき)
「開発者メニュー」にチェックを入れます。
チェック
![Page 65: 20150118 firefoxos-handson-helloworld](https://reader031.vdocuments.net/reader031/viewer/2022032420/55a4f2b81a28ab2e188b45a9/html5/thumbnails/65.jpg)
実機の設定変更(つづき)
環境設定アプリのトップに「開発者」が表示されます。これをタップします。
タップ
![Page 66: 20150118 firefoxos-handson-helloworld](https://reader031.vdocuments.net/reader031/viewer/2022032420/55a4f2b81a28ab2e188b45a9/html5/thumbnails/66.jpg)
実機の設定変更(つづき)
「開発者ツール」の欄を「ADBと開発ツール」に変更します。
変更
![Page 67: 20150118 firefoxos-handson-helloworld](https://reader031.vdocuments.net/reader031/viewer/2022032420/55a4f2b81a28ab2e188b45a9/html5/thumbnails/67.jpg)
これでWebIDEと実機を接続できるようになりました。
![Page 68: 20150118 firefoxos-handson-helloworld](https://reader031.vdocuments.net/reader031/viewer/2022032420/55a4f2b81a28ab2e188b45a9/html5/thumbnails/68.jpg)
スクリーンロックの無効化
スクリーンがロックされると、WebIDEとの接続がきれてしまします。
環境設定アプリでスクリーンロックを無効にしておきましょう。
タップ
![Page 69: 20150118 firefoxos-handson-helloworld](https://reader031.vdocuments.net/reader031/viewer/2022032420/55a4f2b81a28ab2e188b45a9/html5/thumbnails/69.jpg)
では実機とPCをUSBで接続しましょう
![Page 70: 20150118 firefoxos-handson-helloworld](https://reader031.vdocuments.net/reader031/viewer/2022032420/55a4f2b81a28ab2e188b45a9/html5/thumbnails/70.jpg)
ランタイムから実機を選びましょう
クリック
![Page 71: 20150118 firefoxos-handson-helloworld](https://reader031.vdocuments.net/reader031/viewer/2022032420/55a4f2b81a28ab2e188b45a9/html5/thumbnails/71.jpg)
HelloWorldアプリを実機で起動
ウィンドウの上部中央にある、「▶」ボタンを押すとアプリが起動します。
他の使い方も、シミュレータの時と変わりません。
クリック
![Page 72: 20150118 firefoxos-handson-helloworld](https://reader031.vdocuments.net/reader031/viewer/2022032420/55a4f2b81a28ab2e188b45a9/html5/thumbnails/72.jpg)
まとめ
![Page 73: 20150118 firefoxos-handson-helloworld](https://reader031.vdocuments.net/reader031/viewer/2022032420/55a4f2b81a28ab2e188b45a9/html5/thumbnails/73.jpg)
まとめ
• Firefoxをインストールすれば、開発環境の構築はほぼ完了です
• WebIDEを使ってアプリの作成、更新を行えます • お好きなエディタをお持ちの場合は、そちらを利用いただいても構いません
• シミュレータ、実機に関わらずアプリの転送は同じように行えます
• HTML + CSS + JS でアプリを作成できます
![Page 74: 20150118 firefoxos-handson-helloworld](https://reader031.vdocuments.net/reader031/viewer/2022032420/55a4f2b81a28ab2e188b45a9/html5/thumbnails/74.jpg)
Have fun!