Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.
WebIDE
Mozilla Japan テクニカルマーケティング
清水智公 (nshimizu@mozilla-japan.org)
関東Firefox OS勉強会 7th 2014/07/02
about:me
2
清水智公(しみずのりただ)
• Mozilla Japan 

テクニカルマーケティング
• 慶應義塾大学

政策・メディア研究科非常勤
• @chikoski
• https://slideshare.net/chikoski/
3
FFiirreeffooxx  を


よろしくね!
FirefoxOS
5
2014年:展開する国も増加
• 2013年:

スペイン、ポーランド、コロンビア、ベネズエラ、
ドイツ、ブラジル、ペルー、ウルグアイ、メキシコ、
ハンガリー、ギリシャ、セルビア、モンテネグロ、
イタリア
• 2014年:

チリ、アルゼンチン...
2014年発売予定の新機種
7
ZTE OPEN II ZTE OPEN C
2014年発売予定の新機種
8
FIRE C FIRE E FIRE S
2014年発売予定の新機種
9
Y300
25$スマートフォン
• インドなどで展開予定
• 2社から発売予定
• Intex Technologies (India) Ltd.
• S Mobility Ltd. (Spice holding company)
10
2014年発売予定の新機種
11
FIRE 7
スマートフォン以外にも展開中
• パートナーの求めるデバイスへ展開
• Mozilla 自身はあくまでOS提供者
12
13
Flame:開発者向けレファンス端末
• Display: 4.5 inch FWVGA
• CPU: MSM8210 Dual 1.2 GHz

(Cortex-A7, Adreno 302)
• RAM: 256 MB 1GB
• ROM:...
2014年7月国内販売
• 株式会社びぎねっとより
• TELEC、JATEなどを通過後
• Yahoo! Shopping 経由で販売
• 18,500 円(税別、送料込み)
• http://www.mozilla.jp/flame/
15
開発環境
16
アプリ開発に必要なもの
17
開発ツール→アプリマネージャ
18
アプリマネージャ
19
WebIDE
20
WebIDE:Firefox組み込みのIDE
21
FirefoxNightlyで利用可能
• http://nightly.mozilla.org/
22
設定してWebIDEを有効に
• アドレスバーに about:config と入力
23
設定してWebIDEを有効に(つづき)
• devtools.webide.enabled を true に設定
24
テンプレートからのアプリ作成
• Open App → New App
25
テンプレートからのアプリ作成(つづき)
• 利用するテンプレートを選択
26
作成されたアプリ
• マニフェスト、アイコン、l10N関係完備
27
ランタイムの選択
• プルダウンメニューから選択
28
シミュレータの管理
• Web IDE内でインストールできる
• View → Manage simulators
29
アプリのインストールと実行
• Run & Install で実行
• 実行中ならリロードもおこなう
30
マニフェストの検証
• Marketplace での公開に問題ないよう検証 
31
CSSは常にコード補完が効く
32
JSでの補完はCtrl+Space
33
Shift+Spaceでドキュメント表示
34
エディターのキーバインド
35
devtools.editor.keymapでキーマップ指定
• about:config 中でキーマップ指定
• キーマップ:emacs / vim / sublime
36
テンプレートは絶賛開発中!
• https://github.com/mozilla/mortar/
37
devtools.webide.templatesURL
• about:config 中の設定項目
• デフォルト:

http://code.cdn.mozilla.net/templates/list.json
• 書き換えると、独自テン...
テンプレートリストの例
• テンプレートの情報をリストに列挙
39
[!
{!
"file": "http://example.com/template.zip",!
"icon": "http://example.com/temlate_ic...
テンプレート:zipファイル
• 自分のアプリをzipに固めてテンプレート化
40
コマンドラインからの実行
• https://bugzilla.mozilla.org/show_bug.cgi?id=1007218
41
現在進行中のバグ(2014/07/02)
• Bug 1009604 - [appmgr v2] Browser Tabs
• Bug 1011035 - Itchpad: Allow drag/drop from file system in...
ご要望はFirefoxDeveloperToolsideasまで
• http://mzl.la/devtools
43
まとめ
44
mozilla-apk-cli
% npm install -g mozilla-apk-cli	
!
% mozilla-apk-cli ./www test_app.apk	
!
% adb install test_app.apk
45
FirefoxOSコミュニティ
• http://fxos.org/
• メーリングリストベースのユーザコミュニティ
• 技術的な質問が可能
46
MozillaDeveloperNetwork
• https://developer.mozilla.org/
47
mozillansになろう!
• https://mozillians.org/
48
2014年7月国内販売
• 株式会社びぎねっとより
• TELEC、JATEなどを通過後
• Yahoo! Shopping 経由で販売
• 18,500 円(税別、送料込み)
• http://www.mozilla.jp/flame/
49
Upcoming SlideShare
Loading in …5
×

20140702 webide

2,825 views

Published on

Published in: Technology
  • Be the first to comment

20140702 webide

  1. 1. WebIDE Mozilla Japan テクニカルマーケティング 清水智公 (nshimizu@mozilla-japan.org) 関東Firefox OS勉強会 7th 2014/07/02
  2. 2. about:me 2
  3. 3. 清水智公(しみずのりただ) • Mozilla Japan 
 テクニカルマーケティング • 慶應義塾大学
 政策・メディア研究科非常勤 • @chikoski • https://slideshare.net/chikoski/ 3
  4. 4. FFiirreeffooxx を よろしくね!
  5. 5. FirefoxOS 5
  6. 6. 2014年:展開する国も増加 • 2013年:
 スペイン、ポーランド、コロンビア、ベネズエラ、 ドイツ、ブラジル、ペルー、ウルグアイ、メキシコ、 ハンガリー、ギリシャ、セルビア、モンテネグロ、 イタリア • 2014年:
 チリ、アルゼンチン、コスタリカ、エクアドル、エ ルサルバドル、グアテマラ、ニカラグア、パナマ、 クロアチア、チェコ、マケドニア、台湾 6
  7. 7. 2014年発売予定の新機種 7 ZTE OPEN II ZTE OPEN C
  8. 8. 2014年発売予定の新機種 8 FIRE C FIRE E FIRE S
  9. 9. 2014年発売予定の新機種 9 Y300
  10. 10. 25$スマートフォン • インドなどで展開予定 • 2社から発売予定 • Intex Technologies (India) Ltd. • S Mobility Ltd. (Spice holding company) 10
  11. 11. 2014年発売予定の新機種 11 FIRE 7
  12. 12. スマートフォン以外にも展開中 • パートナーの求めるデバイスへ展開 • Mozilla 自身はあくまでOS提供者 12
  13. 13. 13
  14. 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. 15. 2014年7月国内販売 • 株式会社びぎねっとより • TELEC、JATEなどを通過後 • Yahoo! Shopping 経由で販売 • 18,500 円(税別、送料込み) • http://www.mozilla.jp/flame/ 15
  16. 16. 開発環境 16
  17. 17. アプリ開発に必要なもの 17
  18. 18. 開発ツール→アプリマネージャ 18
  19. 19. アプリマネージャ 19
  20. 20. WebIDE 20
  21. 21. WebIDE:Firefox組み込みのIDE 21
  22. 22. FirefoxNightlyで利用可能 • http://nightly.mozilla.org/ 22
  23. 23. 設定してWebIDEを有効に • アドレスバーに about:config と入力 23
  24. 24. 設定してWebIDEを有効に(つづき) • devtools.webide.enabled を true に設定 24
  25. 25. テンプレートからのアプリ作成 • Open App → New App 25
  26. 26. テンプレートからのアプリ作成(つづき) • 利用するテンプレートを選択 26
  27. 27. 作成されたアプリ • マニフェスト、アイコン、l10N関係完備 27
  28. 28. ランタイムの選択 • プルダウンメニューから選択 28
  29. 29. シミュレータの管理 • Web IDE内でインストールできる • View → Manage simulators 29
  30. 30. アプリのインストールと実行 • Run & Install で実行 • 実行中ならリロードもおこなう 30
  31. 31. マニフェストの検証 • Marketplace での公開に問題ないよう検証  31
  32. 32. CSSは常にコード補完が効く 32
  33. 33. JSでの補完はCtrl+Space 33
  34. 34. Shift+Spaceでドキュメント表示 34
  35. 35. エディターのキーバインド 35
  36. 36. devtools.editor.keymapでキーマップ指定 • about:config 中でキーマップ指定 • キーマップ:emacs / vim / sublime 36
  37. 37. テンプレートは絶賛開発中! • https://github.com/mozilla/mortar/ 37
  38. 38. devtools.webide.templatesURL • about:config 中の設定項目 • デフォルト:
 http://code.cdn.mozilla.net/templates/list.json • 書き換えると、独自テンプレート集が使える • devtools.webide.templatesURL_cache に
 内容がキャッシュされている 38
  39. 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. 40. テンプレート:zipファイル • 自分のアプリをzipに固めてテンプレート化 40
  41. 41. コマンドラインからの実行 • https://bugzilla.mozilla.org/show_bug.cgi?id=1007218 41
  42. 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. 43. ご要望はFirefoxDeveloperToolsideasまで • http://mzl.la/devtools 43
  44. 44. まとめ 44
  45. 45. mozilla-apk-cli % npm install -g mozilla-apk-cli ! % mozilla-apk-cli ./www test_app.apk ! % adb install test_app.apk 45
  46. 46. FirefoxOSコミュニティ • http://fxos.org/ • メーリングリストベースのユーザコミュニティ • 技術的な質問が可能 46
  47. 47. MozillaDeveloperNetwork • https://developer.mozilla.org/ 47
  48. 48. mozillansになろう! • https://mozillians.org/ 48
  49. 49. 2014年7月国内販売 • 株式会社びぎねっとより • TELEC、JATEなどを通過後 • Yahoo! Shopping 経由で販売 • 18,500 円(税別、送料込み) • http://www.mozilla.jp/flame/ 49

×