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
820
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
35
共同編集ドローツールの作り方
seanchas116
3
970
FigmaからTailwind HTMLを 生成するプラグインの開発
seanchas116
5
4.2k
RubyとQML/Qt Quickで デスクトップアプリを 書けるようにした
seanchas116
0
1.2k
C++視点からのRuby紹介
seanchas116
0
400
Other Decks in Programming
See All in Programming
PHPカンファレンス名古屋2025 タスク分解の試行錯誤〜レビュー負荷を下げるために〜
soichi
1
740
Boos Performance and Developer Productivity with Jakarta EE 11
ivargrimstad
0
510
Honoをフロントエンドで使う 3つのやり方
yusukebe
7
3.6k
Go 1.24でジェネリックになった型エイリアスの紹介
syumai
2
300
Boost Performance and Developer Productivity with Jakarta EE 11
ivargrimstad
0
990
Datadog DBMでなにができる? JDDUG Meetup#7
nealle
0
150
『テスト書いた方が開発が早いじゃん』を解き明かす #phpcon_nagoya
o0h
PRO
9
2.5k
LINE messaging APIを使ってGoogleカレンダーと連携した予約ツールを作ってみた
takumakoike
0
130
機能が複雑化しても 頼りになる FactoryBotの話
tamikof
1
230
Learning Kotlin with detekt
inouehi
1
170
Django NinjaによるAPI開発の効率化とリプレースの実践
kashewnuts
1
290
ナレッジイネイブリングにAIを活用してみる ゆるSRE勉強会 #9
nealle
0
160
Featured
See All Featured
Fight the Zombie Pattern Library - RWD Summit 2016
marcelosomers
233
17k
How to Ace a Technical Interview
jacobian
276
23k
Speed Design
sergeychernyshev
27
810
[RailsConf 2023] Rails as a piece of cake
palkan
53
5.3k
Rebuilding a faster, lazier Slack
samanthasiow
80
8.9k
Why Our Code Smells
bkeepers
PRO
336
57k
Save Time (by Creating Custom Rails Generators)
garrettdimon
PRO
29
1k
Reflections from 52 weeks, 52 projects
jeffersonlam
348
20k
Optimizing for Happiness
mojombo
377
70k
Visualizing Your Data: Incorporating Mongo into Loggly Infrastructure
mongodb
45
9.4k
Faster Mobile Websites
deanohume
306
31k
For a Future-Friendly Web
brad_frost
176
9.6k
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