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

べにやまぶろぐ

技術寄りの話を書くつもり

Trello のハッシュタグをもとにカードに色づけしてくれる Chrome プラグイン "Colored Hashtag for Trello" を Yeoman を使って作ってみた(その2)

Yeoman JavaScript Trello Git/GitHub/GitLab Chrome

↑ を作ってみたシリーズ、前回の記事 の続きです。

タイトルにもありますが、今回初めて Chrome 拡張機能を作るに当たって、以前 勉強会 に参加してから気になっていた YeomanChrome Extension Generator を使ってみました。

node.js のサイト から node.js および npm をインストールし、続いて Getting started with Yeoman | Yeoman にあるように

$ npm install -g yo bower grunt-cli

などとして Yeoman、Bower、Grunt を呼べる状態にします。

続いて Chrome Extension Generator に書いてある通り

$ npm install -g generator-chrome-extension

として準備完了。

$ yo chrome-extension

とするとシェルが起動し、インタラクティブに Chrome Extension のテンプレートを作成することができます。

$ yo chrome-extension
? What would you like to call this extension? Colored Hashtag for Trello
? How would you like to describe this extension? This is my first chrome extension
? Would you like to use UI Action? No
? Would you like more UI Features?
? Would you like to use permissions?
   create Gruntfile.js
   create package.json
identical .gitignore
identical .gitattributes
identical .bowerrc
...
grunt-contrib-imagemin@0.7.2 ../node_modules/grunt-contrib-imagemin
├── pretty-bytes@0.1.2
├── async@0.7.0
├── chalk@0.4.0 (ansi-styles@1.0.0, has-color@0.1.7, strip-ansi@0.1.1)
└── imagemin@0.4.9 (stat-mode@0.2.0, ware@0.3.0, rimraf@2.2.8, image-type@0.1.4, nopt@3.0.1, tempfile@0.1.3, fs-extra@0.10.0, imagemin-svgo@0.1.1, imagemin-pngquant@0.1.3, imagemin-jpegtran@0.1.0, imagemin-gifsicle@0.1.1, imagemin-optipng@0.1.0)

というように Bower と Grunt が走り、Chrome 拡張機能の開発に必要なパッケージ群がセットアップされます。

ディレクトリ構成はこんな感じ。

$ ls -l
total 32
-rw-r--r--   1 beniyama  beniyama  7582  1  4 17:45 Gruntfile.js
drwxr-xr-x   7 beniyama  beniyama   238  1  4 17:45 app
-rw-r--r--   1 beniyama  beniyama   112 10  1 08:36 bower.json
drwxr-xr-x  23 beniyama  beniyama   782  1  4 17:45 node_modules
-rw-r--r--   1 beniyama  beniyama   893  1  4 17:45 package.json
drwxr-xr-x   7 beniyama  beniyama   238  1  4 17:45 test

この状態でもすでに manifest.json などに適当な値が入っている状態ですので、

$ grunt build

などとすると

$ grunt build
Running "clean:dist" (clean) task

Running "chromeManifest:dist" (chromeManifest) task
Build number has changed to 0, 0, 2

Running "useminPrepare:html" (useminPrepare) task
Going through  to update the config
Looking for build script HTML comment blocks

Configuration is now:

  concat:
  { background:
   { src: [ 'app/scripts/background.js' ],
     dest: 'dist/scripts/background.js' } }

  uglify:
  { 'dist/scripts/background.js': 'dist/scripts/background.js' }

  cssmin:
  {}
...

のように バージョン番号のインクリメントや JS ファイルの uglify、結合などをデフォルトで行ってくれます。package ディレクトリ下には Colored Hashtag for Trello-0.0.2.zip というような名前でパッケージが生成されますので、最終的に Chrome ウェブストアに登録するのはこのファイルになります。

開発フェーズでは、Chrome から直接ローカルのプロジェクトを読み込んで開発・テストを行うことができます。Chrome で chrome://extensions/ にアクセスすると『パッケージ化されていない拡張機能を読み込む』というボタンがありますので、そこから manifest.json のある app ディレクトリを指定すると下記のようになります。

f:id:beniyama:20150104182015p:plain

デフォルトでは Yeoman のアイコン画像をはめておいてくれます。また『リロード』というリンクを押すことで、grunt build し直したプロジェクトをブラウザに反映させることができます。livereload もサポートしているようなのでこの辺はソースを変更すると勝手に反映する、というのもできそうです。

ちなみに IDE ですが、IntelliJ IDEA を試してみたところなんと Grunt 用のコンソールが用意されていたりして、かなり開発しやすかったです。

f:id:beniyama:20150104182841p:plain

この Grunt Console を開くと

f:id:beniyama:20150104182853p:plain

のような小窓が開いて Gruntfile.js に定義されているタスクを GUI から呼べたりします。時代は Gulp という話も昔聞いたのですが、この辺ちゃんとサポートされていて驚きました。なんとなく Java の IDE というイメージを持っていましたが、web 開発全般で活躍してくれそうだったので PHP Storm に引き続き有償版を購入してしまいました。

次回は内部実装の話を書きたいと思います。


↓ 続きの記事

↓ 前回の記事

↓ Yeoman 周りの話題が出た勉強会