今年２月から「金曜になにかGUIを一つ作る」というフロントエンド素振り活動をしていたのだけど、最近あんまりやらなくなってしまったため、一旦成果物をまとめる。
発端
今年２月末の金曜日のこと。
ちょうど自粛ムードが広がりはじめた頃で街に活気がなく、微妙に暗い気分が広がっていた。
そういえば今日プレミアムフライデーだったなーとか思い出し、
明るいことの一つもあればいいのにと考えながら、とぼとぼ帰っていた。
「こういう時って自分から動き出すと気分が晴れたりするよなぁ。GUI作ってたら気分が晴れるんじゃないだろうか」
と考えるに至り、突発的に下記のツイートをした。
で、おもむろにGUIを制作している様子を配信し始めた。
説明もなく突然GUI制作風景を配信し始めるという意味不明な行動を始めたんだけど、
反応がなかったら静かにツイ消ししようかなーと思っていた。
miyaokaさん参戦
そこで嬉しいことに、企画意図を察したのかmiyaokaさんが乗ってきてくれた。
miyaokaさんはカオスな企画に対する理解力がすごい。混沌耐性持ちなんだと思う。
配信に使っていたpixiv Sketchでは画面共有と音声チャットが可能だったので、miyaokaさんと話しながら CodePen上でライブコーディングを進めた。
成果物
初日はチェックボックスを作った。連打してもこっそり戻るチェックボックス。
miyaokaさんはトイレットペーパーを引き出すGUIを作った。
これはインパクトすごくて爆伸びした（なおこの頃トイレットペーパーの買い占めが起きていた。GUIも世の中もクレージーだった）
この活動はやったりやらなかったりしながら半年ぐらい続いた。
以下、代表作です。
かっこよくアニメーションするカレンダー
縦型カレンダーと月間カレンダーって、7日単位で折り返してるか1日単位で折り返してるかの
違いでしかないなぁと考え、じゃあトランジションかけられるよねと思って作ったもの。
この考え方は別の日に図示したものがある。
香川県のゲーム条例が話題になっていた頃に作ったもの。
ゴルフゲーム的な感じで遊べるようにした。香川の子どもがあんまりゲーム遊べなくてかわいそうだから、
GUIで遊べればいいのでは？と思って作った。
ドット絵チャット
16 x 16pxのドット絵で作った絵文字で喋れるチャット。他人の作った文字を自分も使えるのが肝。
絵文字文化ってかなり国際交流に貢献していると思っていて、絵文字しか使えないチャットがあったらどうだろうと思って作った。
あとは「文字をコミュニティ内で発明する」のは面白いのではと思った（slackの絵文字文化って結構それだなと思う）。
最終的にはこれだとコミュニケーションはつらいねというオチになった。
動くDenoくんのSVG
このブログでも度々登場してるDenoくんなんだけど、ICSのゆきさんがよくやってる関節アニメーションで動かしたら面白いんじゃないかなと思って、練習としてやってみた。
ツイートにも書いてるけど、小学生の頃工作でこういうの作ったわーというのをめっちゃ思い出した。
こういう感じで、最近はちょっと難し目のSVGはFigmaで作ってエクスポートして作っている。パーツごとにCopy as SVGとかできて便利。
最終的な完成品。
これはちょっと続きがあって、当時DenoのAPIドキュメントサイトであるdeno_docを作っていた lcasdev の目に止まったらしくリプライがきた。
deno_doc のローディングが結構長いから、ローディングアニメーションに使いたいとのことだった。これは嬉しかったので、SVG + CSSアニメーションに書き換えてVue依存を外した上で取り込んでもらった。
最終的に deno_doc はDeno公式に取り込まれることになった。下記からまだアニメーションを見ることができる。
doc.deno.land
Denoと関わってると何故か熱い展開になることが多い。
Meguro.CSSのNakayaさんから教わった、CSSで3Dをやるテクをやってみたいなと思って作ったもの。
これは結構スムーズに実装できたので、せっかくなのでDEV.toに怪しい英語で解説記事を書いた。
dev.to
他の作品
miyaokaさんのプルダウン小説とかも面白かった。
他の作品は「#金曜GUI」タグを眺めてもらえればと思います。
金曜以外にもやることがあり「#GUI活」というタグもあります。
あとから参加してきてくれた、nekobatoさんやyymmさんの作品もあります。
まとめ
やっぱりGUIをスクラッチで作るの楽しいなぁと思った。かなりの三日坊主なんだけど、これは割と続いてよかった。
半年やってみて別に実装力が上がったとは思わないんだけど、
意味わからん要件来てもまあ時間かければ作れるだろみたいな根拠のない自信はついたかもしれない。
「#金曜GUI」 は勝手にやっていいやつなので、皆さんもぜひGUIを作ってみてください。
2020/10/05追記
miyaokaさんがアンサーブログを書いてくれました。miyaokaさんの成果物について掘り下げた文章が読めるのでぜひ読んでみてください。
note.com
