SlideShare a Scribd company logo
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年:

チリ、アルゼンチン、コスタリカ、エクアドル、エ
ルサルバドル、グアテマラ、ニカラグア、パナマ、
クロアチア、チェコ、マケドニア、台湾
6
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: 8 GB
• Camera: 5 MP + 2MP
• NFC, BT, Dual SIM
14
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
• 書き換えると、独自テンプレート集が使える
• devtools.webide.templatesURL_cache に

内容がキャッシュされている
38
テンプレートリストの例
• テンプレートの情報をリストに列挙
39
[!
{!
"file": "http://example.com/template.zip",!
"icon": "http://example.com/temlate_icon.png",!
"size": 12345,!
"sha1": !
"8df8b519a848782bb6f27e549513ac1c89703f60",!
"name": "My app template",!
"description":  !
"僕の考える最強のアプリテンプレート"!
}!
]
テンプレート: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 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
ご要望は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

More Related Content

More from Noritada Shimizu

2016 gunma.web games-and-asm.js
2016 gunma.web games-and-asm.js2016 gunma.web games-and-asm.js
2016 gunma.web games-and-asm.js
Noritada Shimizu
 
20151224-games
20151224-games20151224-games
20151224-games
Noritada Shimizu
 
20151128 firefoxos-handson
20151128 firefoxos-handson20151128 firefoxos-handson
20151128 firefoxos-handson
Noritada Shimizu
 
20151117 devtools
20151117 devtools20151117 devtools
20151117 devtools
Noritada Shimizu
 
Inspection & Tweak: Firefox を使ったフロント開発
Inspection & Tweak: Firefox を使ったフロント開発Inspection & Tweak: Firefox を使ったフロント開発
Inspection & Tweak: Firefox を使ったフロント開発
Noritada Shimizu
 
20150822 osc-shimane
20150822 osc-shimane20150822 osc-shimane
20150822 osc-shimane
Noritada Shimizu
 
20150829 firefox-os-handson
20150829 firefox-os-handson20150829 firefox-os-handson
20150829 firefox-os-handson
Noritada Shimizu
 
20150829 firefox-os
20150829 firefox-os20150829 firefox-os
20150829 firefox-os
Noritada Shimizu
 
20150727 Development tools for Firefox OS apps
20150727 Development tools for Firefox OS apps20150727 Development tools for Firefox OS apps
20150727 Development tools for Firefox OS apps
Noritada Shimizu
 
Firefox OS でアプリを作るときに気をつけたい N 個のこと
Firefox OS  でアプリを作るときに気をつけたい N 個のことFirefox OS  でアプリを作るときに気をつけたい N 個のこと
Firefox OS でアプリを作るときに気をつけたい N 個のこと
Noritada Shimizu
 
Firefox OSアプリ開発ハンズオン(Hello World編)
Firefox OSアプリ開発ハンズオン(Hello World編)Firefox OSアプリ開発ハンズオン(Hello World編)
Firefox OSアプリ開発ハンズオン(Hello World編)
Noritada Shimizu
 
WebVR(html5j TV部、WebVRとかVRのUIとか勉強会)
WebVR(html5j TV部、WebVRとかVRのUIとか勉強会)WebVR(html5j TV部、WebVRとかVRのUIとか勉強会)
WebVR(html5j TV部、WebVRとかVRのUIとか勉強会)
Noritada Shimizu
 
Application submission, management and manetization in Firefox Marketplace
Application submission, management and manetization in Firefox MarketplaceApplication submission, management and manetization in Firefox Marketplace
Application submission, management and manetization in Firefox Marketplace
Noritada Shimizu
 
つくろう!Firefox OS アプリ
つくろう!Firefox OS アプリつくろう!Firefox OS アプリ
つくろう!Firefox OS アプリ
Noritada Shimizu
 
20150118 firefoxos-handson-helloworld
20150118 firefoxos-handson-helloworld20150118 firefoxos-handson-helloworld
20150118 firefoxos-handson-helloworld
Noritada Shimizu
 
20141115 fx os-codereading
20141115 fx os-codereading20141115 fx os-codereading
20141115 fx os-codereading
Noritada Shimizu
 
20141030 html5j-firefox os-deviceapi
20141030 html5j-firefox os-deviceapi20141030 html5j-firefox os-deviceapi
20141030 html5j-firefox os-deviceapi
Noritada Shimizu
 
20140830 firefox os-sampler
20140830 firefox os-sampler20140830 firefox os-sampler
20140830 firefox os-sampler
Noritada Shimizu
 
20140801 webrtc on-firefox
20140801 webrtc on-firefox20140801 webrtc on-firefox
20140801 webrtc on-firefox
Noritada Shimizu
 

More from Noritada Shimizu (20)

2016 gunma.web games-and-asm.js
2016 gunma.web games-and-asm.js2016 gunma.web games-and-asm.js
2016 gunma.web games-and-asm.js
 
20151224-games
20151224-games20151224-games
20151224-games
 
20151128 firefoxos-handson
20151128 firefoxos-handson20151128 firefoxos-handson
20151128 firefoxos-handson
 
20151117 devtools
20151117 devtools20151117 devtools
20151117 devtools
 
Inspection & Tweak: Firefox を使ったフロント開発
Inspection & Tweak: Firefox を使ったフロント開発Inspection & Tweak: Firefox を使ったフロント開発
Inspection & Tweak: Firefox を使ったフロント開発
 
20150822 osc-shimane
20150822 osc-shimane20150822 osc-shimane
20150822 osc-shimane
 
20150829 firefox-os-handson
20150829 firefox-os-handson20150829 firefox-os-handson
20150829 firefox-os-handson
 
20150829 firefox-os
20150829 firefox-os20150829 firefox-os
20150829 firefox-os
 
20150727 Development tools for Firefox OS apps
20150727 Development tools for Firefox OS apps20150727 Development tools for Firefox OS apps
20150727 Development tools for Firefox OS apps
 
Firefox OS でアプリを作るときに気をつけたい N 個のこと
Firefox OS  でアプリを作るときに気をつけたい N 個のことFirefox OS  でアプリを作るときに気をつけたい N 個のこと
Firefox OS でアプリを作るときに気をつけたい N 個のこと
 
Firefox OSアプリ開発ハンズオン(Hello World編)
Firefox OSアプリ開発ハンズオン(Hello World編)Firefox OSアプリ開発ハンズオン(Hello World編)
Firefox OSアプリ開発ハンズオン(Hello World編)
 
WebVR(html5j TV部、WebVRとかVRのUIとか勉強会)
WebVR(html5j TV部、WebVRとかVRのUIとか勉強会)WebVR(html5j TV部、WebVRとかVRのUIとか勉強会)
WebVR(html5j TV部、WebVRとかVRのUIとか勉強会)
 
Application submission, management and manetization in Firefox Marketplace
Application submission, management and manetization in Firefox MarketplaceApplication submission, management and manetization in Firefox Marketplace
Application submission, management and manetization in Firefox Marketplace
 
つくろう!Firefox OS アプリ
つくろう!Firefox OS アプリつくろう!Firefox OS アプリ
つくろう!Firefox OS アプリ
 
20150118 firefoxos-handson-helloworld
20150118 firefoxos-handson-helloworld20150118 firefoxos-handson-helloworld
20150118 firefoxos-handson-helloworld
 
20141115 fx os-codereading
20141115 fx os-codereading20141115 fx os-codereading
20141115 fx os-codereading
 
20141030 html5j-firefox os-deviceapi
20141030 html5j-firefox os-deviceapi20141030 html5j-firefox os-deviceapi
20141030 html5j-firefox os-deviceapi
 
20140830 firefox os-sampler
20140830 firefox os-sampler20140830 firefox os-sampler
20140830 firefox os-sampler
 
20140801 webrtc on-firefox
20140801 webrtc on-firefox20140801 webrtc on-firefox
20140801 webrtc on-firefox
 
20140629 firefoxos-devenv
20140629 firefoxos-devenv20140629 firefoxos-devenv
20140629 firefoxos-devenv
 

Recently uploaded

生成AIがもたらすコンテンツ経済圏の新時代  The New Era of Content Economy Brought by Generative AI
生成AIがもたらすコンテンツ経済圏の新時代  The New Era of Content Economy Brought by Generative AI生成AIがもたらすコンテンツ経済圏の新時代  The New Era of Content Economy Brought by Generative AI
生成AIがもたらすコンテンツ経済圏の新時代  The New Era of Content Economy Brought by Generative AI
Osaka University
 
「進化するアプリ イマ×ミライ ~生成AIアプリへ続く道と新時代のアプリとは~」Interop24Tokyo APPS JAPAN B1-01講演
「進化するアプリ イマ×ミライ ~生成AIアプリへ続く道と新時代のアプリとは~」Interop24Tokyo APPS JAPAN B1-01講演「進化するアプリ イマ×ミライ ~生成AIアプリへ続く道と新時代のアプリとは~」Interop24Tokyo APPS JAPAN B1-01講演
「進化するアプリ イマ×ミライ ~生成AIアプリへ続く道と新時代のアプリとは~」Interop24Tokyo APPS JAPAN B1-01講演
嶋 是一 (Yoshikazu SHIMA)
 
Generating Automatic Feedback on UI Mockups with Large Language Models
Generating Automatic Feedback on UI Mockups with Large Language ModelsGenerating Automatic Feedback on UI Mockups with Large Language Models
Generating Automatic Feedback on UI Mockups with Large Language Models
harmonylab
 
Humanoid Virtual Athletics Challenge2024 技術講習会 スライド
Humanoid Virtual Athletics Challenge2024 技術講習会 スライドHumanoid Virtual Athletics Challenge2024 技術講習会 スライド
Humanoid Virtual Athletics Challenge2024 技術講習会 スライド
tazaki1
 
ロジックから状態を分離する技術/設計ナイト2024 by わいとん @ytnobody
ロジックから状態を分離する技術/設計ナイト2024 by わいとん @ytnobodyロジックから状態を分離する技術/設計ナイト2024 by わいとん @ytnobody
ロジックから状態を分離する技術/設計ナイト2024 by わいとん @ytnobody
azuma satoshi
 
論文紹介:Deep Learning-Based Human Pose Estimation: A Survey
論文紹介:Deep Learning-Based Human Pose Estimation: A Survey論文紹介:Deep Learning-Based Human Pose Estimation: A Survey
論文紹介:Deep Learning-Based Human Pose Estimation: A Survey
Toru Tamaki
 
ハイブリッドクラウド研究会_Hyper-VとSystem Center Virtual Machine Manager セッションMM
ハイブリッドクラウド研究会_Hyper-VとSystem Center Virtual Machine Manager セッションMMハイブリッドクラウド研究会_Hyper-VとSystem Center Virtual Machine Manager セッションMM
ハイブリッドクラウド研究会_Hyper-VとSystem Center Virtual Machine Manager セッションMM
osamut
 

Recently uploaded (7)

生成AIがもたらすコンテンツ経済圏の新時代  The New Era of Content Economy Brought by Generative AI
生成AIがもたらすコンテンツ経済圏の新時代  The New Era of Content Economy Brought by Generative AI生成AIがもたらすコンテンツ経済圏の新時代  The New Era of Content Economy Brought by Generative AI
生成AIがもたらすコンテンツ経済圏の新時代  The New Era of Content Economy Brought by Generative AI
 
「進化するアプリ イマ×ミライ ~生成AIアプリへ続く道と新時代のアプリとは~」Interop24Tokyo APPS JAPAN B1-01講演
「進化するアプリ イマ×ミライ ~生成AIアプリへ続く道と新時代のアプリとは~」Interop24Tokyo APPS JAPAN B1-01講演「進化するアプリ イマ×ミライ ~生成AIアプリへ続く道と新時代のアプリとは~」Interop24Tokyo APPS JAPAN B1-01講演
「進化するアプリ イマ×ミライ ~生成AIアプリへ続く道と新時代のアプリとは~」Interop24Tokyo APPS JAPAN B1-01講演
 
Generating Automatic Feedback on UI Mockups with Large Language Models
Generating Automatic Feedback on UI Mockups with Large Language ModelsGenerating Automatic Feedback on UI Mockups with Large Language Models
Generating Automatic Feedback on UI Mockups with Large Language Models
 
Humanoid Virtual Athletics Challenge2024 技術講習会 スライド
Humanoid Virtual Athletics Challenge2024 技術講習会 スライドHumanoid Virtual Athletics Challenge2024 技術講習会 スライド
Humanoid Virtual Athletics Challenge2024 技術講習会 スライド
 
ロジックから状態を分離する技術/設計ナイト2024 by わいとん @ytnobody
ロジックから状態を分離する技術/設計ナイト2024 by わいとん @ytnobodyロジックから状態を分離する技術/設計ナイト2024 by わいとん @ytnobody
ロジックから状態を分離する技術/設計ナイト2024 by わいとん @ytnobody
 
論文紹介:Deep Learning-Based Human Pose Estimation: A Survey
論文紹介:Deep Learning-Based Human Pose Estimation: A Survey論文紹介:Deep Learning-Based Human Pose Estimation: A Survey
論文紹介:Deep Learning-Based Human Pose Estimation: A Survey
 
ハイブリッドクラウド研究会_Hyper-VとSystem Center Virtual Machine Manager セッションMM
ハイブリッドクラウド研究会_Hyper-VとSystem Center Virtual Machine Manager セッションMMハイブリッドクラウド研究会_Hyper-VとSystem Center Virtual Machine Manager セッションMM
ハイブリッドクラウド研究会_Hyper-VとSystem Center Virtual Machine Manager セッションMM
 

20140702 webide