Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.
"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の方はドライバもインストールします
• 作成に「必要無い」...
• 普通の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);
marg...
app.cssとindex.htmlとのリンク
<title>Hello World</title>
<style>
body {
border: 1px solid black;
}
</style>
<title>Hello World</...
再読み込み後の画面
• 文字の大きさと、

傾きが変わっています。
• またh1要素の枠線も

無くなっています。
スタイルの確認
画面上部にあるスパナのアイコンをクリックして、開発ツールを表示させます。
クリック
スタイルの確認(つづき)
画面下部に開発ツールが表示されます。
スタイルの確認(つづき)
「インスペクタ」タブをクリックすると、要素とそのスタイルを確認できます。
スタイルの確認(つづき)
インスペクタ上で、要素をポイントすると

シミュレータでその要素がハイライトされます。
ポイント
センサーの値を使ってみよう!
作成するもの
暗くすると、

色が変わる
app.js を編集します
window.addEventListener("load", function() {
var threshold = 50;
var className = "night";
var body = documen...
CSSも修正します
body{
overflow: hidden;
}
body.night{
background-color: black;
color: white;
}
body要素に関するルールを上記のように修正します。
再読み込みをして実験します
Webカメラのあたりを

手で覆うと変化します
アプリを実機に転送してみよう!
実機の設定を開発用に変更します
実機の設定変更
環境設定アプリを起動し、「端末情報」をタップします。
タップ
実機の設定変更(つづき)
「その他の情報」をタップします。
タップ
実機の設定変更(つづき)
「開発者メニュー」にチェックを入れます。
チェック
実機の設定変更(つづき)
環境設定アプリのトップに「開発者」が表示されます。これをタップします。
タップ
実機の設定変更(つづき)
「開発者ツール」の欄を「ADBと開発ツール」に変更します。
変更
これでWebIDEと実機を

接続できるようになりました。
スクリーンロックの無効化
スクリーンがロックされると、WebIDEとの接続がきれてしまします。
環境設定アプリでスクリーンロックを無効にしておきましょう。
タップ
では実機とPCをUSBで接続しましょう
ランタイムから実機を選びましょう
クリック
HelloWorldアプリを実機で起動
ウィンドウの上部中央にある、「▶」ボタンを押すとアプリが起動します。
他の使い方も、シミュレータの時と変わりません。
クリック
まとめ
まとめ
• Firefoxをインストールすれば、開発環境の構築は
ほぼ完了です
• WebIDEを使ってアプリの作成、更新を行えます
• お好きなエディタをお持ちの場合は、そちらを
利用いただいても構いません
• シミュレータ、実機に関わらずア...
Have fun!
Upcoming SlideShare
Loading in …5
×

20150118 firefoxos-handson-helloworld

2,502 views

Published on

Firefox OS アプリ作成のためのハンズオン資料です。環境構築からHelloWorldまでをカバーします。

Published in: Technology

20150118 firefoxos-handson-helloworld

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

×