今回のレビューポイント

Chromeといえば、普段誰もがお世話になっているChrome拡張機能。通常なら、WindowsなりMacなりでコーディングするChrome拡張機能を、あえてChromebookで開発できるか検証しながら、ChromeOSのコーディング環境を追求してみようと思います。

結論から言ってしまうと、Chromeアプリ、イケますね。ちょっとしたコーディングからかなり本格的な開発まで、対応できる懐の深さ、ある。

Chrome拡張機能がどうやってできているか

まず、最初にChrome拡張機能がどうやってできているか簡単に説明すると、開発に使うファイルは通常のWeb開発と同じ。つまりは、htmlやcssやjavascriptなどなど。これに付随して画像ファイル等も使えるけれど、基本はこれらテキストファイルがそのまま動作するので、テキストファイルからバイナリファイルへのビルド作業なども不要。

これであれば、Chromebookでもなんとかなる予感がしますね。んだ。

とりあえずのできることの把握であれば、LIGのこちらの記事が敷居が低くて良いかと。

参照：Chromeのオリジナル拡張機能を開発しよう（ソースコードあり） | 株式会社LIG

Chromebookでのローカルファイルの扱いについて

「さてコーディングすっぞ」と思った時に、最初に疑問に思ったのが「そもそも、Chromebookって、ローカルにファイル置けるの？」ということ。

結論から言うと、一部制約がありながらも置くことはできます。

Chromebookの全機種かどうかはわからないけれど、今回レビューでお借りしているC300MAには、SDカードスロットがあり、これをローカルファイルの置き場所として利用することができます。

こんな感じで、SDカードの差込口がある。

ここにSDカードをさしておくと、Chromebook独自のファイラーにSDカードが表示され、そこにファイルを置くことができます。

ファイラーにSDカードが追加される。

このファイラーはデフォルトでGoogleドライブが接続されていたり、他の拡張機能を利用すると、DropboxやOnedriveなども利用できる。

しかし、このファイラー、Windowsのエクスプローラーや、MacのFinderなどと同様に使えると思うと痛い目にあうので、注意が必要。

Chromebookのファイラーでできること

• 画像ファイルの閲覧やmp3ファイル等の再生（ファイルがローカルにあればオフライン再生も可能）
• Office系ファイルの閲覧、編集（一部形式）
• フォルダの作成
• ファイルの名前変更、削除
• ファイルの圧縮、展開

利用できるファイル形式は、公式のこちら（Chromebooks で使用できるファイル形式と外部デバイス - Chromebook ヘルプ）がわかりやすい。結構対応フォーマットが多くて意外なところ。一部とはいえOffice系ファイルの編集にも対応しているのは驚き。

Chromebookのファイラーでできないこと

• ファイルの新規作成　（え？）
• ファイルのコピー　（まじかよ？）
• ドラッグ・アンド・ドロップによるファイルの移動　（どないなっとんねん！）

ファイル作成の手段が全然ないメニュー。

ここらへん、最初思いっきり戸惑います。基本的にファイラーでできることは、ファイルの読取りです。慣れてないとすっごい違和感あるんですよ、これ。

じゃぁ、ファイルや画像の作成はなにでやるかというと、基本的にはChromeアプリでやることになります。最初、htmlファイルを新規テキストファイルで作ろうと思ったのに、その手段がなかなか見つからず、苦労しました…

コーディングするためのエディタ

前項で説明したとおり、ファイラーではファイルの作成ができません。コーディングをするための最初のファイルをどう作るかという話なんだけれど、シンプルなテキストエディタがあるのでそれを使うのが早い。

Text - Chrome ウェブストア

こんな感じで、拡張子から判定するのかシンタックスハイライト（コードの色付け）に対応しつつ、自動インデントもやってくれます。書くだけならば書けなくもないという感じ。さすがに、コードの自動補完などには対応してません。

Jsonの色分けもしてくれます。やるね。

もう少し高機能でコーディングに特化しているものだと、こちらのZedがオススメです。

Zed Code Editor - Chrome ウェブストア

一番の違いは、左側にファイルをフォルダ階層を維持したまま表示してくれること。素晴らしい。最低限の文法エラーも指摘してくれます。

これらのエディタを使えば、htmlやcss、Javascriptの開発はだいたいなんとかなるかと。

じゃぁ、さらに高機能なやつが使いたい！！と思いつつ、IDE（統合開発環境）レベルのアプリを試してみました。一番有名らしいのがこれ。

Codenvy - Chrome ウェブストア

公式サイトはこちら（Codenvy | Next-Generation Workspaces）

最初、ローカルのファイルを開く方法がわからなくて諦めかけたけど、zipファイルをインポートする方法があったので、それを使うことによりプロジェクトを開くことができました。すげぇなこれ。これが、Chromeアプリか。

サーバー上にホストされたWorkSpaceにプロジェクトを構築することで、マルチデバイスのChromeブラウザから全く同一環境にアクセスし、開発ができるというもの。Chromeブラウザだけではなく、SSHでデスクトップIDEからも接続可能。さらに、HerokuやGoogle App Engineやら、その他PaaSにデプロイして動作確認できます。

なんせ凄いんだけれど、Chrome拡張機能の開発という点では役に立ちません。

なんでかというと、Chrome拡張機能の実行環境はあくまでローカルのChromeブラウザです。ところが、このCodenvyは、最初のローカルファイルからのインポートは対応してるけど、その後のローカルファイルの直接編集には対応していないからなのです。

あくまで、クラウド上のホスト先にWorkspaceは存在し、その環境のdockerで動作確認するので、ローカルファイルからの起動が前提のChrome拡張機能の動作確認やデバッグができないんですよね。

ここらへんが、非常に戸惑った点。ChromeOSという制約の中では、そのアプリで何ができるかが、慣れないとなかなか判断が難しい。特にファイルの扱いにクセがあるので、普通のPCだと当たり前にできることが、案外出来ないということも多かったり、試行錯誤が必要です。

Chrome拡張機能の開発に限って言えば、ハマコーが探してみたところ、Zedが一番優秀なエディタだと思います。

Chromeアプリの充実度が凄い

最初、「キツイだろうなぁ」と思っていたChromebookでのコーディング。エディタ中心に見てみたけれど、これだけの高機能アプリが無料で配布されている、ChromeOSのエコシステムには正直びっくりしました。

ほんま、ChromeWebストアをつらつら眺めていると、便利そうなアプリいっぱいあるんですよね。SSHクライアントにもFireSSHっていうのがあったりとか、およそ開発で必要になりそうなものは一通りそろっている。

前半部分で書いたように、ローカルファイルの扱いについては、制約があって戸惑う部分もあるけれど、そこさえ気をつけておけば、できることの柔軟さは非常に幅広いというのが今回の印象でした。

ZenBlogモニタープログラム、第2回はこれにて終了。次回の第3回では、1ヶ月ほど使ってみたChromebook、C300MAの総評と、ChromeOSへの印象をまとめます。

それでは。また、C300MAのレビューでお会いしましょう。ハマコー（@hamako9999）でした。

---

執筆者：ハマコー(@hamako9999)さん