![見出し画像](https://assets.st-note.com/production/uploads/images/35958075/rectangle_large_type_2_a4ad947588f49de2e677723f476ba09e.png?width=1200)
金曜GUIの活動を振り返る
2月末から突発的に #金曜GUI (別名:#GUI活)というGUIのライブコーディング活動をやってました。
一緒にやっていたはっしゅろっくさんが記事にまとめていたので、活動経緯としてはそちらも読んでみてください。本記事では自分が作ったものを振り返ってみたいなと思います。
トイレットペーパーのGUI作りたい
トイレットペーパーのGUI作った #金曜GUI pic.twitter.com/KxxpBm73iU
— miyaoka / STUDIO (@miyaoka) February 28, 2020
世間で話題沸騰だったトイレットペーパーのGUI化です。ホイールスクロールを使いたいというのとSVGを練習したいというところが焦点です。あれだけ騒がれたのももはや遠い過去のようですが、旬のネタをこうして形にするとそういうご時世だったんだなと感じられます。
カルーセルUI作りたい
左右端をクローンして無限スクロール。一定以上ドラッグで前後移動。ドラッグ量がほぼ無いときは子要素にクリックを通す #金曜GUI pic.twitter.com/LSzlAiq8ay
— miyaoka / STUDIO (@miyaoka) March 6, 2020
初回に比べると基本のUIです。基本ゆえにライブラリを使うことが多く、わざわざ自作する機会は意外と少ないかもというところで題材にしました。
技術書典で入門GUIを執筆し、その後WEB+DB PRESSにもGUIの記事を寄稿することになったので、カルーセルをゼロから自作してみてその解説を書くことにしました。
カルーセルの一つの難所は無限スクロールの部分で、リスト末尾の次はリスト先頭が表示されなければならず、ここを継ぎ目なしにドラッグやスクロールするにはどうするかというのがあります。
カレンダー作りたい
カレンダー作ったこと無い気がするので、おもしろみは無いけどカレンダー作った #金曜GUI pic.twitter.com/BJ4Y8ZSrdN
— miyaoka / STUDIO (@miyaoka) March 13, 2020
初の3人体制 #金曜GUI pic.twitter.com/4uiEyBE8Yp
— miyaoka / STUDIO (@miyaoka) March 13, 2020
雑談しながら5時間くらいやってた #金曜GUI pic.twitter.com/JTjRjXIp05
— miyaoka / STUDIO (@miyaoka) March 13, 2020
基本UIということで、カレンダーも作ってみました。ちょうどはっしゅろっくさんが変形するカレンダーを作っていたというのもあります。あとは複雑GUI会のkeroxpさんも参戦したりでわいわいするようになりました。
ボロノイ図作りたい
#金曜GUI ボロノイ図とドロネー図調べてて、とりあえず三角形の外接円しかできませんでした pic.twitter.com/zZEYMpDvQz
— miyaoka / STUDIO (@miyaoka) March 27, 2020
ボロノイ図、flashの頃にはやってたけど、根本的な計算方法を理解してないのでそのへんをちゃんと学びたいなーという感じでした。
emojiでflockingやりたい
Flash時代に作った三密(flocking)のコードでSocial Distancingを感じている #金曜GUI pic.twitter.com/ZyUgRDiK2K
— miyaoka / STUDIO (@miyaoka) April 24, 2020
flocking、boidsとも呼ばれる鳥の群れが集まって飛ぶようなアニメーションのロジックはPerlin noiseみたいにけっこう単純なパラメータでいい感じのものが作れるので好きなんですが、JSでもそれをやってみたいなというのと、あと顔のemojiを群れとして動かしたいというのがありました。
結果としては、顔のemojiコード範囲を調べるのに時間がかかったりしてあんまり完成しませんでした。
Windows環境に移行したい
在宅環境になってから、自宅ではゲーミングマシンのwindowsデスクトップのほうがMacよりパワーがあるのと、WSLを使えばwindowsでもweb開発が問題無いので移行しました。
この回は結局ただの作業で、mioさんのアバターを表示してみたり、STUDIOで作ってたフィルタ関数をASTでGUI化する話を紹介したりしてました。
プルダウンで小説読みたい
#金曜GUI pic.twitter.com/gBKr6ASoMI
— miyaoka / STUDIO (@miyaoka) May 8, 2020
GUIはデータをいじるものですが、テキストのデータソースとしてはよく青空文庫の小説を使いたくなります。
はるか昔に、小説をチャットアプリみたいに読みたいなーということで「文豪メッセンジャー」というwebアプリを作ったことがあるんですが、これは文中のカギカッコの部分を抽出して句読点で分割して吹き出しで会話調に表示していくというものです。活字読むのはだるいけどこれなら読める気がして、わりと期待通りな体験性になりました。
で、プルダウン小説のほうは何がしたかったのかというと、select要素の無駄遣いをしたかったというのがあります。
楽天のドロップダウンリストで説明表示するやつ、これだ pic.twitter.com/IK1xu4LUf3
— miyaoka / STUDIO (@miyaoka) July 24, 2020
楽天のselect欄でメッセージ表示する使い方をしているお店があって、なんかまあそういうノリです。あと視線を動かさないほうが速読できるという話もあるので一行表示は意外と有りなのかもしれません。
SVGでふるふるフィルタ学びたい
ふるふるふるえるGIFアニメを生成できるWebサービスをリリースしました!あそんでみてね
— ゆき (@yuneco) May 10, 2020
#フルフルネコチャンhttps://t.co/x49XIjEBuN
記事書きました!フルフルネコチャンの作り方です。
— ゆき (@yuneco) June 21, 2020
よくある「画像いじってアニメGIF出力する」系のアプリの作り方を、個人開発の流れと技術的なポイントの2点で解説した緩いお話ですー🐱✨https://t.co/KJplrcVCji
ゆきさんが作られてた フルフルネコチャン というアニメーション作成ツールがかわいくて、ソースと解説も公開されていたので真似して一から学んでみることにしました。
#フルフルネコチャン を見ながらSVG FilterEffectsを学んでます #金曜GUI pic.twitter.com/NMuW3AV57X
— miyaoka / STUDIO (@miyaoka) May 15, 2020
パラメータの加減によってふるふる具合が大きく変わるので、なるほどーってなりました。
今日のハイライト #金曜GUI pic.twitter.com/wVY9yWc835
— miyaoka / STUDIO (@miyaoka) May 15, 2020
時計ウィジェット作りたい
Flash時代の頃(10年以上前)、デスクトップのウィジェットとして拡縮可能でシンプルなデザインの時計が欲しいなーと思って QlClock というアプリを作ったことがあります。(Flash自体はweb用ですが、AdobeAIRという技術でネイティブアプリにすることができた)
Flashのベクター画像なのでどんな大きさでも綺麗に表示できるのと、あとはアナログ時計らしく針をドラッグしてアラームセットしたい(今のAndroidの時計アプリがそういう形)というのがやりたいことでした。
Flashはオワコンのディスコンになってしまったんですが、今のweb技術ならSVGとElectronで同じようにできるんじゃないかなーと思ってやってみました。
続きはやらずにSVGでスケーラブルな時計にしました pic.twitter.com/Lq3dbdzgt6
— miyaoka / STUDIO (@miyaoka) May 16, 2020
前半がSVGでスケーラブルな時計を作る編。サイズを縮小すると自動的に文字盤が消えてMacのツールバーみたいになります。
後半はそれをElectronに載せる編です。一応デスクトップアプリ化出来たんですが、時計の枠をドラッグして拡縮するときにwindowサイズも合わせて変えるといったところまではできませんでした。
とりあえずElectron化して背景透過できた pic.twitter.com/6xzP2RHETA
— miyaoka / STUDIO (@miyaoka) May 17, 2020
まあとりあえず初のElectronアプリできたからいいかーと満足した気がします。
ぷよぷよ的棋譜ビューア作りたい
囲碁入門くらいの人に分かりやすいかもしれない、くっつく碁石さんはどうでしょう?
— とろろ (@tororo2048) May 17, 2020
・石のつながりが分かりやすい
・欠け眼も気づきやすいかも?
・大石取るの気持ちよさそう
・盤面わりと囲碁っぽくなくて斬新な気が
前にもらったリプに可能性を感じて、それをヒントに描いてみました笑 pic.twitter.com/EfL9UMyRHV
囲碁はヒカルの碁に感動して当時ちょっとゲームでやって基本を理解したのにすっかり忘れてるんですが、この絵を見たときに結合のルール自体はわりとできるんじゃないかなという感じがしました。
碁石だけじゃなくて近隣とノード繋いでそれにblurかければいいんだなと思ったけど、とりあえず今日はここまで pic.twitter.com/J54cFyCRYu
— miyaoka / STUDIO (@miyaoka) May 18, 2020
前半はとりあえず碁盤を作って棋譜データを読み込み、碁石にメタボールフィルタかけるところまでです。囲碁はSGF(Smart Game Format)というフォーマットで公開されていることを知りました。
後半では近傍ノードを繋いでいってますが、うーんって感じですね…。
現代アートっぽくなった pic.twitter.com/6lor2zAq4h
— miyaoka / STUDIO (@miyaoka) May 19, 2020
Google Meetをdiscordのチャンネル的に使えるようにしたい
— miyaoka / STUDIO (@miyaoka) May 20, 2020
web会議するときにdiscordが重いのでGoogle Meetの部屋をdiscord的なインターフェースで扱えるアプリが欲しいという要望がSTUDIOのケイマくんからあり、プロト作ってみるかと思ったもののなんかfirebaseの設定だけで時間食ってほとんどできませんでした。
WebSpeechAPIでなんかやりたい
リモート化が進んだことで、Web会議の発言内容を字幕として表示するツールを作る人がちらほら出てきて、それでWebSpeechAPIに触れてみようと思った回です。
SpeechRecognitionたのしい pic.twitter.com/hyx1824NCj
— miyaoka / STUDIO (@miyaoka) May 23, 2020
音声認識テスト pic.twitter.com/QW8CrBmCTA
— miyaoka / STUDIO (@miyaoka) May 23, 2020
認識途中と認識完了のステータスに応じて表示のさせ方を変えると、入力してるなーという感があって良かったです。
ベクターのドローイングツール作りたい
#GUI活 のゴール、やっぱりFlashの再発明かもしれないな。ベクター描画して、Canvas操作して、レイヤーつけて、タイムライン制御して、アニメーション書き出せればいけそう
— miyaoka / STUDIO (@miyaoka) May 26, 2020
なんかいろいろやってきたけど結局やりたいのはFlashなのではという境地に至る回。
Flashといえばベクターなので、ベクター描画やっていこうとドローイング。
とりあえずCatmull-Rom曲線で描くやつできた pic.twitter.com/upTS4p5lX6
— miyaoka / STUDIO (@miyaoka) May 27, 2020
ドラッグしたポイントを適当に抽出して補完曲線を作ってSVG化。
線を作ったはいいけど、それを分割したり塗りを結合したりといったFlashの機能にはブーリアン演算が必要になってくるので、Paper.js で学んでみようという回。
ありよりのなしスライダー作りたい
「ありよりのなし」などの表現の強度を分類していく記事があり、逆に強度の値からありなしの表現を作れるのではないかと思い立って作った回。
よくわからんものを作ってしまった pic.twitter.com/ypnIYGbINc
— miyaoka / STUDIO (@miyaoka) June 5, 2020
二極の言葉を自由に入れられるので、ねこちゃんとワンコの度合いなども表現できるのが良いと思います。
文章検閲エフェクト作りたい
amazarashiというバンドのライブ映像が期間限定で公開されて、その検閲エフェクトがかっこよかったのでやりたいなーと思った回。
動画で pic.twitter.com/Ysozr5OaWy
— miyaoka / STUDIO (@miyaoka) June 10, 2020
適度に文章分割してspanで囲んでstyleつけてhoverで解除するって感じにしたらわりと期待通りできた感じです。
動きのあるコロシテくん作りたい
ひさびさに #gui活 pic.twitter.com/pyWDqcs51V
— miyaoka / STUDIO (@miyaoka) August 26, 2020
話題になってたやつ。
決まったパターンの組み合わせではなく、数値パラメータからの演算だけで形状や動きを作るデスクトップ生物を昔作ってて、そのときに呼吸感のある動きを円運動で作っていたので久々にそういうのをやってみたかった回です。
番外編:人物年表並べたい
人物年表並べるやつ、検索時に関連人物をサジェストして検索しまくれるようにした pic.twitter.com/OdaoRtrr5B
— miyaoka / STUDIO (@miyaoka) May 11, 2019
これは金曜GUI以前に作ったやつですが、歴史を調べてると人物の生没年並べてどういう世代感だったのか知りたいと思うことが多々あり、人名から生没年の取得と関連人物のサジェストというのもやってみました。
Googleのknowledge panelから関連人物情報取ってるんだけど、チャールズ・エジソンから姉のマリオン・イステル・エディソンを辿るとなぜかクエリが「ど t」で、「マリオン・イステル・エディソン」で検索した場合には情報出ない pic.twitter.com/dTO2FGoVPt
— miyaoka / STUDIO (@miyaoka) May 12, 2019
wikipediaからサクッとそういう情報取れるかなーと思ったら人物によってフォーマットが全然違ってて、google検索結果のナレッジパネルから拾うほうが手軽だったけど、結局ちゃんとしたAPI無いとつらいなーとなった感じでした
番外編:サイゼリヤメニューでブラックジャックしたい
サイゼリヤメニューで1000円ブラックジャックでも作ろうかと思ったらこんな時間(朝5時)になってた pic.twitter.com/eoCnhlw10Y
— miyaoka / STUDIO (@miyaoka) May 19, 2019
サイゼリヤ1000円ガチャというのが当時流行ってて、データ化したメニューを使ってなんかやりたいなと思って、1000円でバーストするブラックジャック的なのにしようと思った回。
webアプリあんま音使うこと無いからとにかく音を入れていきたいなーという気持ちがあったのと、メニュー画像をアセットとして用意するのが一番大変だった気がします。
まとめ
金曜GUIは軽く何やるか決めてからスクラッチのライブコーディング2時間くらいでやってるのですが、だいたいそのレベルで完結できるものを目指すことで、PoC(概念実証)的な動作イメージの確認をする素振り活動という感じがします。
特にJS以前のFlash時代には wonderfl というサイトにいろいろなFlash作品が投稿され、毎日が金曜GUIのようなお祭り感があってそこに刺激を受けていたなと思います。
ふだんフロントエンドの業務をしていても、あまりこういうものは作らない、というかメンテナンスコストを考えると下手に自作してしまうよりは評判の良いライブラリを優先して使うと思います。また、最新のAPIでは実現できるけど後方互換を考えると使えない機能などもあります。
それゆえに、技術的にできそうなんだけど自分の手でやったことがない、というものがなんとなく溜まっていくような感じがして、そういうのを解消する場になっているのではないかと思います。
なにかを試すというのは特にGUIに限ったことではないんですが、
ゆうべ突発的にやった複数人でのライブコーディング、絵チャ的で楽しかったな。特にGUIのライブコーディングってのが見た目に分かりやすく、単目的で完成も速いので、動くものとしての進捗が出しやすい。それから画面自体にタイトルやアジェンダも書けるので要件が分かるのが良かった #金曜GUI pic.twitter.com/OYJ4QFOkFM
— miyaoka / STUDIO (@miyaoka) February 29, 2020
- 単目的
- 触って動かせる
- 見た目に分かりやすい
というあたりが金曜GUIの良さかなと思います。
まあわりと完成しないことも多いんですが、完成しないなりに知らなかったことをいろいろ学べるので、興味が出てきた方は勝手にトライしてみてください(投げやりな締め)。
この記事が気に入ったらサポートをしてみませんか?