この記事はGoogle I/O 2014で開かれた How we built Chrome Dev Editor with the Chrome platform というセッションの動画の内容を自分なりに解釈して要約して日本語でまとめたものです。正しい和訳ではありません。下記URLの動画を見ながら読んでもらえればよいかと思います。
https://www.youtube.com/watch?v=NNLnTz6yIc4
Chrome Dev Editorとは何か
Chrome Dev Editor(以下CDE)とはChromeプラットフォームでアプリケーションを開発するためのツールである。WebアプリだけでなくChromeアプリをJavaScriptあるいはDartで作ることが出来る。CDEはそれ自体がChromeアプリであり、DartとPolymerを使って書かれている。動作環境はWindowsやMac、Linuxだけでなく、Chromebookでも使うことが出来る。
Chromeプラットフォームについて
Chromeプラットフォームは3つの要素からなる。
- Chromeアプリ
- Dart
- Polymer
Chromeアプリ
Chromeアプリは普通のWebページにはない新しくリッチでネイティブな機能を追加し、Webの世界を拡張する。BluetoothやUSBで接続されたデバイスにアクセスすることからファイルの読み書きまで可能だ。デフォルトでマルチプラットフォームに動作し、デスクトップにかぎらずAndroidやiOSでも同じように動く。
Dart
DartとはWebのためのクラスベース・オブジェクト指向の構造化プログラミング言語である。Dartは生産性を高めるように設計されており、静的なコード分析がコードを書くときにエラーや警告を教えてくれる。優れたリファクタリングツールによってコードを大きくするときも健康さを保つことが出来る。ネイティブに実行することでパフォーマンスを得ることもできるし、JavaScriptにコンパイルすることであらゆるブラウザをターゲットとすることもできる。
Polymer
Polymerを使うことでWebにスクリプトだけではなくマークアップやスタイリングも含めたソフトウェアを封入することができる。独自のHTML要素を作り、プロジェクトをまたいで再利用することもできる。我々はリッチなUI要素のライブラリーとしてMaterial Designを作った。
なぜChrome Dev Editorを作ったのか
2年前に開始したChromeアプリには数々の印象的なアプリケーションがリリースされているが、開発者向けツールに関してはとても少なかった。我々はWeb開発者としての素晴らしい体験を与えられるようにChromeプラットフォーム上で開発用ツールを作れるようChromeプラットフォームを拡張しようとした。そんな時Dart開発チームの友人も同じようなことを考えていた。
Dart2jsコンパイラや、分析ツール、パッケージマネージャ、DartのツールのほとんどはDartで書かれている。しかし最後の大きなピース、Dart EditorはEclipseアプリケーションとしてJavaで書かれている。我々はDartチームであったがJavaのコーディングに多くの時間を割いていて、どうすればDart自体に多くの時間をかけられるのかを考えていた。
そして1年前、我々はDartを使ってネイティブライクなアプリケーションを作ることが出来るChromeプラットフォームの話を聞き、私達の開発ツールをDartで書くことにした。Windows、Mac、LinuxだけでなくChromebookもターゲットに出来るようになったのはとても素晴らしいことだった。自動アップデートのようないくつかの機能によって時間を節約することで、我々はDart自体を書くことに専念できた。
Chromeアプリのチームがまったく同じことをしていると気づき、クロスプラットフォームに素晴らしい開発者体験を提供するという目標を共有した。さらにjavaScriptとDartの両方で、ChromeアプリだけでなくWebアプリも作れるようにしようと決めて、それまでの約8000行あったプロトタイプを0から作りなおした。
Chrome Dev Editorを始める
CDEは複数のファイルを扱えるし、Polymerを使うことが出来る。もちろん使わずに1ファイルでアプリを作ることもできるが、我々がPolymerを使う理由の一つはメンテナンス性と再利用性、問題のスケーリングのため、もう一つは何層にもdivが重なった"divのスープ"のせいだ。これらのdivは機能的ではあるが意味はなく、CSSのスタイリングはリークしやすいし他のパーツに影響を与えやすい。スクリプトも悪い依存性を書いてしまうし、このコードを再利用するのは困難だ。これらをすべて解決するのがPolymerである。
Polymer
Polymerがもたらすのは
- DOM構造の封入
- CSSのスコープ化
- 再利用可能なコンポーネントの作成
である。DOM構造の封入により、それぞれのコンポーネントの内部構造を気にする必要はなくなる。CSSのスコープによりリークするもされることもなくなる。アプリケーションの中で再利用可能なコンポーネントを作ることもできるし、他人が作ったコンポーネントを使うことも出来る。Polymerは本当に優れたソフトウェアエンジニアリング原理をWebにもたらす。Polymerを使って書かれたコードはより意味論的で読みやすい。
Git on Chromebooks
CDEのGithubからリポジトリをクローンしてローカルでコミットし、プルリクエストを送りたかったが、ChromebookではGitコマンドはうまく動かない。CDEをGit対応させるために我々はGitコマンドと同じように使えるクライアントライブラリをDartで作った。ライブラリはpubでgitlibという名前で公開されている。
CDEのツールバーにあるGit clone...はgitlabに含まれる<git-clone-button>で提供されている。git-clone-buttonはGitリポジトリを新しいプロジェクトとしてクローンできる。Chromebook上でもGitを使うことが出来るのだ。
Bootstrapping
ドッグフーディング（自分の作った製品を自分で使うこと）は実に重要である。我々はCDEの開発にCDEを使い、イシューを探して、それを直すことができた。我々がコードを書いていた時の大きな問題は静的コード分析を持っていなかったことだ。我々は打ち込んだコードからのエラーや警告を得られず、実行時やデプロイ後のウェブストアでエラーに気づいていた。つまり、CDEで動作するDartの静的コード分析が必要だった。
静的コード分析のパッケージはだれでも使えるようにanalyzerパッケージで公開されている。Dart静的コード解析は非常に重い処理だがDOMスレッドに割り込まないよう並列に処理される。シンプルに見えるがこれは我々の最大の障害だった。このコード分析のおかげでいくつかの機能を作ることが出来て、別のファイルにジャンプしたりナビゲートしたりすることが簡単になった。
Web app support
WebアプリサポートはChromeアプリと同じくらい重要だ。今年のI/Oで紹介されたばかりのWeb Starter KitはWebアプリを素早く作り、パフォーマンスを軌道に乗せ、jankフリーなコードでマルチデバイス対応のベストプラクティスWebキットだ。CDEにはWebサーバーを内蔵しており、作ったWebアプリケーションはローカルで実際に動かすことができ、ChromeアプリのAPIからネイティブソケットなどにアクセスすることもできる。Gitだけでなく我々はWebサーバーもCDEに組み込んだのだ。
Chrome Apps on Mobile
今年のI/Oで特にホットな話題はモバイルだ。我々はCDEのデザインを始めた時からモバイルが重要なユースケースになるとわかっていて、Chrome Dev Editorにモバイルのサポートを組み込み、ローカルで動かすようにモバイル上でアプリケーションを動かすことを容易にした。Deploy to mobile...ボタンからUSBで接続したスマートフォンにChromeアプリをデプロイすることができる。Chromeアプリは我々もコントリビュートしているオープンソースフレームワークであるApacheのCordovaによってデスクトップだけでなくモバイルプラットフォームでも動作することが実現されている。我々が参加したプラグインにより、スマートフォンのアカウントにアクセスし、ネイティブな課金フローやGCMを使ったメッセージの受信を可能にした。
Chrome Dev Toolsはモバイルでの優れたデバッグが可能だ。chrome://inspectから起動中のChromeアプリをデバッグできる。
オープンソース化
CDEはオープンソースになっており、Chromeアプリ、Dart、Polymerの3つのパーツを我々がどのように使っているかはソースコードを見るとわかるはずだ。CDEはオープンソースだがコントリビューターはGoogleのエンジニアとそうでないエンジニアを合わせてたった20人強だ。我々は皆がCDEのコントリビュートを始めてくれることを願っている。
質疑応答
Q. 大きなWebアプリケーションにもCDEはスケール出来るか？
CDEはChrome file systemを使っているだけであり、指定されたフォルダ以下のファイルはすべて見ることが出来る。アプリケーションのサイズに制限はなくディスクサイズがある限り大きく出来る。
Q. クローンしたファイルはサーバーでホストされていないローカルマシンに持ってきていたが？
クローンしたあとはオフラインにしてもいいし、ネイティブアプリのように実行することができる。また現在我々は、Google Driveを用いたファイルバックアップで、異なるマシンでも自動的に同期することができるようになる機能を開発中だ。
Q. どんなデバイスのプラットフォームでもDartをネイティブに実行できるようになるのか？
今はJavaScriptにコンパイルされたCDEを使っている。これはDartiumに反抗して開発している。我々がデプロイするCDEはDart2jsでコンパイルされたものだ。
Q. NodeやGruntを使いたいがbashに対応されるか？
されていない。我々はJavaScriptのワークフローを解決する必要があるため、bashもサポートする必要がある。これはPolymerのサポートにも重要だし、CommonJSのサポートを解決するためにも必要なことだ。我々はCDEからネイティブコードを実行できるよう開発しているし、きっとNodeやGruntのようなネイティブツールへのサポートを提供できるはずだ。
Q. Chromeの中に一緒にDevToolsと一緒にCDEを入れる予定はあるか？
今のところCDEは別にインストールする必要がある別のアプリケーションだ。Chromeの外側でもっと早く開発を回していきたいので、我々はこのままにしたいと思っている。また、一回インストールすればすべてのChromeに同期されるようになっている。
Q. App Engineについて何かやるつもりはあるか？
我々はApp Engineサポートをやる予定だ。Gitで特定のURLにpushすることでApp Engineにとても簡単にデプロイできるようにする。
おかしい点や付け足したほうが良い点などあればコメントで教えてください。