Chromebook で Chrome App のプログラミング

プログラミングその他

Chromebook を買って、はじめて真面目に Chrome OS という環境を眺めてみましたが、これはなかなか出来物ですね。現代版シンクライアントというイメージが先行していて、アプリは Webサーバー側の処理がないと動かないという印象が、なんだか強いです。が、そんなことはなくって、普通にスタンドアロンで動くアプリが、しかも Chromebook 上でつくれます。

まぁ、crouton とかで Linux を入れなくても良かったです。ようするに、結構普通のPCです。

今回はこちらの本を参考に。

Programming Chrome Apps: Develop Cross-Platform Apps for Chrome (English Edition)

Programming Chrome Apps: Develop Cross-Platform Apps for Chrome (English Edition)

余談ですが、Kindle Cloud Reader でほとんどのリフローの日本語の技術書読めないので、Chromebook Flip を買ってから ついつい洋書を買ってしまいます。英語苦手なのに...

この本の一章 Your First Chrome App のサンプル、メートル→フィート変換器をサクサクと。

ダウンロードフォルダ内に、

なファイルを用意します。

ちなみにスクリーンショットは Ctrl + □|| を押すと、全画面のスクリーンショットがダウンロードフォルダに保存されます。範囲指定して撮りたい場合は Ctrl + Shift + □|| です。

テキストエディタは いろいろあるのですが、Caret を Chromeウェブストアからインストールしました。

まずは index.html。

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="utf-8" />
  <title>Converter</title>
  <script src="converter.js"></script>
</head>
<body>
  <p>
    <label for="meters">Meters:</label>
    <input type="text" id="meters">
  </p><p>
    <label for="feet">Feet:</label>
    <input type="text" id="feet" readonly>
  </p><p>
    <button id="convert">Convert</button>
  </p>
</body>
</html>

当り障りのない HTMLファイルです。実は名前はなんでも良いのですが、まぁ慣例通り index.html。インデックスでもなんでもないのですけどね。

ここの script要素に指定した converter.js はこんな感じ

window.onload = function() {
  document.querySelector("#convert").addEventListener("click",
    function () {
      var meters = document.querySelector("#meters");
      var feet   = document.querySelector("#feet");
      feet.value = meters.value * 3.28084;
    }
  );
};

Chrome APP として必要なのがmanifest.json。json 形式で

{
  "app": {
    "background": {
      "scripts": [ "background.js" ]
      }
    },
    "manifest_version": 2,
    "name": "Converter",
    "version":"1.0.0"
}

app.background にはバックグランドスクリプトを指定します。これは Chromeアプリだけのもので、 Chrome拡張にはないそうな。
manifest_version は 現在の最新が 2 。期待する Chrome Application Programming API のバージョンだそうですよ。

で、件のbackground.jsはこんな感じ。

chrome.app.runtime.onLaunched.addListener (
    function () {
      chrome.app.window.create('index.html');
    }
);

onLaunched のときに index.html を読みこむようにしています。他にも onSuspend 時の挙動とかもここで 割り当てます。

さて、ここまでやったら動かしてみます。

右上のメニューから [その他ツール(L)] → [拡張機能(E)] で 拡張機能のメニューを開きます。
で、右上の デベロッパーモードのチェックボックスをチェックすると いろいろボタンが増えるが開くので [パッケージ化されていない拡張機能を読み込む] を押して、上で作成したフォルダを開きます。



マニフェストをミスってるとここで教えてくれるので、ちょこちょこ修正。

起動をクリックすると...


おぉ、動きました。

パッケージ化するには、[拡張機能のパッケージ化]ボタンを押します

すると以下のダイアログが開くので

さっきのアプリのフォルダを選択します。鍵は初回は指定しないでOKです。すると

なメッセージがでて、さっきのフォルダと同じ階層に鍵とパッケージができています。

これでパッケージ化は完了せす。



あとは.crx ファイルを野良 Chromeアプリと同じく [拡張機能] の画面にドロップすれば インストールされます。


とても簡単です。


* * *


Microsoft が HTA と VBScript で見た夢再びという感じですね。ユーザが手軽にアプリを作れるのはとても良いことです。

もっともChromeAppは、簡単なアプリだけでなく本格的なアプリも作れます。API を眺めると usb とか FileSystem とか serial とか socket とか それなりにそろっていて、普通にアプリを書くにはあんまりこまんない感じ。

私自身まだ ちょっとかじった程度なので、よくわかってないところは多いのですが、ChromeOS って、触り始める前の「ブラウザしか使えない制限されたOS」「現代版シンクライアント」というイメージとは全然ちがうものだなぁ、という印象です。予想外にプログラマにも楽しいマシンですね。

うーん、もう一台欲しくなってしまいました。