複雑GUI会オフライン 2023夏
いうほど夏か？
わりと夏だった
開催日時
2023/09/30(土) 13:00 〜 17:00
開催場所
STUDIO Inc.
代官山駅か恵比寿駅が最寄り
18人まで入れます
概要
当たり前で使うのが簡単がゆえに作るのが大変なGUI（＝複雑GUI）を作りたい人たちが集まる会です GUI好きな人ならどなたでも気軽に参加してください
いつもこんな感じのことを話し合っています
最近作ったGUIを見てほしい
このGUIを実装するにはどうするのか意見を聞きたい
このGUIを作ったがしんどすぎた
このGUIが好きすぎる
Webもネイティブも区別なく扱っています（基礎が変わらないものが多いので）
複雑GUI会のおさらい
おさらいの前に…Scrapboxへのログインをしてください
だいたいの流れ
自己紹介と自作品紹介を各自好きなだけやります
「関連してこれ見てほしいんですけど」的な割り込みOKです
全員分自作品の紹介ができるようにしたいので、一人が長時間画面専有するのは避けたいです
デモがあんまり長くなりそうな場合は「後で見る」リストへの移動をお願いすることがあります
もしくは自己申告してもらえると助かります
目次
（上から順にやります）
自己紹介＆近況報告
hashrockhashrock.icon
Deno Landでフロントエンドとイラストレーターやってます
GUIは最近あんまり作ってません
shu
あまり形式が分かってなくてスライドにしました。
ブラウザで動く動画編集ソフト作ってます。
そういう複雑なアプリを作るためのコンポーネント集もあわせて作ってます。
最近はFigmaからのコード生成の方が取り組んでいます。
jokester jokester.icon
UI状態 (React) ~ 3dエンジン (Babylon.js) 状態は地味にuseState/useEffectでつなぐ。canvasに直接触らない。
アイデア程度ですがpackage-lock.json の可視化・差分するツール考えてます
１つのpackage-lockファイルが１つのDAGグラフ。パッケージは頂点。
複数のグラフは「複数グラフに共通して存在した頂点」で重ねて見せたいと考えてる
Katashinktsn.icon
フリーランスで Web フロントエンドエンジニアしてます
前職ではビデオチャットしながらリアルタイムに色々なドキュメントを共同編集できる Web アプリ作ってました
最近は iOS のインタラクションを Web で再現するチャレンジをよくしてます
yukiyuneco.icon
最近はお仕事でバウンディングボックスとか作ってます
共同編集ありのドローツールみたいなののCanvasフルスクラッチ
前に個人で作った時クラスベースにしたら辛すぎた
結局共同編集が絡むCanvasの状態管理はReact + Jotaiで宣言的に作るのが一番マシ...かも
つらみ
画像とかの非同期処理🤮
キャッシュとパフォーマンス戦略🤮
アニメーション🤮
個人？では最近はCanvasにテキスト描くライブラリ作ってます
カーニングとリガチャは無理すぎる
凸包を使う手法がある by 大曲都市 baku89.icon pdfkitとかpng.jsは読んでみたい
seanchas_t seanchas_t.icon
一応フリーランスエンジニア (複雑GUI系のWebフロントエンドとか、C++とか)
FigmaみたいなHTML+Tailwindのエディタを作ってます (最近はこればかりやってる)
構成はReact + MobX + Firebase Realtime Databaseになってます
その他、仕事で簡易版Miroみたいなノードエディタを開発してたり
ノード接続線を編集するUIも奥が深そう
Reactコンポーネントを配置できるFigmaプラグインを作ってました
Rust wasmでテキスト描画
daiiz daiiz.icon
業務で表エディタを作りました
個人開発
Kyohei (hand-dot) hand-dot.icon
pdfmeというPDFライブラリを作っている
ダイナミックフォントサイジング機能を作ったりなどした
最近はプラグインを入れられるように開発中
もはや最近は複雑GUI部分はあまり触っていない...
一部、ReactのUIをVanillaJSに書き換える必要があってその部分に苦戦中
Keima Kai keima.icon
最新のSTUDIOのバウンディングボックスの紹介
STUDIO AI （STUDIOをChatGPTで操作する）
Figma to STUDIO の紹介 -> miyaokaさんかも？
miyaoka miyaoka.icon
STUDIOでやっていってます
最近のcssすごい話。
Baku Hashimotobaku89.icon
ツールを作りながら映像作ってます
tsukiyama (@tyuyakima)
今年の4月まで大学生で中退しました
中退組 keima.iconbaku89.iconseanchas_t.icondaiiz.iconk3ntar0.icon
ブラウザで動くドット絵エディターを作った
最近はクソデカPDFを扱ったり、クソ長コンテンツをTipTapに表示するのに悪戦苦闘しています
業務でバウンディングボックス作ってました
動画制作サービスの開発に携わってました
undo/redoを後から追加する苦行
まずリファクタリングから始まる苦行
最近はCustom Element(WebComponents)と戯れててGUIはあんまり
スライダー自作してました
VueとかSvelteから吐き出してる
顧客サイトに干渉するサードパーティJS難しすぎる
後で見るコーナー
タイムラインUI
雑談 - 軽いもの, 小ネタ, 流行りネタ
range芸hashrock.icon
モーダルダイアログ
yuneco.icon 前にこんな記事書きました
yuneco.icon Reactだとみんな結構useModal的なの四苦八苦して作ってる（自分も作った）
ノードエディタスパゲッティ
共同編集のデータ構造 seanchas_t.icon
みんなどうやってるのか気になる
FluidのTreeにちょっと期待してたけどずっとexperimentalyuneco.icon
結局YMapにフラットに入れて、表示側はJotaiでTree組み立てる
WYSIWYGリッチテキストエディタのライブラリ選定 seanchas_t.icon
複雑GUIの闇なテストってどうやるの...yuneco.icon
そもそも皆どこまでテスト書いてるんでしょう…？butaosuinu.icon
playwrightの自動生成とかでGUIもいけたりしないのかなbutaosuinu.icon
スケッチパッドツール作ってた時は playwright で適当に動かして、最後画像スナップショットとって前のやつと比較してましたktsn.icon
知りたい daiiz.icon
新しめのWeb APIやHTML標準
CSS subgrid
雑談 - CMS関連
リッチテキストのレンダリング
ワードパッドが廃止される件
自由配置・スナッピング等
STUDIOの出したFigmaインポートなど
生成AI＋GUI
