Chrome Dev Editorでスマホ用のアプリを開発しよう

※今回の内容はChromebookとAndroidの組み合わせのみ確認済み

Chrome Dev Editorでは、HTMLとJavaScriptで開発してスマホで動かせるハイブリットアプリ※1を開発することができます。開発するに当たってPCにはChrome Dev Editorを、スマホにはChrome App Developer Toolをインストールしておく必要があります。

始めに用語の整理ですが、スマホで動かすアプリは、ネイティブアプリ、Webアプリとハイブリットアプリの三つに分けることができます。ネイティブアプリはスマホのアプリ開発用の言語を利用して、インターネットに接続していなくても動かすことができるアプリで、AndroidではJava、iOSではObjective-Cを使って開発します。WebアプリはHTMLやJavaScriptで開発したコードをサーバにあげて、Webサイトの一つとしてブラウザを介して実行するアプリです。ハイブリットアプリはWebアプリの手法で開発したコードをCordovaというフレームワークを利用してネイティブアプリ化して実行するアプリです。
Apache Cordova

それではネイティブアプリの開発の準備をしていきましょう。始めにスマホで下記のURLを開き、Chrome App Developer Toolをダウンロードしましょう。
Chrome App Developer Tool for Mobile

ダウンロードをする時は最新版を選び、ChromeAppDeveloperTool-debug.apkをクリックしてダウンロードとインストールを開始します。

ダウンロードできたら、スマホのアプリ一覧に上記のアイコンが表示されるのでクリックをしてみて、

この画面が表示されたら、インストールは完了です。インストール後、Androidのスマホを開発者モードにする必要があり、このモードにするには、設定→端末管理→端末情報へ移動後、最下部にある「ビルド番号」を連続タップして「これでデベロッパーになりました！」が表示されたら終了です。
次はChrome Dev Editorでスマホ用のprojectを作成します。
(Windowsではこの後にPC側にインストールするものがあるらしいが、今のところ把握していません)

New Projectを選んで、Project typeでJavaScript Chrome Appを選択してプロジェクトを作成します。

プロジェクトが作成できたら、プロジェクト名にカーソルを合わせて右クリックをクリックし、Deploy to Mobile…をクリックします。

Deploy to Mobileの画面が表示されたら、Deploy to a network host with this IP:を選択し、

AndroidのスマホにインストールしたChrome App Developer Toolに表示された数字の羅列の値をフォームに入力します。この時、:(コロン)の前までの数字を入力します。
(10.116.222.206:2424の場合は、10.116.222.206まで)

入力後にDEPLOYをクリックして、スマホ側で

プロジェクト内のindex.htmlのコードが実行・表示されれば、ハイブリットアプリの開発環境の作成は終了です。index.htmlとmain.jsにコードを書いて、作成したいアプリの開発をしましょう。