Contenu connexe Similaire à できる!スマホアプリ:Webからはじまるアプリ Similaire à できる!スマホアプリ:Webからはじまるアプリ (20) Plus de Masami Yabushita (18) できる!スマホアプリ:Webからはじまるアプリ3. 自己紹介
• 藪下 正美
• FxOSコードリーディングの発起人
– コミュニティサイト
• http://reading.fxos.org/
– Facebookグループ
•
https://www.facebook.com/groups/fxos.code.re
ading/
– Githubグループ
• https://github.com/FxOS-Code-Reading-Group
17. まずは簡単にhello, world!
• まずはおなじみhello, world!しますね
– サンプルは hello フォルダです
– https://github.com/aoitan/FxDevCon20
14Kyoto/tree/master/hello
• hello, world!では大きく次のみっつのこ
とをします
– HTML(とかCSSとかJavaScript)を準備
– マニフェストを準備
– シミュレータでみてみる
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"
}
34. コンソール
• コンソールには二つの側面があります。
• 一つはログビューワとしての側面です。
– JavaScriptでconsoleのメソッドを呼んだとき
出力される先がコンソールになります。
• 困った時には変数の値を表示したりそこを通っている
か確認したりでconsole.log()はとてもよく使うのでよ
く見ることになります。
• もう一つはコマンドラインとしての側面です。
– ちょっとしたJavaScriptを実行したらどうなる
のか見てみたいときコンソールにJavaScriptを
書いてみることができます。
40. 今回は説明しないツール
• プロファイラ
• ネットワーク
– この辺りはパフォーマンス解析でとても役立つん
ですが今回は説明しません。
• 3Dビュー
– 見た目に楽しいので帰ったら是非遊んでください
ね!
• レスポンシブデザインビュー
– デスクトップでアプリを仮組みする間はちょく
ちょく使うんですが今回は説明しません。
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を使ってデスクトップで実行
しているアプリと値を共有します。
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を見てみるの
もいいですね。