できる!スマホアプリ
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からはじまるアプリ

3,714 views
3,551 views

Published on

0 Comments
2 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
3,714
On SlideShare
0
From Embeds
0
Number of Embeds
2,635
Actions
Shares
0
Downloads
16
Comments
0
Likes
2
Embeds 0
No embeds

No notes for slide

できる!スマホアプリ: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. おしまい • ご清聴ありがとうございました。

×