SlideShare ist ein Scribd-Unternehmen logo
1 von 37
Downloaden Sie, um offline zu lesen
はじめての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日土曜日

Weitere ähnliche Inhalte

Andere mochten auch

第36回NDS 発表資料 ちょこっとpython
第36回NDS 発表資料 ちょこっとpython第36回NDS 発表資料 ちょこっとpython
第36回NDS 発表資料 ちょこっとpython
civic Sasaki
 
LT: 今日帰ってすぐに始められるPython #nds45
LT: 今日帰ってすぐに始められるPython #nds45LT: 今日帰ってすぐに始められるPython #nds45
LT: 今日帰ってすぐに始められるPython #nds45
civic Sasaki
 

Andere mochten auch (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
 

Ähnlich wie NDS31 はじめてChrome App

8th july2013 packaged_apps_codelab
8th july2013 packaged_apps_codelab8th july2013 packaged_apps_codelab
8th july2013 packaged_apps_codelab
Kensaku 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ライトニングトーク
淳 竹野
 
スマートフォンとPC連携
スマートフォンとPC連携スマートフォンとPC連携
スマートフォンとPC連携
高見 知英
 
MacRuby を使ってみました
MacRuby を使ってみましたMacRuby を使ってみました
MacRuby を使ってみました
Yoshiyuki MIYAGI
 
#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 Go
Koki Shimizu
 
早稲田大学授業 - モバイルプログラミング
早稲田大学授業 - モバイルプログラミング早稲田大学授業 - モバイルプログラミング
早稲田大学授業 - モバイルプログラミング
Ippei Arita
 
LLTLIVE in Shibuya 2013.12.13
LLTLIVE in Shibuya 2013.12.13LLTLIVE in Shibuya 2013.12.13
LLTLIVE in Shibuya 2013.12.13
maru_cc
 

Ähnlich wie 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
 

NDS31 はじめてChrome App