SlideShare una empresa de Scribd logo
1 de 37
Descargar para leer sin conexión
はじめてのChrome App
                   @civic




13年4月6日土曜日
⾃自⼰己紹介

             Twitter @civic

             ⻑⾧長岡IT開発者勉強会 NDS

             Fix HootSuite (chrome ext.)

             SeatNext(GAE/py)




13年4月6日土曜日
Chrome App
13年4月6日土曜日
Chromeのアドオン類

             Chrome Extension    (拡張)

             Chrome App         (アプリ)

               Packaged App

               Hosted App

             Native Client      (ネイティブ)



13年4月6日土曜日
Chromeのアドオン類

             Chrome Extension    (拡張)

             Chrome App         (アプリ)

               Packaged App       ←今日の主題
               Hosted App

             Native Client      (ネイティブ)



13年4月6日土曜日
Packaged App


             Chrome上でネイティブ(っぽい)アプリ

             でもWeb系の技術で作る




13年4月6日土曜日
Packaged App


             Chrome上でネイティブ(っぽい)アプリ

             でもWeb系の技術で作る




13年4月6日土曜日
Packaged App


             Chrome上でネイティブ(っぽい)アプリ

             でもWeb系の技術で作る

             でもWebアプリではない!

13年4月6日土曜日
どんなものか?
13年4月6日土曜日
あーはいはい。
             HTMLでデザインして、
             JavaScriptでUI制御。
               メインな処理理は、
             サーバと通信な感じね

13年4月6日土曜日
いや、違うんです!


13年4月6日土曜日
外観
             UIがブラウザっぽくないし!


                       アドレスバーなし
                              タブなし
                 ブラウザ外で動作するWindow




13年4月6日土曜日
まあ、でもHTMLで
               デザインします
              ブラウザウィンドウとしての
             タブ、アドレスバーがないのが重要?


13年4月6日土曜日
Offline App

             オフライン起動許可がデフォルト
             (not WebApp)

             オンライン、オフラインの変更更検出
             https://developer.mozilla.org/en-US/
             docs/Online_and_offline_events




13年4月6日土曜日
こんなのにどうでしょう?


             デスクトップアプリ、スタンドアロンアプリ

             UIが必要な、ちょっとしたアプリ




13年4月6日土曜日
どれぐらいのものが
              作れるのか?
13年4月6日土曜日
API
             alerms               mediaGaleries
             app.runtime          permissions
             app.window           pushMessaging
             bluetooth            serial
             commands             socket
             contextMenus         storage
             events               tts
             fileSystem           types
             i18n                 usb
             idle                 webstore

13年4月6日土曜日
⾯面⽩白そうなの抜粋




13年4月6日土曜日
ハードウェア連携
             chrome.bluetooth    Bluetooth

             chrome.usb         USB

             chrome.serial      シリアル通信

              ハードウェアとの低レベルなI/O

                             ネイティブっぽいっ!

13年4月6日土曜日
データ永続化
             chrome.fileSystem   OSファイルシステム

             chrome.storage      Chrome Sync同期



              ある程度制限付きのファイル操作

                                 同期が楽そうっ!


13年4月6日土曜日
ネットワーク
             chrome.socket   TCP/UDP socket

             pushMessaging Google Cloud Messaging


        TCP, UDPのデータ送受信、listen, bindが可能
               モバイルにありがちなpush通知
                             サーバが作れるっ!


13年4月6日土曜日
結構いろいろなものが
             作られるようになります



13年4月6日土曜日
サンプルアプリ・デモ
13年4月6日土曜日
UDP受信
                       サーバー不要!!
             Chrome
              App
                 受信


                 UDP
              ブロードキャスト    送信
                         プログラム
13年4月6日土曜日
本当に作りたかったもの

                           Chrome
                            App
             Chrome
              App

                   UDP     Chrome
                ブロードキャスト    App


13年4月6日土曜日
なぜできなかったのか?


             setsockopt的な関数が, chrome.socket API
             になかった

             create socketする時の謎のオプション
             createOptionsとは? (ドキュメント未整備)




13年4月6日土曜日
まだ発展途上です
      https://github.com/civic/chrome-app-udpsocket




13年4月6日土曜日
動作プラットフォーム
13年4月6日土曜日
動作プラットフォーム




13年4月6日土曜日
動作プラットフォーム

               Chrome Browser




13年4月6日土曜日
動作プラットフォーム

                   Chrome Browser




             Chromebook
             (Chrome OS)



13年4月6日土曜日
互換?プラットフォーム




13年4月6日土曜日
互換?プラットフォーム

                  Firefox OS




13年4月6日土曜日
互換?プラットフォーム

                       Firefox OS




               TIZEN



13年4月6日土曜日
互換なのか?


             manifest.jsonなどの作りはほとんど同じ

             apiは当然違う




13年4月6日土曜日
まとめ
13年4月6日土曜日
Web時代のスタンドアロンアプリを
                Chrome Appで作ろう!!


13年4月6日土曜日

Más contenido relacionado

Destacado

第38回載せられないapp
第38回載せられないapp第38回載せられないapp
第38回載せられないappcivic Sasaki
 
第36回NDS 発表資料 ちょこっとpython
第36回NDS 発表資料 ちょこっとpython第36回NDS 発表資料 ちょこっとpython
第36回NDS 発表資料 ちょこっとpythoncivic Sasaki
 
第42回中華製安価デバイスの通信を解析した話
第42回中華製安価デバイスの通信を解析した話第42回中華製安価デバイスの通信を解析した話
第42回中華製安価デバイスの通信を解析した話civic Sasaki
 
第37回NDS Java並行処理 今昔物語
第37回NDS Java並行処理 今昔物語第37回NDS Java並行処理 今昔物語
第37回NDS Java並行処理 今昔物語civic Sasaki
 
今日帰ってすぐに始められるChrome App #nds45
今日帰ってすぐに始められるChrome App #nds45今日帰ってすぐに始められるChrome App #nds45
今日帰ってすぐに始められるChrome App #nds45civic Sasaki
 
LT: 今日帰ってすぐに始められるPython #nds45
LT: 今日帰ってすぐに始められるPython #nds45LT: 今日帰ってすぐに始められるPython #nds45
LT: 今日帰ってすぐに始められるPython #nds45civic Sasaki
 
Amazon SESのメール受信対応でサーバー減らせた話
Amazon SESのメール受信対応でサーバー減らせた話Amazon SESのメール受信対応でサーバー減らせた話
Amazon SESのメール受信対応でサーバー減らせた話civic Sasaki
 
レスポンシブなサイトにあっという間にjQueryを実装する 先生:田中 晶子
レスポンシブなサイトにあっという間にjQueryを実装する 先生:田中 晶子レスポンシブなサイトにあっという間にjQueryを実装する 先生:田中 晶子
レスポンシブなサイトにあっという間にjQueryを実装する 先生:田中 晶子schoowebcampus
 
むずかしくないJavaScriptのやさしい話 jQueryからの次のステップ #ndsmeetup8
むずかしくないJavaScriptのやさしい話 jQueryからの次のステップ #ndsmeetup8むずかしくないJavaScriptのやさしい話 jQueryからの次のステップ #ndsmeetup8
むずかしくないJavaScriptのやさしい話 jQueryからの次のステップ #ndsmeetup8civic Sasaki
 

Destacado (10)

Firefoxos
FirefoxosFirefoxos
Firefoxos
 
第38回載せられないapp
第38回載せられないapp第38回載せられないapp
第38回載せられないapp
 
第36回NDS 発表資料 ちょこっとpython
第36回NDS 発表資料 ちょこっとpython第36回NDS 発表資料 ちょこっとpython
第36回NDS 発表資料 ちょこっとpython
 
第42回中華製安価デバイスの通信を解析した話
第42回中華製安価デバイスの通信を解析した話第42回中華製安価デバイスの通信を解析した話
第42回中華製安価デバイスの通信を解析した話
 
第37回NDS Java並行処理 今昔物語
第37回NDS Java並行処理 今昔物語第37回NDS Java並行処理 今昔物語
第37回NDS Java並行処理 今昔物語
 
今日帰ってすぐに始められるChrome App #nds45
今日帰ってすぐに始められるChrome App #nds45今日帰ってすぐに始められるChrome App #nds45
今日帰ってすぐに始められるChrome App #nds45
 
LT: 今日帰ってすぐに始められるPython #nds45
LT: 今日帰ってすぐに始められるPython #nds45LT: 今日帰ってすぐに始められるPython #nds45
LT: 今日帰ってすぐに始められるPython #nds45
 
Amazon SESのメール受信対応でサーバー減らせた話
Amazon SESのメール受信対応でサーバー減らせた話Amazon SESのメール受信対応でサーバー減らせた話
Amazon SESのメール受信対応でサーバー減らせた話
 
レスポンシブなサイトにあっという間にjQueryを実装する 先生:田中 晶子
レスポンシブなサイトにあっという間にjQueryを実装する 先生:田中 晶子レスポンシブなサイトにあっという間にjQueryを実装する 先生:田中 晶子
レスポンシブなサイトにあっという間にjQueryを実装する 先生:田中 晶子
 
むずかしくないJavaScriptのやさしい話 jQueryからの次のステップ #ndsmeetup8
むずかしくないJavaScriptのやさしい話 jQueryからの次のステップ #ndsmeetup8むずかしくないJavaScriptのやさしい話 jQueryからの次のステップ #ndsmeetup8
むずかしくないJavaScriptのやさしい話 jQueryからの次のステップ #ndsmeetup8
 

Similar a NDS31 はじめてChrome App

8th july2013 packaged_apps_codelab
8th july2013 packaged_apps_codelab8th july2013 packaged_apps_codelab
8th july2013 packaged_apps_codelabKensaku Komatsu
 
Beenos creators' night#201305今井
Beenos creators' night#201305今井Beenos creators' night#201305今井
Beenos creators' night#201305今井Daisuke Imai
 
Herokumeetup8 growライトニングトーク
Herokumeetup8 growライトニングトークHerokumeetup8 growライトニングトーク
Herokumeetup8 growライトニングトーク淳 竹野
 
ATNDに下書き保存とプレビューを追加するATND Draft
ATNDに下書き保存とプレビューを追加するATND Draft ATNDに下書き保存とプレビューを追加するATND Draft
ATNDに下書き保存とプレビューを追加するATND Draft Atsuhiko Kimura
 
スマートフォンとPC連携
スマートフォンとPC連携スマートフォンとPC連携
スマートフォンとPC連携高見 知英
 
社内システムの構造と設計、実装のはなし
社内システムの構造と設計、実装のはなし社内システムの構造と設計、実装のはなし
社内システムの構造と設計、実装のはなしSATOSHI TAGOMORI
 
What’s new in 4.0 of LibreOffice (Lake-Hamanako-ver.) / LibreOffice 4.0の新機能 (...
What’s new in 4.0 of LibreOffice (Lake-Hamanako-ver.) / LibreOffice 4.0の新機能 (...What’s new in 4.0 of LibreOffice (Lake-Hamanako-ver.) / LibreOffice 4.0の新機能 (...
What’s new in 4.0 of LibreOffice (Lake-Hamanako-ver.) / LibreOffice 4.0の新機能 (...Naruhiko Ogasawara
 
MacRuby を使ってみました
MacRuby を使ってみましたMacRuby を使ってみました
MacRuby を使ってみましたYoshiyuki MIYAGI
 
Moff 20130309 jawsug_santo_v01
Moff 20130309 jawsug_santo_v01Moff 20130309 jawsug_santo_v01
Moff 20130309 jawsug_santo_v01Motohiro Yonesaka
 
最新のデスクトップアプリを使おう:Snap, Flatpak, AppImage
最新のデスクトップアプリを使おう:Snap, Flatpak, AppImage最新のデスクトップアプリを使おう:Snap, Flatpak, AppImage
最新のデスクトップアプリを使おう:Snap, Flatpak, AppImageNaruhiko Ogasawara
 
#MA6 Mashup Lightning Talks #114 ATND Draft イベントの下書き保存とプレビュー できちゃう Chrome Ex...
#MA6 Mashup Lightning Talks #114 ATND Draft イベントの下書き保存とプレビューできちゃう Chrome Ex...#MA6 Mashup Lightning Talks #114 ATND Draft イベントの下書き保存とプレビューできちゃう Chrome Ex...
#MA6 Mashup Lightning Talks #114 ATND Draft イベントの下書き保存とプレビュー できちゃう Chrome Ex...Nobuhiro Nakajima
 
NFC使ってみたよ -Firefox OS 勉強会7th-
NFC使ってみたよ -Firefox OS 勉強会7th-NFC使ってみたよ -Firefox OS 勉強会7th-
NFC使ってみたよ -Firefox OS 勉強会7th-meco300
 
Where Should Developers Go
Where Should Developers GoWhere Should Developers Go
Where Should Developers GoKoki Shimizu
 
早稲田大学授業 - モバイルプログラミング
早稲田大学授業 - モバイルプログラミング早稲田大学授業 - モバイルプログラミング
早稲田大学授業 - モバイルプログラミングIppei Arita
 
WordCamp Tokyo 2014
WordCamp Tokyo 2014WordCamp Tokyo 2014
WordCamp Tokyo 2014horike37
 
LLTLIVE in Shibuya 2013.12.13
LLTLIVE in Shibuya 2013.12.13LLTLIVE in Shibuya 2013.12.13
LLTLIVE in Shibuya 2013.12.13maru_cc
 
Secret of Firefox
Secret of FirefoxSecret of Firefox
Secret of Firefoxdynamis
 

Similar a NDS31 はじめてChrome App (20)

Kddi mugen lab
Kddi mugen labKddi mugen lab
Kddi mugen lab
 
8th july2013 packaged_apps_codelab
8th july2013 packaged_apps_codelab8th july2013 packaged_apps_codelab
8th july2013 packaged_apps_codelab
 
Beenos creators' night#201305今井
Beenos creators' night#201305今井Beenos creators' night#201305今井
Beenos creators' night#201305今井
 
PHP meets NodeJS
PHP meets NodeJSPHP meets NodeJS
PHP meets NodeJS
 
Herokumeetup8 growライトニングトーク
Herokumeetup8 growライトニングトークHerokumeetup8 growライトニングトーク
Herokumeetup8 growライトニングトーク
 
Opencampus
OpencampusOpencampus
Opencampus
 
ATNDに下書き保存とプレビューを追加するATND Draft
ATNDに下書き保存とプレビューを追加するATND Draft ATNDに下書き保存とプレビューを追加するATND Draft
ATNDに下書き保存とプレビューを追加するATND Draft
 
スマートフォンとPC連携
スマートフォンとPC連携スマートフォンとPC連携
スマートフォンとPC連携
 
社内システムの構造と設計、実装のはなし
社内システムの構造と設計、実装のはなし社内システムの構造と設計、実装のはなし
社内システムの構造と設計、実装のはなし
 
What’s new in 4.0 of LibreOffice (Lake-Hamanako-ver.) / LibreOffice 4.0の新機能 (...
What’s new in 4.0 of LibreOffice (Lake-Hamanako-ver.) / LibreOffice 4.0の新機能 (...What’s new in 4.0 of LibreOffice (Lake-Hamanako-ver.) / LibreOffice 4.0の新機能 (...
What’s new in 4.0 of LibreOffice (Lake-Hamanako-ver.) / LibreOffice 4.0の新機能 (...
 
MacRuby を使ってみました
MacRuby を使ってみましたMacRuby を使ってみました
MacRuby を使ってみました
 
Moff 20130309 jawsug_santo_v01
Moff 20130309 jawsug_santo_v01Moff 20130309 jawsug_santo_v01
Moff 20130309 jawsug_santo_v01
 
最新のデスクトップアプリを使おう:Snap, Flatpak, AppImage
最新のデスクトップアプリを使おう:Snap, Flatpak, AppImage最新のデスクトップアプリを使おう:Snap, Flatpak, AppImage
最新のデスクトップアプリを使おう:Snap, Flatpak, AppImage
 
#MA6 Mashup Lightning Talks #114 ATND Draft イベントの下書き保存とプレビュー できちゃう Chrome Ex...
#MA6 Mashup Lightning Talks #114 ATND Draft イベントの下書き保存とプレビューできちゃう Chrome Ex...#MA6 Mashup Lightning Talks #114 ATND Draft イベントの下書き保存とプレビューできちゃう Chrome Ex...
#MA6 Mashup Lightning Talks #114 ATND Draft イベントの下書き保存とプレビュー できちゃう Chrome Ex...
 
NFC使ってみたよ -Firefox OS 勉強会7th-
NFC使ってみたよ -Firefox OS 勉強会7th-NFC使ってみたよ -Firefox OS 勉強会7th-
NFC使ってみたよ -Firefox OS 勉強会7th-
 
Where Should Developers Go
Where Should Developers GoWhere Should Developers Go
Where Should Developers Go
 
早稲田大学授業 - モバイルプログラミング
早稲田大学授業 - モバイルプログラミング早稲田大学授業 - モバイルプログラミング
早稲田大学授業 - モバイルプログラミング
 
WordCamp Tokyo 2014
WordCamp Tokyo 2014WordCamp Tokyo 2014
WordCamp Tokyo 2014
 
LLTLIVE in Shibuya 2013.12.13
LLTLIVE in Shibuya 2013.12.13LLTLIVE in Shibuya 2013.12.13
LLTLIVE in Shibuya 2013.12.13
 
Secret of Firefox
Secret of FirefoxSecret of Firefox
Secret of Firefox
 

Último

論文紹介: The Surprising Effectiveness of PPO in Cooperative Multi-Agent Games
論文紹介: The Surprising Effectiveness of PPO in Cooperative Multi-Agent Games論文紹介: The Surprising Effectiveness of PPO in Cooperative Multi-Agent Games
論文紹介: The Surprising Effectiveness of PPO in Cooperative Multi-Agent Gamesatsushi061452
 
論文紹介:Video-GroundingDINO: Towards Open-Vocabulary Spatio-Temporal Video Groun...
論文紹介:Video-GroundingDINO: Towards Open-Vocabulary Spatio-Temporal Video Groun...論文紹介:Video-GroundingDINO: Towards Open-Vocabulary Spatio-Temporal Video Groun...
論文紹介:Video-GroundingDINO: Towards Open-Vocabulary Spatio-Temporal Video Groun...Toru Tamaki
 
知識ゼロの営業マンでもできた!超速で初心者を脱する、悪魔的学習ステップ3選.pptx
知識ゼロの営業マンでもできた!超速で初心者を脱する、悪魔的学習ステップ3選.pptx知識ゼロの営業マンでもできた!超速で初心者を脱する、悪魔的学習ステップ3選.pptx
知識ゼロの営業マンでもできた!超速で初心者を脱する、悪魔的学習ステップ3選.pptxsn679259
 
新人研修 後半 2024/04/26の勉強会で発表されたものです。
新人研修 後半        2024/04/26の勉強会で発表されたものです。新人研修 後半        2024/04/26の勉強会で発表されたものです。
新人研修 後半 2024/04/26の勉強会で発表されたものです。iPride Co., Ltd.
 
Amazon SES を勉強してみる その22024/04/26の勉強会で発表されたものです。
Amazon SES を勉強してみる その22024/04/26の勉強会で発表されたものです。Amazon SES を勉強してみる その22024/04/26の勉強会で発表されたものです。
Amazon SES を勉強してみる その22024/04/26の勉強会で発表されたものです。iPride Co., Ltd.
 
LoRaWAN スマート距離検出デバイスDS20L日本語マニュアル
LoRaWAN スマート距離検出デバイスDS20L日本語マニュアルLoRaWAN スマート距離検出デバイスDS20L日本語マニュアル
LoRaWAN スマート距離検出デバイスDS20L日本語マニュアルCRI Japan, Inc.
 
Utilizing Ballerina for Cloud Native Integrations
Utilizing Ballerina for Cloud Native IntegrationsUtilizing Ballerina for Cloud Native Integrations
Utilizing Ballerina for Cloud Native IntegrationsWSO2
 
Amazon SES を勉強してみる その32024/04/26の勉強会で発表されたものです。
Amazon SES を勉強してみる その32024/04/26の勉強会で発表されたものです。Amazon SES を勉強してみる その32024/04/26の勉強会で発表されたものです。
Amazon SES を勉強してみる その32024/04/26の勉強会で発表されたものです。iPride Co., Ltd.
 
論文紹介:Selective Structured State-Spaces for Long-Form Video Understanding
論文紹介:Selective Structured State-Spaces for Long-Form Video Understanding論文紹介:Selective Structured State-Spaces for Long-Form Video Understanding
論文紹介:Selective Structured State-Spaces for Long-Form Video UnderstandingToru Tamaki
 
LoRaWANスマート距離検出センサー DS20L カタログ LiDARデバイス
LoRaWANスマート距離検出センサー  DS20L  カタログ  LiDARデバイスLoRaWANスマート距離検出センサー  DS20L  カタログ  LiDARデバイス
LoRaWANスマート距離検出センサー DS20L カタログ LiDARデバイスCRI Japan, Inc.
 

Último (10)

論文紹介: The Surprising Effectiveness of PPO in Cooperative Multi-Agent Games
論文紹介: The Surprising Effectiveness of PPO in Cooperative Multi-Agent Games論文紹介: The Surprising Effectiveness of PPO in Cooperative Multi-Agent Games
論文紹介: The Surprising Effectiveness of PPO in Cooperative Multi-Agent Games
 
論文紹介:Video-GroundingDINO: Towards Open-Vocabulary Spatio-Temporal Video Groun...
論文紹介:Video-GroundingDINO: Towards Open-Vocabulary Spatio-Temporal Video Groun...論文紹介:Video-GroundingDINO: Towards Open-Vocabulary Spatio-Temporal Video Groun...
論文紹介:Video-GroundingDINO: Towards Open-Vocabulary Spatio-Temporal Video Groun...
 
知識ゼロの営業マンでもできた!超速で初心者を脱する、悪魔的学習ステップ3選.pptx
知識ゼロの営業マンでもできた!超速で初心者を脱する、悪魔的学習ステップ3選.pptx知識ゼロの営業マンでもできた!超速で初心者を脱する、悪魔的学習ステップ3選.pptx
知識ゼロの営業マンでもできた!超速で初心者を脱する、悪魔的学習ステップ3選.pptx
 
新人研修 後半 2024/04/26の勉強会で発表されたものです。
新人研修 後半        2024/04/26の勉強会で発表されたものです。新人研修 後半        2024/04/26の勉強会で発表されたものです。
新人研修 後半 2024/04/26の勉強会で発表されたものです。
 
Amazon SES を勉強してみる その22024/04/26の勉強会で発表されたものです。
Amazon SES を勉強してみる その22024/04/26の勉強会で発表されたものです。Amazon SES を勉強してみる その22024/04/26の勉強会で発表されたものです。
Amazon SES を勉強してみる その22024/04/26の勉強会で発表されたものです。
 
LoRaWAN スマート距離検出デバイスDS20L日本語マニュアル
LoRaWAN スマート距離検出デバイスDS20L日本語マニュアルLoRaWAN スマート距離検出デバイスDS20L日本語マニュアル
LoRaWAN スマート距離検出デバイスDS20L日本語マニュアル
 
Utilizing Ballerina for Cloud Native Integrations
Utilizing Ballerina for Cloud Native IntegrationsUtilizing Ballerina for Cloud Native Integrations
Utilizing Ballerina for Cloud Native Integrations
 
Amazon SES を勉強してみる その32024/04/26の勉強会で発表されたものです。
Amazon SES を勉強してみる その32024/04/26の勉強会で発表されたものです。Amazon SES を勉強してみる その32024/04/26の勉強会で発表されたものです。
Amazon SES を勉強してみる その32024/04/26の勉強会で発表されたものです。
 
論文紹介:Selective Structured State-Spaces for Long-Form Video Understanding
論文紹介:Selective Structured State-Spaces for Long-Form Video Understanding論文紹介:Selective Structured State-Spaces for Long-Form Video Understanding
論文紹介:Selective Structured State-Spaces for Long-Form Video Understanding
 
LoRaWANスマート距離検出センサー DS20L カタログ LiDARデバイス
LoRaWANスマート距離検出センサー  DS20L  カタログ  LiDARデバイスLoRaWANスマート距離検出センサー  DS20L  カタログ  LiDARデバイス
LoRaWANスマート距離検出センサー DS20L カタログ LiDARデバイス
 

NDS31 はじめてChrome App