はじめての Chrome Apps with AngularJS
はじめに
Google Developers Meetup #2に参加して、Chrome Apps楽しそう! 作ってみたい! と思って作ってみました。
Chrome Appsとは
当日発表されたYoichiro Tanakaさんのスライドがとても分かりやすいです。いつも使ってるJavaScript、HTML、CSSで作れて、公開も簡単そうなのが魅力でした。
実装方法
Yoichiroさんのスライドにも書いていますが、Yomenジェネレータで基盤が作れます。
yo chromeapp
AngularJSをJSライブラリとして使いました。ChromeアプリをAngularJSで書くまでの手順に詳しく手順があります。
bower install angular --save
ハマりポイント
Content Security Policy (CSP)
基本的にいつもやってるWeb開発の手順で進められますが、CSPでつまずきました。CSPのルールはいくつかありますが、分かりやすい例だとJSのコードをHTMLファイルにかけません。e.g. <button onclick="...">
実装した画面
画像が表示されてませんね.. これもCSPの問題です。コンソールには以下エラーが出ています。
Refused to load the image 'https://api.indiesquare.me/wallet/get_asset_image?asset=ZONO' because it violates the following Content Security Policy directive: "img-src 'self' blob: filesystem: data: chrome-extension-resource:".
解決手段はあるので次回やりたいです。
まとめ
デスクトップアプリの実装は大変というイメージがありましたが難しくないと思いました。ソースはgithubにあります。
参考
AngularJSをはじめる前に - AngularJSに関するサイトやスライドまとめ
