JS Girls Sapporo #1に行ってきたよ。

20140514
4月26日に開催されたJS Girls Sapporo #1にスタッフとして参加してきました。
Chromeの拡張機能をつくるという内容だったんですが、参加者の皆さんがすごく楽しそうに開発していたのを見ていて私も作りたくなってうずうずしていましたー!
突然ですが今日はTHE NOVEMBERSの10枚目の作品「今日も生きたね」のリリース日、そして前作「zeitgeist」が全国流通する日です。
ということで記念にTHE NOVEMBERSの次のライブ情報が見れる拡張をつくりました♡
拡張の追加はこちらから△
Next THE NOVEMBERS’s Live
THE NOVEMBERSに関することができて、勉強にもなって最高に楽しかったです♡

Chromeの拡張機能について

まずChromeの拡張機能についてや作り方など、イベントでもわかりやすく説明してくださった1000chさん(@1000ch)のハンズオン資料を参考にしました。

Chrome Extension Hands-on
https://github.com/1000ch/chrome-extension-hands-on/wiki

すごくわかりやすかったので初めて拡張つくろうと思っている方は是非見てみてください!

やりたかったこと

「THE NOVEMBERSの今日以降のライブ情報を1件表示したいね」

つまずいたところ

feedを読み込むのにGoogle Feed APIを利用したのですが、
Manifest Version 2はデフォルトでは外部リソースを読み込めないらしくエラーが発生しました。
これを解消するのに、読み込みたい外部リソースのドメインをホワイトリストに登録する必要があります。

"content_security_policy": "script-src 'self' https://www.google.com; object-src 'self'"

こちらを参考にしました。

Content Security Policy (CSP)
https://developer.chrome.com/extensions/contentSecurityPolicy
Chrome 拡張機能・アプリの Manifest Version を 1 から 2 にアップグレードする
http://tetsuwo.tumblr.com/post/31273343648/chrome-manifest-version-2

ここらへんよくわからなかったのでもっと勉強しよう…。

これからやりたいこと

今のところ日付を抽出する部分が半角しか対応していないので、正規表現つかって全角になっても抽出できるようにしたいです。
数日にわたって開催されるイベントなど、日付が複数ある場合はちゃんと表示されないと思うのでそれも…。

作ったもの

改めて拡張の紹介を。
アイコンをクリックするだけですぐ次のライブ情報を確認できます♡
Chromeお使いの方は入れてみてくださいね♡
Next THE NOVEMBERS’s Live

まとめ

アイコンやプロモーションタイル画像のTHE NOVEMBERSのロゴは許可を頂いて使用しています。舐太さん(@NOVEMBERS_INFO)お忙しい中本当にありがとうございました△
前回のInstagramのコーデまとめ同様に自己満足で作っているので、オフィシャルのものではありません。拡張に関する事は私までσ(゚∀゚ )オレ
そしてソースコードをGitHubに公開してみました!どきどきのGitHubデビュー!
marimelody11/thenovembers-chrome-extension
イベントを終えて、自分で拡張作ってみて、JSもっと理解して書けるようになりたいと思ったので11月までにレベル11くらい上がるように頑張ります。
新しいことに挑戦していくTHE NOVEMBERSが大好きなので、私もやったこと無いことに挑戦していこうと思います△