Recomendados
Mais conteúdo relacionado
Mais procurados
Semelhante a できる！スマホアプリ：Webからはじまるアプリ
Semelhante a できる！スマホアプリ：Webからはじまるアプリ (20)
Mais de Masami Yabushita
Mais de Masami Yabushita (18)
できる！スマホアプリ：Webからはじまるアプリ
- 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! • 開発ツールの使い方 • APIを使ってみる • マーケットの話 • アプリ開発に関するドキュメント
- 6. 今日のサンプル置き場 • 今日使うサンプルは以下のURLにありま す – https://github.com/aoitan/FxDevCon20 14Kyoto – 短縮URLはこちら • http://goo.gl/TUZnhQ
- 8. ダウンロード方法 （zipをダウンロード） • 1. Download ZIPボタンをクリック
- 9. ダウンロード方法 （ダウンロードの確認） • 1. ダウンロードの確認画面で「ファイル を保存する」にチェックを入れてOK – 敢えてFirefoxのスクショしか貼らないけど大丈夫だよね！
- 11. アプリマネージャの起動 • ツール → Web開発 → アプリマネージャ • とたどってアプリマネージャを開きます
- 13. シミュレータのインストール２ • 1. アプリマネージャの解説ページで Install Simulatorボタンを押す
- 14. シミュレータのインストール３ • 1. AppManager add-onページでInstall Firefox OS v1.3 Simulator(stable)ボタンを押す • 2. Install ADB Helperボタンも押す
- 16. シミュレータの起動２ • 1. Firefox OS v1.3ボタンを押す
- 17. まずは簡単にhello, world! • まずはおなじみhello, world!しますね – サンプルは hello フォルダです – https://github.com/aoitan/FxDevCon20 14Kyoto/tree/master/hello • hello, world!では大きく次のみっつのこ とをします – HTML（とかCSSとかJavaScript）を準備 – マニフェストを準備 – シミュレータでみてみる
- 18. HTML（とかCSSとか JavaScript）を準備 • まずはふつうにHTMLとCSSと JavaScriptを用意します。 • 今回は – index.html – hello.css – hello.js • という名前で用意しました。
- 19. HTMLを準備 • hello, world!だけ表示するHTMLです。 • CSSとかJavaScriptから操作しやすいよ うにidとclassを設定してます。 • ボタンをクリックすると後で出てくるス クリプトが実行されます。
- 20. 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>
- 21. CSSを準備 • 今回は文字列の色を指定しています。 .hello { color: black; }
- 22. JavaScriptを準備 • 今回は文字列を変えるスクリプトです。 function helloJS() { var hello = document.getElementsByClassName('hello'); hello[0].innerHTML = 'hello, JavaScript!'; }
- 23. ブラウザで見る • hello, world!してますね！ • ボタンを押すとhello, JavaScript!してく れます！
- 25. manifest.webappを用意 • マニフェストはFirefox OSアプリの情報 を書いたファイルです。 • 今回は簡単にアプリの名前と概要、アプ リ起動時に実行するHTMLファイル、ア イコン、開発者情報、デフォルトの言語 を書いています。 • これでhello, world!もFirefox OSアプリ です！
- 26. 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" }
- 29. アプリマネージャに アプリを登録する２ • 1. 登録したいアプリのマニフェストが置 いてあるフォルダを開く • 2. フォルダーの選択ボタンを押す
- 31. シミュレータにアプリを インストールする • 1. シミュレータを起動する • 2. 更新ボタンを押す
- 33. 開発ツールの使い方 • hello, world!を開発ツールでいろいろい じっていきます。 • 特によく使うコンソールとインスペクタ、 デバッガを中心に話します。 • 見た目に楽しいスタイルエディタと ちょっとした手直しをするのにちょく ちょく使うスクラッチパッドもさらりと 話します。 • 他にもありますが今回は話しません。
- 34. コンソール • コンソールには二つの側面があります。 • 一つはログビューワとしての側面です。 – JavaScriptでconsoleのメソッドを呼んだとき 出力される先がコンソールになります。 • 困った時には変数の値を表示したりそこを通っている か確認したりでconsole.log()はとてもよく使うのでよ く見ることになります。 • もう一つはコマンドラインとしての側面です。 – ちょっとしたJavaScriptを実行したらどうなる のか見てみたいときコンソールにJavaScriptを 書いてみることができます。
- 35. インスペクタ • HTMLから表示上の範囲を調べることが できます。 • 逆に画面からHTMLの要素の位置を調べ ることもできます。 • まだ製品版には入っていませんが将来的 にはマージンやパディングも図示してく れるようになりますよ！ – 試してみたい方はAurora版というのを探し てきてインストールしてみてくださいね。
- 37. デモ • 実際やってみましょう。
- 40. 今回は説明しないツール • プロファイラ • ネットワーク – この辺りはパフォーマンス解析でとても役立つん ですが今回は説明しません。 • 3Dビュー – 見た目に楽しいので帰ったら是非遊んでください ね！ • レスポンシブデザインビュー – デスクトップでアプリを仮組みする間はちょく ちょく使うんですが今回は説明しません。
- 41. APIを使ってみる • 何のAPIも使ってないhello, world!ではつ まらないのでFirefox OSが提供するAPI を使ってみましょう。 • さらにFirefox OSが提供していないサー ドパーティのAPIも組み合わせていきます よ。 • 今回のセッションではAPIの使い方などは 詳しく説明しません。 – 今後GCG研究所に書いていくのでお楽しみに。
- 42. APIを使ったアプリ • デスクトップとデータを共有するブック マークアプリです。 – サンプルはこちら • https://github.com/aoitan/FxDevCon2014 Kyoto/tree/master/AoiroBookmark • 単に同じデータを見るだけではなくて更 新もリアルタイムに反映されるようにし てみます。
- 43. SystemXHR • SystemXHRはおなじみXMLHttpRequest です。 • ネット上からデータを取ってきたいときに便 利な子です。 • すでにHTML5でWebアプリを書いている人 にはクロスオリジンできるXHRというとう れしさが伝わるかもしれません。 • ちょっとした注意点があったりしますが以下 のURLで説明してます。 – http://www.gcg.bz/labo_blog/?p=408
- 44. DataStore API • DataStore APIはアプリ間でデータを共有したいとき に使うAPIです。 – 通常アプリが保存するデータはアプリ間でやり取りするこ とができません。 • 注）一部のデータ（画像とか音声とか動画）は可能です。 – DataStore APIで保存したデータはアプリ間でやりとり することが可能になります。 • データをほかの人に見せられるということはマッシュ アップできるということです。 – みんなで楽しい世界を広げていけますね！ • 今回はこのAPIを使ってFirefox OSが持っているブッ クマークを読み書きしてみます。
- 45. DropBox DataStore API • 実はDropboxにも同じ名前のAPIがあります。 • これもFirefox OSが提供している DataStore APIを同じくアプリの外とデー タを共有するための仕組みになっています。 – Firefox OSのDataStore APIはアプリ間でした がDropBox DataStore APIは端末間の共有です。 • 今回はこのAPIを使ってデスクトップで実行 しているアプリと値を共有します。
- 47. マーケットの話 • Firefox OSアプリはFirefox Marketplaceで流通しています。 • 作ったアプリはDevelopers Hubから登 録できます。 – 使っているAPIによっては審査があります。 – リジェクトされても審査員がアドバイスをく れます。 • ボランティア審査員になることもできますよ！
- 48. デスクトップやfor Androidから も利用できます！ • Firefox MarketplaceはFirefox OSだけ のものではありません。 • デスクトップ版やAndroid版からも利用 できます。 – デスクトップ版はこちら • https://marketplace.firefox.com/ – Android版はこちら • メニュー → ツール → アプリ
- 50. 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
- 51. Mozilla Developer Street • リファレンスというよりニュースの趣き がありますが新しい情報を探すなら Mozilla Developer Street (modest) で す。 – https://dev.mozilla.jp/ • 各種情報へのハブにもなっているので見 るところに迷ったらmodestを見てみるの もいいですね。
- 52. Mozilla Wiki • 最新の情報を先取りしやすいのはMDNよ りMozilla Wikiです。 – https://wiki.mozilla.org/Main_Page • ただしあまりまとまった書き方ではない ので慣れはいります。 • ほとんどのことはMDNで見つかるので Mozilla Wikiはあまり見ないかもしれませ んね。
- 53. Googleグループ Firefox OS(Boot2Gecko) • Firefox OSコミュニティが日々やり取り しているMLです。 – https://groups.google.com/forum/#!topi c/firefoxos/ • わからないことがあったら質問してみる と知ってる人が答えてくれますよ！
- 54. fxos.org • Firefox OSコミュニティのサイトです。 – http://fxos.org/ • イベント情報やイベントリポートもある のでコミュニティの雰囲気を知りたい方 は是非見てみてください。
- 55. FxOSコードリーディング • Firefox OSにかかわるソースコードを読 むグループです。 – http://reading.fxos.org/ – fxos.orgに間借りしてます。 • ソースコードを読んで知識を蓄えている 方々がいるのでこちらに質問してみるの もよいですよ！
- 56. さいごに • Firefox OSコミュニティはまだ若いコ ミュニティです。 • この機に気軽に参加して気軽に盛り上げ てくださいね！