FirefoxOSハンズオン＠関西for Web Designer/Engineer

2015/02/14

@iida

名前 ： 飯田 潤（いいだじゅん）

屋号 ： @iida（あっといいだ）

仕事 ： フリーランス Webフロントエンジニア

育児 ・ ホームページのコーディング（JS多め）・

スマートフォン向けECサイトの設計・コーディング

https://twitter.com/iida

自己紹介

注意事項

すみません。本日の内容は、

・初心者向け・超Webデザイナー目線

なので、ゴリゴリのエンジニアの方にはニュアンスが伝わりにくい部分があるかもしれません。

勉強会の動機

FirefoxOSは

面白いよ！

・Web技術でアプリが作れるよ・Web技術でカスタマイズできるよ

ぜひ普及してくれてアプリ作ったりカスタマイズしたり

したいよ！・ホームとかロック画面をカスタムしてドヤ顔したり・ゲームアプリ作ってドヤ顔したり

・便利アプリ作って一山当ててドヤ顔したりしたいよ！

普及するには

コンテンツ量が決め手だよ！

・面白いゲーム・便利なサービス・暇つぶしになるアプリ・シェアされる一発ネタ

Webデザイナーさん＆

Webエンジニアさん

出番ですよ！

・ユーザー目線・面白いこと・コンテンツ生産なら…任せて！

あらためてFirefoxOSのすごさ

これ全部、HTML＋CSS＋JavaScript です。

ぼくらが毎日触ってる

あらためてFirefoxOSのすごさ 2

これも全っっ部、

HTML＋CSS＋JavaScript です。

いつものやつ

なぜなら

この画面

おなじみ？懐かし？

iframeなんです

じゃあ…

全然怖くない…ですよね！

はじめます

準備

Hello World ＋解説

ハンズオン

30分

発表・質疑応答

5分 ＋ 30分

1時間

10分

休憩 10分

実機とUSBケーブル Firefox エディタ

準備 – 必要なもの

＋ ＋

行き渡っておりますか？ インストールしてますか？ なんでもいいです（無くても大丈夫です）

準備 – Firefox

ダウンロードはこちらから

https://mozilla.org/firefox/channel/

開発には開発者向け機能が充実したDeveloper Editionが便利だそうです

クリック

ここをクリック

ここから

とても簡単ですが、もしかしたら少しだけしんどいです。

準備 – WebIDE

詳しくはこちら

https://developer.mozilla.org/ja/docs/Tools/WebIDE

FirefoxOSアプリ開発をするために必要なものが全部入ったソフトウェア(Firefoxの一部)です。

Firefoxに既に入っています。

「WebIDE」とは

準備 – WebIDEを起動してみる

初めての方 開いたことのある方／Developer Editionの方

ここをクリックまたはShift+F8

はじめから表示されているので、ここをクリック

準備 – WebIDEの設定（シミュレータのインストール 1/4）

クリックはじめにFirefoxOSのシミュレータをインストールします

準備 – WebIDEの設定（シミュレータのインストール 2/4）

クリック

「シミュレータをインストール」をクリック

準備 – WebIDEの設定（シミュレータのインストール 3/4）

クリック

「Firefox OS 2.1シミュレータ」

→「インストール」をクリック

※貸出機のFlameに合わせています。※Fx0の方は、「Firefox OS 2.0」です。

準備 – WebIDEの設定（シミュレータのインストール 4/4）

クリック「インストール済み」になったら

「閉じる」をクリック

準備 – WebIDEの設定（終わり）

インストールした

シミュレータが追加されています。

準備 – シミュレータを起動してみる 1/2

クリック

準備 – シミュレータを起動してみる 2/2

ホームボタン 画面の回転

ドラッグでロック解除

ロック画面 ホーム画面

準備 – 実機に接続する（ドライバのインストール）

※Windowsの方のみ

http://www.lg.com/jp/support-mobile/lg-LGL25

Fx0の方

https://developer.mozilla.org/ja/Firefox_OS/Developer_phone_guide/Flame/Initial_setup#Windows.E3.81.AE.E8.BF.BD.E5.8A.A0.E6.89.8B.E9.A0.86

Flameの方

準備 – 実機に接続する（端末の設定 1/2）

まず「開発者メニュー」を有効にします。

準備 – 実機に接続する（端末の設定 2/2）

環境設定に「開発者」が表示されました。

「ADBと開発ツール」を選択

準備 – 実機に接続する（USB接続）

USBで実機をつないでみましょう。

準備 – 実機に接続する（端末の設定）

実機の名前が表示されましたか？

準備 – 消灯を無効化

※画面が消灯になると、PCとの接続が切れてしまいます。作業中は「画面のタイムアウト」を無効にしておきましょう。

ここまで

しんどいの終わりです。

Hello World（実質１分 1/3）

クリック

はじめます

Hello World（実質１分 2/3）

1.選択

2.名前を入力

3.クリック

保存先を選択

Hello World（実質1分 3/3）

作成完了！中身のファイル

Hello World（実行してみる 1/4）

シミュレータを選択して起動

クリック

Hello World（実行してみる 2/4）

インストールして実行

クリック

Hello World（実行してみる 3/4）

確認画面

※初回のみ表示されます

クリック

Hello World（実行してみる 4/4）

動いた！

Hello World（実機でも実行してみる 1/4）

シミュレータを選択して起動

クリック

Hello World（実機でも実行してみる 2/4）

インストールして実行

クリック

Hello World（実機でも実行してみる 3/4）

確認画面

※初回のみ表示されます

クリック

Hello World（実機でも実行してみる 4/4）

動いた！

Hello World（ファイル構成の説明）

中身のファイル

見ての通りですが、中身の解説です。

icons/

icon128x128.png

icon16x16.png

icon48x48.png

icon60x60.png

app.js

index.html

manifest.webapp

Hello World（ファイル構成の説明）

・おなじみのHTMLファイル→ここを好きにいじればOK

・各サイズのアイコンデータ→自作の画像に変更可

・アプリの権限などが書かれたファイル

{

"name": "MyFirstApp",

"description": "A Hello World app",

"launch_path": "/index.html",

"icons": {

"16": "/icons/icon16x16.png",

"48": "/icons/icon48x48.png",

"60": "/icons/icon60x60.png",

"128": "/icons/icon128x128.png"

},

"type": "privileged",

"permissions": {}

}

Hello World（マニフェストファイル 1/3）

中身はJSONです。

内容は、ほとんど見たまま。

Hello World（マニフェストファイル 2/3）

manifest.webappの “type”に指定できるタイプ

web … 特権なし

privileged … 特権アプリ

certified … 認定アプリ※特権アプリより重要なAPIが使えます

Hello World（マニフェストファイル 3/3）

"permissions": {

“権限の名前": {

“description”: “権限が必要な理由",

"access": "readcreate"

},

"権限の名前": {

"description": "権限が必要な理由"

}

}

access… 必要なアクセスレベル。

・readonly・readwrite・readcreate・createonly

※一部の権限でしか使いません。

Hello World（更新 1/3）

では、中身をいじくってみましょう！

Hello World（更新 2/3）

ブラウザのリロード感覚で更新できます。

クリック

Hello World（更新 3/3）

反映されました！

その他のテンプレートについて 1/3

HelloWorld以外の２つは何？

その他のテンプレートについて 2/3

・developer情報が追加・多言語化設定が追加・インストール元が追加

その他のテンプレートについて 3/3

・外部との通信権限が追加

ホスト型アプリについて 1/3

iPhone/Androidで

ホーム画面にブックマークしたアイコンをアプリと言い張ってみたいと思ったことはありませんか？

ホスト型アプリについて 2/3

FirefoxOSでは、

それも立派なアプリとして

配布できちゃうんです。

ホスト型アプリについて 3/3

ただし、権限は制限されます…

が、「通知機能」は使えるんです！

開発者情報

https://developer.mozilla.org/ja/Apps

APIについての情報やテクニックの紹介はこちら

ハンズオン

今回は、デザイン系・エンジニア系２グループに分かれてハンズオンを行います。

デザイナーの方 エンジニアの方

ハンズオン（テーマ）

HelloWorldアプリを改造して、自分アプリにしてみましょう。

はじめてのホームページ、という感覚でアプリが作れることをぜひ体験してみてください。

CSS編集・画像の配置・アイコン変更等を、ぜひお試しください。

WebAPIを利用して、センサーに反応するアプリを作ってみましょう。

今回は、光センサーを使って、画面を切り替えるアプリを作ってみます。

ハンズオン（開始）

それでは、ハンズオン開始！

ハンズオン（発表）

発表

質疑応答

ご質問のある方

次回予告

次回予告

次回予告

さて、みなさん

次回予告

アプリが作れたら…

したいことは何ですか？

次回予告

ぶっちゃけ

次回予告

金ですよね？

次回予告

一攫千金ですよね？

次回予告

次回テーマ:

FirefoxOSアプリで

一攫千金

次回予告

・アプリストアに出品してみよう・アプリ内課金してみよう

やること:

次回予告

え～ ただでさえ誰も持ってないのにアプリなんて売れるの？

次回予告

実は、日本では知られていない

宝の山があるんです！

次回予告

詳しくは、次回勉強会で

次回予告

FXはFXでも、

Firefox（Fx）で一山当てようぜ！

次回予告

お後がよろしいようで