Upload
jun-iida
View
75
Download
0
Embed Size (px)
Citation preview
名前 : 飯田 潤(いいだじゅん)
屋号 : @iida(あっといいだ)
仕事 : フリーランス Webフロントエンジニア
育児 ・ ホームページのコーディング(JS多め)・
スマートフォン向けECサイトの設計・コーディング
https://twitter.com/iida
自己紹介
勉強会の動機
FirefoxOSは
面白いよ!
・Web技術でアプリが作れるよ・Web技術でカスタマイズできるよ
ぜひ普及してくれてアプリ作ったりカスタマイズしたり
したいよ!・ホームとかロック画面をカスタムしてドヤ顔したり・ゲームアプリ作ってドヤ顔したり
・便利アプリ作って一山当ててドヤ顔したりしたいよ!
普及するには
コンテンツ量が決め手だよ!
・面白いゲーム・便利なサービス・暇つぶしになるアプリ・シェアされる一発ネタ
Webデザイナーさん&
Webエンジニアさん
出番ですよ!
・ユーザー目線・面白いこと・コンテンツ生産なら…任せて!
準備 – Firefox
ダウンロードはこちらから
https://mozilla.org/firefox/channel/
開発には開発者向け機能が充実したDeveloper Editionが便利だそうです
クリック
ここをクリック
準備 – WebIDE
詳しくはこちら
https://developer.mozilla.org/ja/docs/Tools/WebIDE
FirefoxOSアプリ開発をするために必要なものが全部入ったソフトウェア(Firefoxの一部)です。
Firefoxに既に入っています。
「WebIDE」とは
準備 – WebIDEの設定(シミュレータのインストール 3/4)
クリック
「Firefox OS 2.1シミュレータ」
→「インストール」をクリック
※貸出機のFlameに合わせています。※Fx0の方は、「Firefox OS 2.0」です。
準備 – 実機に接続する(ドライバのインストール)
※Windowsの方のみ
http://www.lg.com/jp/support-mobile/lg-LGL25
Fx0の方
https://developer.mozilla.org/ja/Firefox_OS/Developer_phone_guide/Flame/Initial_setup#Windows.E3.81.AE.E8.BF.BD.E5.8A.A0.E6.89.8B.E9.A0.86
Flameの方
icons/
icon128x128.png
icon16x16.png
icon48x48.png
icon60x60.png
app.js
index.html
manifest.webapp
Hello World(ファイル構成の説明)
・おなじみのHTMLファイル→ここを好きにいじればOK
・各サイズのアイコンデータ→自作の画像に変更可
・アプリの権限などが書かれたファイル
{
"name": "MyFirstApp",
"description": "A Hello World app",
"launch_path": "/index.html",
"icons": {
"16": "/icons/icon16x16.png",
"48": "/icons/icon48x48.png",
"60": "/icons/icon60x60.png",
"128": "/icons/icon128x128.png"
},
"type": "privileged",
"permissions": {}
}
Hello World(マニフェストファイル 1/3)
中身はJSONです。
内容は、ほとんど見たまま。
Hello World(マニフェストファイル 2/3)
manifest.webappの “type”に指定できるタイプ
web … 特権なし
privileged … 特権アプリ
certified … 認定アプリ※特権アプリより重要なAPIが使えます
Hello World(マニフェストファイル 3/3)
"permissions": {
“権限の名前": {
“description”: “権限が必要な理由",
"access": "readcreate"
},
"権限の名前": {
"description": "権限が必要な理由"
}
}
access… 必要なアクセスレベル。
・readonly・readwrite・readcreate・createonly
※一部の権限でしか使いません。
開発者情報
https://developer.mozilla.org/ja/Apps
APIについての情報やテクニックの紹介はこちら
デザイナーの方 エンジニアの方
ハンズオン(テーマ)
HelloWorldアプリを改造して、自分アプリにしてみましょう。
はじめてのホームページ、という感覚でアプリが作れることをぜひ体験してみてください。
CSS編集・画像の配置・アイコン変更等を、ぜひお試しください。
WebAPIを利用して、センサーに反応するアプリを作ってみましょう。
今回は、光センサーを使って、画面を切り替えるアプリを作ってみます。