公開リンク: 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￣
wp-gfm