論理思考とプログラミング 2013f#10

1,628 views
1,569 views

Published on

0 Comments
1 Like
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
1,628
On SlideShare
0
From Embeds
0
Number of Embeds
1,052
Actions
Shares
0
Downloads
4
Comments
0
Likes
1
Embeds 0
No embeds

No notes for slide

論理思考とプログラミング 2013f#10

  1. 1. 論理思考とプログラミング 2013年秋学期 #10 清水智公 (chiko@sfc.keio.ac.jp)
  2. 2. 今日の内容:アプリを作ろう • HTML+CSS+JSでアプリ開発 • 開発環境の準備 • サンプルアプリの作成と実行
  3. 3. ! 開発環境の準備 • テキストエディタ / IDE • シミュレータ、デバッガ、プロファイラ • ライブラリ、フレームワーク
  4. 4. 開発環境の準備
  5. 5. ! 開発環境の準備 • テキストエディタ / IDE
 → mi / Sublime Text 2 • シミュレータ、デバッガ、プロファイラ
 → Firefox beta • ライブラリ、フレームワーク
 → BuildingBlocks
  6. 6. Firefox Beta • http://www.mozilla.jp/firefox/preview/ • ダウンロードし、デスクトップに配置
  7. 7. アプリマネージャの起動 • ツール→Web開発→アプリマネージャ • 機能 • 開発中のアプリの管理 • シミュレータのインストール / 起動 • 実機を利用したデバッグの実行
  8. 8. シミュレータアドオンのインストール • 1.3 (unstable) をインストールする • ヘルプにある
 「シミュレータアドオンをインストールする」 からインストールページへ移動 • サイトにあるインストールボタンを押して、
 インストール
  9. 9. インストールを許可してください
  10. 10. Firefox OS シミュレータの起動 クリック クリック
  11. 11. Firefox OS シミュレータ ホームボタン
  12. 12. アプリをインストールしてみよう Marketplace クリック
  13. 13. ホーム画面でホームボタン長押し 長押しでアプリ終了画面へ
  14. 14. サンプルアプリ
  15. 15. 世界遺産時計 クリック クリック
  16. 16. 完成品を動かそう • URL:http://goo.gl/2Hf9I7 • • • zip ファイル 展開するとアプリ一式が得られる アプリマネージャに登録して動かす
  17. 17. 完成品を動かそう(つづき) クリックしてアプリのフォルダを選択
  18. 18. 完成品を動かそう(つづき) シミュレータを起動した状態で「更新」をクリック
  19. 19. 完成品を動かそう(つづき) • シミュレータ上に
 インストールされる • アイコンをクリックで起動
  20. 20. ファイル構成 • manifest.webapp:
 メタデータ。JSON形式 • index.html:HTMLファイル • js/clock.js:ロジック • css ファイル:スタイル定義
  21. 21. Building Blocks • http://buildingfirefoxos.com/ • スマホアプリ用のCSSフレームワーク • CSS ファイル + JS +マークアップ規約 • 規約に従ってマークアップすることで、
 画面をレイアウトできる
  22. 22. manifest.webapp の記述内容 • アイコンの場所 • 最初に表示するファイル • アプリのタイトル • 作成者に関する情報 • etc
  23. 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. 24. 関数の分類 • 起動時に1回だけ呼ばれるもの • 定期的に呼ばれるもの • メニュー要素のクリック時に呼ばれるもの
  25. 25. setTimeout(func, delay) • delay ミリ秒経過後、関数funcを呼び出す • サンプルでは時計の更新に利用している • updateを1000ミリ秒ごとに呼び出す • updateの最後で、update自身を引数に指定 してsetTimeoutを呼び出している
  26. 26. loadPhoto: Flickrを検索する関数 • Flickr (http://flickr.com/) : 写真共有サービス • • • JavaScriptのプログラムとして結果を返す http://www.flickr.com/services/feeds/docs/ photos_public/ これを利用して写真の検索を行う
  27. 27. loadPhotoの概要 1. 検索内容を反映したURLを作成 2. そのURLをsrc属性の値として持つ、
 script要素を作成 3. 2で作成した要素をDOMツリー上に配置する
  28. 28. jsonFlickrFeed:検索結果の処理 • Flickrからの検索結果は、jsonFlickrFeed関数の 呼び出しを行う文として返ってくる • jsonFlickrFeedを定義することで、検索結果を プログラム中で利用できる • サンプルでは配列に結果を保存している
  29. 29. イベントハンドラの第1引数 • 発生したイベントに関する情報 • • 発生源の要素 • • 種類 発生時刻 発生源の要素の持つ情報を処理に利用できる
  30. 30. 開発ツールのTIPS
  31. 31. デバッガが利用できる
  32. 32. スタイルエディタを使って、
 画面を見ながらCSSを編集できる
  33. 33. スタイルエディタの利用例 font-sizeを変更
  34. 34. インスペクタも利用できる 1. クリック 2. シミュレータ上の要素をクリック 3. その要素が選択される
  35. 35. アプリのリロード • アプリへの修正は、即座に反映されない • • • 再インストールが必要 起動中のアプリの終了も必要 次の手順で行うとよい
  36. 36. アプリのリロード(つづき) 1. ホームボタンを押して、ホーム画面へ戻る 2. ホームボタンを長押しし、アプリを終了 3. アプリマネージャにある「更新」ボタンを押し アプリを再インストール 4. アプリマネージャの「デバッグ」を押して起動
  37. 37. まとめ
  38. 38. Firefox OS 用アプリ • Webサイト + manifest.webapp • • • HTML+CSS+JSで実装 アプリの説明をmanifest.webappに書く アプリマネージャを使って開発 • シミュレータで動作させつつ、デバッグ • 開発ツールを上手に使おう

×