■あけおめ
すっかり2018年になりました。
イベントのタイムテーブルって、1つの時間が変更になると将棋倒し的に他の全ての時刻に影響して書き直すのがつらい。
例えば
12:00 会場
13:00 開会のおことば // 開会のおことばが13:30に変更になると以下の項目が全部30分ズレる…
13:30 表彰
14:00 お昼ごはん
15:00 アーティスト1
15:30 アーティスト2
・
・
・
みたいな感じ。
HTML、JSならできそうだな～とは常々思いつつ、生javascriptなんてもう書けたもんじゃないし、jQueryですらDOM操作がしんどいと実感したイヤー2017。
ナウい系フロントエンドa.k.a超トレンドと言っても過言ではないvue.jsとかAngularならこういうの得意なんじゃないの？ってことで作ってみた。
■できたやつ
タイムテ作成くん
https://suguruguruguru.github.io/timetablecreator/
■どうやってつかうの
・イベント名を入れて演者を追加する
・イベント開始時刻、転換時間、演奏時間を入れる
・開始時刻から逆算して各演者のタイムテーブルができあがる
・テキスト編集で微調整してコピペしたり、Excelで書き出す
・しかもlocalStrorageで前回の入力内容を記録
・いつでも時間変更かかってこいや状態
※演者っていうワードにしてしまって後悔
とにかくタイムテに入れたい項目のことです
「休憩」とか「開演」「完パケ」とかなんでも入れよう
■使ったもの
Vue.js
https://jp.vuejs.org/index.html
核。CDNで入るし軽い。
ElementUI
http://element.eleme.io/#/en-US
ダイアログとか右からニュルンって出るトーストとか。かわいい。
Materialize
http://materializecss.com/
愛用品。jQuery依存なのが今回ちょっとネック。
jquery.timepicker
http://jonthornton.github.io/jquery-timepicker/
ElementUIのタイムピッカーだとうまくonChangeが取れなかったり、
どうせMaterializeでjQuery入れるハメになったので諦念。
js-xlsx/alasql
https://github.com/agershun/alasql/wiki
思考停止。Excel出力したいの要望があったので。
ClipboardJs
https://clipboardjs.com/
思考停止。ググって一発目に出たので使った。
■所感
・Vueは導入が簡単だし、軽い気がする
・時間変更時はなにも考えずに、メンバ変数で持ってるオブジェクト配列の値を計算してずらすだけなので、ここは超恩恵が得られた
・順番入れ替えも配列入れ替えるだけで反映されるので超恩恵が得られた
・そのまま配列を文字列化して、テキストエリアのバリューにバインドしておくだけで変更検知してくれるのでマジ恩恵
・デザインがしんどかった
・レスポンス対応がしんどかった
・UI考えるのがしんどかった
・ペラ一枚ならGitHub Pagesでアップできるいい時代！(コンポーネント指向とは)
・「複数使いまわせるコンポーネントがあって、ちょっとずつページごとに変えて…」みたいなのを作ってみたくなった、というか本来そういう思想のフレームワーク
・Angularで全く同じものを作って比較とかしてみても面白そう といっても静的ページ1枚じゃそんな変わらんか
結論：
今年はUIとか考えるのをうまくなりたい。