20150118 firefoxos-handson-helloworld
•
7 likes•3,054 views
Firefox OS アプリ作成のためのハンズオン資料です。環境構築からHelloWorldまでをカバーします。
Recommended
More Related Content
What's hot
What's hot (10)
Similar to 20150118 firefoxos-handson-helloworld
Similar to 20150118 firefoxos-handson-helloworld (20)
More from Noritada Shimizu
More from Noritada Shimizu (20)
20150118 firefoxos-handson-helloworld
- 1. "Hello world!" on Firefox OS N. Shimizu (chikoski@gmail.com / @chikoski) Firefox OS ハンズオン 2015/01/18
- 2. もくじ • Firefox OS アプリを作るために必要な準備 • Firefox OS Developer Edition のダウンロード • シミュレータの準備 • ADB / デバイスドライバの準備 • "Hello world!" アプリの作成
- 3. @chikoski • 六本木にあるWeb系の会社で働いてます • フロント周り中心にやってます • Web Audio API 周り • 関数とか好きです • サッカーネタ多め
- 5. アプリ作成に必要な準備をしましょう • 次のソフトをインストールします • Firefox Developer Edition • Firefox OS シミュレータ • Windowsの方はドライバもインストールします • 作成に「必要無い」こと • SDKのダウンロード • 開発者登録（アプリの公開には必要、無料）
- 6. • 普通のFirefoxでも開発できますが、 開発者が必要とする機能が充実しているため、 こちらのほうが効率良く開発が行えます。 • https://mozilla.org/firefox/channel/ よりダウンロードできます
- 11. 起動画面
- 19. シミュレータのインストール（つづき） 「Firefox OS 2.1 シミュレータ」をインストールします。
- 22. シミュレータ • ロケールはen-US • 日本語表示はできます • Marketplaceからアプリの インストールも可能です
- 25. 以上で、開発の準備は完了です
- 26. "HelloWorld"
- 35. 注意： 初回起動時は次のように表示されます • スマートコレクションが 位置情報を利用するのを 許可するかどうかを確認する ダイアログが表示されます • これは初めてアプリを インストールする際に 表示されます。 • 2回目以降は表示されません
- 45. ファイルの新規作成 • 画面左側のファイルブラウザで右クリック 画面左のファイルブラウザで右クリックして、「新規作成」を選びます。 キーボードショートカットはCtrl(Cmd) + n です。
- 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. 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"> 左のようになっている部分を、右のように変更します。 変更したら保存します。
- 55. センサーの値を使ってみよう！
- 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. CSSも修正します body{ overflow: hidden; } body.night{ background-color: black; color: white; } body要素に関するルールを上記のように修正します。
- 60. アプリを実機に転送してみよう！
- 61. 実機の設定を開発用に変更します
- 72. まとめ
- 73. まとめ • Firefoxをインストールすれば、開発環境の構築は ほぼ完了です • WebIDEを使ってアプリの作成、更新を行えます • お好きなエディタをお持ちの場合は、そちらを 利用いただいても構いません • シミュレータ、実機に関わらずアプリの転送は 同じように行えます • HTML + CSS + JS でアプリを作成できます
- 74. Have fun!