Embed Size (px)
DESCRIPTION
Firefox OS アプリケーションのチュートリアルです。
Citation preview
Firefox OS サンプルアプリケーション
チュートリアル
目次
Firefox OS シミュレータのインストール
アプリケーション作成
アプリケーションインストール・起動
Firefox OSシミュレータインストール
Firefoxをインストールする
http://www.mozilla.jp/firefox/
Firefox OS Simulatorアドオンをインストールする
https://addons.mozilla.org/ja/firefox/addon/firefox-os-simulator/
アプリケーション作成
以下の2つのファイルを作成する
画面(index.html)
manifest(sample.webapp)
アイコン(icon-128.png)
アプリケーション作成画面(index.html)
HTML5で画面を作成する。
<!DOCTYPE html><html lang="ja">
<head><meta charset=UTF-8><title>サンプルアプリケーション</title>
</head>
<body><h1>サンプルアプリケーション</h1>
</body>
</html>
アプリケーション作成manifest(sample.webapp)アプリケーションの情報を記載したmanifest
ファイルを作成する。{ "name": "サンプルアプリケーション",
"description": "Firefox OSのサンプルアプリケーション",
"icons": { "128": "/icon-128.png" }, "developer": { "name": "Sample Developer", "url": "http://example.jp" }, "default_locale": "ja", "launch_path": "/index.html"}
※ 詳細は以下のページを参照 https://developer.mozilla.org/en-US/docs/Apps/Manifest
アプリケーション作成アイコン(icon-128.png)128x128のサイズでpng形式の画像ファイルを作成する。
アプリケーションインストール・起動
index.html、sample.webapp、icon-128.pngを同一フォルダに配置する。
Firefoxを起動し、メニューから[ツール]→[Web開発]→[Firefox OS Simulator]を選択する
アプリケーションインストール・起動
Firefoxで新しいタブが開きFirefox OS
Simulator画面が表示されるので、「Add
Directory」ボタンを押下し、sample.webapp
を選択する。
Firefox OS Simulatorが起動し、サンプルアプリケーションが表示されます。
