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
750
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
共同編集ドローツールの作り方
seanchas116
3
840
FigmaからTailwind HTMLを 生成するプラグインの開発
seanchas116
4
3.9k
RubyとQML/Qt Quickで デスクトップアプリを 書けるようにした
seanchas116
0
1.2k
C++視点からのRuby紹介
seanchas116
0
390
Other Decks in Programming
See All in Programming
ゲームボーイアドバンスでSwiftを動かそう
k_koheyi
0
510
REXML改善のその後
naitoh
0
150
Amebaチョイス立ち上げの裏側 ~依存システムとの闘い~
daichi_igarashi
0
220
Modular Monolith Go Server with GraphQL Federation + gRPC
110y
1
550
dotfiles について話したい #湘なんか
stefafafan
2
280
メモリ最適化を究める!iOSアプリ開発における5つの重要なポイント
yhirakawa333
0
370
Meet BrowserEngineKit
swiftty
0
190
Playwrightから始めるVisual Regression Testingのススメ by とっと
totto2727
2
1.8k
初めてのiOS関連GitHub ActionsをMarketplaceに公開するまでの実録
konifar
3
200
Swiftで高速フーリエ変換してオーディオビジュアライザーを作る / iOSDC Japan 2024 Day1 Track D
kyome22
2
460
現代のVueとTypeScript - 型安全の活用術
minako__ph
4
3.1k
The Future of Frontend i18n : Intl.MessageFormat
sajikix
1
2.4k
Featured
See All Featured
BBQ
matthewcrist
83
9.1k
I Don’t Have Time: Getting Over the Fear to Launch Your Podcast
jcasabona
26
1.9k
Bash Introduction
62gerente
608
210k
Creatively Recalculating Your Daily Design Routine
revolveconf
215
12k
Optimising Largest Contentful Paint
csswizardry
28
2.7k
ParisWeb 2013: Learning to Love: Crash Course in Emotional UX Design
dotmariusz
109
6.9k
Git: the NoSQL Database
bkeepers
PRO
425
64k
Distributed Sagas: A Protocol for Coordinating Microservices
caitiem20
325
21k
A Philosophy of Restraint
colly
202
16k
How To Stay Up To Date on Web Technology
chriscoyier
785
250k
Faster Mobile Websites
deanohume
304
30k
Save Time (by Creating Custom Rails Generators)
garrettdimon
PRO
22
580
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