Chrome Packaged Apps コードラボ 【Chrome本出版記念!】に参加してきた

2013.07.07

この記事は公開されてから1年以上経過しています。情報が古い可能性がありますので、ご注意ください。

なぜ「開発者のための」Chromeか

昨日、Google Japanで開催されたChrome Packaged Apps コードラボ 【Chrome本出版記念!】に参加してきました。

Chrome Packaged Appsのハンズオンイベントと併せて開発者のためのChromeガイドブック出版を記念して著者4名(Google API Expert)のセッションが行われました。

開発者のためのChromeガイドブックはAmazonから購入できますが現在品切れで届くのが1週間後から4週間後のようです。

Chrome Packaged Apps コードラボの写真や概要はこちらをどうぞ。

この記事の内容

  1. イベントのセッション内容紹介
  2. Chrome Packaged Appsの作り方入門
  3. Chrome Packaged Appsのデバッグ(起動方法のみ)

Chrome Packaged Appsとは?

Chrome Packaged AppsとはHTML、JavaScript、CSSでできたデスクトップアプリです。
ブラウザのタブ内ではなく独自のウィンドウで表示されます。タブもアドレスバーも表示されないためウェブアプリとはわかりません。
また、独自のAPIを利用してWebアプリケーションでは不可能な処理を行うこともできます。

コードラボのサンプルを実際に表示するとこんな感じに。ぱっと見ではHTMLでできたアプリには見えませんね。

Chrome Packaged Appsのサンプル

セッション

ネタセッションが多く思わず笑ってしまいあまりメモできていないのでさくっと紹介します。

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を使いタスク管理アプリを作っていきます。
この後の行程は長くなってしまうので省きますが、ドキュメントに解説とすべてのサンプルが掲載されているので興味のある方はやってみてください。アプリに以下のような機能を追加する行程を詳しく解説しています。

  1. 同期型APIを非同期型APIに書き換える
  2. リマインダーを出す
  3. URLをパースしてWebviewで開く
  4. Webから取得した画像を表示(XHRを利用する)
  5. Todoをローカルファイルにエクスポート

Chrome Packaged Appsをデバッグする

アプリのデバッグはWebサイトのデバッグとは少し違うところがあります。
アプリのコンテキストメニューを開くとと「要素の検証」と「バックグランドページの検証」の2つがあります。

2つの検証メニュー

要素の検証とバックグラウンドページの検証

要素の検証
表示されるHTMLやCSS、HTMLに読み込んでいるJavaScriptを検証する際に利用する
バックグランドページの検証
アプリ・ウィンドウを検証する際に利用する

chrome://inspect/からの検証

セッション「2,Chrome Packaged Appsをデバッグ」で紹介されていたchrome://inspect/から検証できるか確認してみましょう。

chrome://inspectを利用したDevtoolsの起動

デスクトップアプリのようにアイコンから起動する

インストールされたアプリはデスクトップやDockのアイコンから起動できます。まさにデスクトップアプリですね。
Chrome CanaryのMac版ではchrome://flags/からEnable packaged app shortcuts.をオンにしてください。

Enable packaged app shortcuts. をオン

Enable packaged app shortcuts.をオンにした状態でアプリをパッケージ化するとアイコンが格納されたディレクトリが勝手に開きます。

Chrome Canaryアプリ

これをデスクトップやDockに置くことでデスクトップアプリのように起動できます。すばらしい!

また、デスクトップではありませんがChromeのアプリケーションにもアイコンが表示されます。

Chromeアプリケーション

まとめ

あとは、コードラボのドキュメントを参考にアプリ作成の勘所をつかんでみてください。
開発者のためのChromeガイドブックもChrome API、ウェブストア、Devtoolsについて詳しくまとまった解説が読めるのでとても参考になると思います。早めに手に入れておきましょう。

資料