#daiizメモ

Scrapboxに夢中

トップ > chrome-dev-editor > Chrome Dev Editor で JavaScriptアプリの開発

Chrome Dev Editor で JavaScriptアプリの開発

chrome-dev-editor tech

Chrome Dev Editor 最高です！！便利すぎて感動してます！
ということで今回は、Chrome Dev Editor でのアプリ開発のはじめの一歩となる

  • Chrome Dev Editor とは
  • Chrome Dev Editor の導入
  • サンプルJavaScriptアプリの実行

について書こうと思います。
以降、本文中でChrome Dev EditorのことをCDEと略記することがあります。

Chrome Dev Editor とは

Googleが開発し今年の I/O で発表された、JavaScriptとDartでの開発が行えるIDEです。chromeアプリであるため、Windows PCやMacはもちろん、Chromebookでも利用できます。ソースコードもGitHubで公開されています。

ふつうにJavaScriptやDartで開発を行う環境のほかに、以下のようなアプリケーションを開発するための機能が提供されています。

f:id:daiiz:20140711181417p:plain

CDEはローカルウェブサーバーを内蔵しているため、Web Starter Kit や Polymer をすぐに使うこともできるのです。とても嬉しいですね。Chrome Dev Editorのより詳しい説明はこちらの記事がおすすめです。

Chrome Dev Editor をインストール・起動する

以下の手順にそってCDEをインストールし、起動してみましょう。

  1. Google Chrome をインストールする（お持ちでない方のみ）*1
  2. chrome を開く
  3. chrome で chromeウェブストアの Chrome Dev Editorのページを開く
  4. 表示されたパネルのタイトルが「Chrome Dev Editor (developer preview)」であることを確認して、＋無料ボタンをクリックします。しばらくするとchromeへのインストールが自動で始まります。これで、インストール作業は終了です。
  5. 続いてCDEを起動します。
    アドレスバーに「chrome://apps/」と入力しページを開いてください。
  6. 新しくタブが開き、これまでにインストールされたアプリの一覧が表示されます。この中から以下のアイコン

    f:id:daiiz:20140711124739p:plain

    を探し、 クリックしてください。
  7. CDEが起動します。以下のようなウィンドウの起動が確認できたら、右上の×ボタンをクリックして閉じてもOKです。

    f:id:daiiz:20140711125219p:plain

サンプルアプリを実行する

最後のステップです。CDEを使ってchromeアプリ*2を実行してみましょう。今回はgriddlesJS*3を用いたサンプルアプリ「Yummy」*4を実行してみます。

スポンサーリンク

サンプルアプリを入手してChrome Dev Editorに展開する

  1. YummyのGitHubページにアクセスしてください。
  2. 開いたページの右の方にあるDownload ZIPボタンをクリックしてサンプルアプリをダウンロードします。
  3. 圧縮されたzipファイルとしてダウンロードされるので、任意の場所に解凍してください。
  4. Chrome Dev Editorを起動してください。
  5. Chrome Dev Editorの「メニュー」アイコンからOpen Folder...をクリックし、先ほど解凍したフォルダを選択してください。

    f:id:daiiz:20140711171601p:plain

これで、ソースコード一式がCDE上に展開されました。以上で作業終了です。

chromeアプリとして実行する

  1. CDEの左側にあるフォルダ「Yummy3」を右クリックして、メニューを表示

  2. メニューからRunをクリック

    f:id:daiiz:20140711172309p:plain

サンプルアプリにはchromeアプリの設定ファイルが同梱されているため、Runボタンを押すだけでchromeアプリとして起動することができます。

Yummyが起動したら、以下の操作を行ってください。

  1. 左上のパンケーキアイコンをクリックしてサイドナビゲーションを表示
  2. サイドナビゲーションからインポートをクリック
  3. 「サンプルをインポート」カードのサンプルデータを登録ボタンをクリック

以下のようなごちそうフォトがズラリと並べば成功です！

f:id:daiiz:20140711165417p:plain

androidアプリとして実行する

Chrome Dev Editorには、JavaScriptアプリをAndroid端末で実行可能にする機能も搭載されています。 ただし、この機能を利用するためには、事前にAndroid端末に専用のアプリ（ADT*5）をインストールしておく必要があります。 このADTはGitHubの配布ページで公開されています。このページをAndroid端末で開き、緑色のChromeAppDeveloperTool-debug.apkボタンをタップしてインストールしてください。

  1. まず、AndroidにインストールしたADTを開きます。
  2. 次に、CDEの左側にあるフォルダ「Yummy3」を右クリックして、表示されるメニューのうち、Deploy to Mobileをクリックしてください。

    f:id:daiiz:20140711172649p:plain

  3. 表示されたパネルのメニューのうち２つめの「Deploy to a network host with this IP:」を選択した後、Androidで起動したADTに表示されているIPアドレスを入力してください。

    f:id:daiiz:20140711192913p:plain

  4. DeployをクリックするとAndroidのADTにアプリが読み込まれます。タップして起動してください。


先ほどと同様にYummy上でサンプルデータをインポートして、ごちそうフォトが並べばこちらも成功です！

f:id:daiiz:20140711170714p:plain

お疲れ様でした！

Chrome Dev Editorでプログラミングを楽しみましょう！！
長文にお付き合いいただきありがとうございました:)

*1:chromeのインストールはこちらのページから行えます。

*2:chromeアプリはJavaScriptで書くことができます。

*3:griddlesJSは、chromeアプリとして実行するために必要な設定ファイルが初めからパッケージ内に用意されています。

*4:写真を表示するだけの自作アプリです。サンプルデータは僕がmiilに投稿した写真です。写真をクリックするとmiilのページが開きます。ウィンドウ上部のメニューバーからキーワード絞り込み検索を行うこともできます。

*5:Chrome App Developer Tool for Mobile の略です。