あーあーそのー

最近はshuyuheyと名乗ることが多いですが面倒なのでBLThunder1991のままにします。

発表する順番とかを決めるツールを作った

事の発端

担当者とか発表者とか決めるためのルーレットみたいなものを作った - あーあーそのー

結構前に作ったこれが、チーム内とか大学のコースでなんか決めるときにそこそこ使われている。

一方で、順番決める機能が欲しいみたいな意見もあって、それはいつかやりたいなと思ってたので思い切って別のツールとして作ってみた。

どうせなにか作るなら、何かの勉強もついでにやろうということで、今まで使ったことのなかった、Yeomanとかgulpとかも使ってみようということで、使ってみた。

The web's scaffolding tool for modern webapps | Yeoman

gulp.js - the streaming build system

出来たもの

出来たものは、これです。

roulette_seq

YeomanがデフォルトでBootstrapとか入れてくれるし、HTMLのテンプレートも用意してくれるので、自分としてはBodyのなかをガリガリ書くだけって感じでめっちゃ楽だった。

ファイル書き換えた瞬間にページがリフレッシュされるから、エディタからカーソル話した瞬間に即動作テストできるのはめっちゃ良い。

まあ、一回色々な仕組みに気がつかないでHTMLの中身前消しして自分で一生懸命書いてて、gulp buildしたらScriptとかStyleとかなにも出なくてめっちゃ苦戦した。HTMLにコメントされてる文字列使って、distに書き込む内容決めてるんですね……。勉強になった。

ついでにやってみたこと

前回に引き続き今回も、gh-pagesでツールを公開している。けど、前回と違って今回はYeomanでディレクトリ構成とか自動生成しているので、前回みたいにそのままgh-pagesにブランチを切ればOKというわけにはいかなかった。

一番最初は、gh-pagesをまっさらにしてdistからまるっとコピーしようと思ったんだけど、なんかスマートじゃないなって思って探したら、以下の記事に辿り着いた。

Generate GitHub pages in a submodule — blindgaenger

この記事の場合は、WebSiteを生成するツールを使っていたけど、masterのとあるディレクトリをgh-pagesのsubmoduleにして更新を半自動にするっていうのはgulpにもマッチしそうだと思って、試してみた。

masterのdistディレクトリを、gh-pagesのsubmoduleにして、gulp buildしたら、上書きされるようにした。

上書きされたら、cd distして、git addしてgit commitしてgit push origin gh-pagesすれば、更新される。

その辺りもついでに自動化出来ればよかったんだけど、そこはまた今度の機会にやることにする。