Chrome Packaged Apps       河合 良哉
Packaged Appsとは● NativeAppっぽいけど、Webアプリ ○ HTML5、JavaScript、CSSで記述 ○ Look & Feel は NativeApp ○ WebSiteでは使えないパワフルなAPIも使用可能   ...
Look (1)● こんなの。 ▶ えっ??これ普通にChromeじゃね??
Look (2)● 比べてみる。    Packa              Web A         ged Ap             pp 版               p版 ▶ おっ、アドレスバーとかなくて違う。
Feel● 起動も違うんです。                 http://hogehoge.com/apps/keybord/                                       URLを入力       これをクリ...
いいところ(1)● 特徴 ○ Localから起動な為、低Network依存 ○ 直接起動も可能な為、起動・終了が速い ○ WebSiteでは使えないパワフルなAPIが使用可能   ■ Networkアクセス   ■ Hardware Devic...
いいところ(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...
PackagedAppの書き方(1)● manifest.json  ○ Appについての宣言になります。    ■ 詳細はこちら ▶ http://goo.gl/llqd1  ○ 実際には、こんな感じです▼
PackagedAppの書き方(2)● background.js 的なコード  ○ manifest.json で background の scripts で指定する    ことで background で動作します。    ■ ここでは ...
さぁ、動かすぞ!(1)● まず何するの?  ○ Localパッケージの読み込みを可能にします。 chrome://extensions         (3)             をクリック     (1) extensionsのページを開...
さぁ、動かすぞ!(2)● 実際に読み込みます。                         ▲無事に読み込まれると項目が増える ▲ (4) manifest.json のある            ディレクトリ指定
さぁ、動かすぞ!(2)● 読む込み完了です。 ○ 起動してみましょう!         これをクリックで起動します。        (manifest.json で指定したアイコンになります)
あなたのWebアプリも      Packaged App化してみませんか?
Upcoming SlideShare
Loading in …5
×

Chrome Packaged Apps

10,718 views

Published on

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

Published in: Technology

Chrome Packaged Apps

  1. 1. Chrome Packaged Apps 河合 良哉
  2. 2. Packaged Appsとは● NativeAppっぽいけど、Webアプリ ○ HTML5、JavaScript、CSSで記述 ○ Look & Feel は NativeApp ○ WebSiteでは使えないパワフルなAPIも使用可能 ■ Networkアクセス ■ Hardware Deviceアクセス ■ Mediaツール(Photo, Video, Music)
  3. 3. Look (1)● こんなの。 ▶ えっ??これ普通にChromeじゃね??
  4. 4. Look (2)● 比べてみる。 Packa Web A ged Ap pp 版 p版 ▶ おっ、アドレスバーとかなくて違う。
  5. 5. Feel● 起動も違うんです。 http://hogehoge.com/apps/keybord/ URLを入力 これをクリック ▶ で、何がいいの??
  6. 6. いいところ(1)● 特徴 ○ Localから起動な為、低Network依存 ○ 直接起動も可能な為、起動・終了が速い ○ WebSiteでは使えないパワフルなAPIが使用可能 ■ Networkアクセス ■ Hardware Deviceアクセス ■ Mediaツール(Photo, Video, Music)▶ えっと、NativeAppのがよくね?
  7. 7. いいところ(2)● 開発言語 ○ 複数(xcode, Android Java等)覚える必要がなく以下の 言語が分かればAppが作れます。 ■ HTML5 ■ JavaScript ■ CSS▶ でもこれってChromeだけでしょ??
  8. 8. いいところ(3)● 例外(独自API等)はあるけど、、、 ○ 独自のAPIは別として、そのままは使えなくとも、ほぼ同 じアルゴリズム、同じ言語でコーディングが可能です。▶ それだけ?
  9. 9. いいところ(4)● WebOSのAppになる ○ 今後の動向が見逃せないWebOS機器のAppとして動 作します。 ○ 1度作ったら、ほぼそのまま(例外アリ)流用可能▶ あー、なるほど、未来の話ね。
  10. 10. 例えば:WebOS(1)● ChromeOS(Chromebook)ですが ○ 2000を超える教育機関で導入されています。 ▶ 言うても、教育機関だから手に入るんでしょ?
  11. 11. 例えば:WebOS(2)● 限定的ですが ○ 家電量販店(店舗、ネット)から購入できます ▶ で、どうやったらPackagedAppを書けるの?
  12. 12. PackagedAppに準備するモノ● 必要なモノ ○ ブラウザで動くWebアプリ ○ アイコン画像(なくてもOK) ○ manifest.json ○ background.js 的なコード ○ Google Canary Build (念の為) ▶ http://goo.gl/ZZgQS ▶ 例えば、WebMusicDevelopersJPをサンプルに使うと
  13. 13. PackagedAppの書き方(1)● manifest.json ○ Appについての宣言になります。 ■ 詳細はこちら ▶ http://goo.gl/llqd1 ○ 実際には、こんな感じです▼
  14. 14. PackagedAppの書き方(2)● background.js 的なコード ○ manifest.json で background の scripts で指定する ことで background で動作します。 ■ ここでは index.html を動かしています。▶ 基本的には、準備は以上で準備は終わりです。
  15. 15. さぁ、動かすぞ!(1)● まず何するの? ○ Localパッケージの読み込みを可能にします。 chrome://extensions (3) をクリック (1) extensionsのページを開く (2) Developer mode を ON
  16. 16. さぁ、動かすぞ!(2)● 実際に読み込みます。 ▲無事に読み込まれると項目が増える ▲ (4) manifest.json のある ディレクトリ指定
  17. 17. さぁ、動かすぞ!(2)● 読む込み完了です。 ○ 起動してみましょう! これをクリックで起動します。 (manifest.json で指定したアイコンになります)
  18. 18. あなたのWebアプリも Packaged App化してみませんか?

×