読者です 読者をやめる 読者になる 読者になる

はじめての Chrome Apps with AngularJS

はじめに

Google Developers Meetup #2に参加して、Chrome Apps楽しそう! 作ってみたい! と思って作ってみました。

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="...">

実装した画面

スクリーンショット 2015-12-27 22.40.35.png

画像が表示されてませんね.. これも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にあります。

参考

ChromeアプリをAngularJSで書くまでの手順

AngularJSをはじめる前に - AngularJSに関するサイトやスライドまとめ

UI Bootstrap

ChromeAppsでの外部リソースの扱い方

Google Developers Meetup #2

TipMe

TipMe with IndieSquare