壊れないための作り

Glass が、見た目より先に決めた 7 点です。どれも、入れたあとの運用に関わります。

上書きを増やさない（6 枚だけ）

テンプレートが本体のページを上書きすると、そのページは本体が更新されても古い内容のまま表示されます。本体側の修正や仕様変更が届かないため、本体と前提が合わなくなった箇所で表示が崩れることがあります。

Glass が本体のページで上書きしているのは 6 ファイルだけです。

商品一覧（バッジ表示のため）
会員登録（仮登録）完了（本文を文ごとに改行するため）
マイページの 4 ファイル（あいさつの文字詰まり、履歴の金額表示、お気に入りのロールオーバー、合計欄の見出し）

商品詳細・カート・ご注文手続きは、あえて上書きしていません。この 3 つはバージョン差が大きく、上書きすると更新に追従できなくなるためです。 6 ファイルはいずれも 4.2 系と 4.3 系で内容が同じで、同じパッケージのままどちらでも動きます。

ページ以外では、ブロックを並べる 19 行の処理（block.twig）も上書きしています。理由は下の「ブロックが欠けても、店は止まらない」に書きました。こちらも 4.2 系と 4.3 系で内容が同じです。

プラグインで止まらない

EC-CUBE の標準プラグインには、テンプレートのフォルダに Twig を置くものがあります。おすすめ商品管理がその一つです。

この状態でテンプレートを新しい版に入れ替えると、置かれた Twig ごと消えます。プラグインは「あるはず」のファイルを読もうとして失敗し、全ページが 500 エラーになります。テンプレートを入れ替えた操作と、エラーの内容が結び付きにくいため、原因にたどり着くまでに時間がかかります。

おすすめ商品管理が置く Twig を取り除いて動かしたところ、トップページも商品一覧も HTTP 500 になりました。ファイルを戻すと表示は復帰します。

Glass は、プラグインがテンプレート側に置く Twig を同梱しています。入れ替えても消えません。関連商品・クーポン・おすすめ商品管理・商品レビュー管理の 4 種を有効にしたまま、4.2.3-p2 と 4.3.1-p1 の実機でテンプレートを入れ直して確認しました。

ブロックが欠けても、店は止まらない

同梱しているものは上のとおり消えませんが、ブロックが欠ける道はほかにもあります。 ブロック管理でブロックを削除したとき（EC-CUBE は twig ファイルごと消します）、独自のファイル名で作ったブロックがテンプレートの入れ替えで戻らなかったとき、同梱外のプラグインが置いた Twig が消えたときです。

本体はレイアウトに置いたブロックを include_dispatch() で読み込みますが、これはファイルが無いと例外になります。ブロック 1 つの欠けが、そのレイアウトを使うページ全部を落とします。

Glass はブロックを並べる処理（block.twig）を差し替え、見つからないブロックは読み飛ばすようにしました。欠けた部分が出ないだけで、ほかは通常どおり表示します。 表示の完全さより、店が開いていることを優先しています。

実機で確かめています。ブロックの twig を 1 つ外した状態で、差し替え前は HTTP 500、差し替え後は HTTP 200 でした。すべてそろっているときの出力は、差し替えの前後で一致します（トップ・商品一覧・商品詳細・カートで比較）。

なお、本体にも同じ名前があるブロック（新着情報・トピック・新入荷商品特集・新着商品・カテゴリ・ロゴ・フッター・カテゴリナビ）は、Glass 側が欠けても本体のものが使われるため、もともと落ちません。落ちるのは Glass だけが持つブロック（コンセプト・お客様の声・よくあるご質問・掲載メディア・商品一覧・ Instagram）と、お店が独自に作ったブロックです。

重さは、やめるのではなく数える

すりガラス（backdrop-filter）は、重ねると急に重くなります。1 枚あたりの描画コストは小さくても、別のすりガラスの内側に入ると大きく増えます。この重なりが多いと、スマートフォンでのスクロールが引っかかります。

Glass は、商品一覧に置いたすりガラス 55 枚のうち、他のすりガラスの内側にあった 39 枚を 0 枚にしました。ガラスをやめたのではなく、重ならないように置き直しただけです。

スクロール中のフレーム時間は p95 9.2ms 以下で、1 コマの上限 16.7ms を超えたコマは 137 回中 0 回でした（商品一覧・幅 375px で計測）。

ご自身で足した CSS ですりガラスを入れ子にすると、この条件は崩れます。重くなったときの調整は「スマートフォンで引っかかる」に書いています。

外から何も読み込まない

Glass はアイコンを SVG で内蔵しており、表示のために外部へリクエストを送りません。 外部サービスの状態に表示が左右されず、社外への通信を制限している環境でも、そのまま使えます。

読めない配色を出さない

配色プリセットは 4 種類、それぞれにダークがあります。8 通りすべてについて、文字と背景のコントラストが WCAG 2.1 AA（4.5:1）を満たすか検証しています。

検証は目視ではなく、プログラムで機械的におこなっています。色を変えるたびに実行し、基準を下回った組み合わせは直してから公開しています。

なぜガラスなのか

ガラス（半透明＋背面ぼかし）を選んだ理由は、商品写真の邪魔をしない面であることです。

不透明な色の面は、その色自体が主張します。商材の色とぶつかることもあります。半透明の面は背後の色を拾うので、写真の上に置いても、白背景の商品の隣に置いても浮きません。

そのうえで、白い商品がカードに溶けないよう受け皿と 1px の縁を用意し、写真の上に文字を置くヒーローでは覆いの濃さを自動で切り替えています。配色 4 種 × ライト／ダークの 8 通りで、文字が読めることを確認済みです。