レイアウトモジュール抽出

良いレイアウトブロックは、他人の記事の中に閉じ込められている

WeChat公式アカウントを運営する人は誰でも、レイアウトブロックを地道な方法で集めます。美しいSVGのタイトルカード、整った「フォローしてね」パネル、脇に色付きのタブが入ったセクション見出しのある記事を読んで、こう思う——この構造が欲しい。そこで記事まるごとをエディタにコピーし、欲しかった一つのブロック以外をすべて削除するのに20分かけ、SVGを崩してしまう迷子の <span> を誤って傷つけないよう祈ります。WeChat の SVG組版は悪名高く壊れやすく——属性が一つずれ、画像を間違った場所でリサイズしただけで、カードは読者の半分のスマホで壊れた箱として表示されます。欲しいブロックは本物で、再利用可能で、まさにそこのHTMLの中にあるのに、一つをきれいに抜き出して保つ手立てがありません。

痛みのもう半分は所有権です。当たり前の答えは 秀米 や 135编辑器 のようなテンプレートエディタです——巨大なライブラリ、ドラッグ＆ドロップ、本物に強力。しかし素材は彼らのクラウド、アカウントの後ろ、しばしば会員ティアの後ろに住んでいます。丹念に組み上げたスタイルキットは、あなたが所有するフォルダではありません——借りているログインです。ブロックを同僚に渡したい、全カードの色を一度に調整したい、あるいは実際に再利用する5つの見出しの個人ライブラリを持ちたいだけでも、他人の製品の中で、他人の条件で作業することになります。

このツールは逆のアプローチを取ります。記事(あるいは任意のリッチコンテンツ、生のHTML)を貼り付けると、マークアップをブラウザ内で解析し、再利用可能なスタイル付きブロック——SVG組版カード、見出し付きセクションヘッダー、フォローカード、装飾された引用、区切り線——を、それぞれ独立したモジュールとして抜き出します。そこから各モジュールを直接編集できます——カード内の画像を差し替え、色を変え、WeChatエディタや任意のリッチテキストボックスに貼る準備が整ったきれいなインラインHTMLとしてコピーし、JSONとして書き出せるローカルライブラリに保存する。何もアップロードされず、アカウントもなく、ページが読み込まれればオフラインで動き続けます。あらかじめ正直な制約を一つ——URLから記事を取得することはできません。ブラウザが mp.weixin.qq.com へのクロスサイトリクエストをブロックするので、入力は常にコピー＆ペーストです。

何が違うのか

• ローカルファースト、何もアップロードしない。 解析は DOMParser を使ってブラウザ内で起こります。貼り付けた記事はマシンを一切離れません——サーバーも、アカウントも、バックエンドもなし。
• モジュール単位の抽出。 各スタイル付きブロックが、手で刈り込まねばならない絡まったマークアップの壁ではなく、独立した自己完結のモジュールとして出てきます。
• その場で画像差し替え。 新しい画像をアップロードするか画像URLを貼り付けることで、カード内の写真を——壊れやすくしている周囲のSVG構造に触れずに——差し替えます。
• 一度にどこでも色替え。 モジュールが使うどの色をクリックしても、ブロック全体でその色を一手で変えられるので、HEXコードを探し回らずにカードをブランドに合わせられます。
• きれいなインラインHTMLコピー。 ワンクリックでモジュールをインラインHTMLとしてクリップボードに載せ(Clipboard API経由)、WeChatエディタ、CMS、任意のリッチテキスト欄にそのまま貼る準備が整います。
• あなたが所有するライブラリ。 モジュールをローカルストレージに保存し、コレクション全体をJSONとして書き出し・読み込みできます——借りるログインではなく、本物の持ち運べる素材キット。
• 隔離されたプレビュー。 各モジュールは Shadow DOM の中でレンダリングされるので、あるブロックのスタイルが別のブロックに漏れず、プレビューは貼り付ける内容を正確に見せます。
• 読み込み後はオフラインで動く。 ページが読み込まれれば、抽出・編集・コピーに接続は不要です。

IMG.DIY と他のレイアウトツールの比較

公平に言えば、これはテンプレートエディタの代替ではなく、そのふりもしません。秀米、135编辑器、i排版 は膨大なテンプレートライブラリ、ライブのドラッグ＆ドロップレイアウト、長年の磨き込みを備えた成熟した製品です——リッチな記事をゼロから組み上げるなら、そこへ行くべきで、その評判は正当です。それらが与えてくれないのは、あなたが再利用する特定のブロックの、プライベートで持ち運べるフォルダ——ログインなしで編集でき、何もマシンから出ない——です。このツールは抽出・整理役であって、エディタではありません——野に見つけて感心したブロックを、あなたが所有し、色を変え、画像を差し替え、どこにでも貼れるモジュールに変えます。組み立てには大きなエディタを、部品を保つにはこれを使ってください。