#daiizメモ

Scrapboxに夢中

Chrome Dev Editor で Polymer を用いた Chromeアプリの開発

Chrome Dev Editor とは

Chrome Dev Editor の基本的な部分については以下の記事を参照ください。

本題

Chrome Dev Editor のアップデートがあった模様です。昨日、 Chrome Dev Editor の作成可能なプロジェクトに「JavaScript Chrome App (using Polymer paper elements)」が新たに追加されていることを確認しました。

f:id:daiiz:20140906195721p:plain

試しにデフォルトで用意されているChrome Appプロジェクトを実行するところまで試してみました。

まずはいつも通り、左上の「横三本線ボタン」を押して、プロジェクトの基本情報を入力します。今回は以下のようにしました。

f:id:daiiz:20140906200311p:plain

そして右下の「CREATE」ボタンをクリック。プロジェクトのファイル構成が始まると同時に以下のようなメッセージが表示されました。

f:id:daiiz:20140906200517p:plain

難しそうなことが書いてありますが、簡単に和訳(意訳)すると

あなたのアプリはこのままでは動きません。

このプロジェクトのテンプレートでは Polymer エレメントを使用しています。これらの Polymer エレメントは Chrome アプリで採用されているコンテンツセキュリティポリシー(CSP)に適合していません。

これに対応するために、'Getting Bower packages...' のステップが完了したら、エディタの左パネルの一覧の 'bower_components' フォルダを右クリックして、表示される 'Refactor for CSP' をクリックしてください。

のような感じになると思います。

指示通りbower_componentsフォルダを右クリックして、表示される Refactor for CSP をクリックします。

f:id:daiiz:20140906202313p:plain

ウィンドウ下部に「Refactoring bower_components for CSP compatibility...」とメッセージが表示されるので、1分ほど待ちます*1

完了したら、以下のように「index.html」を右クリックして「Run」します。

f:id:daiiz:20140906202917p:plain

これで Chromeアプリ が起動するはずなのですが・・・

f:id:daiiz:20140906203042p:plain

「アプリケーション起動失敗」のエラーが出てきました。「インストールに失敗した」とが書かれていますが、chrome://extensions/ を開いて直接確認してみると、

f:id:daiiz:20140906203619p:plain

問題なくインストールされていました。*2

「起動」ボタン(赤枠囲みのテキストボタン)をクリックすると、無事に Chromeアプリ が開き、Polymer の paperエレメントで実現されている Material Design を楽しむことができます。

f:id:daiiz:20140906204002p:plain

お疲れ様でした^^

*1:今度時間があるときに「Refactor for CSP」で何が行われているのかを詳しく調べてみたいと思います。

*2:エラーが出た理由は分かりませんでした。