1. WebIDE
Mozilla Japan テクニカルマーケティング
清水智公 (nshimizu@mozilla-japan.org)
関東Firefox OS勉強会 7th 2014/07/02

2. about:me
2

3. 清水智公（しみずのりただ）
• Mozilla Japan
テクニカルマーケティング
• 慶應義塾大学
政策・メディア研究科非常勤
• ＠chikoski
• https://slideshare.net/chikoski/
3

4. FFiirreeffooxx を
よろしくね！

5. FirefoxOS
5

6. 2014年：展開する国も増加
• 2013年：
スペイン、ポーランド、コロンビア、ベネズエラ、
ドイツ、ブラジル、ペルー、ウルグアイ、メキシコ、
ハンガリー、ギリシャ、セルビア、モンテネグロ、
イタリア
• 2014年：
チリ、アルゼンチン、コスタリカ、エクアドル、エ
ルサルバドル、グアテマラ、ニカラグア、パナマ、
クロアチア、チェコ、マケドニア、台湾
6

7. 2014年発売予定の新機種
7
ZTE OPEN II ZTE OPEN C

8. 2014年発売予定の新機種
8
FIRE C FIRE E FIRE S

9. 2014年発売予定の新機種
9
Y300

10. 25＄スマートフォン
• インドなどで展開予定
• 2社から発売予定
• Intex Technologies (India) Ltd.
• S Mobility Ltd. (Spice holding company)
10

11. 2014年発売予定の新機種
11
FIRE 7

12. スマートフォン以外にも展開中
• パートナーの求めるデバイスへ展開
• Mozilla 自身はあくまでOS提供者
12

13. 13

14. Flame：開発者向けレファンス端末
• Display: 4.5 inch FWVGA
• CPU: MSM8210 Dual 1.2 GHz
(Cortex-A7, Adreno 302)
• RAM: 256 MB 1GB
• ROM: 8 GB
• Camera: 5 MP + 2MP
• NFC, BT, Dual SIM
14

15. 2014年7月国内販売
• 株式会社びぎねっとより
• TELEC、JATEなどを通過後
• Yahoo! Shopping 経由で販売
• 18,500 円（税別、送料込み）
• http://www.mozilla.jp/flame/
15

16. 開発環境
16

17. アプリ開発に必要なもの
17

18. 開発ツール→アプリマネージャ
18

19. アプリマネージャ
19

20. WebIDE
20

21. WebIDE：Firefox組み込みのIDE
21

22. FirefoxNightlyで利用可能
• http://nightly.mozilla.org/
22

23. 設定してWebIDEを有効に
• アドレスバーに about:config と入力
23

24. 設定してWebIDEを有効に（つづき）
• devtools.webide.enabled を true に設定
24

25. テンプレートからのアプリ作成
• Open App → New App
25

26. テンプレートからのアプリ作成（つづき）
• 利用するテンプレートを選択
26

27. 作成されたアプリ
• マニフェスト、アイコン、l10N関係完備
27

28. ランタイムの選択
• プルダウンメニューから選択
28

29. シミュレータの管理
• Web IDE内でインストールできる
• View → Manage simulators
29

30. アプリのインストールと実行
• Run & Install で実行
• 実行中ならリロードもおこなう
30

31. マニフェストの検証
• Marketplace での公開に問題ないよう検証
31

32. CSSは常にコード補完が効く
32

33. JSでの補完はCtrl+Space
33

34. Shift+Spaceでドキュメント表示
34

35. エディターのキーバインド
35

36. devtools.editor.keymapでキーマップ指定
• about:config 中でキーマップ指定
• キーマップ：emacs / vim / sublime
36

37. テンプレートは絶賛開発中！
• https://github.com/mozilla/mortar/
37

38. devtools.webide.templatesURL
• about:config 中の設定項目
• デフォルト：
http://code.cdn.mozilla.net/templates/list.json
• 書き換えると、独自テンプレート集が使える
• devtools.webide.templatesURL_cache に
内容がキャッシュされている
38

39. テンプレートリストの例
• テンプレートの情報をリストに列挙
39
[!
{!
"file": "http://example.com/template.zip",!
"icon": "http://example.com/temlate_icon.png",!
"size": 12345,!
"sha1": !
"8df8b519a848782bb6f27e549513ac1c89703f60",!
"name": "My app template",!
"description": !
"僕の考える最強のアプリテンプレート"!
}!
]

40. テンプレート：zipファイル
• 自分のアプリをzipに固めてテンプレート化
40

41. コマンドラインからの実行
• https://bugzilla.mozilla.org/show_bug.cgi?id=1007218
41

42. 現在進行中のバグ(2014/07/02)
• Bug 1009604 - [appmgr v2] Browser Tabs
• Bug 1011035 - Itchpad: Allow drag/drop from file system into
project tree
• Bug 1011116 - Itchpad: Syncing file tree strange when folder
selected
• Bug 1027817 - Font-resizing in WebIDE?
• Bug 1028378 - Changing runtime should disconnect the
current one
• Bug 1008709 - Build a preference screen for WebIDE
42

43. ご要望はFirefoxDeveloperToolsideasまで
• http://mzl.la/devtools
43

44. まとめ
44

45. mozilla-apk-cli
% npm install -g mozilla-apk-cli
!
% mozilla-apk-cli ./www test_app.apk
!
% adb install test_app.apk
45

46. FirefoxOSコミュニティ
• http://fxos.org/
• メーリングリストベースのユーザコミュニティ
• 技術的な質問が可能
46

47. MozillaDeveloperNetwork
• https://developer.mozilla.org/
47

48. mozillansになろう！
• https://mozillians.org/
48

49. 2014年7月国内販売
• 株式会社びぎねっとより
• TELEC、JATEなどを通過後
• Yahoo! Shopping 経由で販売
• 18,500 円（税別、送料込み）
• http://www.mozilla.jp/flame/
49