できる！スマホアプリ：Webからはじまるアプリ for CMU16
•
0 likes•1,477 views
Tutorial session of Firefox OS for Creators Meetup 16.
Recommended
More Related Content
What's hot
What's hot (20)
Viewers also liked
Viewers also liked (20)
Similar to できる！スマホアプリ：Webからはじまるアプリ for CMU16
Similar to できる！スマホアプリ：Webからはじまるアプリ for CMU16 (20)
More from Masami Yabushita
More from Masami Yabushita (15)
できる！スマホアプリ：Webからはじまるアプリ for CMU16
- 2. はじめに
- 3. 自己紹介 • 藪下 正美 • FxOSコードリーディングの発起人 – コミュニティサイト • http://reading.fxos.org/ – Facebookグループ • https://www.facebook.com/groups/fxos.code.re ading/ – Githubグループ • https://github.com/FxOS-Code-Reading-Group
- 4. 会社紹介 • 株式会社グローバルサイバーグループ – 基本的に組み込み系の会社 – 携帯電話の案件がメイン – Firefox OSは次世代モバイルプラットフォー ムとして期待 • カーネルからアプリまでどこのレイヤでもやりま すよ！
- 5. アジェンダ • まずは簡単にhello, world! • 開発ツールの使い方 • アプリのデモ • マーケットの話 • アプリ開発に関するドキュメント • 付録
- 7. まずは簡単にhello, world! • まずはおなじみhello, world!しますね – サンプルは hello フォルダです – https://github.com/aoitan/FxDevCon20 14Kyoto/tree/master/hello • hello, world!では大きく次のみっつのこ とをします – HTML（とかCSSとかJavaScript）を準備 – マニフェストを準備 – シミュレータでみてみる
- 8. HTML（とかCSSとか JavaScript）を準備 • まずはふつうにHTMLとCSSと JavaScriptを用意します。 • 今回は – index.html – hello.css – hello.js • という名前で用意しました。
- 9. HTMLを準備 • hello, world!だけ表示するHTMLです。 • CSSとかJavaScriptから操作しやすいよ うにidとclassを設定してます。 • ボタンをクリックすると後で出てくるス クリプトが実行されます。
- 10. HTMLを準備 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>hello, world!</title> <script src="hello.js"></script> <link rel="stylesheet" type="text/css" href="hello.css"> </head> <body> <div class="hello" id="hello"> hello, world! </div> <div class="buttons"> <input type="button" value="run script" onclick="helloJS();"> </div> </body> </html>
- 11. CSSを準備 • 今回は文字列の色を指定しています。 .hello { color: black; }
- 12. JavaScriptを準備 • 今回は文字列を変えるスクリプトです。 function helloJS() { var hello = document.getElementsByClassName('hello'); hello[0].innerHTML = 'hello, JavaScript!'; }
- 13. ブラウザで見る • hello, world!してますね！ • ボタンを押すとhello, JavaScript!してく れます！
- 15. manifest.webappを用意 • マニフェストはFirefox OSアプリの情報 を書いたファイルです。 • 今回は簡単にアプリの名前と概要、アプ リ起動時に実行するHTMLファイル、ア イコン、開発者情報、デフォルトの言語 を書いています。 • これでhello, world!もFirefox OSアプリ です！
- 16. manifest.webappを用意 { "name": "Hello App", "description": "Firefox Developers Conference 2014 in Kyoto Sample App", "launch_path": "/index.html", "icons": { "128": "/img/icon-128.png" }, "developer": { "name": "YABUSHITA Masami", "url": "http://www.gcg.bz/labo_blog/?author=2" }, "default_locale": "en" }
- 18. 開発ツールの使い方
- 19. 開発ツールの使い方 • hello, world!を開発ツールでいろいろい じっていきます。 • 特によく使うコンソールとインスペクタ、 デバッガを中心に話します。 • 他にもありますが今回は話しません。
- 20. コンソール • コンソールには二つの側面があります。 • 一つはログビューワとしての側面です。 – JavaScriptでconsoleのメソッドを呼んだとき 出力される先がコンソールになります。 • 困った時には変数の値を表示したりそこを通っている か確認したりでconsole.log()はとてもよく使うのでよ く見ることになります。 • もう一つはコマンドラインとしての側面です。 – ちょっとしたJavaScriptを実行したらどうなる のか見てみたいときコンソールにJavaScriptを 書いてみることができます。
- 21. インスペクタ • HTMLから表示上の範囲を調べることが できます。 • 逆に画面からHTMLの要素の位置を調べ ることもできます。 • まだ製品版には入っていませんが将来的 にはマージンやパディングも図示してく れるようになりますよ！ – 試してみたい方はAurora版というのを探し てきてインストールしてみてくださいね。
- 23. デモ • 実際やってみましょう。
- 24. 今回は説明しないツール • スタイルエディタ – スタイルを書き換えることができます。 – リアルタイムに反映されるので見た目に楽しいですよ！ • スクラッチパッド – スクラッチパッドはコンソールよりもうちょっとちゃんとJavaScriptを書きたいと きに使います。 – 保存できたり補完も利いたりするのでちょっとした開発ならブラウザ上でできます ね！ • プロファイラ • ネットワーク – この辺りはパフォーマンス解析でとても役立つんですが今回は説明しません。 • 3Dビュー – 見た目に楽しいので帰ったら是非遊んでくださいね！ • レスポンシブデザインビュー – デスクトップでアプリを仮組みする間はちょくちょく使うんですが今回は説明しませ ん。
- 25. アプリのデモ
- 26. APIを使ったアプリ • デスクトップとデータを共有するブック マークアプリです。 – サンプルはこちら • https://github.com/aoitan/FxDevCon2014 Kyoto/tree/master/AoiroBookmark • 単に同じデータを見るだけではなくて更 新もリアルタイムに反映されるようにし てみます。
- 28. マーケットの話
- 29. マーケットの話 • Firefox OSアプリはFirefox Marketplaceで流通しています。 • 作ったアプリはDevelopers Hubから登 録できます。 – 使っているAPIによっては審査があります。 – リジェクトされても審査員がアドバイスをく れます。 • ボランティア審査員になることもできますよ！
- 30. デスクトップやfor Androidから も利用できます！ • Firefox MarketplaceはFirefox OSだけ のものではありません。 • デスクトップ版やAndroid版からも利用 できます。 – デスクトップ版はこちら • https://marketplace.firefox.com/ – Android版はこちら • メニュー → ツール → アプリ
- 31. アプリ開発に関する ドキュメント
- 33. Mozilla Developer Network • ほとんどの情報はMozilla Developer Network (MDN) にあります。 – https://developer.mozilla.org/ja/ • アプリを作るときによく読むところはここら 辺が入口になります。 – https://developer.mozilla.org/ja/docs/Web – https://developer.mozilla.org/ja/docs/Web API • チュートリアルもありますよ！ – https://developer.mozilla.org/ja/docs/Web/ Tutorials
- 34. Mozilla Developer Street • リファレンスというよりニュースの趣き がありますが新しい情報を探すなら Mozilla Developer Street (modest) で す。 – https://dev.mozilla.jp/ • 各種情報へのハブにもなっているので見 るところに迷ったらmodestを見てみるの もいいですね。
- 35. Mozilla Wiki • 最新の情報を先取りしやすいのはMDNよ りMozilla Wikiです。 – https://wiki.mozilla.org/Main_Page • ただしあまりまとまった書き方ではない ので慣れはいります。 • ほとんどのことはMDNで見つかるので Mozilla Wikiはあまり見ないかもしれませ んね。
- 36. Googleグループ Firefox OS(Boot2Gecko) • Firefox OSコミュニティが日々やり取り しているMLです。 – https://groups.google.com/forum/#!topi c/firefoxos/ • わからないことがあったら質問してみる と知ってる人が答えてくれますよ！
- 37. fxos.org • Firefox OSコミュニティのサイトです。 – http://fxos.org/ • イベント情報やイベントリポートもある のでコミュニティの雰囲気を知りたい方 は是非見てみてください。
- 38. FxOSコードリーディング • Firefox OSにかかわるソースコードを読 むグループです。 – http://reading.fxos.org/ – fxos.orgに間借りしてます。 • ソースコードを読んで知識を蓄えている 方々がいるのでこちらに質問してみるの もよいですよ！
- 39. さいごに • Firefox OSコミュニティはまだ若いコ ミュニティです。 • この機に気軽に参加して気軽に盛り上げ てくださいね！
- 40. 付録
- 41. サンプル
- 42. 今日のサンプル置き場 • 今日使うサンプルは以下のURLにありま す – https://github.com/aoitan/FxDevCon20 14Kyoto – 短縮URLはこちら • http://goo.gl/TUZnhQ
- 44. ダウンロード方法 （zipをダウンロード） • 1. Download ZIPボタンをクリック
- 45. ダウンロード方法 （ダウンロードの確認） • 1. ダウンロードの確認画面で「ファイル を保存する」にチェックを入れてOK – 敢えてFirefoxのスクショしか貼らないけど大丈夫だよね！
- 46. シミュレータのインストール
- 48. アプリマネージャの起動 • ツール → Web開発 → アプリマネージャ • とたどってアプリマネージャを開きます
- 50. シミュレータのインストール２ • 1. アプリマネージャの解説ページで Install Simulatorボタンを押す
- 51. シミュレータのインストール３ • 1. AppManager add-onページでInstall Firefox OS v1.3 Simulator(stable)ボタンを押す • 2. Install ADB Helperボタンも押す
- 53. シミュレータの起動２ • 1. Firefox OS v1.3ボタンを押す
- 56. アプリマネージャに アプリを登録する２ • 1. 登録したいアプリのマニフェストが置 いてあるフォルダを開く • 2. フォルダーの選択ボタンを押す
- 58. シミュレータにアプリを インストールする • 1. シミュレータを起動する • 2. 更新ボタンを押す