Chrome Packaged Apps コードラボ 【Chrome本出版記念！】に参加してきた
昨日、Google Japanで開催されたChrome Packaged Apps コードラボ 【Chrome本出版記念！】に参加してきました。
Chrome Packaged Appsのハンズオンイベントと併せて開発者のためのChromeガイドブック出版を記念して著者4名（Google API Expert）のセッションが行われました。
開発者のためのChromeガイドブックはAmazonから購入できますが現在品切れで届くのが1週間後から4週間後のようです。
Chrome Packaged Apps コードラボの写真や概要はこちらをどうぞ。
この記事の内容
- イベントのセッション内容紹介
- Chrome Packaged Appsの作り方入門
- Chrome Packaged Appsのデバッグ（起動方法のみ）
Chrome Packaged Appsとは？
Chrome Packaged AppsとはHTML、JavaScript、CSSでできたデスクトップアプリです。
ブラウザのタブ内ではなく独自のウィンドウで表示されます。タブもアドレスバーも表示されないためウェブアプリとはわかりません。
また、独自のAPIを利用してWebアプリケーションでは不可能な処理を行うこともできます。
コードラボのサンプルを実際に表示するとこんな感じに。ぱっと見ではHTMLでできたアプリには見えませんね。
セッション
ネタセッションが多く思わず笑ってしまいあまりメモできていないのでさくっと紹介します。
1，なぜ「開発者のための」Chromeか
田中 洋一郎氏（@yoichiro）
「世の中で最も大切なものは何ですか」という質問が印象的で答えはやはり「お金」。
開発者のためのChromeガイドブックでは3章のChrome ウェブストアを担当しており、マネタイズについて解説があります。
やはり稼げなければ・・・ということですね。
田中 洋一郎氏が作っているエクステンション
2，Chrome Packaged Appsをデバッグ
吉川 徹氏（@yoshikawa_t）
Chromeの拡張機能・アプリのデバッグについて、唯一真面目なセッションでした。
- アプリ・ウィンドウのデバッグはバックグラウンドページの検証
- Consoleでエラーを確認しよう
- バックグランドページのデバッグは拡張機能のメニューから起動することも可能
- Content ScriptsはDevtoolsから選択しデバッグすることができる
- chrome://inspect にアクセスするとデバッグ可能なすべてのページが表示される（リモートデバッグも含む）
3，Chrome Packaged Appsの未来
小松 健作氏（@komasshu）
こちらも「世の中で一番大切なものは・・・」「酒」だそうです。
本題はChrome Packaged Appsのポイント。
Chromeをランタイムとするアプリケーション
- ランチャーから起動する
- デスクトップからも起動できる
Web ApplicationとPackaged Appsの違い
- インストールができる
- 標準化はされていないが今後そういった動きもあるかもしれない
- Low Level APIが利用できる
Mobile向けには？
- CordovaへのPlugin
- Packaged AppsのAPIでCordovaアプリが作れる
- Android, iOSでも動くかも？
セッションについてはこれぐらいにしておきます。
それではコードラボで行われたハンズオンの紹介です。
コードラボ
コードラボではチュートリアルの説明資料とサンプルを使いタスク管理デスクトップアプリを作るハンズオンが行われました。
Chrome Packaged Appsを作るには？
Chrome Packaged Appsはアプリのメタ情報を記述するマニフェストファイル（manifest.json）とウィンドウを表示するためのJavaScriptファイル（background.js）が必要です。さらに実際に中身を記述するHTMLファイルがあればウィンドウに何かを表示することができます。
また、今のところChrome Packaged Appsを作るにはChrome Canaryが必要です。ダウンロードしてインストールしましょう。
それでは適当にディレクトリを作成し以下のソースでファイル作ります。
manifest.json
{
"manifest_version": 2,
"name": "I/O Codelab",
"version": "1",
"permissions": [],
"app": {
"background": {
"scripts": ["background.js"]
}
},
"minimum_chrome_version": "28"
}
background.js
chrome.app.runtime.onLaunched.addListener(function() {
chrome.app.window.create('index.html', {
id: 'main',
bounds: { width: 620, height: 500 }
});
});
index.html
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> </head> <body> <h1>Hello, let's code!</h1> </body> </html>
これでファイルの準備ができました。
続いてこれらのファイルをパッケージ化します。ここからはChrome Canaryをぽちぽちといじります。
パッケージ化
Chrome Canaryを開き、拡張機能のページ「chrome://extensions/」を開きましょう。
開いたらデベロッパーモードをオンにします。
デベロッパーメニューが表示されるので「パッケージ化されていない拡張機能を読み込む･･･」をクリックします。
先ほど作成したファイルが入っているディレクトリを選択し、パッケージ化します。
パッケージ化に成功すると先ほどのサンプルが拡張機能に追加されます。
これでアプリを起動する準備ができました。早速起動してみましょう。
独自のウィンドウでアプリが起動しましたね。
かっくいい！！
こんな感じであとはアプリを作っていきます。
コードラボのタスク管理アプリサンプルで勘所を掴もう
サンプルではlocalStorageとChrome APIを使いタスク管理アプリを作っていきます。
この後の行程は長くなってしまうので省きますが、ドキュメントに解説とすべてのサンプルが掲載されているので興味のある方はやってみてください。アプリに以下のような機能を追加する行程を詳しく解説しています。
- 同期型APIを非同期型APIに書き換える
- リマインダーを出す
- URLをパースしてWebviewで開く
- Webから取得した画像を表示（XHRを利用する）
- Todoをローカルファイルにエクスポート
Chrome Packaged Appsをデバッグする
アプリのデバッグはWebサイトのデバッグとは少し違うところがあります。
アプリのコンテキストメニューを開くとと「要素の検証」と「バックグランドページの検証」の2つがあります。
要素の検証とバックグラウンドページの検証
- 要素の検証
- 表示されるHTMLやCSS、HTMLに読み込んでいるJavaScriptを検証する際に利用する
- バックグランドページの検証
- アプリ・ウィンドウを検証する際に利用する
chrome://inspect/からの検証
セッション「2，Chrome Packaged Appsをデバッグ」で紹介されていたchrome://inspect/から検証できるか確認してみましょう。
デスクトップアプリのようにアイコンから起動する
インストールされたアプリはデスクトップやDockのアイコンから起動できます。まさにデスクトップアプリですね。
Chrome CanaryのMac版ではchrome://flags/からEnable packaged app shortcuts.をオンにしてください。
Enable packaged app shortcuts.をオンにした状態でアプリをパッケージ化するとアイコンが格納されたディレクトリが勝手に開きます。
これをデスクトップやDockに置くことでデスクトップアプリのように起動できます。すばらしい！
また、デスクトップではありませんがChromeのアプリケーションにもアイコンが表示されます。
まとめ
あとは、コードラボのドキュメントを参考にアプリ作成の勘所をつかんでみてください。
開発者のためのChromeガイドブックもChrome API、ウェブストア、Devtoolsについて詳しくまとまった解説が読めるのでとても参考になると思います。早めに手に入れておきましょう。
