複雑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](https://twitter.com/hykwtakumin)です。 普段はアルバイトでWebアプリ(TypeScript + React)を開発しています。 最近SVGに入門しました。 ### 最近の取り組み #### [HyperIllustCreator](https://scrapbox.io/hykwtakumin/HyperIllustCreator) - [](https://gyazo.com/1319430a6b8c14b8dc925c6caa37c9f0) [デモ(Codesandbox)](https://zx59ww8w24.codesandbox.io/) ハイパーイラストを簡単に作れるお絵かきアプリです。 ##### [ハイパーイラスト](https://scrapbox.io/hykwtakumin/ハイパーイラスト)とは? ハイパーテキストを継承したイラスト(を勝手にそう呼んでいる) - ハイパーリンクを埋め込める - レイヤー等の構造を保持できる リンクを埋め込んだパスをクリックするとリンク先に飛ぶ事ができます。 - [](https://gyazo.com/e4b53c5aff27769100c93dacdee7475e) - イラストの中にリンクを張りたいことがあったのですが、簡単にできるツールが無かったのでつくりました。 #### [SVGModal](https://scrapbox.io/hykwtakumin/SVGmodal) - [](https://gyazo.com/c80e27c64e45ded7dbcf657327d6b3b9) - [ChromeWebストア](https://chrome.google.com/webstore/detail/svgmodal/kedajdlhkenjaknifdbmddliiofbjmha) - [Scrapbox](https://scrapbox.io)でSVG画像をより便利に活用できるブラウザ拡張機能です。 - 通常ScrapboxではSVGはimageタグでただの画像として埋め込まれますが、これを使うとその場で生SVGを展開できます(SVGの配信元が適切なCORS設定をしている必要があります)。 #### 意気込み - SVGは面白いけど全然わからん! - 皆様のテクニックやノウハウを参考にさせてください  ## robokomy ### profileとか robokomyです。twitter以外ではmiyanokomiya表記が多いですが、呼ばれ慣れていないので多分振りむけません。コミとかなら振り向けます。 https://github.com/miyanokomiya  SVG、Canvas、WebGL(Three.js)あたりが好きです。 数年前は太陽光発電関連の作図ソフトとか(canvasで)作っていたりしましたが、その後は仕事でそういう系のものは触っておらず、たまに趣味で変なものを作る程度です。平成最後の月は無職でした。 ### 作ったもの #### [マインドマップ](https://mind-xx-acpr.firebaseapp.com/)  モバイルとPC両方で使えるUIを目指したものの、やはりモバイルでは使い辛さが目立ってしまった。 適当に触れる公開ファイルは[こちら](https://mind-xx-acpr.firebaseapp.com/map/-L1kyhrBlrHGorkL4ws_)。 以前Qiitaに載せたまとめは[こちら](https://qiita.com/miyanokomiya/items/3d195d8b6e09097d0102)。 #### [gifメーカー](https://svgif-c077b.firebaseapp.com/)  モバイルを捨てたPC前提UI。細々したパーツも使えて楽しい。 バウンディングボックスあり。  以前Qiitaに載せたまとめは[こちら](https://qiita.com/miyanokomiya/items/9e6ada8953b17b331c34)。 #### [冷蔵庫管理カンバン](https://rich-fridge.firebaseapp.com/public/)  HTMLとCSSで作成。矩形中心なUIならSVGなしでも結構頑張れる。 モバイル特化UI。 以前Qiitaに載せたまとめは[こちら](https://qiita.com/miyanokomiya/items/7b2776e82a50bcfbad71)。 ## f_subal f_subal です。 普段は React を書いています。 去年から今年にかけて仕事でSVGを扱う機会が増えており、 HTML で表現しにくい GUI を React + SVG で何とかするマンになっています。 #### [pixivFACTORY](https://factory.pixiv.net/item_groups/new)   趣味プロダクトではないですが、画像1枚で50種類以上のグッズがブラウザ上で作れるサービスです。モバイルも対応してます。 エディタ部分を React + SVG で表現しています。 自由変形まわりはもちろんですが、文字入れ対応のために Web フォント周りをゴリゴリやるのが地味に大変な箇所でした。 あとはグッズなので、mm で表現される長さを px にする部分にテクニックがあったりします。 その辺りについて発表した資料が[こちら(SpeakerDeck)](https://speakerdeck.com/fsubal/layer-transformation-with-react-plus-svg) ## seanchas_t 最近はC++/OpenGL/Qt (片手間でSwift/Kotlin) をよく書いています。以前はTypeScript/React/WebGLもよく書いていました。 仕事ではフリュー株式会社というところでカメラアプリとその周辺ツールの開発をしています。 ### 3Dモデリングツール(開発中) [](https://gyazo.com/4d3378c2ac8ede32a283311fddf02997) 開発途上の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 [](https://gyazo.com/f89c4cb778b44326f6252a2afc167df3) [](https://gyazo.com/39ffda177713ab35bb67d2456e1d7be9) ### オンラインホワイトボード 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://scrapbox.io/keroxp/2DズームUIの基本のキ) https://codesandbox.io/s/m4onl7915y  **ピンチズーム編** [https://codesandbox.io/s/mz49jyqvly]( https://codesandbox.io/s/mz49jyqvly) ### 黒羽のアリカ: iOS向けカジュアルゲーム GUIとはちょっと違いますがゲームとかも作ったことあります。 <iframe width="560" height="315" src="https://www.youtube.com/embed/pPDprpmPRKc" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe> ### その他 GUIじゃないけど最近作っているもの - HTTPサーバー: https://github.com/keroxp/servest - TSモジュールトランスパイラ: https://github.com/keroxp/tsm ## jinjor 「基礎からわかる Elm」という本を書きました。 Idein という会社でフロントエンド（SPA）を Elm で作っています。 <img src="https://i.imgur.com/pJqLGBj.jpg" width="120px"> 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](https://twitter.com/daizplus)) です。京都から来ました。 [Nota](https://notainc.com/)で[Scrapbox](https://scrapbox.io/product)を作っています。 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](https://svg-drawing.herokuapp.com/) お絵かき成果物を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](https://svgscreenshot.appspot.com/) 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](https://github.com/daiiz/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](https://studio.design/) を開発してるフロントエンドマンです。 ### STUDIOエディター - このあいだのvue meetupで登壇してきました - https://studio-v-tokyo9.studio.design/   - [空気を読んだドラッグ＆ドロップの設計](https://studio-v-tokyo9.studio.design/dnd) - 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化 <iframe width="560" height="315" src="https://www.youtube.com/embed/hDwi6ZtDdvg" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe> それなりにプレイアブルなところまで作ったけど挫折しました #### 組織図で会社を作る系(Unity) 上司のマネジメント能力値 >= 部下のスキル値 となるようにして上下のヒエラルキーを保ちながら組織を拡大するコンセプト  <iframe width="560" height="315" src="https://www.youtube.com/embed/OrNE9RHj5SM" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe> これらはどれも基本的にnodeツリーのモデルを構築してその上でなんかしたい的な感じのもので、なんだかんだで今やってるSTUDIOもツリーをいじるアプリです。GUIっていうかゲーム作りたいなあと思いつつも、途中で力尽きてなかなか完成を果たせないままでいます…。 #### 指で針を回してアラーム設定する時計(AdobeAIR) <iframe width="560" height="315" src="https://www.youtube.com/embed/Q4NCsHvy290?start=39" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe> AdobeAIRなら背景透過アプリが作れるので作ってみた非矩形のデスクトップアプリ。針をアナログに回したいという欲求を果たしました。Flashのベクター画像なので拡縮してもきれいなのが良いところ