複雑GUIの会 Vol.1

イベントページ
https://twipla.jp/events/380070

実装のめんどくさいGUIについて、自作品を持ち寄って語らう会です。
こんな大変なGUIをスクラッチ実装したぞ！みたいな自慢ができる場にしようと思います。

開催日時

2019年5月2日(木)13:00 ～ 17:00 (4時間)

開催場所

ルノワール 新宿区役所横店 マイスペース８号室

簡易自己紹介

hashrock

はっしゅろっくです。SVG芸人を名乗っています。
好きなUIはガントチャート、作るのが苦手なUIはテーブルの絞り込みとソートです。

中小受託であまりフロントエンド関係ない仕事をしています。
組み込みC、サーバサイドJavaって感じです。
趣味はイラストで、最近趣味を表に出すことが増えてきました。

作ったもの

Excel的なものをSVGでフルスクラッチしました。

ブロック図を作るエディタを作ったりしました。
UI上からどうボタンを減らせるか考えて、
矢印はベタベタひっつくという仕組みにしてあります。

これらのUIは「anydown」というMarkdownエディタに組み込んであります。
https://anydown-next-example.netlify.com/
https://github.com/anydown/anydown

その他中途半端品

ガントその１

テキストからガントチャートに変換して、SVGにしてくれるサービスです。

ガントその２

ガントその３

作曲ツールです。
https://minroll-online.firebaseapp.com/

canvasでスクラッチした自作textarea（作りかけ）

https://github.com/hashrock/study-canvas-textarea

hykwtakumin

はじめまして、hykwtakuminです。
普段はアルバイトでWebアプリ(TypeScript + React)を開発しています。
最近SVGに入門しました。

最近の取り組み

HyperIllustCreator

• 
  デモ(Codesandbox)
  ハイパーイラストを簡単に作れるお絵かきアプリです。

ハイパーイラストとは?

ハイパーテキストを継承したイラスト(を勝手にそう呼んでいる)

• ハイパーリンクを埋め込める
• レイヤー等の構造を保持できる

リンクを埋め込んだパスをクリックするとリンク先に飛ぶ事ができます。

• イラストの中にリンクを張りたいことがあったのですが、簡単にできるツールが無かったのでつくりました。

SVGModal

• ChromeWebストア
• ScrapboxでSVG画像をより便利に活用できるブラウザ拡張機能です。
• 通常ScrapboxではSVGはimageタグでただの画像として埋め込まれますが、これを使うとその場で生SVGを展開できます(SVGの配信元が適切なCORS設定をしている必要があります)。

意気込み

• SVGは面白いけど全然わからん!
• 皆様のテクニックやノウハウを参考にさせてください

robokomy

profileとか

robokomyです。twitter以外ではmiyanokomiya表記が多いですが、呼ばれ慣れていないので多分振りむけません。コミとかなら振り向けます。
https://github.com/miyanokomiya

SVG、Canvas、WebGL(Three.js)あたりが好きです。
数年前は太陽光発電関連の作図ソフトとか(canvasで)作っていたりしましたが、その後は仕事でそういう系のものは触っておらず、たまに趣味で変なものを作る程度です。平成最後の月は無職でした。

作ったもの

マインドマップ

モバイルとPC両方で使えるUIを目指したものの、やはりモバイルでは使い辛さが目立ってしまった。
適当に触れる公開ファイルはこちら。
以前Qiitaに載せたまとめはこちら。

gifメーカー

モバイルを捨てたPC前提UI。細々したパーツも使えて楽しい。
バウンディングボックスあり。

以前Qiitaに載せたまとめはこちら。

冷蔵庫管理カンバン

HTMLとCSSで作成。矩形中心なUIならSVGなしでも結構頑張れる。
モバイル特化UI。
以前Qiitaに載せたまとめはこちら。

f_subal

f_subal です。
普段は React を書いています。

去年から今年にかけて仕事でSVGを扱う機会が増えており、
HTML で表現しにくい GUI を React + SVG で何とかするマンになっています。

pixivFACTORY

趣味プロダクトではないですが、画像1枚で50種類以上のグッズがブラウザ上で作れるサービスです。モバイルも対応してます。

エディタ部分を React + SVG で表現しています。
自由変形まわりはもちろんですが、文字入れ対応のために Web フォント周りをゴリゴリやるのが地味に大変な箇所でした。

あとはグッズなので、mm で表現される長さを px にする部分にテクニックがあったりします。

その辺りについて発表した資料がこちら(SpeakerDeck)

seanchas_t

最近はC++/OpenGL/Qt (片手間でSwift/Kotlin) をよく書いています。以前はTypeScript/React/WebGLもよく書いていました。
仕事ではフリュー株式会社というところでカメラアプリとその周辺ツールの開発をしています。

3Dモデリングツール(開発中)

開発途上の3Dモデリングツールです。QtとOpenGLで書いています。

Electron製2Dドローツール

https://github.com/seanchas116/macaron-app

未完ですが、XD/Sketchを意識した2Dドローツールを作っていました。
TypeScript/React/MobXを使ってます。描画はSVGです。

レイヤーのツリービューの実装はライブラリに分けています https://github.com/sketchglass/react-draggable-tree

オンラインホワイトボード

http://seanchas116.github.io/sketch-glass/

オンラインで共同描画できるホワイトボード的なサービスです。
Google DriveのAPIを使っています。
スムーズに拡縮できるように描画はWebGLで行っています。

keroxp

ヨコハマのロイロというITベンチャーでフルサイクルに働いています。
Web関連はReact/Node.js/TypeScript/Canvas/Denoなど
setIntervalとctxさえあればいい。

https://scrapbox.io/keroxp

BullBones: 大学院の研究で作ったドローツール

15年にTSとHaxeで迷ってHaxeで作ってしまった大負債。もうビルドできない。でもちゃんと動いてる。
http://bullbones.herokuapp.com/

バウンディングボックスサンプル

https://codesandbox.io/s/y7306p9wrj

ズームサンプル

2DズームUIの基本のキ
https://codesandbox.io/s/m4onl7915y

ピンチズーム編
https://codesandbox.io/s/mz49jyqvly

黒羽のアリカ: iOS向けカジュアルゲーム

GUIとはちょっと違いますがゲームとかも作ったことあります。

その他

GUIじゃないけど最近作っているもの

• HTTPサーバー: https://github.com/keroxp/servest
• TSモジュールトランスパイラ: https://github.com/keroxp/tsm

jinjor

「基礎からわかる Elm」という本を書きました。 Idein という会社でフロントエンド（SPA）を Elm で作っています。

https://twitter.com/jinjor

StoryNotes

ストーリーマッピングのためのツールです。GitHub アカウントでログイン、同時編集可能です。社内利用中。

• Elm 製

DreamNotes

現在製作中の DAW です。GitHub にデータを保存して Twitter に公開できます。

• TypeScript / ES Modules
• Web Components (no framework)
• Web AudioAPI / Web MIDI API

プレイヤーもあります。
「時の回廊（クロノ・トリガー）」
https://twitter.com/jinjor/status/1122552973756751873

daiiz

daiiz (だいず、@daizplus) です。京都から来ました。

NotaでScrapboxを作っています。
SVG大好き。アートにとどまらず、様々な活用法を模索している。 https://scrapbox.io/svg-wiki/

Scrapbox関係のパーツ

Reactを使っている

ツマミのない範囲選択UI

touch device版Scrapboxで採用中。範囲の端をなぞると広げたり縮めたりできる。

目的の端点付近をなぞるだけでも良く、この場合は選択範囲の近い方の端が移動してくる。

https://scrapbox.io/daiiz/モバイルでのScrapboxページ編集#5a05d602adf4e70000df6bcd

Swipe cursor

こちらもtouch device版Scrapboxで採用中。行を左右にスワイプするとカーソルが一文字ずつ動く。狙いを定めにくい位置に近づけるときに使う。

table

趣味

SVG Drawing

お絵かき成果物をSVG pathとして扱うプロジェクト。最近鋭意開発中。SVGとCanvasの2層構造。PCだけでなくiPadでも動く。Pixel Slate × Pixel Penの組み合わせではまだ動かない。

• 矩形・フリーハンドで範囲選択して、内部に含まれるpathを平行移動
• Cmd+Aでの全選択
• Cmd+C, Cmd+V でコピペ

https://svg-drawing.herokuapp.com/api/item/scrapbox.svg

書き順も保持しているのでアニメーション再生できる。以下の例はSVG内にCSS animationを書いて実現している。
https://svg-drawing.herokuapp.com/api/item/animation/scrapbox.svg

hykwtakuminさんの拡張機能に似ているやつ

実は独自スキーマのXMLとして保存していて、サーバーでXML + XSL → SVGを生成して配信している。
See more:

• https://scrapbox.io/daiiz/SVGお絵描き
• https://scrapbox.io/daiiz/SVG_Drawingの生成物をXMLで表現する

SVG Screenshot

2016/4公開。ブラウザでのスクリーンショットをSVG形式で撮るプロジェクト。単なる画像ではなく、撮影範囲内のanchorやGIFアニメーションも保持できる。

SVGコンテンツを満足に配信できるホスティングサービスがなかったのでウェブアプリとして整備した。

URLパスの区切りで関連ページを絞り込めるUI

先程hykwtakuminさんに言及していただいた機能
img要素をhoverするとsvgを重ねて表示する

See more: https://scrapbox.io/daiiz/URLのパス範囲で検索する
See more: https://scrapbox.io/daiiz/SVG_Screenshot

dpi-aware-image

PNG画像のバイナリを読んで、DPI aware (=適切な画像naturalSize) でimg Custom Element。
SVGのforeignObjectを用いているのがポイントの一つ。

• 拡縮時に、viewBoxに従った縦横比を保てる
• 右クリックメニューから画像のURLを取得できる

See more: https://scrapbox.io/daiiz/dpi_awareなimg_CustomElementをつくる

まとめ: https://scrapbox.io/daiiz/複雑GUI_%2F_SVGの会

keimakai

STUDIOのかいです。STUDIOというデザインツールを作ってます。
https://studio.design/

STUDIOのバウンディングボックスの設計

• マージンとかがある
• paddingのタッチ判定

ズーム

セレクターレイヤーとレンダリングレイヤー

• transformをかけるレイヤーとピクセルパーフェクトが要求されるレイヤーを分ける

パフォーマンス

• ネイティブのscrollイベントを使う
• transform
• transition中はぼやける -> パフォーマンス良い
• 一番パフォーマンス要求される時はvueを経由しない

特徴的なUI

• デザインツールに必要なパーツはすべて一から作ってる

ホバープレビュー

カラーピッカー

シャドーピッカー

最近書いたクソコード

• safariのバグと戦った
  
  

追記

• 日本語フォント
  

• Styleタグの話

  • フォント読み込み系は消すのも大事

• cssの読まれ方

  • 右から読む（右端の * はパフォーマンスに重大な影響出る）

• パフォーマンスタブ

  • とても大事

• インラインのバウンディングボックス

  • wysiwyg のライブラリすごい
  • google docs もっとすごい

miyaoka

みやおかです。ふだんkeimaくんと一緒に Vue.js製の STUDIO を開発してるフロントエンドマンです。

STUDIOエディター

• このあいだのvue meetupで登壇してきました
• https://studio-v-tokyo9.studio.design/

• 空気を読んだドラッグ＆ドロップの設計
• flexboxでのDOM要素を配置するドラッグ＆ドロップ周りとかいろいろやりました

趣味

• https://miyaoka.github.io/
• このへんに昔のをまとめてます

Mini Metro風SVG

• https://metro.netlify.com/
• SVGちゃんと触ったことなかったので触ってみたかった

螺旋テキストアニメーション

• https://twitter.com/miyaoka/status/931129736842985472
• SVGはtextPathが設定できるからやってみた系

迷路生成 with マインスイーパー(Unity)

スマホのスワイプ操作で遊べる主観的なマインスイーパー探索ものがやりたかった感じです

迷路nodeの生成アルゴリズム構築

3D化

それなりにプレイアブルなところまで作ったけど挫折しました

組織図で会社を作る系(Unity)

上司のマネジメント能力値 >= 部下のスキル値 となるようにして上下のヒエラルキーを保ちながら組織を拡大するコンセプト

これらはどれも基本的にnodeツリーのモデルを構築してその上でなんかしたい的な感じのもので、なんだかんだで今やってるSTUDIOもツリーをいじるアプリです。GUIっていうかゲーム作りたいなあと思いつつも、途中で力尽きてなかなか完成を果たせないままでいます…。

指で針を回してアラーム設定する時計(AdobeAIR)

AdobeAIRなら背景透過アプリが作れるので作ってみた非矩形のデスクトップアプリ。針をアナログに回したいという欲求を果たしました。Flashのベクター画像なので拡縮してもきれいなのが良いところ