友の為に作ったものを公開しました | Yosegakky – 簡易寄せ書き作成ツール https://t.co/rhqVG3L8vr
— しまぶ (@shimabox) April 28, 2016
というわけで、簡易寄せ書きツールを作成/公開しました。
https://github.com/shimabox/yosegakky
これは何？
- 簡易寄せ書き作成ツールです
- download したら簡単に寄せ書きっぽいものを作れる様にしたつもりです
- そのため昨今のビルドツールは使っていません
僕が使えません - ローカルで動くので寄せ書きのメッセージなどを設定したら、みんなで見たりとか、zipなんかにしてプレゼントしたりとかそんな感じです
デモ
demo1 こんな感じです。
どうやって使うの？
Yosegakky – 簡易寄せ書き作成ツール に色々書いています。
なんで作ったの？
- 今年の4月で同期&&同い年の人が別の会社に行く事になった
- 送別会の幹事として何かサプライズをプレゼントしたかった
- 送別といえば贈る言葉でしょ！寄せ書きでしょ！と、自分は勝手に思った
- http://www.yosetti.com とか考えたんだけど、オンライン必須だし、何かめんどくさかった
- メッセージに改行も入れられないし、何だか窮屈な印象を受けたのもある
- ローカルで済ませたかったというのもある
- なら自分で作るしか無いでしょ
というわけで作りました。
技術的なところ
まず大前提として、送別会の場所(居酒屋)で見せたいというのがあったので、ローカルで動くものというのがありました。
そこで僕の脳みそで浮かんだのは、じゃあ js + html だな。しかありませんでした。
デザインは寄せ書きっぽく円形なものを考えたんですが、いかんせん時間が無かったのでBootstrapを使いました。
Bootstrap臭半端なくなるのはちょっとアレだったのですが、簡単っていうのもあったし何だか知らぬ間に4も出ていて、おまけにcardエレメントなるものがあって、あ、これでいいやんってなりまして。あとは、カードにメッセージ書いて並べとけ〜 あと画像も出しとけ〜 ついでにvideoタグを入れて動画も流しとけ〜 みたいな勢いです。
まぁ、ぶっちゃけデザインはこれの丸パクリなんですけどね。
大体デザインの方向性は決まったので後は実装だけです。jsは前にちょっと書いたことがあったので、backbone.jsを使いました(react？ほら！時間がね。) 。で、まぁメッセージのスライドショーも必要だよなぁというわけで、色々試した結果、Lightcase – The smart and flexible Lightbox Plugin. これめっちゃいいとなったわけです。
実装を進めていって適当にメッセージを入れて並べた所、やっぱりカードの高さ変わってくるんでガタガタになるんですわカードの並びが。うわぁ～、これダセェなぁって思っていた矢先Bootstrapのdocumentを見ていて目に飛び込んできたのはコレ。
http://v4-alpha.getbootstrap.com/components/card/#columns
Cards can be organized into Masonry-like columns with just CSS by wrapping them in .card-columns. Only applies to small devices and above.
.card-columns を使ってみなさい。Masonryっぽくなる。
(こんな感じですかね)
早速 .card-columns をあててみたところ、上手く並んでくれました。
※ただし、Masonry みたいに Z に並ぶのでは無くて、N を左右反転した形で並びます
そんな感じで大体出来上がったので、後は
- カードのローディングアイコンを天地左右中央に表示
- カードをある程度の数で分割して時間をずらして描画
- cssの修正
- lightcaceのスライド停止アイコンが白で目立たなかったりしたので、そのへんとか
などの細かい部分を実装しました。
他にも、Windowsだと、.mov ファイル(iPhoneで撮った動画とか)を見るにはQuickTimeが入っていないと見れない？とか動画再生辺りでちょっとあれだったんですが、基本的に .mp4 だったらMacでもWindowsでも見れたので .mov ファイルは .mp4 に変換して対応しました。
※ 変換方法は調べれば結構出てきます
技術的なところとか言って、全然大したことないのですが上記の流れで作ったと思います(もう忘れてる)。
詳しくはソースを見て頂ければと。
実際に使ってみて
良かった所
- 居酒屋wifi無かったけど問題なかった
- 送別会中にiPhoneで写真を撮って、それをスライドショーで流したり出来てリアルタイムに対応出来た
- やっぱりローカルだとすぐソースが修正できてよい
- 好きな画像とかビデオメッセージも入れられてよい
- 長いメッセージも改行入れられるので見やすくてよい
- レスポンシブなのもいい
- 結構盛り上がった
- 居酒屋でプロジェクター貸してくれたので大画面で見れた
- USBにソースを突っ込んでそのままプレゼント出来た
- 別にサーバーに置く必要がない
悪かった所
- メッセージや画像などは、手作業でjson作ったり配置したりしなくてはならなかったのでそれが辛かった
- 今回は他にも一人いて二人分の作業をした
- ビデオはやはり容量食う
まとめ
上にもある通り、送別会をやった居酒屋がプロジェクターを貸してくれて大画面で見れたので意外にも盛り上がったと思います。※披露するまで凄くドキドキしていたのは内緒
プロジェクターが無くても大丈夫！！(多分)
ローカルの身軽さも半端ないです！！
あと、何か目的があって作るものがあると非常に捗ります。
こういうのを忘れずにいたいなと思った次第です。
