Chromebook で Chrome App のプログラミング
Chromebook を買って、はじめて真面目に Chrome OS という環境を眺めてみましたが、これはなかなか出来物ですね。現代版シンクライアントというイメージが先行していて、アプリは Webサーバー側の処理がないと動かないという印象が、なんだか強いです。が、そんなことはなくって、普通にスタンドアロンで動くアプリが、しかも Chromebook 上でつくれます。
まぁ、crouton とかで Linux を入れなくても良かったです。ようするに、結構普通のPCです。
今回はこちらの本を参考に。
Programming Chrome Apps: Develop Cross-Platform Apps for Chrome (English Edition)
- 作者: Marc Rochkind
- 出版社/メーカー: O'Reilly Media
- 発売日: 2014/12/15
- メディア: Kindle版
- この商品を含むブログを見る
余談ですが、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」「現代版シンクライアント」というイメージとは全然ちがうものだなぁ、という印象です。予想外にプログラマにも楽しいマシンですね。
うーん、もう一台欲しくなってしまいました。