1. アプリ開発
@y_system

2. aaaabout:mebout:mebout:mebout:me
• 中央大学理工学研究科の学生
• 家や研究室では LAN ケーブルを張り巡らせる担当
• Firefox 学生マーケティングチーム
– アドオン勉強会開催してます。
2

3. Table of contentsTable of contentsTable of contentsTable of contents
• Firefox OS アプリについて
– アプリを作ろう
– 既存のアプリを Hack しよう
3

4. FirefoxFirefoxFirefoxFirefox OSOSOSOS アプリのアプリのアプリのアプリの作作作作りりりり方方方方
• Web 技術だけで作れる！
• Web ページを作るのと同じように Web 技術だけで
作れる！
• Web 技術だけで作れる！
4

5. 5
ホーム画面 Marketplace 電話 ブラウザ
Everything 音楽 設定 カレンダー

6. アプリをアプリをアプリをアプリを作作作作ろうろうろうろう
6

7. 必要必要必要必要なななな環境環境環境環境
• パソコン
• Mozilla Firefox
Firefox が動くPC
最新版にしておきましょう
7

8. 必要必要必要必要なななな環境環境環境環境
• エディタ
• Firefox OS Simulator
あった方がよい
端末をお持ちでなくても
アプリ開発で便利なツール
8

9. 9
FirefoxFirefoxFirefoxFirefox OSOSOSOS SimulatorSimulatorSimulatorSimulator

10. FirefoxFirefoxFirefoxFirefox OS SimulatorOS SimulatorOS SimulatorOS Simulator とはとはとはとは？？？？
• Firefox OS を PC で起動するアドオン
• 開発者向けツールがついている
• 実機を使わずにアプリ開発ができる！
リリース版
最新開発版
10

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

12. リリースリリースリリースリリース版版版版 AMOAMOAMOAMO からからからから
12
SimulatorSimulatorSimulatorSimulator
https://addons.mozilla.org/ja/firefox/addon/firefox-os-simulator/
(短縮) http://bit.ly/FxOSSimu
で検索

13. リリースリリースリリースリリース版版版版 about:addonsabout:addonsabout:addonsabout:addons からからからから
13
SimulatorSimulatorSimulatorSimulator

14. リリースリリースリリースリリース版版版版 about:addonsabout:addonsabout:addonsabout:addons からからからから
14
SimulatorSimulatorSimulatorSimulator

15. リリースリリースリリースリリース版版版版 about:addonsabout:addonsabout:addonsabout:addons からからからから
15
SimulatorSimulatorSimulatorSimulator

16. このようなこのようなこのようなこのような表示表示表示表示がががが出出出出ますがますがますがますが
• 「今すぐインストール」を押してください。
16
SimulatorSimulatorSimulatorSimulator

17. 最新開発版最新開発版最新開発版最新開発版
17
http://people.mozilla.org/~myk/r2d2b2g/
(短縮) http://bit.ly/FxOSSmltr
SimulatorSimulatorSimulatorSimulator
ダウンロードしたxpiファイルは Firefox にドラッグアンドドロップで
アドオンをインストールできる。

18. 過去過去過去過去のバージョンのバージョンのバージョンのバージョン FTPFTPFTPFTP
• 正しく動作しない場合は一度アンインストールや違
うバージョンを入れてみましょう。
18
https://ftp.mozilla.org/pub/mozilla.org/labs/r2d2b2g/
SimulatorSimulatorSimulatorSimulator
(短縮) http://bit.ly/OlderFx

19. インストールがインストールがインストールがインストールが完了完了完了完了するとするとするとすると
19
SimulatorSimulatorSimulatorSimulator
このページが自動的に開きます。

20. インストールがインストールがインストールがインストールが完了完了完了完了するとするとするとすると
ツール → Web 開発 に「Firefox OS Simulator」が追加
されます。
20
SimulatorSimulatorSimulatorSimulator

21. SimulatorSimulatorSimulatorSimulator をををを起動起動起動起動
21
ここをクリック
SimulatorSimulatorSimulatorSimulator

22. SimulatorSimulatorSimulatorSimulator をををを起動起動起動起動
22
SimulatorSimulatorSimulatorSimulator

23. それではそれではそれではそれでは、、、、アプリのアプリのアプリのアプリの開発開発開発開発をををを始始始始めましょうめましょうめましょうめましょう
• アプリ開発？？
• 難しくありません。
• 必要なのは Web 技術だけ！（何度も言います）
まず、アプリ作成用のディレクトリを用意しましょう。
23

24. マニフェストマニフェストマニフェストマニフェスト
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. マニフェストマニフェストマニフェストマニフェスト
25
{
"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"
}
起動時に読み込むページ
※ルート相対パス
アプリのアイコン
※ルート相対パス
開発者情報
標準の言語

26. マニフェストマニフェストマニフェストマニフェスト
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. マニフェストマニフェストマニフェストマニフェスト
27
{
"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"
}
起動時に読み込むページ
※ルート相対パス
アプリのアイコン
※ルート相対パス
開発者情報
標準の言語

28. index.htmlindex.htmlindex.htmlindex.html をををを書書書書こうこうこうこう
HTML と CSS と JavaScript だけ！
• 先ほど作成したディレクトリに index.html を作成し
ます。
<!DOCTYPE html>
<html>
<head>
<title>アプリ名</title>
</head>
<body>
なにか文字を書いて！
</body>
</html>
28http://y-misc.org/fxos.html

29. HTMLHTMLHTMLHTML のののの基本的基本的基本的基本的なななな書書書書きききき方方方方
<!DOCTYPE html>
<html>
<head>
<title>アプリ名</title>
</head>
<link rel="stylesheet" type="text/css"
href="style/style.css">
<script src="script/script.js"></script>
</head>
<body>
なにか文字を書いて！
</body>
</html>
29

30. 注意点注意点注意点注意点
○○○○
<script src="script/script.js"></script>
××××
<script>
var hoge=0;
</script>
30
スクリプトを参照する形はOK
script タグに挟まれたコードは実⾏されない！

31. HTMLHTMLHTMLHTML のののの基本的基本的基本的基本的なななな書書書書きききき方方方方
<!DOCTYPE html>
<html>
<head>
<title>アプリ名</title>
</head>
<link rel="stylesheet" type="text/css"
href="style/style.css">
<script src="script/script.js"></script>
</head>
<body>
なにか文字を書いて！
</body>
</html>
31
CSS ファイルや JS ファイルや画像ファイルの参照は
相対パスでの指定でもOK
jQuery などの js ライブラリを入れることも可能
あとは、いつも通りの Web 開発と同じ！

32. デザインをデザインをデザインをデザインを統一統一統一統一したいしたいしたいしたい
Building Blocks というものがある。
( http://buildingfirefoxos.com/ )
どのような UI があるのか書いてある！
32

33. Building BlocksBuilding BlocksBuilding BlocksBuilding Blocks
Building Block ガイドがある。
( http://buildingfirefoxos.com/ )
どのようなテンプレートがあるのか書いてある！
33

34. Building BlocksBuilding BlocksBuilding BlocksBuilding Blocks
34

35. Building BlocksBuilding BlocksBuilding BlocksBuilding Blocks
35

36. 36
<!DOCTYPE html>
<html>
<head>
<title>アプリ名</title>
<link rel="stylesheet" type="text/css"
href="shared/style/headers.css">
</head>
<body>
なにか文字を書いて！
</body>
</html>

37. Building BlocksBuilding BlocksBuilding BlocksBuilding Blocks
37
必要部分を選択して

38. 38
<!DOCTYPE html>
<html>
<head>
<title>アプリ名</title>
<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>

39. http://bit.ly/FxBB
(https://github.com/mozilla-b2g/gaia)
をダウンロードして解凍します。
39

40. 解凍解凍解凍解凍したディレクトリからしたディレクトリからしたディレクトリからしたディレクトリから
shared/style の中に関連するファイルとディレクトリ
を選択
自分のアプリのフォルダにコピー
40

41. イメージ
41

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

43. FirefoxFirefoxFirefoxFirefox OSOSOSOS SimulatorSimulatorSimulatorSimulator
43
SimulatorSimulatorSimulatorSimulator

44. FirefoxFirefoxFirefoxFirefox OSOSOSOS SimulatorSimulatorSimulatorSimulator
44
SimulatorSimulatorSimulatorSimulator

45. ○○○ installed と表示され起動
45

46. アプリを見てみよう！
46

47. アプリをアプリをアプリをアプリを HACKHACKHACKHACK しようしようしようしよう
Hack the Web App.
47

48. アプリディレクトリをアプリディレクトリをアプリディレクトリをアプリディレクトリを開開開開きますきますきますきます
Firefox で about:support →
48

49. アプリディレクトリをアプリディレクトリをアプリディレクトリをアプリディレクトリを開開開開きますきますきますきます
extensions → r2d2b2g@mozilla.org → profile →
webapps
にインストールされているアプリ一覧があります。
49

50. アプリディレクトリをアプリディレクトリをアプリディレクトリをアプリディレクトリを開開開開きますきますきますきます
1. ディレクトリの中の zip ファイルを解凍する。
2. 書き換える。
3. 再び zip にして中に戻す。
50

51. 今回今回今回今回はははは CrystalskullCrystalskullCrystalskullCrystalskull
51
これを展開の前にバックアップ

52. 今回今回今回今回はははは CrystalskullCrystalskullCrystalskullCrystalskull
52
これを展開

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

54. 例題例題例題例題）））） 背景背景背景背景をををを変変変変えてみるえてみるえてみるえてみる
54
？

55. 中身中身中身中身をををを変変変変えたえたえたえた後後後後…………
55
ディレクトリの中身を zip にする

56. zzzzipipipip にしたらにしたらにしたらにしたら
• application.zip にリネーム
• もともとの zip ファイルを上書きします。
シミュレータを起動しましょう。
56