1. 論理思考とプログラミング
2013年秋学期 #10
清水智公 (chiko@sfc.keio.ac.jp)

2. 今日の内容：アプリを作ろう
•
HTML+CSS+JSでアプリ開発
•
開発環境の準備
•
サンプルアプリの作成と実行

3. !
開発環境の準備
•
テキストエディタ / IDE
•
シミュレータ、デバッガ、プロファイラ
•
ライブラリ、フレームワーク

4. 開発環境の準備

5. !
開発環境の準備
•
テキストエディタ / IDE
→ mi / Sublime Text 2
•
シミュレータ、デバッガ、プロファイラ
→ Firefox beta
•
ライブラリ、フレームワーク
→ BuildingBlocks

6. Firefox Beta
•
http://www.mozilla.jp/firefox/preview/
•
ダウンロードし、デスクトップに配置

7. アプリマネージャの起動
•
ツール→Web開発→アプリマネージャ
•
機能
•
開発中のアプリの管理
•
シミュレータのインストール / 起動
•
実機を利用したデバッグの実行

8. シミュレータアドオンのインストール
•
1.3 (unstable) をインストールする
•
ヘルプにある
「シミュレータアドオンをインストールする」
からインストールページへ移動
•
サイトにあるインストールボタンを押して、
インストール

9. インストールを許可してください

10. Firefox OS シミュレータの起動
クリック
クリック

11. Firefox OS シミュレータ
ホームボタン

12. アプリをインストールしてみよう
Marketplace
クリック

13. ホーム画面でホームボタン長押し
長押しでアプリ終了画面へ

14. サンプルアプリ

15. 世界遺産時計
クリック
クリック

16. 完成品を動かそう
•
URL：http://goo.gl/2Hf9I7
•
•
•
zip ファイル
展開するとアプリ一式が得られる
アプリマネージャに登録して動かす

17. 完成品を動かそう（つづき）
クリックしてアプリのフォルダを選択

18. 完成品を動かそう（つづき）
シミュレータを起動した状態で「更新」をクリック

19. 完成品を動かそう（つづき）
•
シミュレータ上に
インストールされる
•
アイコンをクリックで起動

20. ファイル構成
•
manifest.webapp：
メタデータ。JSON形式
•
index.html：HTMLファイル
•
js/clock.js：ロジック
•
css ファイル：スタイル定義

21. Building Blocks
•
http://buildingfirefoxos.com/
•
スマホアプリ用のCSSフレームワーク
•
CSS ファイル + JS +マークアップ規約
•
規約に従ってマークアップすることで、
画面をレイアウトできる

22. manifest.webapp の記述内容
•
アイコンの場所
•
最初に表示するファイル
•
アプリのタイトル
•
作成者に関する情報
•
etc

23. {
"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"
}

24. 関数の分類
•
起動時に1回だけ呼ばれるもの
•
定期的に呼ばれるもの
•
メニュー要素のクリック時に呼ばれるもの

25. setTimeout(func, delay)
•
delay ミリ秒経過後、関数funcを呼び出す
•
サンプルでは時計の更新に利用している
•
updateを1000ミリ秒ごとに呼び出す
•
updateの最後で、update自身を引数に指定
してsetTimeoutを呼び出している

26. loadPhoto: Flickrを検索する関数
•
Flickr (http://flickr.com/) : 写真共有サービス
•
•
•
JavaScriptのプログラムとして結果を返す
http://www.flickr.com/services/feeds/docs/
photos_public/
これを利用して写真の検索を行う

27. loadPhotoの概要
1. 検索内容を反映したURLを作成
2. そのURLをsrc属性の値として持つ、
script要素を作成
3. 2で作成した要素をDOMツリー上に配置する

28. jsonFlickrFeed：検索結果の処理
•
Flickrからの検索結果は、jsonFlickrFeed関数の
呼び出しを行う文として返ってくる
•
jsonFlickrFeedを定義することで、検索結果を
プログラム中で利用できる
•
サンプルでは配列に結果を保存している

29. イベントハンドラの第1引数
•
発生したイベントに関する情報
•
•
発生源の要素
•
•
種類
発生時刻
発生源の要素の持つ情報を処理に利用できる

30. 開発ツールのTIPS

31. デバッガが利用できる

32. スタイルエディタを使って、
画面を見ながらCSSを編集できる

33. スタイルエディタの利用例
font-sizeを変更

34. インスペクタも利用できる
1. クリック
2. シミュレータ上の要素をクリック
3. その要素が選択される

35. アプリのリロード
•
アプリへの修正は、即座に反映されない
•
•
•
再インストールが必要
起動中のアプリの終了も必要
次の手順で行うとよい

36. アプリのリロード（つづき）
1. ホームボタンを押して、ホーム画面へ戻る
2. ホームボタンを長押しし、アプリを終了
3. アプリマネージャにある「更新」ボタンを押し
アプリを再インストール
4. アプリマネージャの「デバッグ」を押して起動

37. まとめ

38. Firefox OS 用アプリ
•
Webサイト + manifest.webapp
•
•
•
HTML+CSS+JSで実装
アプリの説明をmanifest.webappに書く
アプリマネージャを使って開発
•
シミュレータで動作させつつ、デバッグ
•
開発ツールを上手に使おう