見出し画像

金曜GUIの活動を振り返る

miyaoka

2月末から突発的に #金曜GUI （別名：#GUI活）というGUIのライブコーディング活動をやってました。

一緒にやっていたはっしゅろっくさんが記事にまとめていたので、活動経緯としてはそちらも読んでみてください。本記事では自分が作ったものを振り返ってみたいなと思います。

トイレットペーパーのGUI作りたい

世間で話題沸騰だったトイレットペーパーのGUI化です。ホイールスクロールを使いたいというのとSVGを練習したいというところが焦点です。あれだけ騒がれたのももはや遠い過去のようですが、旬のネタをこうして形にするとそういうご時世だったんだなと感じられます。

カルーセルUI作りたい

初回に比べると基本のUIです。基本ゆえにライブラリを使うことが多く、わざわざ自作する機会は意外と少ないかもというところで題材にしました。

技術書典で入門GUIを執筆し、その後WEB+DB PRESSにもGUIの記事を寄稿することになったので、カルーセルをゼロから自作してみてその解説を書くことにしました。

カルーセルの一つの難所は無限スクロールの部分で、リスト末尾の次はリスト先頭が表示されなければならず、ここを継ぎ目なしにドラッグやスクロールするにはどうするかというのがあります。

カレンダー作りたい

基本UIということで、カレンダーも作ってみました。ちょうどはっしゅろっくさんが変形するカレンダーを作っていたというのもあります。あとは複雑GUI会のkeroxpさんも参戦したりでわいわいするようになりました。

ボロノイ図作りたい

ボロノイ図、flashの頃にはやってたけど、根本的な計算方法を理解してないのでそのへんをちゃんと学びたいなーという感じでした。

emojiでflockingやりたい

flocking、boidsとも呼ばれる鳥の群れが集まって飛ぶようなアニメーションのロジックはPerlin noiseみたいにけっこう単純なパラメータでいい感じのものが作れるので好きなんですが、JSでもそれをやってみたいなというのと、あと顔のemojiを群れとして動かしたいというのがありました。

結果としては、顔のemojiコード範囲を調べるのに時間がかかったりしてあんまり完成しませんでした。

Windows環境に移行したい

在宅環境になってから、自宅ではゲーミングマシンのwindowsデスクトップのほうがMacよりパワーがあるのと、WSLを使えばwindowsでもweb開発が問題無いので移行しました。

この回は結局ただの作業で、mioさんのアバターを表示してみたり、STUDIOで作ってたフィルタ関数をASTでGUI化する話を紹介したりしてました。

プルダウンで小説読みたい

GUIはデータをいじるものですが、テキストのデータソースとしてはよく青空文庫の小説を使いたくなります。

はるか昔に、小説をチャットアプリみたいに読みたいなーということで「文豪メッセンジャー」というwebアプリを作ったことがあるんですが、これは文中のカギカッコの部分を抽出して句読点で分割して吹き出しで会話調に表示していくというものです。活字読むのはだるいけどこれなら読める気がして、わりと期待通りな体験性になりました。

で、プルダウン小説のほうは何がしたかったのかというと、select要素の無駄遣いをしたかったというのがあります。

楽天のselect欄でメッセージ表示する使い方をしているお店があって、なんかまあそういうノリです。あと視線を動かさないほうが速読できるという話もあるので一行表示は意外と有りなのかもしれません。

SVGでふるふるフィルタ学びたい

ゆきさんが作られてた フルフルネコチャン というアニメーション作成ツールがかわいくて、ソースと解説も公開されていたので真似して一から学んでみることにしました。

パラメータの加減によってふるふる具合が大きく変わるので、なるほどーってなりました。

時計ウィジェット作りたい

Flash時代の頃（10年以上前）、デスクトップのウィジェットとして拡縮可能でシンプルなデザインの時計が欲しいなーと思って QlClock というアプリを作ったことがあります。（Flash自体はweb用ですが、AdobeAIRという技術でネイティブアプリにすることができた）

Flashのベクター画像なのでどんな大きさでも綺麗に表示できるのと、あとはアナログ時計らしく針をドラッグしてアラームセットしたい（今のAndroidの時計アプリがそういう形）というのがやりたいことでした。

Flashはオワコンのディスコンになってしまったんですが、今のweb技術ならSVGとElectronで同じようにできるんじゃないかなーと思ってやってみました。

前半がSVGでスケーラブルな時計を作る編。サイズを縮小すると自動的に文字盤が消えてMacのツールバーみたいになります。

後半はそれをElectronに載せる編です。一応デスクトップアプリ化出来たんですが、時計の枠をドラッグして拡縮するときにwindowサイズも合わせて変えるといったところまではできませんでした。

まあとりあえず初のElectronアプリできたからいいかーと満足した気がします。

ぷよぷよ的棋譜ビューア作りたい

囲碁はヒカルの碁に感動して当時ちょっとゲームでやって基本を理解したのにすっかり忘れてるんですが、この絵を見たときに結合のルール自体はわりとできるんじゃないかなという感じがしました。

前半はとりあえず碁盤を作って棋譜データを読み込み、碁石にメタボールフィルタかけるところまでです。囲碁はSGF（Smart Game Format）というフォーマットで公開されていることを知りました。

後半では近傍ノードを繋いでいってますが、うーんって感じですね…。

Google Meetをdiscordのチャンネル的に使えるようにしたい

web会議するときにdiscordが重いのでGoogle Meetの部屋をdiscord的なインターフェースで扱えるアプリが欲しいという要望がSTUDIOのケイマくんからあり、プロト作ってみるかと思ったもののなんかfirebaseの設定だけで時間食ってほとんどできませんでした。

WebSpeechAPIでなんかやりたい

リモート化が進んだことで、Web会議の発言内容を字幕として表示するツールを作る人がちらほら出てきて、それでWebSpeechAPIに触れてみようと思った回です。

認識途中と認識完了のステータスに応じて表示のさせ方を変えると、入力してるなーという感があって良かったです。

ベクターのドローイングツール作りたい

なんかいろいろやってきたけど結局やりたいのはFlashなのではという境地に至る回。

Flashといえばベクターなので、ベクター描画やっていこうとドローイング。

ドラッグしたポイントを適当に抽出して補完曲線を作ってSVG化。

線を作ったはいいけど、それを分割したり塗りを結合したりといったFlashの機能にはブーリアン演算が必要になってくるので、Paper.js で学んでみようという回。

ありよりのなしスライダー作りたい

画像1

「ありよりのなし」などの表現の強度を分類していく記事があり、逆に強度の値からありなしの表現を作れるのではないかと思い立って作った回。

二極の言葉を自由に入れられるので、ねこちゃんとワンコの度合いなども表現できるのが良いと思います。

文章検閲エフェクト作りたい

amazarashiというバンドのライブ映像が期間限定で公開されて、その検閲エフェクトがかっこよかったのでやりたいなーと思った回。

適度に文章分割してspanで囲んでstyleつけてhoverで解除するって感じにしたらわりと期待通りできた感じです。

動きのあるコロシテくん作りたい

話題になってたやつ。

決まったパターンの組み合わせではなく、数値パラメータからの演算だけで形状や動きを作るデスクトップ生物を昔作ってて、そのときに呼吸感のある動きを円運動で作っていたので久々にそういうのをやってみたかった回です。

番外編：人物年表並べたい

これは金曜GUI以前に作ったやつですが、歴史を調べてると人物の生没年並べてどういう世代感だったのか知りたいと思うことが多々あり、人名から生没年の取得と関連人物のサジェストというのもやってみました。

wikipediaからサクッとそういう情報取れるかなーと思ったら人物によってフォーマットが全然違ってて、google検索結果のナレッジパネルから拾うほうが手軽だったけど、結局ちゃんとしたAPI無いとつらいなーとなった感じでした

番外編：サイゼリヤメニューでブラックジャックしたい

サイゼリヤ1000円ガチャというのが当時流行ってて、データ化したメニューを使ってなんかやりたいなと思って、1000円でバーストするブラックジャック的なのにしようと思った回。

webアプリあんま音使うこと無いからとにかく音を入れていきたいなーという気持ちがあったのと、メニュー画像をアセットとして用意するのが一番大変だった気がします。

まとめ

金曜GUIは軽く何やるか決めてからスクラッチのライブコーディング2時間くらいでやってるのですが、だいたいそのレベルで完結できるものを目指すことで、PoC（概念実証）的な動作イメージの確認をする素振り活動という感じがします。

特にJS以前のFlash時代には wonderfl というサイトにいろいろなFlash作品が投稿され、毎日が金曜GUIのようなお祭り感があってそこに刺激を受けていたなと思います。

ふだんフロントエンドの業務をしていても、あまりこういうものは作らない、というかメンテナンスコストを考えると下手に自作してしまうよりは評判の良いライブラリを優先して使うと思います。また、最新のAPIでは実現できるけど後方互換を考えると使えない機能などもあります。

それゆえに、技術的にできそうなんだけど自分の手でやったことがない、というものがなんとなく溜まっていくような感じがして、そういうのを解消する場になっているのではないかと思います。

なにかを試すというのは特にGUIに限ったことではないんですが、

- 単目的
- 触って動かせる
- 見た目に分かりやすい

というあたりが金曜GUIの良さかなと思います。

まあわりと完成しないことも多いんですが、完成しないなりに知らなかったことをいろいろ学べるので、興味が出てきた方は勝手にトライしてみてください（投げやりな締め）。



この記事が気に入ったらサポートをしてみませんか？