拡張機能開発事例 : React-Konvaでブラウザにレイアウトグリッドを敷ける拡張機能を開発した話
Figma等のデザインツールでよくみるLayoutGridをbrowserに敷くchrome extension「Layout Grid for Browser」を開発しました。ブラウザ上にガイドを敷くことにより、高速かつ高品質なフロントエンドでのマークアップを実現することを狙ったプロダクトです。この記事では、その開発の成果と、どういう実装概要を簡単に説明しています。
公開日2022.09.12
更新日2022.09.12
はじめに
今回作ったツール
Layout Grid for browser
マークアップで直接デザインを組み立てたい！
最近、Web3関連の調査や案件にて、
素早いプロトタイピングが求められるようになってきた。
従来であれば、figmaにてワイヤー・UIをネリネリして
あーでもないこーでもないと考えてきたのだが、
その時間をとる余裕がなくなってきた。
かねてよりFigmaをすっ飛ばして、
マークアップを効率化できないかと勘案していたので、
これを機にマークアップ周りの環境を整えることにした。
まずはグリッドをブラウザに導入してみたい
そこで第一弾として、
ブラウザ上で「Layout Grid」を敷いてみるツールをやってみようと考えた。
自分がデザインを始めるときに、最初に始めるのは「グリッド」をひくこと。
中心点を定めて、今回どのくらいの画面サイズまで広げようかとあれこれ考える。
自分にとって、儀式的な作業。
これをやらないと、何を基準にデザインしていいのか途方に暮れてしまう。
中心点、画面のサイズ感、画面の分割のリズム感。
ここが決まらないとなにも作れないので、
兼ねてからコーディングにもそれを求めていた。
探してみたがいいのがなかったので、
というわけで開発してみた。
主要機能
このツールでできることは具体的に下記となる。
任意の倍数でグリッドをひくことができる。
任意の倍数でグリッドを敷くことにできる。
加えて最近台頭してきたUtility-FirstなCSS Frameworkである
tailwindCSSやChakraUI等は4の倍数でoffsetやサイズを定義している。
またBootstrapやAnt Design等のフレームワークでは12分割のグリッドを推奨している。
こういったフレームワークを使うときに幅などが揃っているかを補足しやすくすることを狙った。
横幅サイズをハイライトできる
現在の幅をハイライトできるようにしている。
ガイドをクリックするだけで、中央点から何ピクセル距離があり、
中央点からの両幅は何ピクセルかがわかるようになっている。
たとえば、ブレイクポイントの境目をトレースしたいときに、
ガイドをハイライトしておくことで、直感的にブレイクポイントをトレースできる。
url単位で保存できる
作成したガイドはurl単位で保存することができる。
ほか
- 回転させることができる
- 色変更可能
- 透明度変更可能
- ガイドロック機能
- ガイドhidden機能
など一通りデザインツールにあるような機能を備えている。
使うシーンほとんどないだろうが、45度の角度のグリッドも敷ける
実験の成果
①ガイドを見ながらマークアップできる安心感
やはりガイドがある安心感は半端がない。
例えば画像サイズ一つにとっても、オブジェクトの配置の一つにとっても、指針がないと配置ができない。
レイアウトグリッドがあることで、どのくらいのリズムで配置すればいいのかがわかりやすくなった。
またズレにも気付きやすい。
下記自分のサイトの現状だが、微妙にレイアウトが練り切れていないこともわかった。
②ブレイクポイントを直感的に把握できる
これが一番良かったかも。
ブレイクポイントを直感的に把握できるようになった。
縮めた時の挙動がわかりやすくなった。
③ズレをメモ・共有しやすい
自分は日々の開発をscrapboxを使って行なっていて、作業ログや次やるべきこと、日常的な知見を溜めている。
今まではズレを感じた時figmaで矩形を貼り付けて、裏をとって、、とやっていたが
ブラウザ上で直接サイズを計算することができるようになったので、この点かなりありがたかった。
技術解説: 利用技術
今回この拡張機能を作るにあたって、下記の技術を利用した。
- React
- 本アプリケーションの制御
- Recoil
- GlobalStateの管理。
- Canvas / React Konva
- グリッドの描画に利用。CanvasはReactで記述できるReactKonvaを利用。
- Chrome Extension(manifest v3)
- Reactで作成したアプリケーションをChromeExtensionにてオーバーレイさせている。
各利用技術の連係図
ユーザーがExtensionを起動するとともに、ExtensionのContentScriptが表示しているウェブサイトの末端にガイド表示用のDOMを追加。そのDOMにReactを展開する。
Reactの内部にCanvasを描き、CanvasはReactKonvaで制御し、コントローラーはReactで制御。インタラクションで変化したステートはrecoilで管理し、各コンポーネントとCanvasで参照し更新する構造になっている。
ExtensionとCanvasの相性の良さ
Extensionにて、既存のページにDOMを追加して、オブジェクトを配置しようとしたとする。
その場合大抵HTML+CSSで記述する。ところがCSSはグローバルなものなので注入先のサイトのCSSの影響を受けてしまう。
CSSを頑張ってカスケードする方法はあるのだろうけど、すべてのプロパティに対して対応するのはしんどいのと、
今回ピクセルというものを扱うので、少しのズレも許されないプロダクトであった。
どう足掻いてもうまくいかないなとおもったときに、あ、Canvasを使えばいいかも？と思い、使用してみたところうまくいった。
他にも、Drag処理がデフォルトで付いていたりと、今回実装したい操作に最適なAPIが揃っていた。
線や矩形の描画もお手のもの。
そういった背景もあり、Canvasを使った。
React-konva
また、すこしマニアックなツールだが、konvaと呼ばれるcanvasを便利に扱えるフレームワークをreactでwrapした、「react-konva」というライブラリを利用した。
これにて、Reactライクにcanvasを操作できるようになった。React的にhooksとの連係記述を直感的に書けるので、canvasの導入もかなりスムーズにいけた。canvasであることを感じさせられずに、実装することができ、だいぶコストが浮いた。
まとめ
というわけで、ブラウザにレイアウトグリッドを敷いてみる、というチャレンジをしてみた結果、デザインは捗りそうだし、react-konvaというツールを見つけるという学びがあったし、なにかと得るものの多い開発となった。
拡張機能のダウンロードはこちら
サクッと作った、というものの、せっかくなら使っていただきたい！という気持ちです。よろしければご利用ください！
割とラフに作ったので、不具合等あるかもしれません。ご容赦いただければと存じます。
Layout Grid for browser
自分でも使いながら今後細かいところ、ちまちまアップデートしていきたいと思っていますが、ぜひ、ご意見お寄せいただきたいです。
なにか気づいたことや要望はDM頂けますと幸いです。
宣伝：拡張機能開発、ご相談ください
社内ワークフロー改善やデータ取得のためのツールの開発ができます。ストアに公開しない非公開のプロダクトを作成可能です。
必要な際、ぜひご相談ください。
依頼フォーム
執筆者の簡単なプロフィール
Webのキャンペーンサイトのプランナー業務から、
Webサービス／ネイティブアプリ／メディアの企画・運営、
またWebサービスの開発業務までの職種を経験してきた者です。Fintech案件を始め様々なDXプロジェクトに関わってまいりました。
現在はフリーランスエンジニアとして、SaaSプロダクトやWeb3プロダクトに関わっています。
ざっくり、Ruby / Ruby on Rails / Typescript / React.js / AWS / Azure / Figma あたりの技術やソフトウェアを用い、プロダクトの実装に関わっています。
スキルセットや人材特徴の詳細は当サイトのトップページに記載しています。
よろしければご参考ください。
hanzochang
代表取締役 半澤勇大
慶應義塾大学卒業後、AOI Pro.にてWebプランナーとして勤務。ナショナルクライアントのキャンペーンサイトの企画・演出を担当。その後開発会社に創業メンバーとして参加。Fintech案件や大手企業のDXプロジェクトに関わり、その後個人事業主として独立。2023年にWeb3に特化した開発会社として法人化。
2017年ごろより匿名アカウントでCryptoの調査等を行い、ブロックチェーンメディアやSNSでビットコイン論文等の図解等を発信。
2017年ごろより匿名アカウントでCryptoの調査等を行い、ブロックチェーンメディアやSNSでビットコイン論文等の図解等を発信。
© 2023 hanzochang