前回のABC2013Springの基調講演で丸山先生が「AndroidとChromeの統合の流れ」についてお話されてから，早数ヶ月が経ち，5月以降は具体的にPackaged Web Appsの重要性について語られて，先日まで，全国のAndroidの会 地方支部で講演行脚を行っていただいておりました．この大胆予想に乗っかって私は，「Chrome Packaged Apps」の作り方を本当に一から学んでみました．環境構築から実際に何ができるのかを超初心者として皆さんにお伝えできればと思います． ターゲット： Chromeに関しては単なるユーザで開発は超素人... でもちょっと最近気になる存在って思っていらっしゃる方

1. 丸山先生の大胆予想に乗っかって
石塚 宏紀
日本Androidの会
初心者向け
12013/08/30 - 日本Androidの会 2013 8月定例会 @ KDDI 品川イーストワンタワー -

2. •
•
•
•
•
•
E-mail : isi@android-group.jp
HP : http://ishizuka-hiroki.main.jp/
2

3. 上記講演の資料：http://goo.gl/9QBbHd
今から約半年前
その序章は始まっていた…
3

4. ＜ABC2013Spring 基調講演より抜粋＞
•
Androidは、事実上、新しいWebアプリの潮流の
最大のプラットフォーム
• JavaScript＋
HTML5を中心とした新しいWebアプリの世界への準備をただち
に始めること
参考：http://goo.gl/Gyhlsx
先生，ハイハイ！
何から勉強したら
いいですか？
まずは，Packaged
Web appsから初め
てみたら
YES, SIR!
4

5. •
•
•
•
• Packaged Apps
• 独立型アプリ（デスクトップアプリケーション）
•
•
参照：https://developers.google.com/chrome/
- Chrome Packaged Web Appsって何? -
5

6. •
•
•
• Step1 : Create the manifest
• hello_jag
• hello_jag manifest.json
6

7. • Step2 : Create the background script
• hello_jag main.js
7

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. • Step5 : Enable flags
• Chromeブラウザを起動し，”chrome://flags”へ移動
• “Experimental Extension APIs”を見つけて， “Enable” リ
ンクをクリック
• Chromeを再起動
※ packaged apps APIsはまだ実験的な段階なので，
experimental APIsを有効にしないと動作しません！
9

10. • Step6 : Load your app
• 再起動後，Chromeブラウザの右上部” ”をクリック
• “Toos” → “Extensions” をクリック
• “Developer mode” にチェック
• “Load unpacked extension”ボタン
からhello_jag
OKをクリック
10

11. • Step7 : Open new tab and launch
• 新しいタブを開いてアプリ起動
11

12. •
•
•
•
•
•
指定サイズでindex.htmlを
Windowを表示 12

13. •
•
•
•
• bluetooth
•
•
• fileSystem
•
•
•
•
•
•
•
• pushMessaging
•
• serial
• socket
•
•
•
•
•
•
•
•
• usb
•
• power
近距離無線
OSファイル
システムの制御
GCMでPush通知
ガジェット類とシリアル通信
TCP/UDPソケット通信
USB機器との接続可能
13

14. 独自路線 W3C準拠
•
•
プラットフォームに依存しない
開発はまだ先の話 14

15. •
Android4.0以降のバージョンで
インストール可能
15

16. •
JavaScript＋HTML5を中心とした新しい
Webアプリの世界への準備をただちに始めるよう！と丸山先生
がおっしゃった
• Hello World的なものを動かしてみたら始めるのは簡単そうだ.
• APIもモバイル向けにしたら楽しそうなものがそろっている.
• 他プラットフォームとの互換性はまだまだのようだ
• AndroidでもPackaged Web Appsが使える日は間もなく来
るのだろうか？Google様のみぞ知る.
※ もっといろいろ知りたい人はこちらへ : https://sites.google.com/site/chromeapijp/ 16

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