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.

Chrome Packaged Apps」の作り方を学んでみた  その1 ~ Chrome Packaged Appsって何ができるの? ~

4,888 views

Published on

前回のABC2013Springの基調講演で丸山先生が「AndroidとChromeの統合の流れ」についてお話されてから,早数ヶ月が経ち,5月以降は具体的にPackaged Web Appsの重要性について語られて,先日まで,全国のAndroidの会 地方支部で講演行脚を行っていただいておりました.この大胆予想に乗っかって私は,「Chrome Packaged Apps」の作り方を本当に一から学んでみました.環境構築から実際に何ができるのかを超初心者として皆さんにお伝えできればと思います.

ターゲット:
Chromeに関しては単なるユーザで開発は超素人...
でもちょっと最近気になる存在って思っていらっしゃる方

Published in: Technology
  • Be the first to comment

Chrome Packaged Apps」の作り方を学んでみた  その1 ~ Chrome Packaged Appsって何ができるの? ~

  1. 1. 丸山先生の大胆予想に乗っかって 石塚 宏紀 日本Androidの会 初心者向け 12013/08/30 - 日本Androidの会 2013 8月定例会 @ KDDI 品川イーストワンタワー -
  2. 2. • • • • • • E-mail : isi@android-group.jp HP : http://ishizuka-hiroki.main.jp/ 2
  3. 3. 上記講演の資料:http://goo.gl/9QBbHd 今から約半年前 その序章は始まっていた… 3
  4. 4. <ABC2013Spring 基調講演より抜粋> • Androidは、事実上、新しいWebアプリの潮流の 最大のプラットフォーム • JavaScript+ HTML5を中心とした新しいWebアプリの世界への準備をただち に始めること 参考:http://goo.gl/Gyhlsx 先生,ハイハイ! 何から勉強したら いいですか? まずは,Packaged Web appsから初め てみたら YES, SIR! 4
  5. 5. • • • • • Packaged Apps • 独立型アプリ(デスクトップアプリケーション) • • 参照:https://developers.google.com/chrome/ - Chrome Packaged Web Appsって何? - 5
  6. 6. • • • • Step1 : Create the manifest • hello_jag • hello_jag manifest.json 6
  7. 7. • Step2 : Create the background script • hello_jag main.js 7
  8. 8. • Step3 : Create the background script • hello_jag index.html • Step4 : Create the icons • hello_jag icon_16.png, icon_128.png, jag_logo.png https://github.com/GoogleChrome/chrome-app-samples/blob/master/hello-world/icon_16.png https://github.com/GoogleChrome/chrome-app-samples/blob/master/hello-world/icon_128.png http://www.android-group.jp/image/android-logo.png <Image data source> 8
  9. 9. • Step5 : Enable flags • Chromeブラウザを起動し,”chrome://flags”へ移動 • “Experimental Extension APIs”を見つけて, “Enable” リ ンクをクリック • Chromeを再起動 ※ packaged apps APIsはまだ実験的な段階なので, experimental APIsを有効にしないと動作しません! 9
  10. 10. • Step6 : Load your app • 再起動後,Chromeブラウザの右上部” ”をクリック • “Toos” → “Extensions” をクリック • “Developer mode” にチェック • “Load unpacked extension”ボタン からhello_jag OKをクリック 10
  11. 11. • Step7 : Open new tab and launch • 新しいタブを開いてアプリ起動 11
  12. 12. • • • • • • 指定サイズでindex.htmlを Windowを表示 12
  13. 13. • • • • • bluetooth • • • fileSystem • • • • • • • • pushMessaging • • serial • socket • • • • • • • • • usb • • power 近距離無線 OSファイル システムの制御 GCMでPush通知 ガジェット類とシリアル通信 TCP/UDPソケット通信 USB機器との接続可能 13
  14. 14. 独自路線 W3C準拠 • • プラットフォームに依存しない 開発はまだ先の話 14
  15. 15. • Android4.0以降のバージョンで インストール可能 15
  16. 16. • JavaScript+HTML5を中心とした新しい Webアプリの世界への準備をただちに始めるよう!と丸山先生 がおっしゃった • Hello World的なものを動かしてみたら始めるのは簡単そうだ. • APIもモバイル向けにしたら楽しそうなものがそろっている. • 他プラットフォームとの互換性はまだまだのようだ • AndroidでもPackaged Web Appsが使える日は間もなく来 るのだろうか?Google様のみぞ知る. ※ もっといろいろ知りたい人はこちらへ : https://sites.google.com/site/chromeapijp/ 16
  17. 17. • http://developer.chrome.com/apps/about_apps.html • ほぼすべての情報がここで揃う • 整理されていて読みやすい • 本家youtube : Packaged Appsの特徴がよくまとまっている. • http://www.youtube.com/watch?v=lBUGTVIJVfM • 書籍 : 開発者のためのChromeガイドブック • Google API Expert(Chrome)の方々によってまとめられた良本 • 上記本家サイトの英語を読むのがつらい人やさくっと学びたい人 向け 17

×