Firefox OS アプリ開発
- 2. aaaabout:mebout:mebout:mebout:me ? 中央大学理工学研究科の学生 ? 家や研究室では LAN ケーブルを張り巡らせる担当 ? Firefox 学生マーケティングチーム – アドオン勉強会開催してます。 2
- 3. Table of contentsTable of contentsTable of contentsTable of contents ? Firefox OS アプリについて – アプリを作ろう – 既存のアプリを Hack しよう 3
- 4. FirefoxFirefoxFirefoxFirefox OSOSOSOS アプリのアプリのアプリのアプリの作作作作りりりり方方方方 ? Web 技術だけで作れる！ ? Web ページを作るのと同じように Web 技術だけで 作れる！ ? Web 技術だけで作れる！ 4
- 5. 5 ホーム画面 Marketplace 電話 ブラウザ Everything 音楽 設定 カレンダー
- 7. 必要必要必要必要なななな環境環境環境環境 ? パソコン ? Mozilla Firefox Firefox が動くPC 最新版にしておきましょう 7
- 8. 必要必要必要必要なななな環境環境環境環境 ? エディタ ? Firefox OS Simulator あった方がよい 端末をお持ちでなくても アプリ開発で便利なツール 8
- 10. FirefoxFirefoxFirefoxFirefox OS SimulatorOS SimulatorOS SimulatorOS Simulator とはとはとはとは？？？？ ? Firefox OS を PC で起動するアドオン ? 開発者向けツールがついている ? 実機を使わずにアプリ開発ができる！ リリース版 最新開発版 10
- 12. リリースリリースリリースリリース版版版版 AMOAMOAMOAMO からからからから 12 SimulatorSimulatorSimulatorSimulator https://addons.mozilla.org/ja/firefox/addon/firefox-os-simulator/ (短縮) http://bit.ly/FxOSSimu で検索
- 17. 最新開発版最新開発版最新開発版最新開発版 17 http://people.mozilla.org/~myk/r2d2b2g/ (短縮) http://bit.ly/FxOSSmltr SimulatorSimulatorSimulatorSimulator ダウンロードしたxpiファイルは Firefox にドラッグアンドドロップで アドオンをインストールできる。
- 18. 過去過去過去過去のバージョンのバージョンのバージョンのバージョン FTPFTPFTPFTP ? 正しく動作しない場合は一度アンインストールや違 うバージョンを入れてみましょう。 18 https://ftp.mozilla.org/pub/mozilla.org/labs/r2d2b2g/ SimulatorSimulatorSimulatorSimulator (短縮) http://bit.ly/OlderFx
- 20. インストールがインストールがインストールがインストールが完了完了完了完了するとするとするとすると ツール → Web 開発 に「Firefox OS Simulator」が追加 されます。 20 SimulatorSimulatorSimulatorSimulator
- 21. SimulatorSimulatorSimulatorSimulator をををを起動起動起動起動 21 ここをクリック SimulatorSimulatorSimulatorSimulator
- 23. それではそれではそれではそれでは、、、、アプリのアプリのアプリのアプリの開発開発開発開発をををを始始始始めましょうめましょうめましょうめましょう ? アプリ開発？？ ? 難しくありません。 ? 必要なのは Web 技術だけ！（何度も言います） まず、アプリ作成用のディレクトリを用意しましょう。 23
- 24. マニフェストマニフェストマニフェストマニフェスト manifest.webapp というマニフェストファイルを作 成します。 文字コードは UTF-8 without BOM が良いです。 See also https://marketplace.firefox.com/developers/docs/manifests { "name": "アプリの名前", "description": "アプリの説明", "launch_path": "/index.html", "icons": { "128": "/img/icon-128.png" }, "developer": { "name": "Akimoto Yoshitomo", "url": "http://your-homepage-here.org" }, "default_locale": "ja" } http://y-misc.org/fxos.html 24
- 25. マニフェストマニフェストマニフェストマニフェスト 25 { "name": "アプリの名前", "description": "アプリの説明", "launch_path": "/index.html", "icons": { "128": "/img/icon-128.png" }, "developer": { "name": "Akimoto Yoshitomo", "url": "http://your-homepage-here.org" }, "default_locale": "ja" } 起動時に読み込むページ ※ルート相対パス アプリのアイコン ※ルート相対パス 開発者情報 標準の言語
- 26. マニフェストマニフェストマニフェストマニフェスト 26 "icons": { "aaa": "/img/xxx.png", "bbb": "/img/yyy.png" }, Windows 7 と Android ? 16 x 16 ? 32 x 32 ? 48 x 48 ? 64 x 64 ? 128 x 128 ? 256 x 256 PNG Firefox OS ? 30 x 30 ? 60 x 60 ※ ドロップシャドウや 丸い背景を付けない PNG Firefox OS のアプリアイコンのスタイルガイド http://www.mozilla.org/en-US/styleguide/products/firefoxos/icons/
- 27. マニフェストマニフェストマニフェストマニフェスト 27 { "name": "アプリの名前", "description": "アプリの説明", "launch_path": "/index.html", "icons": { "128": "/img/icon-128.png" }, "developer": { "name": "Akimoto Yoshitomo", "url": "http://your-homepage-here.org" }, "default_locale": "ja" } 起動時に読み込むページ ※ルート相対パス アプリのアイコン ※ルート相対パス 開発者情報 標準の言語
- 28. index.htmlindex.htmlindex.htmlindex.html をををを書書書書こうこうこうこう HTML と CSS と JavaScript だけ！ ? 先ほど作成したディレクトリに index.html を作成し ます。 <!DOCTYPE html> <html> <head> <title>アプリ名</title> </head> <body> なにか文字を書いて！ </body> </html> 28http://y-misc.org/fxos.html
- 29. HTMLHTMLHTMLHTML のののの基本的基本的基本的基本的なななな書書書書きききき方方方方 <!DOCTYPE html> <html> <head> <title>アプリ名</title> </head> <link rel="stylesheet" type="text/css" href="style/style.css"> <script src=/slideshow/akimoto20130312/21261263/"script/script.js"></script> </head> <body> なにか文字を書いて！ </body> </html> 29
- 30. 注意点注意点注意点注意点 ○○○○ <script src=/slideshow/akimoto20130312/21261263/"script/script.js"></script> ×××× <script> var hoge=0; </script> 30 スクリプトを参照する形はOK script タグに挟まれたコードは実?されない！
- 31. HTMLHTMLHTMLHTML のののの基本的基本的基本的基本的なななな書書書書きききき方方方方 <!DOCTYPE html> <html> <head> <title>アプリ名</title> </head> <link rel="stylesheet" type="text/css" href="style/style.css"> <script src=/slideshow/akimoto20130312/21261263/"script/script.js"></script> </head> <body> なにか文字を書いて！ </body> </html> 31 CSS ファイルや JS ファイルや画像ファイルの参照は 相対パスでの指定でもOK jQuery などの js ライブラリを入れることも可能 あとは、いつも通りの Web 開発と同じ！
- 32. デザインをデザインをデザインをデザインを統一統一統一統一したいしたいしたいしたい Building Blocks というものがある。 ( http://buildingfirefoxos.com/ ) どのような UI があるのか書いてある！ 32
- 33. Building BlocksBuilding BlocksBuilding BlocksBuilding Blocks Building Block ガイドがある。 ( http://buildingfirefoxos.com/ ) どのようなテンプレートがあるのか書いてある！ 33
- 34. Building BlocksBuilding BlocksBuilding BlocksBuilding Blocks 34
- 35. Building BlocksBuilding BlocksBuilding BlocksBuilding Blocks 35
- 36. 36 <!DOCTYPE html> <html> <head> <title>アプリ名</title> <link rel="stylesheet" type="text/css" href="shared/style/headers.css"> </head> <body> なにか文字を書いて！ </body> </html>
- 37. Building BlocksBuilding BlocksBuilding BlocksBuilding Blocks 37 必要部分を選択して
- 38. 38 <!DOCTYPE html> <html> <head> <title>アプリ名</title> <link rel="stylesheet" type="text/css" href="shared/style/headers.css"> </head> <body> <section role="region"> <header> <menu type="toolbar"> <a href="#"><span class="icon icon-edit">edit</span></a> <a href="#"><span class="icon icon-add">add</span></a> </menu> <h1>Messages</h1> </header> </section> </body> </html>
- 41. イメージ 41
- 46. アプリを見てみよう！ 46
- 47. アプリをアプリをアプリをアプリを HACKHACKHACKHACK しようしようしようしよう Hack the Web App. 47
- 49. アプリディレクトリをアプリディレクトリをアプリディレクトリをアプリディレクトリを開開開開きますきますきますきます extensions → r2d2b2g@mozilla.org → profile → webapps にインストールされているアプリ一覧があります。 49
- 50. アプリディレクトリをアプリディレクトリをアプリディレクトリをアプリディレクトリを開開開開きますきますきますきます 1. ディレクトリの中の zip ファイルを解凍する。 2. 書き換える。 3. 再び zip にして中に戻す。 50
- 56. zzzzipipipip にしたらにしたらにしたらにしたら ? application.zip にリネーム ? もともとの zip ファイルを上書きします。 シミュレータを起動しましょう。 56