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
720
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
780
FigmaからTailwind HTMLを 生成するプラグインの開発
seanchas116
4
3.7k
RubyとQML/Qt Quickで デスクトップアプリを 書けるようにした
seanchas116
0
1.2k
C++視点からのRuby紹介
seanchas116
0
380
Other Decks in Programming
See All in Programming
30分でわかるつくって、壊して、直して学ぶ Kubernetes入門
aoi1
6
740
関数型プログラミングへの第一歩: 純粋関数を知る
74k3z4k1
0
100
Javaプロファイラの信頼性とバイアスへの付き合い方
kazumura
4
310
ボトムアップではじめるFour Keys・SPACEを用いた開発プロセスの改善事例 〜開発生産性に向き合ってチームの成長を実感する〜
nomuson
1
220
Railsでクリーンアーキテクチャを考えてきた
suzukimar
5
1.1k
設計の考え方 - インターフェースと腐敗防止層編 #phpconfuk / Interface and Anti Corruption Layer
okashoi
5
920
SPLから始める「データ構造」入門
o0h
PRO
6
660
タクシーアプリ『GO』を運営する中発生した様々な失敗例の紹介
mot_techtalk
8
4k
DroidKnights 2024 : Compose Material3 커스텀 디자인 시스템 구축기
kwondae
0
320
スタートアップ企業が実践する「身の丈スクラム」の現在地 / Current State of 'Right-Sized Scrum' Practices in Startups
ar_tama
11
3.4k
生成AIキャラクター作成プラットフォームにおける LLM応答の柔軟性の拡張の工夫
ykimura517
3
850
What new in Android Studio 2024.6
vast00
0
130
Featured
See All Featured
Visualization
eitanlees
137
14k
実際に使うSQLの書き方 徹底解説 / pgcon21j-tutorial
soudai
143
43k
The Illustrated Children's Guide to Kubernetes
chrisshort
34
47k
Stop Working from a Prison Cell
hatefulcrawdad
266
19k
4 Signs Your Business is Dying
shpigford
177
21k
Fantastic passwords and where to find them - at NoRuKo
philnash
40
2.6k
ピンチをチャンスに:未来をつくるプロダクトロードマップ #pmconf2020
aki_iinuma
88
46k
The Invisible Side of Design
smashingmag
294
50k
Build your cross-platform service in a week with App Engine
jlugia
227
17k
Building a Modern Day E-commerce SEO Strategy
aleyda
22
6.6k
Adopting Sorbet at Scale
ufuk
69
8.7k
[Rails World 2023 - Day 1 Closing Keynote] - The Magic of Rails
eileencodes
13
1.4k
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