はじめに

以前、PhotoCollage.js を a-blog cms のブログテーマに実装する記事を書きました。

「グループユニットにクラスを付けるだけで、中の画像をいい感じに変換する」という実装方針だったのですが、先日 まったく同じやり方で Swiper のスライダーを実装してほしい、と Claude Code にお願いしてみたところ、ほぼ 5 分で動くところまで終わってしまいました。

正直、解説記事を書くまでもない気もするのですが、「次に同じことをやるとき」や「人に頼むとき」に “この記事と同じ方式で Swiper を” と言えば済むように、やったことを書き残しておきます。

何ができるようになるか

• 編集画面でグループユニットのクラスに js-swiper を指定するだけ

• そのグループ内に入れた画像が、自動で Swiper のスライダーになる

• 機能：ページネーション（ドット）／前後ナビ矢印／ループ／オートプレイ

• おまけで 再生・停止ボタン（自動再生の一時停止 UI）も追加

PhotoCollage と同じく「マークアップを JS で組み替える」方式なので、テンプレート側の編集は最小限です。

実装の全体像

.js-swiper（グループユニット）
  └─ a-blog cms が出力する画像（column-media > img）   ← JS で収集
        ↓ 必要な構造に組み替え
  .swiper > .swiper-wrapper > .swiper-slide × N
        （+ pagination / navigation / 再生停止ボタン）
        ↓
  new Swiper(...) で初期化

やることは 3 つだけです。

1. テーマの head に Swiper（CDN）と自前の init / CSS を読み込む

2. js-swiper を Swiper に変換する init スクリプトを置く

3. 管理画面でグループユニットのクラスに js-swiper を設定する

1. テーマへの読み込み

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/swiper@11/swiper-bundle.min.css">
<link rel="stylesheet" href="/css/swiper-custom.css">

<script src="https://cdn.jsdelivr.net/npm/swiper@11/swiper-bundle.min.js"></script>
<script src="/js/swiper-init.js"></script>

2. 初期化スクリプト（/js/swiper-init.js）

js-swiper の中の画像を集めて、Swiper の構造に組み替えてから初期化します。 PhotoCollage で学んだ 「画像が 0 枚なら中身を壊さない」安全策や、alt の引き継ぎもそのまま入れています。

/**
 * Swiper 初期化
 * グループユニットのクラスに「js-swiper」を指定した箇所を、
 * グループ内の画像から Swiper スライダーに組み替えて初期化する。
 * 機能: ページネーション(ドット) / 前後ナビ矢印 / ループ / オートプレイ
 */
document.addEventListener("DOMContentLoaded", function () {
  if (typeof Swiper === "undefined") {
    return;
  }

  var groups = document.getElementsByClassName("js-swiper");

  Array.prototype.forEach.call(groups, function (group) {
    // グループ内の画像を収集
    var imgs = group.querySelectorAll("img");

    // 画像が1枚も無い場合は何もしない（元の内容を壊さない安全策）
    if (imgs.length === 0) {
      return;
    }
    // すでに初期化済みなら二重処理しない
    if (group.querySelector(".swiper")) {
      return;
    }

    // Swiper が要求する構造を生成
    var swiperEl = document.createElement("div");
    swiperEl.className = "swiper";
    var wrapperEl = document.createElement("div");
    wrapperEl.className = "swiper-wrapper";

    Array.prototype.forEach.call(imgs, function (img) {
      var slideEl = document.createElement("div");
      slideEl.className = "swiper-slide";
      var newImg = document.createElement("img");
      newImg.setAttribute("src", img.getAttribute("src") || "");
      var alt = img.getAttribute("alt");
      if (alt) {
        newImg.setAttribute("alt", alt); // alt を引き継ぐ
      }
      newImg.setAttribute("loading", "lazy");
      slideEl.appendChild(newImg);
      wrapperEl.appendChild(slideEl);
    });
    swiperEl.appendChild(wrapperEl);

    // ページネーション（ドット）
    var paginationEl = document.createElement("div");
    paginationEl.className = "swiper-pagination";
    swiperEl.appendChild(paginationEl);

    // 前後ナビ矢印
    var prevEl = document.createElement("div");
    prevEl.className = "swiper-button-prev";
    var nextEl = document.createElement("div");
    nextEl.className = "swiper-button-next";
    swiperEl.appendChild(prevEl);
    swiperEl.appendChild(nextEl);

    // グループの中身を Swiper 構造に差し替え
    group.textContent = "";
    group.appendChild(swiperEl);

    // 初期化
    var swiper = new Swiper(swiperEl, {
      loop: true,
      slidesPerView: 1,
      spaceBetween: 0,
      autoplay: {
        delay: 3000,
        pauseOnMouseEnter: true,
        disableOnInteraction: false,
      },
      pagination: { el: paginationEl, clickable: true },
      navigation: { nextEl: nextEl, prevEl: prevEl },
    });

    // --- 再生/停止トグルボタン（自動再生の一時停止 UI） ---
    var SVG_NS = "http://www.w3.org/2000/svg";
    var makeIcon = function (children) {
      var svg = document.createElementNS(SVG_NS, "svg");
      svg.setAttribute("viewBox", "0 0 24 24");
      svg.setAttribute("width", "18");
      svg.setAttribute("height", "18");
      svg.setAttribute("aria-hidden", "true");
      children.forEach(function (c) {
        var el = document.createElementNS(SVG_NS, c.tag);
        Object.keys(c.attrs).forEach(function (k) { el.setAttribute(k, c.attrs[k]); });
        svg.appendChild(el);
      });
      return svg;
    };
    var iconPause = makeIcon([
      { tag: "rect", attrs: { x: "6", y: "5", width: "4", height: "14" } },
      { tag: "rect", attrs: { x: "14", y: "5", width: "4", height: "14" } },
    ]);
    var iconPlay = makeIcon([
      { tag: "path", attrs: { d: "M8 5v14l11-7z" } },
    ]);

    var toggleBtn = document.createElement("button");
    toggleBtn.type = "button";
    toggleBtn.className = "swiper-autoplay-toggle";

    var renderToggle = function () {
      var running = !!(swiper.autoplay && swiper.autoplay.running);
      while (toggleBtn.firstChild) { toggleBtn.removeChild(toggleBtn.firstChild); }
      toggleBtn.appendChild(running ? iconPause : iconPlay);
      toggleBtn.setAttribute("aria-label", running ? "スライドショーを一時停止" : "スライドショーを再生");
      toggleBtn.setAttribute("aria-pressed", running ? "false" : "true");
    };

    toggleBtn.addEventListener("click", function () {
      if (!swiper.autoplay) { return; }
      if (swiper.autoplay.running) { swiper.autoplay.stop(); }
      else { swiper.autoplay.start(); }
      renderToggle();
    });

    swiper.on("autoplayStart", renderToggle);
    swiper.on("autoplayStop", renderToggle);

    swiperEl.appendChild(toggleBtn);
    renderToggle();
  });
});

3. CSS（/css/swiper-custom.css）

Swiper 本体の CSS に最低限の調整を足します。

/* 次の要素との間隔 */
.js-swiper {
  margin-bottom: 32px;
}

.js-swiper .swiper {
  width: 100%;
  /* ドット・矢印の色を白に（既定の青の主張を抑える） */
  --swiper-theme-color: #fff;
  --swiper-pagination-bullet-inactive-color: #fff;
}

/* 高さが異なるスライドがあるとき、低いスライドを縦中央に配置 */
.js-swiper .swiper-wrapper {
  align-items: center;
}

/* スライド画像をスライド幅にフィット */
.js-swiper .swiper-slide img {
  display: block;
  width: 100%;
  height: auto;
}

/* オートプレイ 再生/停止トグルボタン（白アイコン・右下配置） */
.js-swiper .swiper-autoplay-toggle {
  position: absolute;
  right: 12px;
  bottom: 8px;
  z-index: 11;
  width: 32px;
  height: 32px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.4); /* 白の半透明で UI を統一 */
  color: #fff;
  cursor: pointer;
  line-height: 0;
}
.js-swiper .swiper-autoplay-toggle svg { fill: currentColor; }
.js-swiper .swiper-autoplay-toggle:hover { background: rgba(255, 255, 255, 0.6); }
.js-swiper .swiper-autoplay-toggle:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }

ポイント：

• 色：Swiper はテーマ色を CSS 変数（既定の青 #007aff）で持っているので--swiper-theme-color を #fff にするだけでドット・矢印が白になります。

• 高さ違い：Swiper は全スライドの高さを自動では揃えません.swiper-wrapper（flex）に align-items: center を付けると、低いスライドが行の中で**縦中央**に収まります.swiper-slide 側ではなく wrapper 側がポイント）。

• 下マージン.js-swiper に margin-bottom を付けるだけ。

4. 管理画面の設定

「編集画面」メニューの「編集設定」から「グループユニット class属性」を設定します。

• グループユニットの クラス：js-swiper

• ラベル：swiper（任意）

投稿時にこのユニットグループを選び、中に画像を並べるだけ。

まとめ

• PhotoCollage とまったく同じ「グループユニット＋クラス指定＋JS変換」方式で Swiper が実装できました。

• しかも AI に「PhotoCollage と同じ方式で Swiper を」と頼んだら5 分。

• 同じ要領で、ライトボックスや別のスライダーライブラリにも応用できそうです。

というわけで、今後はこの記事を指して「これと同じ方式で◯◯を」と言えば済む、という備忘録でした。

2024年に公開した記事を、今でも使えるようにアップデートしました。

数年前のインターンの課題として「Facebook の複数枚写真をアップロードした際に、写真をレイアウトしてくれる JavaScriptライブラリを作ってみよう！ 」というお題を出していた時期があります。

これはサンプルの1枚画像です

年末に「バイブコーディング時代に a-blog cms が再評価される理由。 Gemini 3 / Nano Banana Pro で変わるWeb制作」というブログ記事を書いているが、あれから半年で随分変わってきている。今回は、その大きな変化について書いてみようと思っています。

まず、最初にこの週末に作ったものを紹介しておきます。

Github.com に skill-htm2ablogcms という Claude Code の SKILL.md を公開しました。これを利用すると、a-blog cms デベロッパーサイトにあるチュートリアル「静的HTMLサイトの「お知らせ」を部分的に CMS化してみよう」を Claude Code が代わりに実装してくれるようになります。

まだ、試しに作ってみた段階なので、まだまだ精度が低いかもしれませんが、しばらく実験を行いアップデートしていくことにしようと思っております。

2026年6月9日 16:00 - ベースキャンプ名古屋で開催する勉強会では、集まった皆さんの力（スキル）によって、より完成度の高い SKILL.md のアップデートをする会を開催します。 興味のある方は、ぜひ参加をご検討ください。

• a-blog cms 勉強会 in 名古屋 2026/06

インストール

~/.claude/skills/html2ablogcms/ にダウンロードしてきた html2ablogcms フォルダを設置します。

使い方

Claude Code で、対象のローカル a-blog cms 環境を開いて依頼するだけです。

themes/sample の「お知らせ」部分を a-blog cms で動的化して

スキルが着手前に前提（格納カテゴリー・作るビュー・テーマ名等）を確認し、テンプレート一式と SETUP.md を生成します。また、作成するモジュールIDをインポートするための YAMLファイルも作ってくれます。

構成

html2ablogcms/
├── SKILL.md               # 判断手順 + a-blog cms の作法 + SETUP生成ルール
├── examples/
│   └── worked-example.md  # 変換の通し例（※写経用ではなく「型」を示す一例）
└── references/
    ├── developer-docs.md  # a-blog cms 公式ドキュメントのリンク集
    └── module-id-yaml.md  # モジュールID設定YAMLの生成＆インポート

Web 制作をはじめた頃、ローカル環境といえば MAMP でした。インストールして起動ボタンを押すだけで PHP と MySQL が動く。あのシンプルさは本当にありがたかったです。

ただ、案件が増えてくると、こんな場面が増えてきませんか？

• 今のバージョンだと PHP 8.1 じゃないと動かないんだけど、古い案件は 7.4 で使いたい

• 自分の環境では動いてるのに、なんで他の人の環境だと動かないんだろう

• 新しい Mac に乗り換えるたびに、MAMP の設定をゼロからやり直す

MAMP が悪いわけじゃないんです。ただ、こういった悩みを解決するツールが今はあります。それが DDEV です。

---

最初に一度だけやること（Mac の環境整備）

まずはあなたの Mac に開発環境を整えます。この作業は最初に一度やれば OK です。次の案件が始まっても、新しい a-blog cms サイトを作るたびにやり直す必要はありません。

Homebrew をインストールする

https://brew.sh/ja/

Mac のパッケージマネージャーです。すでにインストール済みの方は読み飛ばしてください。インストールされているか分からない人は、ターミナルで以下を実行してみてください。

brew --version

バージョンの表示が出てくるようなら次に進んでください。command not found: brew と出てくるのであれば、以下のコマンドを実行します。

/bin/bash -c "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/HEAD/install.sh)"

公式サイトに書かれているコマンドと一緒ですが、心配な方はサイトの以下の部分をクリックしてコードを取得ください。

Docker をインストールする

https://www.docker.com/ja-jp/

DDEV は内部で Docker を使って動いています。まずは Docker Desktop をインストールしてください。こちらは、アプリケーションフォルダに Docker があるかで判断ができます。

インストール後、Docker が起動してください。

DDEV をインストールする

上記でインストールした Homebrew を利用して DDEV をインストールできます。このコマンドを実行する場所は、どこでも同じ結果になりますので、あまり気にする必要はありません。

brew install ddev/ddev/ddev

続けて HTTPS 対応のための設定も一度だけ実行しておきます。

mkcert -install

これで準備完了です。Docker と DDEV のインストールは最初の一度だけ。

次の案件からは不要です。

mkdir my-ablogcms-site
cd my-ablogcms-site

curl -fsSL https://developer.a-blogcms.jp/ddev/install.sh | bash

ddev acms setup

ddev add-on get ddev/ddev-phpmyadmin

ddev phpmyadmin

ddev sequelace

ddev mailpit

https://my-ablogcms-site.ddev.site:8026

---

さいごに

MAMP はシンプルで使いやすく、ローカル環境の入門として本当によくできたツールです。ただ、案件が増えれば増えるほど「環境の管理」が少しずつ辛くなってくるのも事実です。

DDEV に乗り換えることで、PHP や MySQL のバージョン管理、チームでの環境共有、メールのテスト環境まで、開発まわりの悩みがまとめて解決します。「Docker って難しそう」という印象があるかもしれませんが、DDEV を使う分には Docker の知識はほぼ不要です。まずは今回の手順通りに一度試してみてください。慣れてしまえば、もう MAMP には戻れなくなるはずです。

DDEV を試してみるついでに、a-blog cms も試してみてください！

はじめに — WCAN mini 2026 Vol.1 懇親会での話

先日、WCAN mini 2026 Vol.1 に参加してきました。今回のテーマは AI。セッションでもさまざまな AI 活用の話題が上がっていましたが、懇親会でも引き続き「最近こんなふうに AI を使っている」という話で盛り上がりました。

その中で出てきたのが、サイトリニューアル前のキャプチャ作業 の話です。

サイトをリニューアルするとき、まず現状のサイトがどんな状態になっているかを把握する作業が発生します。ページ数が多いサイトだと、トップページ・下層ページ・カテゴリページ……と、確認すべき URL が数十〜数百になることも珍しくありません。それを一枚一枚、手作業でブラウザからスクリーンショットを撮っていくのは、地味に時間がかかる作業です。

そこで紹介したのが、Playwright を使ったキャプチャの一括取得です。

node -v

npm init -y
npm install playwright
npx playwright install

URL のリストが書かれたテキストファイル（urls.txt）を読み込んで、各ページのスクリーンショットをフルページで PNG として保存する。Node.js のスクリプトを Playwright で作ってください。ファイル名は連番にしてください。

const { chromium } = require('playwright');
const fs = require('fs');

(async () => {
  const urls = fs.readFileSync('urls.txt', 'utf-8')
    .split('\n')
    .map(url => url.trim())
    .filter(url => url.length > 0);

  const browser = await chromium.launch();
  const page = await browser.newPage();

  for (let i = 0; i < urls.length; i++) {
    await page.goto(urls[i]);
    await page.screenshot({
      path: `screenshot-${String(i + 1).padStart(3, '0')}.png`,
      fullPage: true
    });
    console.log(`撮影完了: ${urls[i]}`);
  }

  await browser.close();
})();

https://example.com/
https://example.com/about/
https://example.com/service/
https://example.com/contact/

node capture.js

前回は、HTML ファーストで始める View Transitions API 入門 を書きました。その中では、リロードを伴うページ遷移である「cross-document」における View Transitions API の利用方法を解説しました。

今回は「same-document」という、ページ遷移を伴わず同一 HTML ドキュメント内で DOM が更新されるケースを取り上げ、View Transitions API を htmx でどのように実装できるかを見ていきます。

same-document / cross-document の整理

View Transitions API では、適用されるシーンによって same-document と cross-document の 2 つのパターンに分けて考えることができます。この分類は SPA / MPA の違いではなく、ブラウザにとってページ遷移が発生したかどうか という観点で区別されます。

cross-document

cross-document は、異なる HTML ドキュメント間でページ遷移が発生するケースです。

• <a href="..."> による通常のページ遷移
• ブラウザが新しい HTML を読み込む
• DOM はすべて再構築される

このような場合に、遷移前と遷移後のページ全体を対象として View Transition が適用されます。

@view-transition {
  navigation: auto;
}

上記の指定を行うだけで、ページ遷移時に自動的なクロスフェードが有効になります。

same-document

same-document は、ページ遷移を伴わず、同一 HTML ドキュメント内で DOM が更新されるケースです。

• JavaScript による DOM 操作
• htmx による部分更新
• SPA における画面切り替え

などが該当します。この場合、HTML ドキュメント自体は切り替わらず、更新前後の DOM の差分に対して View Transition が適用されます。

違いの整理

また、htmx は基本的に JavaScript を書かず、HTML の属性を記述するだけで実装できる点も大きな特徴です。そのため、View Transitions API と組み合わせた場合でも、JavaScript による遷移制御やアニメーション処理を意識することなく、same-document の画面更新に自然な動きを加えることができます。

本記事では、この「HTML フラグメントの差し替え」と「same-document View Transitions」を組み合わせた実装を通して、HTML ファーストな設計のまま UX を向上させる方法 を具体的に見ていきます。

demo

サンプルサイトでは、サブカラムに index.html と初期表示時の HTML ファイル名を表示しています。サブカラムを書き換えることなく、メインカラムのコンテンツのみが切り替わっていることを確認できます。また、ページ遷移後にブラウザをリロードすると、そのページの HTML ファイル名に変わる点も確認できるようにしています。

https://kazumich.com/demo/view-transition/3_htmx/index.html

https://github.com/kazumich/view-transition

github に公開されている 2_view-transition をベースに 3_htmx へ変更していく流れを、以降で解説していきます。

htmx を利用可能にする

htmx は、特別なビルド環境や設定を必要とせず、JavaScript ファイルを 1 つ読み込むだけで利用できます。既存の HTML に後から追加できる点も、大きな特徴です。

CDN から読み込む

まずは、<head> 内に、以下を書きます。

<script src="https://cdn.jsdelivr.net/npm/htmx.org@2.0.8/dist/htmx.js"></script>

これだけで、hx-get や hx-post などの htmx 用属性が有効になります。 JavaScript の初期化コードは不要です。 CDN からの読み込みは、検証や実験用途として手軽に試す場合 には便利ですが、実運用のサイトでは htmx をダウンロードし、自サーバーに配置して利用する ことをおすすめします。

View Transitions API の利用

次の設定を追加することで、JavaScript を個別に記述することなく、htmx による same-document 更新で View Transitions API を利用できるようになります。

<script>
    htmx.config.globalViewTransitions = true;
</script>

一覧ページから詳細ページへの遷移を htmx 化する

View Transitions API の基本設定については、HTML ファーストで始める View Transitions API 入門 で解説していますので、ここでは htmx 化に関する変更点のみを見ていきます。

変更前

通常の一覧ページから詳細ページへのリンクは、次のようなシンプルな <a> タグになります。

<a href="entry-1.html">

この場合、リンククリック時にページ全体が再読み込みされ、cross-document のページ遷移が発生します。

変更後

これを htmx で same-document の部分更新に変更します。

<a href="entry-1.html"
  hx-get="entry-1.html"
  hx-target="#main-content"
  hx-swap="innerHTML"
  hx-select="#main-content"
  hx-push-url="true"
>

entry-1.html 以外のリンクについて、同様に追記していきます。

各属性の役割

• hx-get リンククリック時に、指定した URL へ HTTP GET リクエストを送信します。

• hx-target サーバーから返された HTML を差し替える対象要素を指定します。 この例では #main-content の中身だけが更新されます。

• hx-swap="innerHTML" 対象要素の内側を、取得した HTML に置き換えます。

• hx-select 取得した HTML 全体ではなく、その中から指定した要素だけを抜き出して使用します。 一覧ページと詳細ページで共通のレイアウトを使っている場合に有効です。

• hx-push-url="true" ブラウザの URL をリンク先の URL に更新し、履歴にも追加します。 これにより、戻る・進む操作や URL の共有が通常のページ遷移と同じ感覚で行えます。

この変更による挙動

• ページ全体はリロードされない
• #main-content のみが差し替わる
• View Transitions API により、same-document の画面遷移としてアニメーションが適用される

つまり、HTML の構造を保ったまま、MPA の設計で SPA に近い体験を実現できます。

補足：href を残す理由

href 属性は削除せず、そのまま残しています。これにより、

• JavaScript が無効な環境でも通常のリンクとして機能する
• 検索エンジンやクローラにも正しく認識される

といった、HTML ファーストな設計 を維持できます。

詳細ページへの遷移も htmx 化する

パンくずリストのリンクから、一覧ページへ戻る動作も htmx 化します。

<a href="index.html"
  hx-get="index.html"
  hx-target="#main-content"
  hx-swap="innerHTML"
  hx-select="#main-content"
  hx-push-url="true">ホーム</a>

ここで指定している属性の役割は、一覧ページから詳細ページへの遷移と同じです。そのため、個別の解説は省略します。

HTML ファーストな same-document 更新

htmx による画面更新は、ページ遷移を伴わない same-document の更新であり、HTML ファーストな設計と非常に相性が良いのが特徴です。そのため、サーバーから返す HTML はページ全体である必要はなく、表示に必要な部分だけを返す構成でも問題ありません。

このように、最初から部分的な HTML（HTML フラグメント）を返す設計であれば、hx-select を指定せずに、そのまま hx-target へ差し替えることができます。

<a href="entry-1.html"
  hx-get="entry-1.html"
  hx-target="#main-content"
  hx-swap="innerHTML"
  hx-push-url="true"
>

entry-1.html のファイルの中身を <div id="main-content"> 〜 </div> だけにしても動作しますので、よろしければ一度お試しください。

それでも hx-select を使っている理由

本記事のデモでは、各ページを 通常の HTML ファイルとしても成立させる ことを重視しています。そのため、一覧ページ・詳細ページともにページ全体の HTML を返しつつ、hx-select を使って表示に必要な部分だけを抜き出しています。

この構成により、

• JavaScript が無効な環境でも通常のページ遷移が可能
• リロード時にも正しいページが表示される
• htmx を外しても HTML として成立する

といった、HTML ファーストな設計 を維持できます。

まとめ

View Transitions API は、ページ遷移を伴う cross-document だけでなく、ページ遷移を伴わない same-document の更新にも適用できます。htmx を利用することで、JavaScript をほとんど書かずに、HTML の属性だけで same-document な画面更新を実装できる点は、大きな利点です。

same-document の更新では、ページ全体の HTML を返す必要はなく、表示に必要な部分だけの HTML（HTML フラグメント）を返す設計でも成立します。一方で、通常の HTML ファイルとしても成立させたい場合には、hx-select を使って表示部分を切り出す構成も有効です。

重要なのは、フレームワークありきで SPA 化するのではなく、HTML の構造とブラウザの挙動を前提に、必要な部分だけを same-document 化する という考え方です。

まずは cross-document の View Transitions API から始め、必要な箇所だけ htmx による same-document 更新を取り入れる。そのように段階的に導入することで、HTML ファーストな設計を保ったまま UX を向上させることができます。

View Transitions API とは

View Transitions API は、ページ遷移や画面切り替えの際に、前後の画面をつなぐようなアニメーションを付与できる Web 標準の API です。従来であれば JavaScript やフレームワークに依存しがちだった画面遷移の演出を、ブラウザが主導して処理 してくれる点が特徴です。

重要なのは、この API が 見た目の体験を改善するためのもの であり、通信の高速化やデータ取得方法を変えるものではない、という点です。

https://kazumich.com/demo/view-transition/2_view-transition/index.html

https://github.com/kazumich/view-transition

いま、制作現場で使える理由

以前は View Transitions API を使うには、対応ブラウザやフラグの存在を強く意識する必要がありました。しかし現在では状況が変わっています。

• Chrome / Edge では安定して利用可能
• Safari も正式対応が進み、実用上の問題はほぼ解消
• Firefox も対応が進み、非対応環境でも自然にフォールバックする

このため、Progressive Enhancement を前提とすれば、通常の Web サイト制作の現場でも無理なく導入できる段階 に入っています。

最低限の記述で何が起きるのか

View Transitions API を使うために、特別な meta タグや JavaScript を用意する必要はありません。まず必要なのは、次の CSS だけです。

@view-transition {
  navigation: auto;
}

これを追加するだけで、

• 通常の <a> リンクによるページ遷移
• リロードを伴うページ遷移（cross-document）

に対して、ブラウザ標準の View Transition が自動的に適用されます。対応ブラウザではフェードを中心とした滑らかな遷移が行われ、非対応ブラウザでは従来どおり即時に画面が切り替わるだけです。

HTML ファーストで考える View Transitions

View Transitions API は、特定のフレームワークを前提とした技術ではありません。既存の HTML 構造とナビゲーションを、そのまま活かせます。

• <a> タグのリンクはそのまま
• JavaScript によるルーティングは不要
• SEO やアクセシビリティへの影響も最小限

「このフレームワークを使えばできる」と思われがちですが、実際には ごく簡単な記述を追加するだけ で成立します。

一覧ページ → 詳細ページで体験する View Transitions

一覧ページと詳細ページの両方で、対応する要素に view-transition-name を指定することで、一覧から詳細へ遷移する際に、要素同士がつながって見える View Transition を実現できます。

<img src="..." style="view-transition-name: photo-1;">

view-transition-name の指定は、CSS ファイルに記述することも可能ですが、対象となる要素を明示しやすいという点から style 属性での指定がおすすめ です。特に一覧ページと詳細ページで 1 対 1 の対応関係 を持たせる場合、HTML 上で対応関係が一目で分かるため、実装・保守の両面で扱いやすくなります。

一覧ページと詳細ページで同じ名前を指定するだけで、ブラウザはそれらを 同一要素 として扱い、位置やサイズの違いを自動的に補間しながら、画像が移動・変形するような遷移を生成します。

HTML 側で行うのは、「どの要素とどの要素を対応させたいか」を明示することだけ です。アニメーションの実装や補間処理は、すべてブラウザに委ねられます。

同一ページ内での view-transition-name の扱い

view-transition-name は、同一ページ内では一意である必要があります。同じページ内に同じ名前を持つ要素が複数存在すると、ブラウザが対応関係を判断できず、View Transition は正しく動作しません。

そのため、

• 一覧ページでは、記事ごとに異なる名前を付ける（例：photo-1, photo-2, photo-3）
• 詳細ページでは、対応する 1 要素のみに同じ名前を付ける

という 1 対 1 の関係 を保つことが重要です。

画像以外の要素にも利用できる

view-transition-name を指定できるのは、画像だけではありません。見出しや div 要素など、任意の HTML 要素 に指定できます。

<h2 style="view-transition-name: title-1;">記事タイトル</h2>
<div style="view-transition-name: card-1;">...</div>

一覧ページと詳細ページで同じ名前を指定すれば、見出しやコンテンツブロックであっても、shared element transition が成立します。

実務での考え方

shared element transition は、意味的に同じ役割を持つ要素を対応付ける ことで、最も効果を発揮します。

• 一覧のアイキャッチ画像 → 詳細のメイン画像
• 一覧のタイトル → 詳細ページの見出し
• カード全体 → 詳細コンテンツのラッパー

HTML の構造を大きく変えることなく、見た目の体験だけを自然に向上させられる 点が、View Transitions API の強みです。

アクセシビリティへの最低限の配慮

画面全体が動く View Transitions では、ユーザーの設定を尊重することも重要です。

@media (prefers-reduced-motion: reduce) {
  @view-transition {
    navigation: none;
  }
}

prefers-reduced-motion は、「画面の動きを減らしたい」というユーザーの OS 設定を検知するための Media Query です。

この指定を入れておくことで、

• 通常のユーザー：アニメーションあり
• 動きを控えたいユーザー：即時遷移

という、無理のない出し分けが可能になります。

まとめ：まずは HTML + CSS で十分

View Transitions API は、

• フレームワーク前提ではない
• 最低限の記述から始められる
• HTML ファーストな設計と相性が良い

という特徴を持っています。

最後に、もう一度だけ書いておきますが、必要なのは次の記述だけです。

@view-transition {
  navigation: auto;
}

<img src="..." style="view-transition-name: photo-1;">

これだけで、通常のページ遷移に View Transition が適用され、一覧ページと詳細ページをつなぐ体験を実現できます。まずは HTML + CSS だけ で体験し、必要になった段階でアニメーション調整や拡張を検討すれば十分です。

この次は、HTML ファーストで始める View Transitions API（htmx 編） で、same-document の View Transitions や、htmx と組み合わせた実装について紹介します。

購入前に「自宅に TRAK RACER TR80S を導入することに」と書いていましたが、セットアップが完了しましたので報告しておきます。

娘が小さかった頃に買った YAMAHA のエレクトーン が使われないまま和室の畳でないスペースに置かれていましたが、これを処分して TRAK RACER TR80S を設置することになりました。

ほとんど1人での作業でしたが、ディスプレイをつける時だけは1人だと無理でした。かかった時間は 6時間ほどでカタチに。でも、実際に遊べるポジションに調整するのにネジをほとんど緩めてズラす作業でプラス2時間くらいかかってしまいました。

TRAK RACER にして良かった点

やっぱり、チューブフレームコックピットより、アルミフレームコックピット の方が調整の幅が広くいい！って思えました。次に TR40S / TR80S / TR120S / TR160S のような種類があり、下から2番目を選択したわけですが、どれが良かったかは比べていないので分かりませんが、ペダルマウントでフォーミュラポジションにすることはしないので前側を上げる部分は使いませんでした。

アルミフレームを組む際の専用ブラケットが汎用のものと違っていい感じだったり、専用のエンドキャップなんかも MiSUMi のアルミフレーム を自分で組むよりいいのではないかと言うのが感想ですね。

TRAK RACER を使い始めて変わった点

実はこれまで、右でアクセル、左でブレーキ で走っていたのですが、ペダル側の安定感が増したことから右足でブレーキにしても大丈夫になった感じがし、より実車を運転するのに近い感じになりました。左足が暇になったので、ユニバーサル フットレスト TR80-FOOTREST2 を追加を検討中。

アンプの導入

上記にあるペダルに加え、音の調整をするために何か追加をしないといけないようです。現在は、HDMI から ディスプレイ に、ディスプレイのヘッドフォン端子からヘッドフォンに音が入っているのでボリューム調整がハードウェア的に無いので簡単に変えられない状況なのです。

そこで、SteelSeries GameDac 61370 を導入予定。 Gen 2 というモデルが出ていて、一つ型落ちモデルっぽいが安く買えたのでコレにした。

最後に

こんな感じで届いた。全部で 50kg 以上あった、一番重たい箱は 37kg もあって玄関から部屋まで移動できず、玄関で開けて部品を何往復もして運ぶ必要があったことも書き残しておく。

少し前になりますが、福利厚生の一環として貸別荘のサブスクサービス SANU を契約しました。いわゆる「ワーケーションを推進したい」という話ではなく、もう少しシンプルに、自然の中でリフレッシュしに行くきっかけを会社として用意したかった、というのが一番の理由です。

名古屋の街中で暮らしているからこそ

アップルップルのスタッフの多くは名古屋の街中で暮らしています。生活にはとても便利ですが、意識しないと自然の中でゆっくり過ごす時間はなかなか取れません。私自身は南に 30数km の田舎なところに住んでいますが…

週末に少し遠出をすれば自然はあるものの、「計画を立てる」「宿を探す」といったハードルがあると、結局行かずじまいになりがちです。そこで、行こうと思えばすぐ行ける場所を、会社として用意しておくという選択肢として SANU はちょうどいいなと感じました。

SANU とは

全国の自然豊かな場所にあるキャビンを、会員制で利用できる貸別荘のサブスクリプションサービスです。森や湖のそばなど、日常から少し離れた環境に拠点があり、「何もしない時間」や「自然の中で過ごす時間」を気軽に持てるのが特徴です。

エリアは 35拠点で、軽井沢、一宮、北軽井沢、山中湖、南アルプス、那須、伊豆、蓼科、河口湖、館山、白樺湖、八ヶ岳、ニセコ、いすみ、安曇野、下田、足柄、淡路島、奄美大島、白馬 が利用でき、名古屋からだと長野の辺りで3時間ドライブで山の中に行くイメージになります。

家族や友達と行ってもらってもいい

この福利厚生は、社員本人だけのためのものではありません。家族や友達と一緒に使ってもらうのも、まったく問題ないと考えています。

仕事を頑張るためには、プライベートが充実していることも大事ですし、「会社の制度のおかげで、ちょっといい時間を過ごせた」と思ってもらえたら、それだけで十分です。

春までに 1人 2泊できるようにしています。1棟1泊なので、1人分の権利で複数人が泊まれます。

開発合宿や「数人で遊びに行く」使い方も

今後は、

• 数名での 開発合宿的な利用

• 「ちょっと気分転換に行こう」という 小旅行

こういった使い方もしていけたらいいなと思っています。あまり制度でガチガチに縛らず、使いたい人が、使いたい形で使えるくらいがちょうどいい。

社内で利用する際には、4人で行っても1泊分で済むので、開発合宿的に行けば4人が1泊づつ消費し、4泊5日で行く事が可能になります。

SANUの問題点

基本、家族で利用する前提の貸別荘であることから、4人泊まれる建物だとしても、ダブルベットが2つだったりします。男性4人での開発合宿を考えると、一緒のベットで寝るのは難しいのではないかと思います。

シングルベットが2つ合体してダブルベットになるようなものだったりしたら良かったのですが。その場合には、シングルの布団が余分に必要になったりするので収納も少ないので難しいかもしれません。

その点からも、SANU CABIN MOSS Medium や BEE などはグループ向けではないようです。 MOSS の 6人まで OK の少し広い SANU CABIN MOSS Large であれば大丈夫なのかもしれないので、一度行ってみようと考えています。

追記

2026年5月に BEE というタイプの 八ヶ岳 2nd にも行ってきました。外観の写真が玄関側しかなかったですが、窓が大きく＆天井が高く MOSSタイプよりいいなぁって感じでした。次に泊まる違うタイプは ARC というものを予約済です。

こんな感じで1年の契約で、いろいろな所に泊まりに行っています。社員もプライベートで使ってもらったりして 年間 30泊のところ 26泊予約済みで残り 4泊残すことなく利用できるように頑張ります。

今年の3月くらいに「a-blog cms と View Transitions API で作るページ遷移のアニメーションの実装について」を書いていますが、少し進展したことから続編を書いてみようと思います。前回は、a-blog cms への実装について書いていましたが、今回は CMS 関係なく HTML + CSS + htmx ( JS ) というところでの万人に向けた内容になります。

<script src="https://unpkg.com/htmx.org@2.0.8"></script>
<script>
  htmx.config.globalViewTransitions = true;
</script>

<style>
    .vt-img {
        contain: paint;
        width: 100%;
        aspect-ratio: 16/9;
        object-fit: cover;
        display: block;
    }
    ::view-transition-group(root) {
        animation-duration: 0.5s;
    }
</style>

<div class="card">
    <button
        hx-get="detail-1.html" 
        hx-target="#main-area" 
        hx-swap="innerHTML transition:true"
        hx-push-url="detail-1.html"
        style="background: none; border: none; cursor: pointer; padding: 0;">
        <img src="/images/detail-1.jpg" 
                class="vt-img" 
                style="view-transition-name: detail-1;"
                alt="商品1">
        <h3>サンプルタイトル1</h3>
    </button>
</div>

<div class="detail-container">
    
    <button 
        hx-get="list.html" 
        hx-target="#main-area" 
        hx-swap="innerHTML transition:true"
        hx-push-url="list.html">
        ← 一覧に戻る
    </button>

    <figure>
        <img src="/images/detail-1.jpg" 
             class="vt-img"
             style="view-transition-name: detail-1;"
             loading="eager"
             fetchpriority="high"
             alt="詳細画像">
    </figure>
    <h1>サンプルタイトル1</h1>
    <p>説明テキスト...</p>
</div>

<h3 style="view-transition-name: title-1;">サンプルタイトル1</h3>

<h1 style="view-transition-name: title-1;">サンプルタイトル1</h1>