WebOSって何だ？って辺りが書かれてないですがご愛嬌ということでf(^-^;)

1. Chrome Packaged Apps
河合 良哉

2. Packaged Appsとは
● NativeAppっぽいけど、Webアプリ
○ HTML5、JavaScript、CSSで記述
○ Look & Feel は NativeApp
○ WebSiteでは使えないパワフルなAPIも使用可能
■ Networkアクセス
■ Hardware Deviceアクセス
■ Mediaツール(Photo, Video, Music)

3. Look (1)
● こんなの。
▶ えっ？？これ普通にChromeじゃね？？

4. Look (2)
● 比べてみる。
Packa Web A
ged Ap pp 版
p版
▶ おっ、アドレスバーとかなくて違う。

5. Feel
● 起動も違うんです。
http://hogehoge.com/apps/keybord/
URLを入力
これをクリック
▶ で、何がいいの？？

6. いいところ(1)
● 特徴
○ Localから起動な為、低Network依存
○ 直接起動も可能な為、起動・終了が速い
○ WebSiteでは使えないパワフルなAPIが使用可能
■ Networkアクセス
■ Hardware Deviceアクセス
■ Mediaツール(Photo, Video, Music)
▶ えっと、NativeAppのがよくね？

7. いいところ(2)
● 開発言語
○ 複数(xcode, Android Java等)覚える必要がなく以下の
言語が分かればAppが作れます。
■ HTML5
■ JavaScript
■ CSS
▶ でもこれってChromeだけでしょ？？

8. いいところ(3)
● 例外(独自API等)はあるけど、、、
○ 独自のAPIは別として、そのままは使えなくとも、ほぼ同
じアルゴリズム、同じ言語でコーディングが可能です。
▶ それだけ？

9. いいところ(4)
● WebOSのAppになる
○ 今後の動向が見逃せないWebOS機器のAppとして動
作します。
○ 1度作ったら、ほぼそのまま(例外アリ)流用可能
▶ あー、なるほど、未来の話ね。

10. 例えば：WebOS(1)
● ChromeOS(Chromebook)ですが
○ 2000を超える教育機関で導入されています。
▶ 言うても、教育機関だから手に入るんでしょ？

11. 例えば：WebOS(2)
● 限定的ですが
○ 家電量販店(店舗、ネット)から購入できます
▶ で、どうやったらPackagedAppを書けるの？

12. PackagedAppに準備するモノ
● 必要なモノ
○ ブラウザで動くWebアプリ
○ アイコン画像(なくてもOK)
○ manifest.json
○ background.js 的なコード
○ Google Canary Build (念の為) ▶ http://goo.gl/ZZgQS
▶ 例えば、WebMusicDevelopersJPをサンプルに使うと

13. PackagedAppの書き方(1)
● manifest.json
○ Appについての宣言になります。
■ 詳細はこちら ▶ http://goo.gl/llqd1
○ 実際には、こんな感じです▼

14. PackagedAppの書き方(2)
● background.js 的なコード
○ manifest.json で background の scripts で指定する
ことで background で動作します。
■ ここでは index.html を動かしています。
▶ 基本的には、準備は以上で準備は終わりです。

15. さぁ、動かすぞ！(1)
● まず何するの？
○ Localパッケージの読み込みを可能にします。
chrome://extensions (3) をクリック
(1) extensionsのページを開く
(2) Developer mode を ON

16. さぁ、動かすぞ！(2)
● 実際に読み込みます。
▲無事に読み込まれると項目が増える ▲
(4) manifest.json のある
ディレクトリ指定

17. さぁ、動かすぞ！(2)
● 読む込み完了です。
○ 起動してみましょう！
これをクリックで起動します。
(manifest.json で指定したアイコンになります)

18. あなたのWebアプリも
Packaged App化してみませんか？