Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.
できる!スマホアプリ
Webからはじまるアプリ開発
株式会社
グローバルサイバーグループ
藪下 正美
はじめに
自己紹介
• 藪下 正美
• FxOSコードリーディングの発起人
– コミュニティサイト
• http://reading.fxos.org/
– Facebookグループ
•
https://www.facebook.com/groups/f...
会社紹介
• 株式会社グローバルサイバーグループ
– 基本的に組み込み系の会社
– 携帯電話の案件がメイン
– Firefox OSは次世代モバイルプラットフォー
ムとして期待
• カーネルからアプリまでどこのレイヤでもやりま
すよ!
アジェンダ
• まずは簡単にhello, world!
• 開発ツールの使い方
• APIを使ってみる
• マーケットの話
• アプリ開発に関するドキュメント
今日のサンプル置き場
• 今日使うサンプルは以下のURLにありま
す
– https://github.com/aoitan/FxDevCon20
14Kyoto
– 短縮URLはこちら
• http://goo.gl/TUZnhQ
ダウンロード方法
(githubにアクセス)
• 1.https://github.com/aoitan/FxDevC
on2014Kyoto にアクセス
ダウンロード方法
(zipをダウンロード)
• 1. Download ZIPボタンをクリック
ダウンロード方法
(ダウンロードの確認)
• 1. ダウンロードの確認画面で「ファイル
を保存する」にチェックを入れてOK
– 敢えてFirefoxのスクショしか貼らないけど大丈夫だよね!
シミュレータの準備
• 今日のサンプルはシミュレータで動かし
てみます
• シミュレータを準備していきましょう
アプリマネージャの起動
• ツール → Web開発 → アプリマネージャ
• とたどってアプリマネージャを開きます
シミュレータのインストール1
• 1. シミュレータをインストールボタンを
押す
シミュレータのインストール2
• 1. アプリマネージャの解説ページで
Install Simulatorボタンを押す
シミュレータのインストール3
• 1. AppManager add-onページでInstall Firefox OS
v1.3 Simulator(stable)ボタンを押す
• 2. Install ADB Helperボタンも押す
シミュレータの起動1
• 1. シミュレータを起動ボタンを押す
シミュレータの起動2
• 1. Firefox OS v1.3ボタンを押す
まずは簡単にhello, world!
• まずはおなじみhello, world!しますね
– サンプルは hello フォルダです
– https://github.com/aoitan/FxDevCon20
14Kyoto/tree/ma...
HTML(とかCSSとか
JavaScript)を準備
• まずはふつうにHTMLとCSSと
JavaScriptを用意します。
• 今回は
– index.html
– hello.css
– hello.js
• という名前で用意しました。
HTMLを準備
• hello, world!だけ表示するHTMLです。
• CSSとかJavaScriptから操作しやすいよ
うにidとclassを設定してます。
• ボタンをクリックすると後で出てくるス
クリプトが実行されます。
HTMLを準備
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>hello, world!</title>
<script src="hello.js"></script>...
CSSを準備
• 今回は文字列の色を指定しています。
.hello {
color: black;
}
JavaScriptを準備
• 今回は文字列を変えるスクリプトです。
function helloJS() {
var hello =
document.getElementsByClassName('hello');
hello[0].inn...
ブラウザで見る
• hello, world!してますね!
• ボタンを押すとhello, JavaScript!してく
れます!
アプリにしよう
• 次はこの単なるHTMLをアプリにします。
• アプリにするためにはマニフェストを用
意します。
manifest.webappを用意
• マニフェストはFirefox OSアプリの情報
を書いたファイルです。
• 今回は簡単にアプリの名前と概要、アプ
リ起動時に実行するHTMLファイル、ア
イコン、開発者情報、デフォルトの言語
を書いてい...
manifest.webappを用意
{
"name": "Hello App",
"description": "Firefox Developers Conference 2014 in Kyoto
Sample App",
"launch...
シミュレータで見てみる
• 今用意したHTMLをシミュレータで見て
みましょう。
• まずはシミュレータにアプリをインス
トールします。
アプリマネージャに
アプリを登録する1
• 1. パッケージアプリを追加の+ボタンを
押す
アプリマネージャに
アプリを登録する2
• 1. 登録したいアプリのマニフェストが置
いてあるフォルダを開く
• 2. フォルダーの選択ボタンを押す
アプリマネージャに
アプリを登録する3
• 1. アプリマネージャにアプリが出て来た
らアプリマネージャへの登録完了です!
シミュレータにアプリを
インストールする
• 1. シミュレータを起動する
• 2. 更新ボタンを押す
シミュレータにアプリを
インストールした
• 1. シミュレータ上にアイコンが出てきた
ら成功です!
開発ツールの使い方
• hello, world!を開発ツールでいろいろい
じっていきます。
• 特によく使うコンソールとインスペクタ、
デバッガを中心に話します。
• 見た目に楽しいスタイルエディタと
ちょっとした手直しをするのにちょく
ちょ...
コンソール
• コンソールには二つの側面があります。
• 一つはログビューワとしての側面です。
– JavaScriptでconsoleのメソッドを呼んだとき
出力される先がコンソールになります。
• 困った時には変数の値を表示したりそこを通っ...
インスペクタ
• HTMLから表示上の範囲を調べることが
できます。
• 逆に画面からHTMLの要素の位置を調べ
ることもできます。
• まだ製品版には入っていませんが将来的
にはマージンやパディングも図示してく
れるようになりますよ!
– 試...
デバッガ
• JavaScriptの実行を止めてその時の変数
の状態などを見ることができます。
– 変数の値を変えることもできるのでこっちの
場合はどうなるのかなとかも試せます。
デモ
• 実際やってみましょう。
スタイルエディタ
• スタイルを書き換えることができます。
• リアルタイムに反映されるので見た目に
楽しいですよ!
スクラッチパッド
• スクラッチパッドはコンソールよりもう
ちょっとちゃんとJavaScriptを書きたい
ときに使います。
• 保存できたり補完も利いたりするので
ちょっとした開発ならブラウザ上ででき
ますね!
今回は説明しないツール
• プロファイラ
• ネットワーク
– この辺りはパフォーマンス解析でとても役立つん
ですが今回は説明しません。
• 3Dビュー
– 見た目に楽しいので帰ったら是非遊んでください
ね!
• レスポンシブデザインビュー
–...
APIを使ってみる
• 何のAPIも使ってないhello, world!ではつ
まらないのでFirefox OSが提供するAPI
を使ってみましょう。
• さらにFirefox OSが提供していないサー
ドパーティのAPIも組み合わせていきます...
APIを使ったアプリ
• デスクトップとデータを共有するブック
マークアプリです。
– サンプルはこちら
• https://github.com/aoitan/FxDevCon2014
Kyoto/tree/master/AoiroBookm...
SystemXHR
• SystemXHRはおなじみXMLHttpRequest
です。
• ネット上からデータを取ってきたいときに便
利な子です。
• すでにHTML5でWebアプリを書いている人
にはクロスオリジンできるXHRというとう
れ...
DataStore API
• DataStore APIはアプリ間でデータを共有したいとき
に使うAPIです。
– 通常アプリが保存するデータはアプリ間でやり取りするこ
とができません。
• 注)一部のデータ(画像とか音声とか動画)は可能です...
DropBox DataStore API
• 実はDropboxにも同じ名前のAPIがあります。
• これもFirefox OSが提供している
DataStore APIを同じくアプリの外とデー
タを共有するための仕組みになっています。
– ...
デモ
• いろいろ触ってみますよ!
マーケットの話
• Firefox OSアプリはFirefox
Marketplaceで流通しています。
• 作ったアプリはDevelopers Hubから登
録できます。
– 使っているAPIによっては審査があります。
– リジェクトされても...
デスクトップやfor Androidから
も利用できます!
• Firefox MarketplaceはFirefox OSだけ
のものではありません。
• デスクトップ版やAndroid版からも利用
できます。
– デスクトップ版はこちら
•...
アプリ開発に関するドキュメント
• アプリ開発しようにもわからないことた
くさんありますよね。
• わからないことがあった時によく見る資
料を紹介します。
Mozilla Developer Network
• ほとんどの情報はMozilla Developer
Network (MDN) にあります。
– https://developer.mozilla.org/ja/
• アプリを作るときに...
Mozilla Developer Street
• リファレンスというよりニュースの趣き
がありますが新しい情報を探すなら
Mozilla Developer Street (modest) で
す。
– https://dev.mozill...
Mozilla Wiki
• 最新の情報を先取りしやすいのはMDNよ
りMozilla Wikiです。
– https://wiki.mozilla.org/Main_Page
• ただしあまりまとまった書き方ではない
ので慣れはいります。
•...
Googleグループ
Firefox OS(Boot2Gecko)
• Firefox OSコミュニティが日々やり取り
しているMLです。
– https://groups.google.com/forum/#!topi
c/firefoxos...
fxos.org
• Firefox OSコミュニティのサイトです。
– http://fxos.org/
• イベント情報やイベントリポートもある
のでコミュニティの雰囲気を知りたい方
は是非見てみてください。
FxOSコードリーディング
• Firefox OSにかかわるソースコードを読
むグループです。
– http://reading.fxos.org/
– fxos.orgに間借りしてます。
• ソースコードを読んで知識を蓄えている
方々がいる...
さいごに
• Firefox OSコミュニティはまだ若いコ
ミュニティです。
• この機に気軽に参加して気軽に盛り上げ
てくださいね!
おしまい
• ご清聴ありがとうございました。
Upcoming SlideShare
Loading in …5
×

できる!スマホアプリ:Webからはじまるアプリ

  • Login to see the comments

できる!スマホアプリ:Webからはじまるアプリ

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

×