よくデザインされたWeChat記事を開くと、プロらしく見せているのは文章ではなく、スタイルの付いたブロックだと気づきます。冒頭のグラデーションのタイトルカード、色付きの帯のある小さなセクション見出し、末尾の「フォローしてね」カード、角丸の引用ボックス。その多くはSVGで作られていて、SVGこそが、どのスマホがレンダリングしても正確な形と色を保たせるものです。
腹立たしい部分がこれです。気に入ったものを見つけて再利用しようとすると、コピーはたいてい壊れます。WeChatエディターに貼り付けると、レイアウトが崩れ、色がフラットになり、あるいはブロックの半分が消えます。このガイドは、なぜそうなるのか、そしてそれらのブロックを無傷のまま抽出する方法を説明します。
WeChatがレイアウトにSVGを頼る理由
WeChatのエディターはほとんどのCSSを取り除きます。スタイルシートを添付できませんし、多くのインラインスタイルが濾し取られます。そこでデザイナーは回避策を見つけました。装飾部分をSVGとして作るのです。SVGでは、形、グラデーション、文字の配置がすべてSVGマークアップの中に収まります。WeChatはそのマークアップをほぼそのままにするので、ブロックはどこでも同じにレンダリングされます。
それが、これらのブロックが原理的にとても再利用しやすい理由でもあります。SVGのタイトルカードは自己完結しています。外部ファイルや、ページの別の場所で定義されたクラスに依存しません。理屈のうえでは、取り出して自分の記事に落とし込めます。問題は取り出すことだけにあります。
素朴なコピーがブロックを壊す理由
レンダリングされたページ上でスタイルの付いたブロックを選択してコピーすると、たいていブラウザのレンダリング済みの版をつかんでいて、元のソースではありません。3つのことが破綻します。
- 包むマークアップが失われる。 ブロックはしばしば、位置決めを担う入れ子の入れ物の中にあります。見える部分だけをつかむと、その箱を失います。
- エンコードされた部分が壊れる。 SVGは背景画像やフォントをエンコードされたデータとして持つことがよくあります。間違った経路を通るコピー＆ペーストは、その文字列を破損させかねません。
- きれいに色を変えられない。 生き残っても、色はマークアップの十数か所に焼き込まれています。手でテーマを変えるには、生のコードを探し回ることになります。
これらのブロックを確実に再利用するには、スクリーンショットもブラウザのクリップボードの推測もほしくありません。ほしいのは、独立した単位として取り出された、実際のブロックのマークアップです。
確実なやり方でブロックを抽出する
きれいなやり方は、記事のソース内容まるごとをコピーし、画面上で1つのブロックを手で選ぼうとするのではなく、ツールに解析させることです。IMG.DIYのレイアウトモジュール抽出はまさにこれをします。内容を貼り付けると、ブラウザ自身のDOMパーサーでマークアップを読み、再利用できるスタイル付きブロック——SVGの文字組みカード、見出し付きヘッダー、フォローカード、スタイル付き引用、区切り線——を、それぞれ独立したモジュールとして切り分けます。
一つ大事な注意点をはっきり述べておきます。このツールはURLで記事を取得できません。ブラウザはmp.weixin.qq.comのクロスサイト取得を遮断するので、どのブラウザ内ツールもリンクでWeChatページを引っ張ってこられません。内容をコピーして貼り付けます。これは回避すべき制限というより、ウェブのセキュリティモデルのあり方そのものです。
各ブロックは独自のShadow DOMサンドボックスで切り分けられてプレビューされるので、あるモジュールのスタイルが別のモジュールに漏れることはありません。プレビューで見えるものが、そのブロックの実際の姿です。
コードに触れずに色を変える
ブロックが抽出されると、先ほど触れた色の問題が代わりに解決されます。モジュール内の任意の色をクリックして変えると——そのブロックでその色が現れるすべての場所で、同じ色が更新されます。だから青いタイトルカードが、SVGに埋もれた6つの16進数値を編集する代わりに、一手であなたのブランドの緑になります。モジュール内のプレースホルダー画像を自分のものに差し替えることもできます。
ここで「再利用」が理論であることをやめます。他人の記事から気に入ったブロックが、あなたのパレットの、あなたの色のブロックになり、次の作品に落とし込む準備が整います。
自分だけのモジュールライブラリを作る
本当の見返りは、これを何度かやって、抽出したものを取っておくことです。気に入った各モジュールは、ブラウザ内にある（localStorage経由の）ローカルライブラリに保存でき、ライブラリまるごとをJSONファイルに書き出してバックアップしたり、別のマシンに移したりできます。何もアップロードされず、アカウントもありません——ライブラリはあなたのもの、あなたの端末にあります。
数週間かけて、あなただけのキットを作ります。タイトルカードをいくつか、信頼できるセクション見出し、フッターカード、区切り線を一つ二つ。新しい記事をレイアウトするときは、また他人の投稿を探し回る代わりに、自分の一式から引き出します。スタイル付きブロックをエディターに入れるには、インラインHTMLとしてコピーして貼り付けます——スタイルがマークアップとともに移動するので、ブロックは書式を保ちます。
いつも気に入っていたブロックを一つから始め、きれいに抽出し、自分のブランドに色を変えて、保存しましょう。それがループのすべてで、積み重なっていきます。