Chrome Packaged Apps河合 良哉

Packaged Appsとは

● NativeAppっぽいけど、Webアプリ○ HTML5、JavaScript、CSSで記述○ Look & Feel は NativeApp○ WebSiteでは使えないパワフルなAPIも使用可能

■ Networkアクセス■ Hardware Deviceアクセス■ Mediaツール(Photo, Video, Music)

Look (1)

● こんなの。

▶ えっ？？これ普通にChromeじゃね？？

Look (2)

● 比べてみる。

▶ おっ、アドレスバーとかなくて違う。

Packaged App版Web App版

Feel

● 起動も違うんです。

▶ で、何がいいの？？

http://hogehoge.com/apps/keybord/

これをクリック

URLを入力

いいところ(1)

● 特徴○ Localから起動な為、低Network依存○ 直接起動も可能な為、起動・終了が速い○ WebSiteでは使えないパワフルなAPIが使用可能

■ Networkアクセス■ Hardware Deviceアクセス■ Mediaツール(Photo, Video, Music)

▶ えっと、NativeAppのがよくね？

いいところ(2)

● 開発言語○ 複数(xcode, Android Java等)覚える必要がなく以下の

言語が分かればAppが作れます。■ HTML5■ JavaScript■ CSS

▶ でもこれってChromeだけでしょ？？

いいところ(3)

● 例外(独自API等)はあるけど、、、○ 独自のAPIは別として、そのままは使えなくとも、ほぼ同

じアルゴリズム、同じ言語でコーディングが可能です。

▶ それだけ？

いいところ(4)

● WebOSのAppになる○ 今後の動向が見逃せないWebOS機器のAppとして動

作します。○ 1度作ったら、ほぼそのまま(例外アリ)流用可能

▶ あー、なるほど、未来の話ね。

例えば：WebOS(1)

● ChromeOS(Chromebook)ですが○ 2000を超える教育機関で導入されています。

▶ 言うても、教育機関だから手に入るんでしょ？

例えば：WebOS(2)

● 限定的ですが○ 家電量販店(店舗、ネット)から購入できます

▶ で、どうやったらPackagedAppを書けるの？

PackagedAppに準備するモノ

● 必要なモノ○ ブラウザで動くWebアプリ○ アイコン画像(なくてもOK)○ manifest.json○ background.js 的なコード○ Google Canary Build (念の為) ▶ http://goo.gl/ZZgQS

▶ 例えば、WebMusicDevelopersJPをサンプルに使うと

PackagedAppの書き方(1)

● manifest.json○ Appについての宣言になります。

■ 詳細はこちら ▶ http://goo.gl/llqd1○ 実際には、こんな感じです▼

PackagedAppの書き方(2)

● background.js 的なコード○ manifest.json で background の scripts で指定する

ことで background で動作します。■ ここでは index.html を動かしています。

▶ 基本的には、準備は以上で準備は終わりです。

さぁ、動かすぞ！(1)

● まず何するの？○ Localパッケージの読み込みを可能にします。

chrome://extensions

(2) Developer mode を ON

(3) をクリック

(1) extensionsのページを開く

さぁ、動かすぞ！(2)

● 実際に読み込みます。

(4) manifest.json のある

ディレクトリ指定

▲無事に読み込まれると項目が増える ▲

さぁ、動かすぞ！(2)

● 読む込み完了です。○ 起動してみましょう！

これをクリックで起動します。(manifest.json で指定したアイコンになります)

あなたのWebアプリも

Packaged App化してみませんか？