« ChromebookでAndroidアプリを動かす! | トップページ | XPERIA J1とarrows M02にモバイルSUICAがようやく対応 »

2015/03/31

Chromebookでローカル動作するアプリをセルフ開発してみる

Chromebookのいいところのひとつに、Chromebookで動作するアプリをChromebookで開発、ビルドできることがあります。

別途Mac OSコンピュータや、Windows PCは必要ありません。Chromebookが1台あれば、Chromeアプリを作成し、動かすことができます。
Screenshot_20150331_at_211444


前々回、Chrome拡張を作りましたが、あれはブラウザのバーに常駐するものでした。これを少し変更して、ブラウザを立ち上げなくても、ローカルで動作できるChromeアプリを、Chromebookで作ってみます。
厳密には、動作確認時に、Windows PCで改行コードが意図した通りに変換できているか確認したり、Chromebookで設定した項目が引き継げているか確かめているので、Chromebookだけで作成することにこだわっているわけではありません。ただ、普通にできるのと、まともにできないのは大きな違いのように感じます。

さて、Chromeブラウザしか動かずオンライン接続していないとほぼ使い物にならないと言われるChromebookですけれど、通常のブラウザ画面とは別に、ローカルで動作するChromeアプリも作成することが可能です。

基本的にはChrome拡張と同じような感じで作成していきます。
Chromebookのローカルドライブである「ダウンロード」に作成するアプリ用のフォルダを掘り、その中に、manifest.jsonを作成します。ぼくはCaretというアプリをテキストエディタとして使って作成しています。
まずbackground.jsというスクリプトを作成します。ここからhtmlをまず開きます。今回はsjispad.htmlというファイルを開いています。この中で別ファイルのスクリプトsjispad.jsをよみこんでいます。
このスクリプトにアプリの処理を書けばよい、ということのようです。

早速試行錯誤してみます。非同期apiというのがなかなか分かりにくいです。

さて、スクリプトを書けたらまずローカルでテストします。Chromeブラウザの[その他のツール]-[拡張機能]の画面を出します。デベロッパーモードのチェックを入れると、開発者用メニューが出てきます。ここで[パッケージ化されていない拡張機能を読み込む]でフォルダを指定すると、manifest.jsonを読んでアプリをメニューに登録してくれます。エラーのあるときは表示されるので、manifest.jsonの内容など修正していきます。

Screenshot_20150331_at_205603

無事動きました。

ここで、[拡張機能のパッケージ化]でパッケージファイルを作成することができます。

前々回のChrome拡張もそうだったのですけれど、パッケージファイルで運用するより、Chromeウェブストアに上げてしまった方が管理が簡単でした。Chromeウェブストアで公開するには、最初に$5必要ですが、Chromeウェブストアからインストールしておけば、どのデバイスでもChromeでログインすれば同じアプリが使えますし、アップデートも自動でしてくれて、面倒がありません。

そういうわけで、自分しか使わないだろうけれど、Chromeウェブストアに上げて公開します。バグだらけのときは限定公開にしておけば、リンクを知らなければインストールできないので安心でしょう。

デベロッパーダッシュボードから、アップロードします。アプリを作成していたフォルダをzipにしてアップロードします。これがソース一式です。(MITライセンスにしておきました)
スクリーンショットやプロモーションタイル画像が必要になります。これもChromebookで作成します。pixlr Editorで指定の大きさにスクリーンショットが画像を変換したり作成したりしてアップロードしました。

どりあえず作成したアプリに、設定画面を付け加えます。フォントの大きさくらい変えたいよな、というのと、改行コードを選んでテキストファイルに保存したかったからです。


Screenshot_20150331_at_210150

設定はローカルストレージに保存されますが、syncにしておけば、各デバイスをまたいで設定値を利用できるようです。
ついでに入力中のメモ本文をローカルストレージに自動保存しておくようにします。こちらは容量の壁に当たらないように、syncでなくlocalにしておきます。そのデバイスでしか読み込めませんが、十分でしょう。

Chromebookで、シフトJISで保存できるメモ帳もどきを自作できました。


Screenshot_20150331_at_210523

Shift-JIS pad


自分で使う分にはこれで十分です。こんな風に、比較的気軽にChromebookではローカルで動くアプリを作成することができす。ブラウザしか動かない不自由なマシン、という購入前の印象と、自分で好きにアプリを作って動かせるコンピュータという、実際に手にして使ってみてのChromebookの印象はずいぶん違うものです。

楽しいマシンです、Chromebook。

|

« ChromebookでAndroidアプリを動かす! | トップページ | XPERIA J1とarrows M02にモバイルSUICAがようやく対応 »

コメント

Shift-JIS padを愛用させていただいています。
携帯向けのWeb作成で古い機種に対応させるため、Shift JISにする必要があるので助かっています。

要望ですが、検索と置換機能をつけることは可能でしょうか。

目的の場所を探したり、リンクを一括で書き換えたりするのに検索と置換機能があると助かります。

投稿: Outliner | 2015/11/16 10:47

Chromebookなら、簡単に作れるのですね!アプリ開発の情報、見ててとても面白いです!

投稿: papapa | 2016/01/02 02:43

コメントを書く



(ウェブ上には掲載しません)




トラックバック

この記事のトラックバックURL:
http://app.cocolog-nifty.com/t/trackback/69188/61368119

この記事へのトラックバック一覧です: Chromebookでローカル動作するアプリをセルフ開発してみる:

« ChromebookでAndroidアプリを動かす! | トップページ | XPERIA J1とarrows M02にモバイルSUICAがようやく対応 »