Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
Web Componentsを作れる デザインツールの開発
Search
Ryohei Ikegami
August 18, 2022
Programming
0
870
Web Componentsを作れる デザインツールの開発
PWA Night vol.42 ~Design Tools〜 での発表
https://pwanight.connpass.com/event/256731/
Ryohei Ikegami
August 18, 2022
Tweet
Share
More Decks by Ryohei Ikegami
See All by Ryohei Ikegami
Figmaプラグイン(非Webページ環境)での Supabaseログイン
seanchas116
0
63
共同編集ドローツールの作り方
seanchas116
3
1k
FigmaからTailwind HTMLを 生成するプラグインの開発
seanchas116
6
4.4k
RubyとQML/Qt Quickで デスクトップアプリを 書けるようにした
seanchas116
0
1.2k
C++視点からのRuby紹介
seanchas116
0
410
Other Decks in Programming
See All in Programming
FindyにおけるTakumi活用と脆弱性管理のこれから
rvirus0817
0
540
プロパティベーステストによるUIテスト: LLMによるプロパティ定義生成でエッジケースを捉える
tetta_pdnt
0
3.3k
概念モデル→論理モデルで気をつけていること
sunnyone
3
300
Oracle Database Technology Night 92 Database Connection control FAN-AC
oracle4engineer
PRO
1
470
JSONataを使ってみよう Step Functionsが楽しくなる実践テクニック #devio2025
dafujii
1
630
ユーザーも開発者も悩ませない TV アプリ開発 ~Compose の内部実装から学ぶフォーカス制御~
taked137
0
190
より安全で効率的な Go コードへ: Protocol Buffers Opaque API の導入
shwatanap
2
740
「手軽で便利」に潜む罠。 Popover API を WCAG 2.2の視点で安全に使うには
taitotnk
0
870
Improving my own Ruby thereafter
sisshiki1969
1
160
私の後悔をAWS DMSで解決した話
hiramax
4
210
CloudflareのChat Agent Starter Kitで簡単!AIチャットボット構築
syumai
2
510
奥深くて厄介な「改行」と仲良くなる20分
oguemon
1
560
Featured
See All Featured
Learning to Love Humans: Emotional Interface Design
aarron
273
40k
It's Worth the Effort
3n
187
28k
Testing 201, or: Great Expectations
jmmastey
45
7.7k
実際に使うSQLの書き方 徹底解説 / pgcon21j-tutorial
soudai
PRO
188
55k
Designing Dashboards & Data Visualisations in Web Apps
destraynor
231
53k
Statistics for Hackers
jakevdp
799
220k
4 Signs Your Business is Dying
shpigford
184
22k
The MySQL Ecosystem @ GitHub 2015
samlambert
251
13k
Site-Speed That Sticks
csswizardry
10
820
Design and Strategy: How to Deal with People Who Don’t "Get" Design
morganepeng
131
19k
The Art of Programming - Codeland 2020
erikaheidi
56
13k
Git: the NoSQL Database
bkeepers
PRO
431
66k
Transcript
Web Componentsを作れる デザインツールの開発 2022-08-17 PWA Night vol.42 @seanchas_t Macaron
@seanchas_t (しゃなはす) フリーランスエンジニア 以前はiOSアプリ/Qt/C++など Webフロントエンド、ちょっとUIデザイン フロントエンドは上から下まで (Wasm/WebGLなどからUIデザインまで) 全部やりたい派 個人開発: Web開発者向けのデザインツールを開発中
以前はiOSアプリ/Qt/C++など Webフロントエンド、ちょっとUIデザイン フロントエンドは上から下まで (Wasm/WebGLなどからUIデザインまで) 全部やりたい派 個人開発: Web開発者向けのデザインツールを開発中
Macaron https://macaron-elements.com/
Macaronってどんなツール? 背景とモチベーション 技術構成 今後の展望
Macaronってどんなツール? 背景とモチベーション 技術構成 今後の展望
VS Code Extension
Figmaに近いUIでWeb Componentsを作成 R ドラッグで要素追加(テキスト/四角3 R リサイズ/移G R サイドバーでスタイル変更 Macaronってどんなツール?
Macaronってどんなツール? 専用ファイル (.macaron) → JSに書き出し Vite/webpackでそのままimport import from export default
macaronLoader ; { : [macaronLoader()], }; "@macaron-elements/loader-vite" plugins < = > import </ > < ></ > script script my-component my-component type "module" "./components.macaron";
Macaronってどんなツール? Figma Pluginで Figmaファイルから コピーペースト
https://macaron-elements.com/ Webサイトに動くデモあります
Macaronってどんなツール? 背景とモチベーション 技術構成 今後の展望
フロントエンドUI開発のペイン 脳内CSSパース/レンダリングがしんどい デザインを実装する単純作業が大変
Design as Code Code as Design @seanchas_tが考えた理想世界 デザインがそのままコードになる世界 コードがデザインとして振る舞える世界
@seanchas_tが考えた理想世界 デザインがそのままコードになる世F T 実装の単純作業がな2 T デザインと実装の乖離がない コードがデザインとして振る舞える世界 ・何が実装されているのか一目でわかる
1つの解としての コードの一部をデザインツールで構築する仕組み → Macaron
Macaronってどんなツール? 背景とモチベーション 技術構成 今後の展望
エディタUI: 技術構成 UIフレームワーク React 状態管理 MobX
MobXの紹介 Reactは単なる状態色付け係に! オブジェクトのプロパティや配列などを observable(変更検知可能)にできる Reactなどのviewでそれらを参照すると 変更があったときに自動でviewを更新する仕組みを提供
class constructor this this this const new const { @observable
secondsPassed = () { makeObservable( ) } increase() { .secondsPassed += } reset() { .secondsPassed = } } myTimer = Timer() TimerView = observer(({ timer }) => ( < = => timer.reset()}>Seconds passed: {timer.secondsPassed}</ > )) setInterval(() => { myTimer.increase() }, ) Timer 0 1 0 onClick 1000 button button {() 公式サイトより
MobXの良いところ + Macaronが採用した理由 b ReactなどのUIフレームワークに依存しなV b クラスベースで状態のモデリングができY b → 複雑なドメインロジックを持つアプリに最0
) テストしやすV ) オブジェクト指向で設計できる
EditorState Document Component Element Text Element React UI MobX 状態モデル
(概略) エディタUI: アーキテクチャ
VS Code Extension: アーキテクチャ VS Code Extension VS CodeやNodeのAPIに自由に アクセスできる
ファイル (.macaron) ファイル (.macaron) Web View エディタUIを表示 Web View タブで表示 postMessageで通信 同期
VS Code Custom Editor API "contributes" "customEditors" "viewType" "displayName" "selector"
"filenamePattern" : { : [ { : , : , : [ { : } ] } ] }, "macaron.macaronFile" "Macaron" "*.macaron" 指定した拡張子のファイルを開くと テキストエディタの代わりに webviewのエディタを表示させられる https://code.visualstudio.com/api/extension-guides/custom-editors
Macaronってどんなツール? 背景とモチベーション 技術構成 振り返りと今後の展望
技術的な成果 複雑GUIに対する知見がめっちゃ溜まった 自分でコードを書く開発のいいところ: プロダクトがうまく行ってもいかなくても技術が貯まる
リリースしてみたものの、 良い使い所が自分でも見つけられない… ちょっと試してみてその後使わないユーザが多そう →まずは自分で使い込めるプロダクトにしたい
Web Componentsを ビジュアルエディタの出力先にする弱点
React + Web Componentsの対応状況 ReactはWeb Componentsのサポート度がまだ低い https://custom-elements-everywhere.com/
React + Web Componentsの対応状況 RFC: Plan for custom element attributes/properties
in React 19 #11347 https://github.com/facebook/react/issues/11347 Web Componentsの完全サポートは React 19までお預け
Web Componentsの弱点 F customized built-in element → Safariが未対" F (input/buttonとか
には作れない) shadow rootが特定のタグにしか作れない input/buttonなどのスタイルを変えただけの コンポーネントが作りにくい
CSS界隈の新しい潮流
Utility-First な ライブラリ/フレームワークの台頭 などなど…
Utility-First (と言われる) ライブラリ/フレームワークの特徴 q CSSはHTML要素一つ一つに対しに記述する (インラインスタイルっぽいV q インラインスタイルより強I 省略記法で場所取らな`
擬似要素/擬似クラス/レスポンシブデザインに対応
Utility-First (と言われる) ライブラリ/フレームワークの特徴 D CSSはHTML要素一つ一つに対しに記述する (インラインスタイルっぽい3 D インラインスタイルより強 省略記法で場所取らなq
擬似要素/擬似クラス/レスポンシブデザインに対応 Figmaとかのレイヤーっぽい ビジュアルエディタと相性が良さそう
React+Tailwindで書かれたコードを 直接いじれるツールを作る…? twitter.com/seanchas_t/status/1558032125987024896
ありがとうございました! もっと詳しい話は でもお話しできます! Meety