Yeoman でガジェットをつくってみよう

| 1件のフィードバック

もう9月ですか。
残暑厳しいかと思いきや、なんだか寒々しい日々ですね。
晴れろ!
どうもDiceK Mikamiです。

実は、私、こう見えて、infoScoopとか作ったりしてるのですが、
テスト等でガジェットを用意する際、基本設定を毎回書くのが怠かったりします。
以前作ったものを流用したりすればいいのでしょうが、

「今はプレーン味なの!」

ということもあったりなかったりします。
まぁ、そのような訳でガジェットのひな形をサクッと作れるようにしようと思い、Yeomanで作成したものを公開します。
 

環境

  • node.js: v0.10.29〜
  • npm: 1.4.14〜
     

ひな形を作ってみる

Yeomanが動く環境、つまりnode.jsが動く環境が必要になります。
最近では、nodebrewとかでインストールするといいと思います。

// Yeomanのインストール
$ npm install -g yo grunt-cli bower

// Yeomanで利用するガジェットジェネレータのインストール
$ npm install -g generator-isgadget

必要なものは上のコマンドだけで用意できるはずです。
次に、ガジェットを作成するフォルダを用意し、その中で以下のコマンドを実行します。

$ yo isgadget

Screenshot_from_2014-09-08 15:22:34
Yeomanおじさんが表示されました。
ガジェットの名前を入力すると、適当な感じでガジェットのひな形を作成します。

Screenshot_from_2014-09-08 15:21:31
しばらく放置すると画像のようなフォルダ構成で作成されます。
appフォルダ配下に作成するガジェットのひな形が出来ているはずです。
このジェネレータを利用するとひな形の他にbootstrapやfont-awesome、jqueryなども一緒にインストールしますので、余計な作業を短縮できます。
 

ディストリビューションしてみる

ガジェットが出来上がったならばガジェットをinfoScoopで利用できるようにビルドする必要があります。
(このジェネレータを利用した場合の不利点)
ガジェットの提供方法によってビルドの仕方が異なるので、ここだけ注意です。

// infoScoopにガジェットをアップロードする場合
$ grunt upload

// 別サーバーを利用してガジェットを提供する場合
$ grunt dist

 

本当はテストもできる

Yeomanを利用しているためテスティングフレームワーク(karma/jasmine)もつけてみました。
テストを行うためには、test/specフォルダ配下にテストコードを配置し、以下のコマンドを実行します。

$ grunt test

Screenshot_from_2014-09-08 15:20:08
 

おわりに

「これ作って、誰が使うの?」なんて嫌味を言われたりもしましたが、
(そういう時はそんなこと思ってなくても「いいね」と言うものです)
プレーン味のガジェットを作りたいときにでも利用してみてはいかがでしょうか?
 

参考

https://github.com/corestrike/generator-isgadget

Yeoman でガジェットをつくってみよう」への1件のフィードバック

  1. ピンバック: Yeoman でガジェットをつくってみよう | infoScoop開発者ブログ | 最新ニュース

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

次のHTML タグと属性が使えます: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>