12.Google App Engine用Chrome拡張機能を作ってみた | CA Beat エンジニアのブログ

CA Beat エンジニアのブログ

Google App Engineをメインに技術情報を発信しています。

$CA Beat エンジニアのブログ-05.appengine_chrome


CA Beat エンジニアリーダーのヤマサキ(@vierjp)です。

少し前にtwitter(@vierjp)にも書いた「Google App Engine用Chrome拡張機能」についてです。


○GAE Admin Console Highlight

正規表現でアプリケーションIDを指定してAdmin Consoleの背景色を変更するChrome拡張機能です。
メンバーからの「本番環境で間違って操作しないか不安」という声に答えて作りました。
本番環境とテスト環境の区別が明確になるよう、
Admin Consoleで表示しているアプリケーションが正規表現で指定したアプリケーションIDにマッチした場合に
Admin Consoleの背景色を変更します。

意外な事に日本以外でも中国・スペイン・オランダの方にも使っていただけているようで。
作ってみるもんですね。(´▽`)





第5回の記事「05.Google App Engine向けChrome拡張機能 3選」で紹介したプラグインと比べると、
比べるのが申し訳ないぐらい本当に「ちょっとしたもの」なのですが、
参考にした記事がとても勉強になる記事だったので、その紹介も含め記事にすることにしました。


○Chrome拡張機能について

ブラウザの拡張機能というと難しそうに聞こえるかもしれませんが、
Chrome拡張機能は基本的に全てhtmlとJavaScript(とわずかな設定ファイル)なので、
Webエンジニアなら学習コストはとても低いです。
JavaScriptの記述にあたってはjQuery等のフレームワーク・ライブラリも使用可能です。

私は去年のGoogle Developer DayのDev-Quizの問題を解くために最低限の作り方を覚えたのですが、
「画面を開いたら指定したJavaScriptを実行する」レベルならかなり簡単に作れます。

覚えて以来、家でも面倒な入力を自動化するために「画面を開いたら自動でフォームの入力項目を埋めるChrome拡張」を作って使っていたりしています。

今回紹介した拡張機能も最初はアプリケーションIDをコードの中に直書きにして
やっつけで作ったのですが、そのレベルならテスト込みで15分程度でした。


ただ、公開するつもりで設定機能等を作り出すと
Chrome拡張機能について覚える必要のある事も増えていきます。


○そこでオススメしたいのがこの記事

僕が考えたChrome拡張機能を作るときのデザインパターン

この記事のコードを読んで、設定画面の作り方やChrome拡張機能の構成がわかりました。

背景色を変える部分の処理以外はほとんどそのまま使わせていただきました。
色々な内容のChrome拡張機能のベースに使えるであろう素敵な内容で、
Chrome拡張機能を作る際に必見なオススメ記事です。

この記事に沿って一回作ってしまえば、以降は設定画面周りも時間を書けずに作れるのではないかと思います。
私はこの記事のおかげで
「もうちょっとだけ頑張って設定画面とかつけてChrome拡張機能公開してみようかな」
という気になれました。


これを読んでいるあなたもChrome拡張機能の作成にチャレンジしてみてはいかがでしょうか。(´▽`)



・・・ところで今年のGoogle Developer Day Tokyoって結局どうなったんでしょう?(´・ω・`)


★宣伝★
CA BeatではTwitter、Facebookページの運営も行っております!
ブログの更新情報だけでなく、役立つスマホトピックニュースを
選りすぐって配信しております。

ブログ右サイドバーからぜひフォロー、いいね!してくださいねヽ(´▽`)ノ