できる!スマホアプリ:Webからはじまるアプリ
Upcoming SlideShare
Loading in...5
×
 

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

on

  • 2,800 views

 

Statistics

Views

Total Views
2,800
Views on SlideShare
555
Embed Views
2,245

Actions

Likes
2
Downloads
13
Comments
0

8 Embeds 2,245

http://sosukeblog.com 1295
http://unsolublesugar.com 432
http://www.gcg.bz 410
http://shinyatto.hateblo.jp 99
http://s.deeeki.com 5
http://www.feedspot.com 2
http://plus.url.google.com 1
http://feedly.com 1
More...

Accessibility

Categories

Upload Details

Uploaded via as Adobe PDF

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

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

  • できる!スマホアプリ Webからはじまるアプリ開発 株式会社 グローバルサイバーグループ 藪下 正美
  • はじめに
  • 自己紹介 • 藪下 正美 • FxOSコードリーディングの発起人 – コミュニティサイト • http://reading.fxos.org/ – Facebookグループ • https://www.facebook.com/groups/fxos.code.re ading/ – Githubグループ • https://github.com/FxOS-Code-Reading-Group
  • 会社紹介 • 株式会社グローバルサイバーグループ – 基本的に組み込み系の会社 – 携帯電話の案件がメイン – 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/master/hello • hello, world!では大きく次のみっつのこ とをします – HTML(とかCSSとかJavaScript)を準備 – マニフェストを準備 – シミュレータでみてみる
  • 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> <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>
  • CSSを準備 • 今回は文字列の色を指定しています。 .hello { color: black; }
  • JavaScriptを準備 • 今回は文字列を変えるスクリプトです。 function helloJS() { var hello = document.getElementsByClassName('hello'); hello[0].innerHTML = 'hello, JavaScript!'; }
  • ブラウザで見る • hello, world!してますね! • ボタンを押すとhello, JavaScript!してく れます!
  • アプリにしよう • 次はこの単なるHTMLをアプリにします。 • アプリにするためにはマニフェストを用 意します。
  • manifest.webappを用意 • マニフェストはFirefox OSアプリの情報 を書いたファイルです。 • 今回は簡単にアプリの名前と概要、アプ リ起動時に実行するHTMLファイル、ア イコン、開発者情報、デフォルトの言語 を書いています。 • これでhello, world!もFirefox OSアプリ です!
  • 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" }
  • シミュレータで見てみる • 今用意したHTMLをシミュレータで見て みましょう。 • まずはシミュレータにアプリをインス トールします。
  • アプリマネージャに アプリを登録する1 • 1. パッケージアプリを追加の+ボタンを 押す
  • アプリマネージャに アプリを登録する2 • 1. 登録したいアプリのマニフェストが置 いてあるフォルダを開く • 2. フォルダーの選択ボタンを押す
  • アプリマネージャに アプリを登録する3 • 1. アプリマネージャにアプリが出て来た らアプリマネージャへの登録完了です!
  • シミュレータにアプリを インストールする • 1. シミュレータを起動する • 2. 更新ボタンを押す
  • シミュレータにアプリを インストールした • 1. シミュレータ上にアイコンが出てきた ら成功です!
  • 開発ツールの使い方 • hello, world!を開発ツールでいろいろい じっていきます。 • 特によく使うコンソールとインスペクタ、 デバッガを中心に話します。 • 見た目に楽しいスタイルエディタと ちょっとした手直しをするのにちょく ちょく使うスクラッチパッドもさらりと 話します。 • 他にもありますが今回は話しません。
  • コンソール • コンソールには二つの側面があります。 • 一つはログビューワとしての側面です。 – JavaScriptでconsoleのメソッドを呼んだとき 出力される先がコンソールになります。 • 困った時には変数の値を表示したりそこを通っている か確認したりでconsole.log()はとてもよく使うのでよ く見ることになります。 • もう一つはコマンドラインとしての側面です。 – ちょっとしたJavaScriptを実行したらどうなる のか見てみたいときコンソールにJavaScriptを 書いてみることができます。
  • インスペクタ • HTMLから表示上の範囲を調べることが できます。 • 逆に画面からHTMLの要素の位置を調べ ることもできます。 • まだ製品版には入っていませんが将来的 にはマージンやパディングも図示してく れるようになりますよ! – 試してみたい方はAurora版というのを探し てきてインストールしてみてくださいね。
  • デバッガ • JavaScriptの実行を止めてその時の変数 の状態などを見ることができます。 – 変数の値を変えることもできるのでこっちの 場合はどうなるのかなとかも試せます。
  • デモ • 実際やってみましょう。
  • スタイルエディタ • スタイルを書き換えることができます。 • リアルタイムに反映されるので見た目に 楽しいですよ!
  • スクラッチパッド • スクラッチパッドはコンソールよりもう ちょっとちゃんとJavaScriptを書きたい ときに使います。 • 保存できたり補完も利いたりするので ちょっとした開発ならブラウザ上ででき ますね!
  • 今回は説明しないツール • プロファイラ • ネットワーク – この辺りはパフォーマンス解析でとても役立つん ですが今回は説明しません。 • 3Dビュー – 見た目に楽しいので帰ったら是非遊んでください ね! • レスポンシブデザインビュー – デスクトップでアプリを仮組みする間はちょく ちょく使うんですが今回は説明しません。
  • APIを使ってみる • 何のAPIも使ってないhello, world!ではつ まらないのでFirefox OSが提供するAPI を使ってみましょう。 • さらにFirefox OSが提供していないサー ドパーティのAPIも組み合わせていきます よ。 • 今回のセッションではAPIの使い方などは 詳しく説明しません。 – 今後GCG研究所に書いていくのでお楽しみに。
  • APIを使ったアプリ • デスクトップとデータを共有するブック マークアプリです。 – サンプルはこちら • https://github.com/aoitan/FxDevCon2014 Kyoto/tree/master/AoiroBookmark • 単に同じデータを見るだけではなくて更 新もリアルタイムに反映されるようにし てみます。
  • SystemXHR • SystemXHRはおなじみXMLHttpRequest です。 • ネット上からデータを取ってきたいときに便 利な子です。 • すでにHTML5でWebアプリを書いている人 にはクロスオリジンできるXHRというとう れしさが伝わるかもしれません。 • ちょっとした注意点があったりしますが以下 のURLで説明してます。 – http://www.gcg.bz/labo_blog/?p=408
  • DataStore API • DataStore APIはアプリ間でデータを共有したいとき に使うAPIです。 – 通常アプリが保存するデータはアプリ間でやり取りするこ とができません。 • 注)一部のデータ(画像とか音声とか動画)は可能です。 – DataStore APIで保存したデータはアプリ間でやりとり することが可能になります。 • データをほかの人に見せられるということはマッシュ アップできるということです。 – みんなで楽しい世界を広げていけますね! • 今回はこのAPIを使ってFirefox OSが持っているブッ クマークを読み書きしてみます。
  • DropBox DataStore API • 実はDropboxにも同じ名前のAPIがあります。 • これもFirefox OSが提供している DataStore APIを同じくアプリの外とデー タを共有するための仕組みになっています。 – Firefox OSのDataStore APIはアプリ間でした がDropBox DataStore APIは端末間の共有です。 • 今回はこのAPIを使ってデスクトップで実行 しているアプリと値を共有します。
  • デモ • いろいろ触ってみますよ!
  • マーケットの話 • Firefox OSアプリはFirefox Marketplaceで流通しています。 • 作ったアプリはDevelopers Hubから登 録できます。 – 使っているAPIによっては審査があります。 – リジェクトされても審査員がアドバイスをく れます。 • ボランティア審査員になることもできますよ!
  • デスクトップやfor Androidから も利用できます! • Firefox MarketplaceはFirefox OSだけ のものではありません。 • デスクトップ版やAndroid版からも利用 できます。 – デスクトップ版はこちら • https://marketplace.firefox.com/ – Android版はこちら • メニュー → ツール → アプリ
  • アプリ開発に関するドキュメント • アプリ開発しようにもわからないことた くさんありますよね。 • わからないことがあった時によく見る資 料を紹介します。
  • 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
  • Mozilla Developer Street • リファレンスというよりニュースの趣き がありますが新しい情報を探すなら Mozilla Developer Street (modest) で す。 – https://dev.mozilla.jp/ • 各種情報へのハブにもなっているので見 るところに迷ったらmodestを見てみるの もいいですね。
  • Mozilla Wiki • 最新の情報を先取りしやすいのはMDNよ りMozilla Wikiです。 – https://wiki.mozilla.org/Main_Page • ただしあまりまとまった書き方ではない ので慣れはいります。 • ほとんどのことはMDNで見つかるので Mozilla Wikiはあまり見ないかもしれませ んね。
  • 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コミュニティはまだ若いコ ミュニティです。 • この機に気軽に参加して気軽に盛り上げ てくださいね!
  • おしまい • ご清聴ありがとうございました。