Submit Search
Upload
Chrome Packaged Apps
•
5 likes
•
10,773 views
Ryoya Kawai
Follow
WebOSって何だ?って辺りが書かれてないですがご愛嬌ということでf(^-^;)
Read less
Read more
Technology
Report
Share
Report
Share
1 of 18
Download now
Download to read offline
Recommended
Beenos creators' night#201305今井
Beenos creators' night#201305今井
Daisuke Imai
Webページで学ぶJavaScript2013 第0回
Webページで学ぶJavaScript2013 第0回
京大 マイコンクラブ
デザイナーさんでもできる Browsersync からはじめる作業効率化
デザイナーさんでもできる Browsersync からはじめる作業効率化
Kumiko SHIMIZU
Webサーバ、HTML
Webサーバ、HTML
Shuhei Iitsuka
メディア芸術基礎 Ⅰ 第2回 HTML入門
メディア芸術基礎 Ⅰ 第2回 HTML入門
Atsushi Tadokoro
デザイナーさんでもできる Browsersync からはじめる作業効率化・春
デザイナーさんでもできる Browsersync からはじめる作業効率化・春
Kumiko SHIMIZU
プログラミング勉強会0721
プログラミング勉強会0721
nallpo
芸術情報演習デザイン(web) 第2回:HTML入門
芸術情報演習デザイン(web) 第2回:HTML入門
Atsushi Tadokoro
Recommended
Beenos creators' night#201305今井
Beenos creators' night#201305今井
Daisuke Imai
Webページで学ぶJavaScript2013 第0回
Webページで学ぶJavaScript2013 第0回
京大 マイコンクラブ
デザイナーさんでもできる Browsersync からはじめる作業効率化
デザイナーさんでもできる Browsersync からはじめる作業効率化
Kumiko SHIMIZU
Webサーバ、HTML
Webサーバ、HTML
Shuhei Iitsuka
メディア芸術基礎 Ⅰ 第2回 HTML入門
メディア芸術基礎 Ⅰ 第2回 HTML入門
Atsushi Tadokoro
デザイナーさんでもできる Browsersync からはじめる作業効率化・春
デザイナーさんでもできる Browsersync からはじめる作業効率化・春
Kumiko SHIMIZU
プログラミング勉強会0721
プログラミング勉強会0721
nallpo
芸術情報演習デザイン(web) 第2回:HTML入門
芸術情報演習デザイン(web) 第2回:HTML入門
Atsushi Tadokoro
エンジニアの為のWordPress入門 〜WordPressはWebAppプラットフォームです〜
エンジニアの為のWordPress入門 〜WordPressはWebAppプラットフォームです〜
Yuji Nojima
WordPressプラグイン Jetpack って何だ?!
WordPressプラグイン Jetpack って何だ?!
Yuji Nojima
HTML5+wordpressで電子書籍
HTML5+wordpressで電子書籍
Wataru Asai
WordPress プラグイン Infinite Scroll を試してみた
WordPress プラグイン Infinite Scroll を試してみた
Yuji Nojima
Isomorphic Architecture & Interface
Isomorphic Architecture & Interface
Jxck Jxck
今日から始めるGopher - スタートGo #0 @GDG名古屋
今日から始めるGopher - スタートGo #0 @GDG名古屋
Takuya Ueda
Unityのオンラインゲームをhtmlに移植してわかったこと
Unityのオンラインゲームをhtmlに移植してわかったこと
Kouji Hosoda
AmazonElasticBeanstalk
AmazonElasticBeanstalk
Taisuke Oe
Unityのasset bundle運用実例@lordofknights
Unityのasset bundle運用実例@lordofknights
Kouji Hosoda
アプリリリース後に後悔しないための20のこと
アプリリリース後に後悔しないための20のこと
leverages_event
デ部会 プロトタイプ
デ部会 プロトタイプ
Nobuhiko Futagami
ドリコムを支える課金ライブラリを支えるJenkins
ドリコムを支える課金ライブラリを支えるJenkins
Go Sueyoshi (a.k.a sue445)
2012/5/19 Webのパフォーマンスを考える ~WordPressと付き合うために~ @ WB Osaka
2012/5/19 Webのパフォーマンスを考える ~WordPressと付き合うために~ @ WB Osaka
tama200x Kobayashi
ブラウザだけで学ぶWebアプリ開発
ブラウザだけで学ぶWebアプリ開発
schoowebcampus
Golangによるubicの試作
Golangによるubicの試作
kn1kn1
Web制作で培ってきたFlashのリッチな表現力をモバイルアプリに
Web制作で培ってきたFlashのリッチな表現力をモバイルアプリに
invogue
HTML5 アプリ開発
HTML5 アプリ開発
tomo_masakura
20101127 Android Usability Seminar
20101127 Android Usability Seminar
Visso株式会社
Unity での asset bundle による追加コンテンツの扱い方
Unity での asset bundle による追加コンテンツの扱い方
Kouji Hosoda
いまさら聞けない!HTML5超入門
いまさら聞けない!HTML5超入門
Monaca
Web audio control-webaudio.tokyo
Web audio control-webaudio.tokyo
Ryoya Kawai
AudioとガジェットをWebで遊ぶ - Web Audio/MIDI Web Bluetooth -
AudioとガジェットをWebで遊ぶ - Web Audio/MIDI Web Bluetooth -
Ryoya Kawai
More Related Content
Similar to Chrome Packaged Apps
エンジニアの為のWordPress入門 〜WordPressはWebAppプラットフォームです〜
エンジニアの為のWordPress入門 〜WordPressはWebAppプラットフォームです〜
Yuji Nojima
WordPressプラグイン Jetpack って何だ?!
WordPressプラグイン Jetpack って何だ?!
Yuji Nojima
HTML5+wordpressで電子書籍
HTML5+wordpressで電子書籍
Wataru Asai
WordPress プラグイン Infinite Scroll を試してみた
WordPress プラグイン Infinite Scroll を試してみた
Yuji Nojima
Isomorphic Architecture & Interface
Isomorphic Architecture & Interface
Jxck Jxck
今日から始めるGopher - スタートGo #0 @GDG名古屋
今日から始めるGopher - スタートGo #0 @GDG名古屋
Takuya Ueda
Unityのオンラインゲームをhtmlに移植してわかったこと
Unityのオンラインゲームをhtmlに移植してわかったこと
Kouji Hosoda
AmazonElasticBeanstalk
AmazonElasticBeanstalk
Taisuke Oe
Unityのasset bundle運用実例@lordofknights
Unityのasset bundle運用実例@lordofknights
Kouji Hosoda
アプリリリース後に後悔しないための20のこと
アプリリリース後に後悔しないための20のこと
leverages_event
デ部会 プロトタイプ
デ部会 プロトタイプ
Nobuhiko Futagami
ドリコムを支える課金ライブラリを支えるJenkins
ドリコムを支える課金ライブラリを支えるJenkins
Go Sueyoshi (a.k.a sue445)
2012/5/19 Webのパフォーマンスを考える ~WordPressと付き合うために~ @ WB Osaka
2012/5/19 Webのパフォーマンスを考える ~WordPressと付き合うために~ @ WB Osaka
tama200x Kobayashi
ブラウザだけで学ぶWebアプリ開発
ブラウザだけで学ぶWebアプリ開発
schoowebcampus
Golangによるubicの試作
Golangによるubicの試作
kn1kn1
Web制作で培ってきたFlashのリッチな表現力をモバイルアプリに
Web制作で培ってきたFlashのリッチな表現力をモバイルアプリに
invogue
HTML5 アプリ開発
HTML5 アプリ開発
tomo_masakura
20101127 Android Usability Seminar
20101127 Android Usability Seminar
Visso株式会社
Unity での asset bundle による追加コンテンツの扱い方
Unity での asset bundle による追加コンテンツの扱い方
Kouji Hosoda
いまさら聞けない!HTML5超入門
いまさら聞けない!HTML5超入門
Monaca
Similar to Chrome Packaged Apps
(20)
エンジニアの為のWordPress入門 〜WordPressはWebAppプラットフォームです〜
エンジニアの為のWordPress入門 〜WordPressはWebAppプラットフォームです〜
WordPressプラグイン Jetpack って何だ?!
WordPressプラグイン Jetpack って何だ?!
HTML5+wordpressで電子書籍
HTML5+wordpressで電子書籍
WordPress プラグイン Infinite Scroll を試してみた
WordPress プラグイン Infinite Scroll を試してみた
Isomorphic Architecture & Interface
Isomorphic Architecture & Interface
今日から始めるGopher - スタートGo #0 @GDG名古屋
今日から始めるGopher - スタートGo #0 @GDG名古屋
Unityのオンラインゲームをhtmlに移植してわかったこと
Unityのオンラインゲームをhtmlに移植してわかったこと
AmazonElasticBeanstalk
AmazonElasticBeanstalk
Unityのasset bundle運用実例@lordofknights
Unityのasset bundle運用実例@lordofknights
アプリリリース後に後悔しないための20のこと
アプリリリース後に後悔しないための20のこと
デ部会 プロトタイプ
デ部会 プロトタイプ
ドリコムを支える課金ライブラリを支えるJenkins
ドリコムを支える課金ライブラリを支えるJenkins
2012/5/19 Webのパフォーマンスを考える ~WordPressと付き合うために~ @ WB Osaka
2012/5/19 Webのパフォーマンスを考える ~WordPressと付き合うために~ @ WB Osaka
ブラウザだけで学ぶWebアプリ開発
ブラウザだけで学ぶWebアプリ開発
Golangによるubicの試作
Golangによるubicの試作
Web制作で培ってきたFlashのリッチな表現力をモバイルアプリに
Web制作で培ってきたFlashのリッチな表現力をモバイルアプリに
HTML5 アプリ開発
HTML5 アプリ開発
20101127 Android Usability Seminar
20101127 Android Usability Seminar
Unity での asset bundle による追加コンテンツの扱い方
Unity での asset bundle による追加コンテンツの扱い方
いまさら聞けない!HTML5超入門
いまさら聞けない!HTML5超入門
More from Ryoya Kawai
Web audio control-webaudio.tokyo
Web audio control-webaudio.tokyo
Ryoya Kawai
AudioとガジェットをWebで遊ぶ - Web Audio/MIDI Web Bluetooth -
AudioとガジェットをWebで遊ぶ - Web Audio/MIDI Web Bluetooth -
Ryoya Kawai
Web musicdevelopersmeetup@sapporo
Web musicdevelopersmeetup@sapporo
Ryoya Kawai
Web MIDI meets DIY #0
Web MIDI meets DIY #0
Ryoya Kawai
HTML5 Conference 2015 鹿児島
HTML5 Conference 2015 鹿児島
Ryoya Kawai
Web Audio API, Web MIDI API - 2015 html5 conference
Web Audio API, Web MIDI API - 2015 html5 conference
Ryoya Kawai
Making Music on the Web with MIDI Technology - Music China
Making Music on the Web with MIDI Technology - Music China
Ryoya Kawai
Web music開発環境
Web music開発環境
Ryoya Kawai
Roppongi ArtTech Night #1
Roppongi ArtTech Night #1
Ryoya Kawai
ブラウザとmidiの出会いが拓くwebとmusicの新しい世界
ブラウザとmidiの出会いが拓くwebとmusicの新しい世界
Ryoya Kawai
Breakout@TPAC 2013 (Entertain Web with Musical Instruments)
Breakout@TPAC 2013 (Entertain Web with Musical Instruments)
Ryoya Kawai
Web MIDI APIが拓くWeb音楽の世界 - 大音学会 2013
Web MIDI APIが拓くWeb音楽の世界 - 大音学会 2013
Ryoya Kawai
Chrome+HTML5 Developers Live Japan #8 - Web MIDI API
Chrome+HTML5 Developers Live Japan #8 - Web MIDI API
Ryoya Kawai
Web MIDI API 2nd WD
Web MIDI API 2nd WD
Ryoya Kawai
More from Ryoya Kawai
(14)
Web audio control-webaudio.tokyo
Web audio control-webaudio.tokyo
AudioとガジェットをWebで遊ぶ - Web Audio/MIDI Web Bluetooth -
AudioとガジェットをWebで遊ぶ - Web Audio/MIDI Web Bluetooth -
Web musicdevelopersmeetup@sapporo
Web musicdevelopersmeetup@sapporo
Web MIDI meets DIY #0
Web MIDI meets DIY #0
HTML5 Conference 2015 鹿児島
HTML5 Conference 2015 鹿児島
Web Audio API, Web MIDI API - 2015 html5 conference
Web Audio API, Web MIDI API - 2015 html5 conference
Making Music on the Web with MIDI Technology - Music China
Making Music on the Web with MIDI Technology - Music China
Web music開発環境
Web music開発環境
Roppongi ArtTech Night #1
Roppongi ArtTech Night #1
ブラウザとmidiの出会いが拓くwebとmusicの新しい世界
ブラウザとmidiの出会いが拓くwebとmusicの新しい世界
Breakout@TPAC 2013 (Entertain Web with Musical Instruments)
Breakout@TPAC 2013 (Entertain Web with Musical Instruments)
Web MIDI APIが拓くWeb音楽の世界 - 大音学会 2013
Web MIDI APIが拓くWeb音楽の世界 - 大音学会 2013
Chrome+HTML5 Developers Live Japan #8 - Web MIDI API
Chrome+HTML5 Developers Live Japan #8 - Web MIDI API
Web MIDI API 2nd WD
Web MIDI API 2nd WD
Chrome Packaged Apps
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化してみませんか?
Download now