Chromeアプリ: <webview>はドキュメントに追加されたときに動作する

JavaScript でオブジェクトを作成した際にはロードされない。
DOM に追加されてはじめて src が読み込まれる。

// ここでは読み込まれない
var webview = $('<webview src="http://yokano-jp.blogspot.jp/"></webview>');
webview.on('loadstop', function() {
    console.log('loaded');
});

// ここではじめて読み込まれる
$('body').append(webview);

Chrome: 見えない <webview> で操作を行う

Chrome アプリ内に見えない <webview> を設置したい場合は、

幅と高さを 0px にすればよい。

<webview src="http://hogehoge.com/" style="height: 0px; width: 0px;"></webview>

display: hidden; にすると埋め込んだスクリプトが実行されなくなるので注意。

<webview src="http://hogehoge.com/" style="display: none;"></webview>

Chrome アプリ：<webview> から親要素へオブジェクトを渡す

Chrome アプリの <webview> から親要素（embedder）にデータを渡す際に console.log() を使う方法がある。

<webview> 内で console.log() を使用すると、<webview> の consolemessage イベントが実行される。

JSON データを console.log() で出力して、親側で受け取れば複雑なオブジェクトも渡すことができる。

親要素側

var webview = $('#my_webview');
webview.on('consolemessage', function(e) {
    var message = e.originalEvent.message;
    try {
        var datas = JSON.parse(message);
        console.log(' からデータを受け取りました', datas);
    } catch(e) {
        console.log(' からログが発行されました', message);
    }
});

webview 側

var result = {
    id: 1,
    value: 1234
};
var json = JSON.stringify(result);
console.log(json);

Chromeアプリ：<webview>を使ったセッション(Cookie)の共有

Chrome アプリでは外部サイトを表示するために <webview> が使用できる。
ただし会員サイトなどログインが必要な場合など、
ログイン状態を保存するために Cookie を複数の <webview> で保存したい時がある。

<webview> の partition 属性に共通した文字列を渡しておくと、
複数の <webview> 間で Cookie が共有されるようになる。

<webview id="foo" src="http://www.google.com/" style="width:640px; height:480px" partition="persist:googlepluswidgets"></webview>

webview Tag - Google Chrome
https://developer.chrome.com/apps/tags/webview

Chrome アプリ：<webview> は描画されていなくても動作する

<webview> では partition を設定することでクッキーの保存が可能であるため、

ログインした状態でセッションを継続させるために利用できる。

<webview> に外部サイトのログイン画面を表示して、

JavaScript でフォーム入力・送信すれば自動的にクッキーが <webview> に保存される。

これらの処理は <webview> を隠した状態で動作させられる。

例えば height: 0px にしたり、visibility: hidden; を指定すれば良い。

/* CSS */
#my-webview {
    display: hidden;
}

<!-- HTML -->
<webview id="my-webview" src="http://target-site.com/login" partition="persist:googlepluswidgets"></webview>

/* JavaScript(jQuery) */
$('#my-webview').on('loadstop', function() {
    var doc = $(this.contentWindow.document);
    doc.find('#login-id').val('my_id');
    doc.find('#login-pass').val('my_pass');
    doc.find('#login-submit').click();
});

Chrome アプリ： 内の console.log() を jQuery で取得

Chrome アプリでは <webview> 要素を設置することで、
外部サイトをアプリ内に表示することができる。

<webview> 内で発生するイベントは、
<webview> を含む親（embedder）から JavaScript 経由で取得できる。

<webview> 内で console.log() を使用する場合は、
consolemessage イベントを使って親要素側で改めて出力しなければ確認できない。

jQuery の場合は originalEvent の中に入っているイベントから取得する必要がある。

var webview = $('#my-webview');

// webview 内で console.log() が使用されると consolemessage イベントが発生
webview.on('consolemessage', function(e) {
    // 引数内の originalEvent.message にメッセージが渡される
    console.log(e.originalEvent.message);
});

jQuery の .on() でバインドした場合は、
本来のイベントオブジェクトは originalEvent 内に格納されるので注意。

Chrome アプリ：外部サイトの表示

しばらく Chrome アプリ開発に集中していました。

Chrome アプリで外部サイトを表示したい場合は

<webview> 要素を使って実現できる。

<webview> は Chrome アプリでのみ使用可能。

<webview> Tag - chrome

https://developer.chrome.com/apps/tags/webview

<webview id="foo" src="http://www.google.com/" style="width:640px; height:480px"></webview>

Chrome アプリ：クロスドメイン通信

Chrome アプリでは Ajax などでクロスドメイン通信が可能である。
マニフェストファイルの permissions の値として、
通信先のサーバを設定しておけばクロスドメイン通信できるようになる。
あとは $.ajax などなんでも良いので通信するだけ。

HTTP 通信のみであれば sockets を使う必要はない。

Chrome アプリ：複数のスクリプトを読み込む

manifest.json に複数の js ファイルを渡すと、
アプリ起動時に先頭から順番に読み込みを行ってくれる。
もちろん html ファイルから <script> で読み込んでも良い。

"background": {
  "scripts": [
    "foo.js",
    "background.js"
  ]
}

Chrome アプリ：パッケージアプリから CDN で jQuery を呼び出せない

Chrome のパッケージアプリ（HTML, CSS, JS で構成されるアプリ）からは、
外部サーバ上の JS ファイルを直接読み込むことはできない。

これは CSP(Content Security Policy) として、
クロスサイトスクリプティングを防ぐために敢えて禁止されている。

CDN で jQuery などのライブラリを読み込みたい場合でも、
予めファイルとしてダウンロードしたものを、
パッケージ内にファイルとして設置して、それを読み込む必要がある。

詳細はこちら
https://developer.chrome.com/extensions/content_scripts

Chrome アプリ：アプリインストール時の処理

Chrome アプリをインストールした時に１度だけ実行される処理を作成できる。

onInstalled | developer.chrome.com
https://developer.chrome.com/apps/runtime#event-onInstalled

アプリ内のバックグランドスクリプトへ以下を追加する。

/**
 * インストールされた時の処理
 */
chrome.runtime.onInstalled.addListener(function() {
    // ここにインストール時の処理
});

アプリの設定データを Chrome 上に作成するなど、アプリの初期化を行う際に使用する。

Chrome アプリ：フレームなしウィンドウを作る

https://developer.chrome.com/apps/app_window#type-ContentBounds

ウィンドウを作成する際にフレームを付けるかどうかを指定できる。
デフォルトだとフレーム付きのウィンドウが作成される。

ウィンドウ作成時に frame: "none" を渡すとフレーム無しで作成できる。

chrome.app.window.create('test.html', {
    bounds: {
        width: 640,
        height: 480
    },
    frame: 'none'
});

Chrome アプリ：文字化けが発生する

Chrome アプリで HTML, CSS, JavaScript を使用するパッケージアプリの場合、
HTML 内で文字コードを指定しておかないと環境によっては文字化けが発生する模様。

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
    </head>
    <body>
        ......
    </body>
</html>

Chrome アプリ：使用する API 、アクセスする外部リソースの宣言

Chrome アプリから外部サーバへアクセスしたり、
準備された API を使用する場合は必ずマニフェストファイル上で宣言しなければならない。

https://developer.chrome.com/apps/app_external

"permissions": [
    "...",
    "https://supersweetdomainbutnotcspfriendly.com/"
  ]

Chrome アプリ: データのセーブ・ロード

Chrome アプリは storage API を使ってデータの保存・取得ができる。

まず、manifest.json で storage API を使うことを宣言。

{
    "name": "my_app",
    ...
    "permissions": [
        "storage"
    ]
}

起動している Chrome だけに保存する場合（他の Chrome 上で復元しない場合）は、
storage.local.set() で保存、 storage.local.get() で取得。

// 保存
chrome.storage.local.set({'data_key': 'data_value'});

// 取得
var value = '';
chrome.storage.local.get('value', function(item) {
    value = item.value;
});

Chrome アプリ: ウィンドウを開く・閉じる

Chrome アプリでは Web ブラウザとは独立したウィンドウを開くことができる。
通常のアプリケーションと同様に個別のウィンドウを持つ。

chrome.app.window API を使用する。
https://developer.chrome.com/apps/app_window

// 作成
chrome.app.window.create('my_file.html', {
    bounds: {
        width: 640,
        height: 480
    }
});

// 開いているウィンドウを閉じる
chrome.app.window.current().close();

Chrome アプリ: サンプルアプリの作り方

公式のサンプル作成方法
https://developer.chrome.com/apps/manifest

まず、Chrome アプリ用のフォルダを作成する。

フォルダの中にアプリの設定ファイル manifest.json を作成する。

{
  "name": "Hello World!",
  "description": "My first Chrome App.",
  "version": "0.1",
  "manifest_version": 2,
  "app": {
    "background": {
      "scripts": ["background.js"]
    }
  },
  "icons": { "16": "calculator-16.png", "128": "calculator-128.png" }
}

アプリの制御スクリプト background.js をフォルダ内に作成。
アプリ起動時にウィンドウを開くようにする。

chrome.app.runtime.onLaunched.addListener(function() {
  chrome.app.window.create('window.html', {
    'bounds': {
      'width': 400,
      'height': 500
    }
  });
});

開かれるウィンドウの HTML を window.html としてフォルダ内に作成。

<!DOCTYPE html>
<html>
  <head>
  </head>
  <body>
    <div>Hello, world!</div>
  </body>
</html>

アイコン画像を以下からダウンロードしてフォルダ内に設置。

• calculator-16.png
• calculator-128.png

Chrome を起動して URL に chrome://flags を入力して Enter。

「試験運用版の拡張機能 API」を有効にして、Chrome を再起動。

これで開発中のアプリを Chrome 上で実行できるようになる。

Chrome 右上のメニューボタンから、

その他のツール > 拡張機能

デベロッパーモードにチェックを入れて、

「パッケージ化されていない拡張機能を読み込む...」ボタンを押して、

作成していたアプリフォルダを選択。

するとサンプルアプリ「Hello World!」がインストールされる。

そのまま起動すると　Hello World! と表示されるウィンドウが出現する。

以上で、サンプルアプリの作成は完了。

ちなみに新しいタブを開いた画面で、

左上のアプリアイコンをクリックしてアプリ一覧を表示し、

その中から起動することも可能。

Chrome App: 開発ドキュメント

Chrome アプリや拡張機能を作成する際に参照するドキュメントはこちら
https://developer.chrome.com/home

Chrome アプリなら PLATFORM -> Apps
Chrome 拡張機能なら PLATFORMS -> Extensions

から開発方法が確認できる。

Chrome: LEGO で遊ぶ

Chrome と LEGO がコラボした Web アプリ「Build with Chrome」では Google Chrome 上でレゴを楽しむことができます。

Web GL を使用して自由に LEGO を組み立てることができ、出来上がった作品は Google Map と同じインタフェース上で公開することができ、全世界の作品を 3D で楽しむことができます。作品を公開するとコンピュータの位置情報を元に地図上へ LEGO が表示されます。

スマホやタブレットでも動作するようです。紹介ムービーはこちら。


参考
Chrome + LEGO: You can build whatever you like - Google Official Blog
http://googleblog.blogspot.jp/2014/01/chrome-lego-you-can-build-whatever-you.html?utm_source=feedburner&utm_medium=feed&utm_campaign=Feed:+blogspot/MKuf+(Official+Google+Blog)