View
1.726
Download
4
Category
Preview:
Citation preview
"Hello world!" on Firefox OS
N. Shimizu (chikoski@gmail.com / @chikoski)
Firefox OS ハンズオン 2015/01/18
もくじ
• Firefox OS アプリを作るために必要な準備 • Firefox OS Developer Edition のダウンロード • シミュレータの準備 • ADB / デバイスドライバの準備 • "Hello world!" アプリの作成
@chikoski
• 六本木にあるWeb系の会社で働いてます • フロント周り中心にやってます
• Web Audio API 周り • 関数とか好きです • サッカーネタ多め
Firefox OS アプリ作成環境構築
アプリ作成に必要な準備をしましょう
• 次のソフトをインストールします • Firefox Developer Edition • Firefox OS シミュレータ • Windowsの方はドライバもインストールします • 作成に「必要無い」こと • SDKのダウンロード • 開発者登録（アプリの公開には必要、無料）
• 普通のFirefoxでも開発できますが、開発者が必要とする機能が充実しているため、こちらのほうが効率良く開発が行えます。
• https://mozilla.org/firefox/channel/ よりダウンロードできます
Firefox のインストール
https://www.mozilla.org/firefox/channel/ へアクセス
Firefox のインストール（つづき）
クリック
Firefox のインストール（つづき）
ボタンをクリックして、ダウンロード開始
あとはOSの作法でインストールしましょう
起動画面
デフォルトブラウザの設定
「次回から確認しない」にチェックを入れておくと、次からは確認されません。
開発に必要な機能はWebIDEに集約されています
WebIDE
詳細は下記のページを参照してください：https://developer.mozilla.org/ja/docs/Tools/WebIDE
Web IDEの起動
ツールバーにあるアイコンをクリックして、起動
WebIDEの初期設定として、 Firefox OSシミュレータをインストールしましょう
シミュレータのインストール
「ランタムを選択」をクリックします。
クリック
シミュレータのインストール（つづき）
「シミュレータをインストール」をクリックします。
クリック
シミュレータのインストール（つづき）
「Firefox OS 2.1 シミュレータ」をインストールします。
シミュレータのインストール（つづき）
クリック
「閉じる」をクリックして終了です。
シミュレータの起動
クリック
シミュレータの欄にある"Firefox OS 2.1"をクリックして起動します。
シミュレータ
• ロケールはen-US • 日本語表示はできます • Marketplaceからアプリのインストールも可能です
シミュレータのホームボタン
ここにあります
ボタンで、端末の向きを切り替えます
ここにあります
以上で、開発の準備は完了です
"HelloWorld"
HelloWorldアプリの作成
画面左上にある「アプリを開く」をクリックします。
クリック
HelloWorldアプリの作成（つづき）
メニュー中の「新規アプリ」をクリックします。
クリック
HelloWorldアプリの作成（つづき）
テンプレートの中から"HelloWorld"を選択します。
クリック
HelloWorldアプリの作成（つづき）
プロジェクト名を入力します。ここではmyFirstAppとしました。
プロジェクト名を入力
HelloWorldアプリの作成（つづき）
"OK"ボタンをクリックして、テンプレートからアプリを作成します。
クリック
HelloWorldアプリの作成（つづき）
このように表示されたら、無事アプリが作られています。
シミュレータ内で動かしてみましょう！
HelloWorldアプリの起動
ウィンドウの上部中央にある、「▶」ボタンを押すとアプリが起動します。
クリック
注意： 初回起動時は次のように表示されます
• スマートコレクションが位置情報を利用するのを許可するかどうかを確認するダイアログが表示されます
• これは初めてアプリをインストールする際に表示されます。
• 2回目以降は表示されません
起動されたHello Worldアプリ
"HelloWorld"を改造しよう！
"HelloWorld"を改造しよう
ウィンドウの左にあるファイルのリストにある"index.html"をクリックします。
クリック
"HelloWorld"を改造しよう（つづき）
右側にエディタが表示されます。ここでファイルを編集できます。
"HelloWorld"を改造しよう（つづき）
<body> <h1>こんにちは！せかい！</h1> </body>
index.html の本文部分を上記のように書き換え、保存します。
"HelloWorld"を改造しよう（つづき）
再読み込みボタンを押します。
キーボードショートカットは、Ctrl-r（もしくはCmd-r）です。
クリック
"HelloWorld"を改造しよう（つづき）
• 表示される文字が変わりました！
• このように再読み込みを行うことで、変更内容を即座に反映できます。
"HelloWorld"にスタイルを追加しよう
ここから先に行う変更はこちらからもご覧になれます： https://gist.github.com/chikoski/fffbf16faf32389decda
ファイルの新規作成
• 画面左側のファイルブラウザで右クリック
画面左のファイルブラウザで右クリックして、「新規作成」を選びます。
キーボードショートカットはCtrl(Cmd) + n です。
ファイルの新規作成（つづき）
ファイル名を変更します。
ここでは"app.css"とします。
ファイルの新規作成（つづき）
空のファイルが作成されます。
画面右側のエディタ部分でCSSを書いて行きましょう。
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）します。
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">
左のようになっている部分を、右のように変更します。
変更したら保存します。
再読み込み後の画面
• 文字の大きさと、傾きが変わっています。
• またh1要素の枠線も無くなっています。
スタイルの確認
画面上部にあるスパナのアイコンをクリックして、開発ツールを表示させます。
クリック
スタイルの確認（つづき）
画面下部に開発ツールが表示されます。
スタイルの確認（つづき）
「インスペクタ」タブをクリックすると、要素とそのスタイルを確認できます。
スタイルの確認（つづき）
インスペクタ上で、要素をポイントするとシミュレータでその要素がハイライトされます。
ポイント
センサーの値を使ってみよう！
作成するもの
暗くすると、色が変わる
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); } }); });
CSSも修正します
body{ overflow: hidden; } body.night{ background-color: black; color: white; }
body要素に関するルールを上記のように修正します。
再読み込みをして実験します
Webカメラのあたりを手で覆うと変化します
アプリを実機に転送してみよう！
実機の設定を開発用に変更します
実機の設定変更
環境設定アプリを起動し、「端末情報」をタップします。
タップ
実機の設定変更（つづき）
「その他の情報」をタップします。
タップ
実機の設定変更（つづき）
「開発者メニュー」にチェックを入れます。
チェック
実機の設定変更（つづき）
環境設定アプリのトップに「開発者」が表示されます。これをタップします。
タップ
実機の設定変更（つづき）
「開発者ツール」の欄を「ADBと開発ツール」に変更します。
変更
これでWebIDEと実機を接続できるようになりました。
スクリーンロックの無効化
スクリーンがロックされると、WebIDEとの接続がきれてしまします。
環境設定アプリでスクリーンロックを無効にしておきましょう。
タップ
では実機とPCをUSBで接続しましょう
ランタイムから実機を選びましょう
クリック
HelloWorldアプリを実機で起動
ウィンドウの上部中央にある、「▶」ボタンを押すとアプリが起動します。
他の使い方も、シミュレータの時と変わりません。
クリック
まとめ
まとめ
• Firefoxをインストールすれば、開発環境の構築はほぼ完了です
• WebIDEを使ってアプリの作成、更新を行えます • お好きなエディタをお持ちの場合は、そちらを利用いただいても構いません
• シミュレータ、実機に関わらずアプリの転送は同じように行えます
• HTML + CSS + JS でアプリを作成できます
Have fun!
Recommended