Your SlideShare is downloading. ×
0
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,200

Published on

Published in: Technology
0 Comments
3 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
2,200
On Slideshare
0
From Embeds
0
Number of Embeds
13
Actions
Shares
0
Downloads
6
Comments
0
Likes
3
Embeds 0
No embeds

No notes for slide

Transcript of "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
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×