【Shopify Editions】
Shopify Editions 秋 '26 の HTML in Canvas に刺激を受けて、自分でも何か面白いことをしてみたくなりました。
題材にしたのは、Editions のアップデートそのもの。今回は数が多く、文字の一覧だけでは全体の規模をつかみにくかったので、STORE DOJO にビジュアルで見渡せる一覧ページを作ってみました。
Shopify Editions 秋 '26 ｜ すべてのアップデート
https://store-dojo.com/blogs/shopify-editions-26-fall
1件のアップデートを1枚のカードに見立てて、11のカテゴリーに分類。ドラッグでカードをめくり、「全件を立体表示」に切り替えると、すべてのアップデートを一望できます。
遊びもいくつか入れてみました。
・世界観を「標準」「東洋 秋の山水」「西洋 魔法の書庫」から選べる
・立体表示は世界観ごとに配置や動きが変わり、西洋ではドラッグで回転できる
・「公開中のみ」やカテゴリーで絞り込める
・自動再生や英語表示にも対応
ちなみに、そもそもの本題であるアップデート内容ですが、１件１件確認していますが、どれも読み解きがいがあり、すべてを理解するにはかなり時間がかかりそうです。これだけのアップデートを一度に出してくるのは、さすが Shopifyですね。
読み解けたものから順に解説を追加していく予定です。
なお、HTML in Canvas は Chrome 157 で正式対応となります。現在は通常の Canvas を使ったフォールバックで表示していますが、対応環境では HTML in Canvas の描画も有効にできる作りにしています。うまく動けばいいのですが。（Claude と ChatGPT-6 Astra で作成してみました）
全体の動きは、PCで見ると分かりやすいです。
作った経緯とページの見方はこちらにまとめています。
https://store-dojo.com/blogs/tips/shopify-editions-26-fall-explorer
