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
苦しいTiDBへの移行を乗り越えて快適な運用を目指す
leveragestech
0
1k
なぜイベント駆動が必要なのか - CQRS/ESで解く複雑系システムの課題 -
j5ik2o
14
4.7k
TCAを用いたAmebaのリアーキテクチャ
dazy
0
120
AIプログラミング雑キャッチアップ
yuheinakasaka
18
4.4k
ソフトウェアエンジニアの成長
masuda220
PRO
12
2.1k
Djangoにおける複数ユーザー種別認証の設計アプローチ@DjangoCongress JP 2025
delhi09
PRO
4
470
.NET Frameworkでも汎用ホストが使いたい!
tomokusaba
0
200
メンテが命: PHPフレームワークのコンテナ化とアップグレード戦略
shunta27
0
300
How mixi2 Uses TiDB for SNS Scalability and Performance
kanmo
41
16k
CI改善もDatadogとともに
taumu
0
200
クリーンアーキテクチャから見る依存の向きの大切さ
shimabox
5
1.1k
CDK開発におけるコーディング規約の運用
yamanashi_ren01
2
250
Featured
See All Featured
Save Time (by Creating Custom Rails Generators)
garrettdimon
PRO
29
1k
JavaScript: Past, Present, and Future - NDC Porto 2020
reverentgeek
47
5.2k
A designer walks into a library…
pauljervisheath
205
24k
Exploring the Power of Turbo Streams & Action Cable | RailsConf2023
kevinliebholz
30
4.6k
Let's Do A Bunch of Simple Stuff to Make Websites Faster
chriscoyier
507
140k
個人開発の失敗を避けるイケてる考え方 / tips for indie hackers
panda_program
100
18k
"I'm Feeling Lucky" - Building Great Search Experiences for Today's Users (#IAC19)
danielanewman
226
22k
CoffeeScript is Beautiful & I Never Want to Write Plain JavaScript Again
sstephenson
160
15k
Thoughts on Productivity
jonyablonski
69
4.5k
Optimizing for Happiness
mojombo
376
70k
A Philosophy of Restraint
colly
203
16k
Music & Morning Musume
bryan
46
6.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