Embed Size (px)
DESCRIPTION
Citation preview
今日の内容：アプリを作ろう• HTML+CSS+JSでアプリ開発 • 開発環境の準備 • サンプルアプリの作成と実行
!
開発環境の準備• テキストエディタ / IDE • シミュレータ、デバッガ、プロファイラ • ライブラリ、フレームワーク
開発環境の準備
!
開発環境の準備• テキストエディタ / IDE→ mi / Sublime Text 2
• シミュレータ、デバッガ、プロファイラ→ Firefox beta
• ライブラリ、フレームワーク→ BuildingBlocks
Firefox Beta• http://www.mozilla.jp/firefox/preview/ • ダウンロードし、デスクトップに配置
アプリマネージャの起動• ツール→Web開発→アプリマネージャ • 機能 • 開発中のアプリの管理 • シミュレータのインストール / 起動 • 実機を利用したデバッグの実行
シミュレータアドオンのインストール• 1.3 (unstable) をインストールする • ヘルプにある「シミュレータアドオンをインストールする」からインストールページへ移動
• サイトにあるインストールボタンを押して、インストール
インストールを許可してください
Firefox OS シミュレータの起動
クリック
クリック
Firefox OS シミュレータ
ホームボタン
アプリをインストールしてみよう
Marketplace クリック
ホーム画面でホームボタン長押し
長押しでアプリ終了画面へ
サンプルアプリ
世界遺産時計
クリック
クリック
完成品を動かそう• URL：http://goo.gl/2Hf9I7 • zip ファイル • 展開するとアプリ一式が得られる • アプリマネージャに登録して動かす
完成品を動かそう（つづき）
クリックしてアプリのフォルダを選択
完成品を動かそう（つづき）
シミュレータを起動した状態で「更新」をクリック
完成品を動かそう（つづき）• シミュレータ上にインストールされる
• アイコンをクリックで起動
ファイル構成• manifest.webapp：メタデータ。JSON形式
• index.html：HTMLファイル • js/clock.js：ロジック • css ファイル：スタイル定義
Building Blocks• http://buildingfirefoxos.com/ • スマホアプリ用のCSSフレームワーク • CSS ファイル + JS +マークアップ規約 • 規約に従ってマークアップすることで、画面をレイアウトできる
manifest.webapp の記述内容• アイコンの場所 • 最初に表示するファイル • アプリのタイトル • 作成者に関する情報 • etc
{ "name": "世界遺産時計", "description": "はじめてのアプリ", "launch_path": "/index.html", "icons": { "128": "/images/app_icon_128.png", "60": "/images/app_icon_60.png" }, "version": "1.1", "developer": { "name": "N. Shimizu", "url": "http://chikoski.info/" }, "default_locale": "ja"}
関数の分類• 起動時に1回だけ呼ばれるもの • 定期的に呼ばれるもの • メニュー要素のクリック時に呼ばれるもの
setTimeout(func, delay)• delay ミリ秒経過後、関数funcを呼び出す • サンプルでは時計の更新に利用している • updateを1000ミリ秒ごとに呼び出す • updateの最後で、update自身を引数に指定してsetTimeoutを呼び出している
loadPhoto: Flickrを検索する関数• Flickr (http://flickr.com/) : 写真共有サービス • JavaScriptのプログラムとして結果を返す • http://www.flickr.com/services/feeds/docs/photos_public/
• これを利用して写真の検索を行う
loadPhotoの概要1. 検索内容を反映したURLを作成
2. そのURLをsrc属性の値として持つ、script要素を作成
3. 2で作成した要素をDOMツリー上に配置する
jsonFlickrFeed：検索結果の処理• Flickrからの検索結果は、jsonFlickrFeed関数の呼び出しを行う文として返ってくる
• jsonFlickrFeedを定義することで、検索結果をプログラム中で利用できる
• サンプルでは配列に結果を保存している
イベントハンドラの第1引数• 発生したイベントに関する情報 • 種類 • 発生源の要素 • 発生時刻 • 発生源の要素の持つ情報を処理に利用できる
開発ツールのTIPS
デバッガが利用できる
スタイルエディタを使って、画面を見ながらCSSを編集できる
スタイルエディタの利用例
font-sizeを変更
インスペクタも利用できる
1. クリック
2. シミュレータ上の要素をクリック
3. その要素が選択される
アプリのリロード• アプリへの修正は、即座に反映されない • 再インストールが必要 • 起動中のアプリの終了も必要 • 次の手順で行うとよい
アプリのリロード（つづき）1. ホームボタンを押して、ホーム画面へ戻る
2. ホームボタンを長押しし、アプリを終了
3. アプリマネージャにある「更新」ボタンを押しアプリを再インストール
4. アプリマネージャの「デバッグ」を押して起動
まとめ
Firefox OS 用アプリ• Webサイト + manifest.webapp • HTML+CSS+JSで実装 • アプリの説明をmanifest.webappに書く • アプリマネージャを使って開発 • シミュレータで動作させつつ、デバッグ • 開発ツールを上手に使おう
