2024 GUI忘年会
自作GUI勢のオンライン新年会です。誰でも参加できます。
今回のテーマは「2024年に作ったGUIのお焚き上げ」です。
作りかけのGUI、没ったGUI、などなどクオリティを気にせず各自発表します。
一年の疲れを労いましょう！
会場はDiscordです！
進め方
各自画面共有で自分の作ったUIを披露してください
順番が近くなったら事前起動しておいてもらえると助かります
スライドとかはなくても大丈夫です！
ワイワイガヤガヤ歓迎です
領域近そうな方に話題を振ることがあります（話振っていい人アンケート取る予定です）
質問・感想などは直接このCosense上に追記していってください
今回やってみたいこと
UIのジャンルでおおまかに発表順をソートしたいです（半座談会みたいにしたい）
休憩をちゃんと決めてとりたいです（時間配分をそこで見直したい）
発表目次
作ったものの動画やリンクなどはここに貼ってください
（上から順にやります）
hashrock
タイムカードUI
https://scrapbox.io/files/675d5e2bf6a93d8a1a618d60.mp4
https://gyazo.com/d1886131d9df0a59de89a749163bb02a
スキューモーフィズムの復活を目指したい
見た目の模倣はそれなりにする
操作感、クリック感などの操作時フィードバックや物理的な挙動モデリングを作り込みたい
選択UIとの戦い
選択肢選ぶの本質的にむずい問題
手羽先
自己紹介：
VPL, AI, AWS, GCP, Scratch3
NICT SecHack365, 経産省 福岡未踏
19歳, 社会人1年目, フルスタック
タイトル：Scratch3.0 LikeなVPLとAI Visualizationをした話
概要：
Scratch3.0のようなVPLを作った
AIの可視化を行った
VPLのDOM or Canvas問題
ScratchはSVG
状態管理
canvasで描画するなら状態管理や差分検知はあまり効果がないのでstateは使ってない
前にエディタを作ったが、普通にクラスで書くより大変だった
継承できない
プロパティにアクセスできない
イベント駆動で流れが読みにくかった
stateをしっかりしないと再描画が多かったり
動画：
助けて欲しいこと
状態管理ライブラリとゲーム技術の使い分け
未踏的なコンセプトについてアドバイス（イベント外で）
メモ
Pointer Lock API
スキューモフィズム
branded type
COx2
VOICEVOXで歌声音声を作るためのGUIをJUCE C++で作った話
コードリポジトリ
ピアノロールのUI要素について
楽譜的な入力UI表現と聴覚的なUI表現とにおける時間の捉え方が想定より難しかったという話
実時間に基づいて音を制御する信号処理（DSP）
非実時間表現で制御命令を組んでいく楽譜（シーケンサ）
BPMと拍子と小節
tick単位とseconds単位
テンポが途中で変わる場合の話
robokomy miyanokomiya.icon
お気に入り/こだわりGUIピックアップ
豊富なシェイプ調整用制御点
Bubble
根本位置も調整したい
https://scrapbox.io/files/675a6348ad7adf4f2ea9583b.mp4
Diagonal Cross
棒の幅を維持して矩形範囲に収まるバッテンを作りたい
4次関数を解く必要が出てきてさすがにライブラリに頼った
https://scrapbox.io/files/675a6245367f737ad6b30706.mp4
Wave
波としてリピートしてほしい
https://scrapbox.io/files/675a62cc809960ebf804b339.mp4
ラインの円弧セグメント
https://scrapbox.io/files/675a5fcda79637b2543ac977.svg
3次ベジェ利用の自動曲線生成はこういう用途ではどうにも綺麗にならなかった
https://scrapbox.io/files/675a65b4431342c3846d12af.svg
スナッピング
アウトライン&直線コンビネーション
シェイプ on ライン
ラインをシェイプに接続する機能は最古からあった
Xで見かけたIllustratorのパス上オブジェクトにインスパイアされてシェイプをラインにアタッチできるようにした
ライン->シェイプの一階層しか存在しなかった依存グラフが任意階層になってすごい苦労した
https://scrapbox.io/files/675a6194367f737ad6b2f719.mp4
オートレイアウト
Align box、Tree、Kanban
DropdownスタイルのTreeがなにかと万能
Katashin
カレンダーデコ
カレンダー上に手書きしたりシールを貼ったりできる
リアルの手帳のように、予定を書くだけじゃなくていろいろ書いたりデコったりすることを目指して作った UI
https://gyazo.com/f4672b25e108017f7785ed119af64a83
nekobatonekobato.icon
こんばんは
複雑なGUIではないですがちまちまアプリを作っていました
聖剣伝説2のリングメニューが好きなので、アプリランチャーにしたもの
https://gyazo.com/ca31705cc2761c50f237ae41de66b31b
スクリーンの指定した範囲だけを画面共有するためのアプリ
OBSを使いこなすのが面倒なので作ったUI
MastodonとMisskeyのクライアントアプリ。小さめのモニタでもながら見をするための、コンパクトなUI
TwitterクライアントのYorufukurouが好きで作りました
https://gyazo.com/96174e7506781dbff7402f75a4164a6c
KeMoSika
作りかけ
キー入力とマウス入力可視化をしたい
seanchas_t seanchas_t.icon
YjsとDurable Objectを使った共同編集作りやすかった
Supabase無料版で作ったらDB消えてしまった...
Yjsを使わずにwebsocketでサーバ/クライアント方式で共同編集するのも比較的楽そう?
RustでSWCプラグイン書いた
Kyohei Fukuda hand-dot.icon
PDFライブラリを作っています
前回2023夏の時はプラグインを作ると言っていた
できた🎉
今年: テーブルのスキーマを作った👍
リッチテキストエディターを作りたいかも。
大変そうかも...
moh6an
・Switchのプチコン4でペイントツールを作ってます
・Expression3のようなビットマップをストロークに沿って描画するペンを作ったのですが
描画がうまくいかず