firefox os アプリ開発

アプリ開発

@y_system

aaaabout:mebout:mebout:mebout:me

• 中央大学理工学研究科の学生

• 家や研究室では LAN ケーブルを張り巡らせる担当

• Firefox 学生マーケティングチーム

– アドオン勉強会開催してます。

2

Table of contentsTable of contentsTable of contentsTable of contents

• Firefox OS アプリについて

– アプリを作ろう

– 既存のアプリを Hack しよう

3

FirefoxFirefoxFirefoxFirefox OSOSOSOS アプリのアプリのアプリのアプリの作作作作りりりり方方方方

• Web 技術だけで作れる！

• Web ページを作るのと同じように Web 技術だけで作れる！

• Web 技術だけで作れる！

4

5

ホーム画面 Marketplace 電話ブラウザ

Everything 音楽設定カレンダー

アプリをアプリをアプリをアプリを作作作作ろうろうろうろう

6

必要必要必要必要なななな環境環境環境環境• パソコン

• Mozilla Firefox

Firefox が動くPC

最新版にしておきましょう

7

必要必要必要必要なななな環境環境環境環境• エディタ

• Firefox OS Simulator

あった方がよい

端末をお持ちでなくてもアプリ開発で便利なツール

8

9

FirefoxFirefoxFirefoxFirefox OSOSOSOS SimulatorSimulatorSimulatorSimulator

FirefoxFirefoxFirefoxFirefox OS SimulatorOS SimulatorOS SimulatorOS Simulator とはとはとはとは？？？？

• Firefox OS を PC で起動するアドオン

• 開発者向けツールがついている

• 実機を使わずにアプリ開発ができる！

リリース版

最新開発版

10

リリースリリースリリースリリース版版版版 AMOAMOAMOAMO からからからからhttps://addons.mozilla.org/ja/firefox/

11

SimulatorSimulatorSimulatorSimulator

リリースリリースリリースリリース版版版版 AMOAMOAMOAMO からからからから

12


https://addons.mozilla.org/ja/firefox/addon/firefox-os-simulator/

(短縮) http://bit.ly/FxOSSimu

で検索

リリースリリースリリースリリース版版版版 about:addonsabout:addonsabout:addonsabout:addons からからからから

13



14



15


このようなこのようなこのようなこのような表示表示表示表示がががが出出出出ますがますがますがますが

• 「今すぐインストール」を押してください。

16


最新開発版最新開発版最新開発版最新開発版

17

http://people.mozilla.org/~myk/r2d2b2g/

(短縮) http://bit.ly/FxOSSmltr


ダウンロードしたxpiファイルは Firefox にドラッグアンドドロップでアドオンをインストールできる。

過去過去過去過去のバージョンのバージョンのバージョンのバージョン FTPFTPFTPFTP

• 正しく動作しない場合は一度アンインストールや違うバージョンを入れてみましょう。

18

https://ftp.mozilla.org/pub/mozilla.org/labs/r2d2b2g/


(短縮) http://bit.ly/OlderFx

インストールがインストールがインストールがインストールが完了完了完了完了するとするとするとすると

19


このページが自動的に開きます。

インストールがインストールがインストールがインストールが完了完了完了完了するとするとするとすると

ツール → Web 開発に「Firefox OS Simulator」が追加されます。

20


SimulatorSimulatorSimulatorSimulator をををを起動起動起動起動

21

ここをクリック


SimulatorSimulatorSimulatorSimulator をををを起動起動起動起動

22


それではそれではそれではそれでは、、、、アプリのアプリのアプリのアプリの開発開発開発開発をををを始始始始めましょうめましょうめましょうめましょう

• アプリ開発？？

• 難しくありません。

• 必要なのは Web 技術だけ！（何度も言います）

まず、アプリ作成用のディレクトリを用意しましょう。

23

マニフェストマニフェストマニフェストマニフェスト

manifest.webapp というマニフェストファイルを作成します。

文字コードは UTF-8 without BOM が良いです。See also https://marketplace.firefox.com/developers/docs/manifests

{"name": "アプリの名前",

"description": "アプリの説明",

"launch_path": "/index.html",

"icons": {

"128": "/img/icon-128.png"

},

"developer": {

"name": "Akimoto Yoshitomo",

"url": "http://your-homepage-here.org"

},

"default_locale": "ja"

}

http://y-misc.org/fxos.html

24


25




"icons": {

"128": "/img/icon-128.png"

},

"developer": {



},


}

起動時に読み込むページ※ルート相対パス

アプリのアイコン※ルート相対パス

開発者情報

標準の言語


26

"icons": {

"aaa": "/img/xxx.png",

"bbb": "/img/yyy.png"

},

Windows 7 と Android • 16 x 16• 32 x 32• 48 x 48• 64 x 64• 128 x 128• 256 x 256 PNG

Firefox OS• 30 x 30• 60 x 60

※ ドロップシャドウや丸い背景を付けないPNG

Firefox OS のアプリアイコンのスタイルガイドhttp://www.mozilla.org/en-US/styleguide/products/firefoxos/icons/


27




"icons": {

"128": "/img/icon-128.png"

},

"developer": {



},


}

起動時に読み込むページ※ルート相対パス

アプリのアイコン※ルート相対パス

開発者情報

標準の言語

index.html index.html index.html index.html をををを書書書書こうこうこうこう

HTML と CSS と JavaScript だけ！

• 先ほど作成したディレクトリに index.html を作成します。

<!DOCTYPE html>

<html>

<head>

<title>アプリ名</title>

</head>

<body>

なにか文字を書いて！</body>

</html>

28http://y-misc.org/fxos.html

HTMLHTMLHTMLHTML のののの基本的基本的基本的基本的なななな書書書書きききき方方方方<!DOCTYPE html>

<html>

<head>


</head>

<link rel="stylesheet" type="text/css" href="style/style.css">

<script src="script/script.js"></script>

</head>

<body>


</html>

29

注意点注意点注意点注意点

○○○○<script src="script/script.js"></script>

××××<script>

var hoge=0;

</script>

30

スクリプトを参照する形はOK

script タグに挟まれたコードは実⾏されない！

HTMLHTMLHTMLHTML のののの基本的基本的基本的基本的なななな書書書書きききき方方方方<!DOCTYPE html>

<html>

<head>


</head>

<link rel="stylesheet" type="text/css" href="style/style.css">

<script src="script/script.js"></script>

</head>

<body>


</html>

31

CSS ファイルや JS ファイルや画像ファイルの参照は相対パスでの指定でもOK

jQuery などの js ライブラリを入れることも可能

あとは、いつも通りの Web 開発と同じ！

デザインをデザインをデザインをデザインを統一統一統一統一したいしたいしたいしたい

Building Blocks というものがある。

( http://buildingfirefoxos.com/ )

どのような UI があるのか書いてある！

32

Building BlocksBuilding BlocksBuilding BlocksBuilding Blocks

Building Block ガイドがある。

( http://buildingfirefoxos.com/ )

どのようなテンプレートがあるのか書いてある！

33


34


35

36

<!DOCTYPE html>

<html>

<head>


<link rel="stylesheet" type="text/css"

href="shared/style/headers.css">

</head>

<body>


</html>


37

必要部分を選択して

38

<!DOCTYPE html>

<html>

<head>


<link rel="stylesheet" type="text/css"

href="shared/style/headers.css">

</head>

<body>

<section role="region">

<header>

<menu type="toolbar">

<a href="#"><span class="icon icon-edit">edit</span></a>

<a href="#"><span class="icon icon-add">add</span></a>

</menu>

<h1>Messages</h1>

</header>

</section>

</body>

</html>

http://bit.ly/FxBB (https://github.com/mozilla-b2g/gaia)

をダウンロードして解凍します。

39

解凍解凍解凍解凍したディレクトリからしたディレクトリからしたディレクトリからしたディレクトリから

shared/style の中に関連するファイルとディレクトリを選択

自分のアプリのフォルダにコピー

40

イメージ

41

デザインがデザインがデザインがデザインが適用適用適用適用されたされたされたされた

42


43



44


○○○ installed と表示され起動

45

アプリを見てみよう！

46

アプリをアプリをアプリをアプリを HACKHACKHACKHACK しようしようしようしよう

Hack the Web App.

47

アプリディレクトリをアプリディレクトリをアプリディレクトリをアプリディレクトリを開開開開きますきますきますきます

Firefox で about:support →

48


extensions → [email protected] → profile → webapps

にインストールされているアプリ一覧があります。

49


1. ディレクトリの中の zip ファイルを解凍する。

2. 書き換える。

3. 再び zip にして中に戻す。

50

今回今回今回今回はははは CrystalskullCrystalskullCrystalskullCrystalskull

51

これを展開の前にバックアップ

今回今回今回今回はははは CrystalskullCrystalskullCrystalskullCrystalskull

52

これを展開

これがこれがこれがこれがcrystalskullcrystalskullcrystalskullcrystalskull のののの中身中身中身中身！！！！

53

例題例題例題例題））））背景背景背景背景をををを変変変変えてみるえてみるえてみるえてみる

54

？

中身中身中身中身をををを変変変変えたえたえたえた後後後後…………

55

ディレクトリの中身を zip にする

zzzzipipipip にしたらにしたらにしたらにしたら

• application.zip にリネーム

• もともとの zip ファイルを上書きします。

シミュレータを起動しましょう。

56

firefox os アプリ開発

Documents