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       河合 良哉
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

11,124 views

Published on

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

Published in: Technology
  • DOWNLOAD THIS BOOKS INTO AVAILABLE FORMAT (Unlimited) ......................................................................................................................... ......................................................................................................................... Download Full PDF EBOOK here { https://tinyurl.com/y6a5rkg5 } ......................................................................................................................... Download Full EPUB Ebook here { https://tinyurl.com/y6a5rkg5 } ......................................................................................................................... ACCESS WEBSITE for All Ebooks ......................................................................................................................... Download Full PDF EBOOK here { https://tinyurl.com/y6a5rkg5 } ......................................................................................................................... Download EPUB Ebook here { https://tinyurl.com/y6a5rkg5 } ......................................................................................................................... Download doc Ebook here { https://tinyurl.com/y6a5rkg5 } ......................................................................................................................... ......................................................................................................................... ......................................................................................................................... .............. Browse by Genre Available eBooks ......................................................................................................................... Art, Biography, Business, Chick Lit, Children's, Christian, Classics, Comics, Contemporary, Cookbooks, Crime, Ebooks, Fantasy, Fiction, Graphic Novels, Historical Fiction, History, Horror, Humor And Comedy, Manga, Memoir, Music, Mystery, Non Fiction, Paranormal, Philosophy, Poetry, Psychology, Religion, Romance, Science, Science Fiction, Self Help, Suspense, Spirituality, Sports, Thriller, Travel, Young Adult,
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here

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化してみませんか?

×