Firefox ハンズオン


[Firefox OS アプリハンズオン in Nagoya](https://atnd.org/events/62137)に参加してきました。
資料は公開され次第追加します。

# 開発環境構築

## Firefox(開発用)をインストール

Firefox Developer Editionをインストール
$ brew cask install firefoxdeveloperedition

![スクリーンショット 2015-02-28 13.34.00.png](https://qiita-image-store.s3.amazonaws.com/0/41266/598aca4c-5627-4f72-2d96-235e3555e284.png "スクリーンショット 2015-02-28 13.34.00.png")

2つのアドオンをインストール
1. adbhelper-mac64-latest.xpi
2. fxos_2_0_simulator-mac64-latest.xpi


## Firefox OS シュミレーターを起動

右上のペン型のアイコンからWebIDEを起動

![スクリーンショット 2015-02-28 13.38.04.png](https://qiita-image-store.s3.amazonaws.com/0/41266/577995f5-5ac9-69ec-ca5e-66b74c6f7d38.png "スクリーンショット 2015-02-28 13.38.04.png")

右上からシミュレーターを起動、シミュレーターをインストールしていないと起動できないので注意

![スクリーンショット 2015-02-28 13.35.16.png](https://qiita-image-store.s3.amazonaws.com/0/41266/825a6311-57fa-3c2e-c532-01ea89a0387c.png "スクリーンショット 2015-02-28 13.35.16.png")

下側の箇所からホームボタン、ランドスケープ(回転)のシミュレーションができる

# Hello, world.

定番のHello, world.アプリを作って、アプリの構造を理解します。

## Hello world.

WebIDEから、Project -> NewApp

![スクリーンショット 2015-02-28 13.41.08.png](https://qiita-image-store.s3.amazonaws.com/0/41266/8b9b4cca-aa16-5adc-2a1c-1d29a335c4e6.png "スクリーンショット 2015-02-28 13.41.08.png")

今回はHelloworldをやりたいので、Helloworldを選択。

プロジェクトを置くフォルダを選んで、保存。プロジェクトが開き、Editorが起動する。

![スクリーンショット 2015-02-28 13.44.09.png](https://qiita-image-store.s3.amazonaws.com/0/41266/f965d567-94b3-8334-0946-0c8b4a2fefaa.png "スクリーンショット 2015-02-28 13.44.09.png")


ちなみに設定(Project->Preference)からキーバインドなどを変更可能みたい。

![スクリーンショット 2015-02-28 13.46.58.png](https://qiita-image-store.s3.amazonaws.com/0/41266/08cda72d-532d-6286-4d88-c3532b276c92.png "スクリーンショット 2015-02-28 13.46.58.png")


実行ボタンから実行すると、アプリがシミュレーターから実行される。

![スクリーンショット 2015-02-28 13.48.54.png](https://qiita-image-store.s3.amazonaws.com/0/41266/194614c1-c5d3-8d06-fd1c-658b46918fd3.png "スクリーンショット 2015-02-28 13.48.54.png")

技術的な話は次のような仕組みとのこと。

* アプリのViewはHTMLでまったくWebアプリと作り方が同じ

* アプリの実行時には、ファイル一式をZip圧縮して本体に送っている


## Hello, world. 追加開発

ソースコードはこちら
https://gist.github.com/chikoski/fffbf16faf32389decda

"Hello, World"にスタイルを適用していく。

デバッガーを起動(スパナのアイコン)

![スクリーンショット 2015-02-28 14.10.02.png](https://qiita-image-store.s3.amazonaws.com/0/41266/d0d8566e-c6db-3bba-106d-2c001685f54c.png "スクリーンショット 2015-02-28 14.10.02.png")

デバッガーにCSSのライブプレビュー機能あり。Style Editorタブを選択。

実行中に編集すると、アプリを実行しながらスタイルが適用されるので便利。

CSSはAdobeのギャラリーとか見ると色々ある [例 : ビジュアル系 CSS Shapes の用例ギャラリー](http://www.adobe.com/jp/jos/pinchin/platform/good-looking-shapes-gallery.html)

JavascriptでEventに対するコールバック関数を定義することで、ユーザーの操作に反応した処理が可能。

```app.js
window.addEventListener("load", function() {
  var threshold = 50;
  var className = "night";
  var body = document.querySelector("body");
 
  window.addEventListener("devicelight", function(event){
    
    // devicelight のイベントハンドラ event
    // event.value : 照度(単位lx)
    
    if(event.value < threshold){
      body.classList.add(className);
    }else{
      body.classList.remove(className);
    }
  });
});
```

見た目の変化はCSSでつける

```app.css
body{
  background-color: white;
  overflow: hidden;
}
body.night{
  background-color: black;
  color: white;
}
h1 {
	border-radius: 3px;
	font-family: 'Oswald', Helvetica, Arial, sans-serif;
	color: #36bcab;
	font-size: 68px;
	font-weight: 300;
	margin-top: -16px;
	margin-bottom: 0px;
	padding: 0px 0px;
	transition-duration: 1.5s;
}
.night h1{
  transform: rotate(345deg);
}
```

上記の変更を施すと、明るいところでカメラの前に手をかざすと画面のテーマが変わる

![スクリーンショット 2015-02-28 14.33.11.png](https://qiita-image-store.s3.amazonaws.com/0/41266/2d4f3a29-6878-7734-f4fe-0174e2b2cc55.png "スクリーンショット 2015-02-28 14.33.11.png")

回転方向を逆にしたいときは、CSSのtransformの値を負の値にする

```
.night h1{
  transform: rotate(345deg);
}
```

# 実機開発

おすすめの環境はOS Xだそうな(ドライバなど不要で認識するため)

Windowsではドライバを追加、Linuxでは、なんらかの追加作業をする。詳細教えてれると嬉しいです。

![スクリーンショット 2015-02-28 15.12.42.png](https://qiita-image-store.s3.amazonaws.com/0/41266/6b8a162c-dd81-63d5-3b95-9ebb6ee4665d.png "スクリーンショット 2015-02-28 15.12.42.png")

ボタンを押したらアラートが出るアプリを作りました。

![スクリーンショット 2015-02-28 16.53.24.png](https://qiita-image-store.s3.amazonaws.com/0/41266/3bc749da-c8d9-04c7-5abe-4ba7fd9468ae.png "スクリーンショット 2015-02-28 16.53.24.png")

![スクリーンショット 2015-02-28 16.54.21.png](https://qiita-image-store.s3.amazonaws.com/0/41266/11a8a8e1-41b9-9531-7e46-fd83b9691265.png "スクリーンショット 2015-02-28 16.54.21.png")

ソースコードはこんな感じ

```index.html
<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,user-scalable=no,initial-scale=1">
 
    <title>Hello World</title>
    
    <link rel="stylesheet" href="app.css">
    <link rel="stylesheet" href="button.css">
    <script type="text/javascript" src="app.js" defer></script>

    <!-- Inline scripts are forbidden in Firefox OS apps (CSP restrictions),
         so we use a script file. -->
  </head>
 
  <body>
    <!-- This code is in the public domain. Enjoy! -->
    <p>
      <button id="button">ボタンテスト</button>
    </p>
  </body>
 
</html>
```

```app.js
var button = document.querySelector("#button");
button.addEventListener("click", function(event){
//   console.log("test");
  alert("test");
}, true);
```

```app.css
body{
  background-color: white;
  overflow: hidden;
}
body.night{
  background-color: black;
  color: white;
}
h1 {
	border-radius: 3px;
	font-family: 'Oswald', Helvetica, Arial, sans-serif;
	color: #36bcab;
	font-size: 68px;
	font-weight: 300;
	margin-top: -16px;
	margin-bottom: 0px;
	padding: 0px 0px;
	transition-duration: 1.5s;
}
.night h1{
  transform: rotate(-15deg);
}
```
また、button.cssとして、次のリンク先のcssを使いました。

Coding guide: Buttons https://developer.mozilla.org/en-US/Apps/Design/Firefox_OS_building_blocks/1.x/Button/Coding

javascriptをscriptタグを用いてheadderで読み込む場合に、defer要素を設定しなければいけないのを知らずドハマりしました。

# 総括

* Webアプリ的にモバイルアプリを作成できるのは本当かと疑っていたけれど本当だった。

* Webアプリ的にモバイルアプリを作れることと、簡単にモバイルアプリを作れることは別物
	- 当然、Webアプリの知識がモバイルアプリ作成のために必要になる

* iOS技術者やAndroid技術者がWebアプリの知識を見つけるために取り組むのはありかも？
	― 個人的な感想としてはWebサービスの作成よりはモバイルだし取っ付き易い


# Reference

tel.min https://github.com/chuo-u-openproject/tel.min
サポート状況を考慮したdefer属性の使い方 https://w3g.jp/blog/script_defer
クイックスタート https://developer.mozilla.org/ja/Apps/Quickstart
document.querySelector https://developer.mozilla.org/ja/docs/Web/API/Document/querySelector
いろいろなページで使うJavaScript関数を外部ファイルにまとめて書く http://www.pori2.net/js/kihon/16.html
Web Audio Vocoder http://webaudiodemos.appspot.com/Vocoder/
クリック時の処理(onClick) http://www.ajaxtower.jp/js/event/index2.html
Navigator.mozCameras https://developer.mozilla.org/en-US/docs/Web/API/Navigator/mozCameras
アプリケーションセキュリティ https://developer.mozilla.org/ja/Firefox_OS/Security/Application_security

Web API インターフェイス https://developer.mozilla.org/ja/docs/Web/API
フォームの汎用ボタンを作成する http://www.htmq.com/html/input_button.shtml
Marketplace でアプリを公開し開発者になろう https://www.mozilla.org/ja/firefox/partners/
CSS3 アニメーションの基礎 @keyframes transform http://ri-mode.com/rainbow/2013/06/10/css3_keyframes_transform/


雰囲気とかその辺りは分けて書きます

http://www.gokennya.com/wordpress/