Yeoman+Backbone.jsでTwitterの吹き出しジェネレータ作ってみた

公開リンク: http://makotokw.github.io/fukidashi-generator/

Botで

_人人人人人人人人_
> な、なんだってー <
 ̄^Y^Y^Y^Y^Y^Y^Y ̄

みたいなのを呟きたくなって探したら実装例を発見。

[iphone]文字列をびっくり吹き出しで覆うMyScripts
http://d.hatena.ne.jp/ku__ra__ge/20121031/1351609200

textareaのchangeイベントを拾ってmodelに設定して、modelの変更イベントでviewを更新で簡単につくれそーと思ってBackbone.jsの練習がてらつくろうと思った。しかしプロジェクト階層つくるのもめんどくせーなと感じ、いまさらながらYeomanおじさんにお願いしてみようと思った。

Evernoteのメモをあさると Chrome Tech Talk Night #4 2012/10/02 あたりで聞いたっぽい。放置しすぎ。一言でいうとYeomanはWebアプリをめっちゃ速く開発するツールである。

Yeomanインストール

npm install -g yo
npm install -g generator-backbone

backbone 以外にもいろいろなプロジェクトジェネレータがある。

Backbone.jsプロジェクト作成

ここがやべぇ。 yo backbone でプロジェクト階層つくってくれて必要なnpmパッケージ入れて必要なライブラリbowerで入れてくれる。grunt serve でHttpサーバが立ち上がってプロジェクトをwatchしてLiveReloadしてくれるのでバリバリ開発始められる状態になる。

backboneプロジェクトはSassもあるし、JSTも使えるようになってた。今回は使わなかったがCoffeeScriptもオプションで有効にできる。便利すぎ。

なのであと model や view をつくってアプリの開発に集中できる。そのmodelやviewをつくるコマンドもあるのでいちいちファイルを0から作らなくてもいい。

mkdir fukidashi-generator
cd fukidashi-generator
yo backbone
grunt serve
yo backbone:model serifu
yo backbone:view editor
yo backbone:view fukidashi

modelとかview名とか超適当。

アプリ公開

今回のはサーバサイド不要でjavascriptだけで動くのでGitHub pageを使って公開できる。
参考: YEOMAN – DEPLOYING A YEOMAN SITE

grunt build:dist で製品版のファイルを dist ディレクトリに作成。

.gitignore から dist を削除し、distをコミットして、(GitHubの) gh-pages ブランチにpushする。

grunt build:dist
git add dist && git commit -m "Initial dist subtree commit"
git subtree push --prefix dist origin gh-pages

username.github.io/projectname で公開できる。
参考: GitHub Help – Creating Project Pages manually

今回できあがったファイルはこちら

http://makotokw.github.io/fukidashi-generator/

まとめ

_人人人人人人人人人人_
> Yeoman便利すぎワロタ <
 ̄^Y^Y^Y^Y^Y^Y^Y^Y^Y ̄

人見知りソフトウェアエンジニアです。ビジュアル系、お笑い、Pixarが好き。勢いで吉本超合金おたけびBOTを作った。オールザッツ漫才が放送されない東京在住。

趣味や日常からアウトプットの場としてブログを書いています。自作のWordPressプラグインにGitHub Flavored MarkdownAmazonJSなど。