View Transitions API を利用して、一覧で表示されているメイン画像（アイキャッチ画像）をクリックすると、その写真が拡大表示されるアニメーションと共にページが切り替わるような動きをつけることができます。

なお、すべてのブラウザが対応しているものではありません。今回の実装は PC の Chrome と Edge で動き、他のブラウザでは普通に画面が遷移するという現在の状況になります。

この記事をご覧になっているタイミングでのブラウザのサポート状況は、書いている時とは違ってきていることも多いことが考えられますので、現在の状況は View Transition API" | Can I use... をご覧ください。

この実装が可能な a-blog cms のバージョン

今回の実装については、以下の変数が追加になった Ver. 3.1.23 以降から可能になりました。

CMS-6914 エントリーサマリー系モジュールのメイン画像部分に{utid}変数（ユニットID）を追加 & メディアユニットに {(image|svg|file)_uiid} 変数を追加

最終的な実装結果

表示させるコンテンツの画像ごとに個別の Class 設定し、その記述を <head> 内に <style> を動的に用意します。

一覧ページ例

Entry_Summary モジュールを実行時に .unit-id-63 〜 .unit-id-65 を生成し、setRendered & GET_Rendered を利用して、<head> 内に移動させています。

<style>
@view-transition {
  navigation: auto;
}
.unit-id-63 {
  view-transition-name: transition-utid-63;
  contain: paint;
}
.unit-id-64 {
  view-transition-name: transition-utid-64;
  contain: paint;
}
.unit-id-65 {
  view-transition-name: transition-utid-65;
  contain: paint;
}
</style>

詳細ページ例

こちらの <head> 内の <style> を Entry_Body で生成しています。

<style>
@view-transition {
  navigation: auto;
}
.unit-id-64 {
  view-transition-name: transition-utid-64;
  contain: paint;
}
</style>

具体的な実装方法

今回は、実装テストをした環境である beginner テーマをベースに解説します。

beginner/include/head/link.html

どのページでも共通で利用できるように以下のような記述を追加します。

<style>
@view-transition {
  navigation: auto;
}
<!-- GET_Rendered id="transition-utid" -->
</style>

include/entry/summary-image.html

〜　 の外側に以下の記述を追加します。これで一覧ページで表示されているエントリー数分の設定が id="transition-utid" に作られます。

<!-- BEGIN_SetRendered id="transition-utid" -->
<!-- BEGIN unit:loop -->
<!-- BEGIN entry:loop -->
.unit-id-{utid} {
  view-transition-name: transition-utid-{utid};
  contain: paint;
}
<!-- END entry:loop -->
<!-- END unit:loop -->
<!-- END_SetRendered -->

画像の部分に Class を追加する必要があります。

<img src="%{ROOT_DIR}{path}[resizeImg(480,480)]" alt="" class="acms-img-responsive" />

上記の Class に unit-id-{utid} を追加します。

<img src="%{ROOT_DIR}{path}[resizeImg(480,480)]" alt="" class="acms-img-responsive unit-id-{utid}" />

include/entry/body-no-date.html

こちらは  の上に追記してください。 Entry_Body の mainImage ブロックの中にある {utid} という変数を利用するためです。

<!-- BEGIN_SetRendered id="transition-utid" -->
<!-- BEGIN mainImage -->
.unit-id-{utid} {
  view-transition-name: transition-utid-{utid};
  contain: paint;
}
<!-- END mainImage -->
<!-- END_SetRendered -->

SetRendered と GET_Rendered について

〜  で囲まれた情報は id="transition-utid" という場所に保存され、その場所からは消えます。その後、 が記述されている場所で、その情報が編集されることで、モジュールの外側に必要な情報を移動させることができます。

最後に

クリックして、このコンテンツが表示されるということを明示的にアニメーションで閲覧者に伝えれらることになるので、サイトの閲覧体験の向上に繋がるのではないでしょうか。

この記事を書いたタイミングでは https://ablogcms.sakuraweb.com/ にデモ用のサイトを用意しています。まずは、こちらをご覧になってみてください。

現在位置に装飾する

a-blog cmsでは、現在表示しているページの場所によって異なるクラスを付与する設定が標準で実装されています。（Ver. 1.3.0より）

デモ

linkMatchLocationMark

linkMatchLocationCategoryMark

デフォルトの設定

この機能の設定は、/js/config.jsの以下の箇所にあります。設定を変更する場合は、適用しているテーマ内にJavaScriptファイルを別途作成してください。詳しくは「組み込みJSについて：設定を編集する」を参照してください。

//---------------------
// link match location
linkMatchLocationMark          : '.js-link_match_location',
linkMatchLocationFullMark      : '.js-link_match_location-full',
linkMatchLocationBlogMark      : '.js-link_match_location-blog',
linkMatchLocationCategoryMark  : '.js-link_match_location-category',
linkMatchLocationEntryMark     : '.js-link_match_location-entry',
linkMatchLocationContainMark   : '.js-link_match_location-contain',
linkMatchLocationClass         : 'stay',
linkMatchLocationFullClass     : 'stay',
linkMatchLocationBlogClass     : 'stay',
linkMatchLocationCategoryClass : 'stay',
linkMatchLocationEntryClass    : 'stay',
linkMatchLocationContainClass  : 'stay',
linkMatchLocationArray: [{
  //        'mark'  : '.js-link_match_location-original',
  //        'type'  : 'part', //( 'part' | 'full' | 'blog' | 'category' | 'entry' )
  //        'class' : 'current'
}],

下記のリンク先URLのうち、指定方法による違いを説明します。

http://www.example.com/
http://www.example.com/blog/
http://www.example.com/blog/category/
http://www.example.com/blog/category/entry-1.html
http://www.example.com/blog/category/entry-1.html?foo=var
http://www.example.com/blog/category/sub-category/entry-1.html
http://www.example.com/childblog/category/entry-1.html（子ブログの場合）
http://www2.example.com/blog/category/entry-1.html（ドメインが異なる場合）

linkMatchLocationMark	ここで指定したセレクタ内のアンカーリンクのリンク先をもとに判定します。現在表示しているページのURLが、アンカーリンクのリンク先URL中に含まれている場合に、「linkMatchLocationClass」で指定したクラスを追加で付与します。例）現在表示中のページが http://www.example.com/blog/category/ の時、以下のページへのアンカーリンクに「linkMatchLocationMark」を指定した場合「linkMatchLocationClass」が適用されるのは以下のアンカーリンクとなります。 http://www.example.com/blog/category/ http://www.example.com/blog/category/entry-1.html http://www.example.com/blog/category/entry-1.html?foo=var
linkMatchLocationFullMark	ここで指定したセレクタ内のアンカーリンクのリンク先をもとに判定します。現在表示しているページのURLとリンク先が“完全に”同じ場合に、「linkMatchLocationFullClass」で指定したクラスを追加で付与します。例）現在表示中のページが http://www.example.com/blog/category/entry-1.html の時、以下のページへのアンカーリンクに「linkMatchLocationFullMark」を指定した場合「linkMatchLocationFullClass」が適用されるのは以下のアンカーリンクとなります。 http://www.example.com/blog/category/entry-1.html
linkMatchLocationBlogMark	ここで指定したセレクタ内のアンカーリンクのリンク先をもとに判定します。現在表示しているブログのURLが、アンカーリンクのリンク先URL中に含まれている場合に、「linkMatchLocationBlogClass」で指定したクラスを追加で付与します。例）現在表示中のページが http://www.example.com/blog/category/entry-1.html の時、以下のページへのアンカーリンクに「linkMatchLocationBlogMark」を指定した場合「linkMatchLocationBlogClass」適用されるのは以下のアンカーリンクとなります。 http://www.example.com/blog/http://www.example.com/blog/category/ http://www.example.com/blog/category/entry-1.html http://www.example.com/blog/category/entry-1.html?foo=var
linkMatchLocationCategoryMark	ここで指定したセレクタ内のアンカーリンクのリンク先をもとに判定します。現在表示しているカテゴリーのURLが、アンカーリンクのリンク先URL中に含まれている場合に、「linkMatchLocationCategoryClass」で指定したクラスを追加で付与します。例）現在表示中のページが http://www.example.com/blog/category/sub-category/entry-1.html の時、以下のページへのアンカーリンクに「linkMatchLocationCategoryMark」を指定した場合「linkMatchLocationCategoryClass」が適用されるのは以下のアンカーリンクとなります。 http://www.example.com/blog/category/sub-category/entry-1.html 現在表示中のページが http://www.example.com/blog/category/entry-1.html の時、適用されるのは以下のアンカーリンクです。 http://www.example.com/blog/category/ http://www.example.com/blog/category/entry-1.html http://www.example.com/blog/category/entry-1.html?foo=var
linkMatchLocationEntryMark	ここで指定したセレクタ内のアンカーリンクのリンク先をもとに判定します。現在表示しているエントリーのURLとリンク先が同じ場合に、「linkMatchLocationEntryClass」で指定したクラスを追加で付与します。例）現在表示中のページが http://www.example.com/blog/category/entry-1.html の時、以下のページへのアンカーリンクに「linkMatchLocationEntryMark」を指定した場合「linkMatchLocationEntryClass」が適用されるのは以下のアンカーリンクとなります。 http://www.example.com/blog/category/entry-1.html http://www.example.com/blog/category/entry-1.html?foo=var
linkMatchLocationClass	現在表示しているページのURLが、アンカーリンクのリンク先URL中に含まれている場合に付与するクラス名
linkMatchLocationFullClass	現在表示しているページのURLとリンク先が“完全に”同じ場合に付与するクラス名
linkMatchLocationBlogClass	現在表示しているブログのURLが、アンカーリンクのリンク先URL中に含まれている場合に付与するクラス名
linkMatchLocationCategoryClass	現在表示しているカテゴリーのURLが、アンカーリンクのリンク先URL中に含まれている場合に付与するクラス名
linkMatchLocationEntryClass	現在表示しているエントリーのURLが、アンカーリンクのリンク先URL中に含まれている場合に付与するクラス名
linkMatchLocationArray	配列として複数の設定を記述できます。同じページ内で複数の設定を併用したい場合などに利用します。

設定のカスタマイズ

config.jsのデフォルトの設定からカスタマイズする場合、別途作成したJSファイルに下記のように記述します。

ACMS.Ready(function(){
  ACMS.Config.linkMatchLocationMark          = '.js-link_match_location';
  ACMS.Config.linkMatchLocationFullMark      = '.js-link_match_location-full';
  ACMS.Config.linkMatchLocationBlogMark      = '.js-link_match_location-blog';
  ACMS.Config.linkMatchLocationCategoryMark  = '.js-link_match_location-category';
  ACMS.Config.linkMatchLocationEntryMark     = '.js-link_match_location-entry';
  ACMS.Config.linkMatchLocationContainMark   = '.js-link_match_location-contain';
  ACMS.Config.linkMatchLocationClass         = 'stay';
  ACMS.Config.linkMatchLocationFullClass     = 'stay';
  ACMS.Config.linkMatchLocationBlogClass     = 'stay';
  ACMS.Config.linkMatchLocationCategoryClass = 'stay';
  ACMS.Config.linkMatchLocationEntryClass    = 'stay';
  ACMS.Config.linkMatchLocationContainClass  = 'stay';
  ACMS.Config.linkMatchLocationArray =  [{
  //        'mark'  : '.js-link_match_location-original',
  //        'type'  : 'part', //( 'part' | 'full' | 'blog' | 'category' | 'entry' )
  //        'class' : 'current'
  }],
});

使い方

HTML

指定したクラスをHTMLに記述します。
例）linkMatchLocationMarkで .js-link_match_location と指定した場合

<!-- BEGIN_MODULE Entry_List -->
<ul>
  <!-- BEGIN entry:loop -->
  <li class="js-link_match_location"><a href="{url}"><span class="date">{date#Y}年{date#m}月{date#d}日</span>{title}</a></li>
  <!-- END entry:loop -->
</u>
<!-- END_MODULE Entry_List -->

CSS

必要に応じてスタイルを指定します。

例）

ul li.stay a:link,
ul li.stay a:active,
ul li.stay a:visited {
  background:url("../images/icn_arrow01.png") no-repeat scroll 10px 12px #CCCCCC;
  color:#FFFFFF;
  display:block;
  padding:10px 10px 10px 33px;
  width:155px;
}

Ver. 2.11.74 をダウンロード

現在のURLと一致するa要素を表示する

Ver. 3.1.0 からこの機能はデフォルト無効になりました。

a-blog cmsは、現在表示しているページでそのページへのリンク（アンカー要素（<a>））が存在したら、そのリンクを外す仕様になっています。現在表示中のページから同じページへのリンクは基本的には必要ないという考え方です。

デフォルトの設定

  //---------
  // viewing
  viewingMark: 'a.js-viewing-receptor', // 1.3.0 未満のバージョンからアップデートする場合には 'a' と指定してください。
  viewingId: 'viewing',
  viewingClass: 'viewing',
  viewingEraseMark: 'a.js-viewing-erase', // 'a:not(.js-viewing-indelible)', v3.1: デフォルトでaタグを削除しないように修正
  viewingReplacement: '',
  viewingRemoveAttr: ['href', 'charset', 'type', 'hreflang', 'rel', 'rev', 'target'],
  viewingNonTarget: ['block', 'inline-block', 'flex', 'inline-flex', 'grid', 'inline-grid', 'table', 'table-row', 'list-item'],

機能紹介

現在表示中のページと同じリンクのアンカー要素が外れないようにする（Ver. 3.0以前）

現在表示しているページと同じリンクのアンカー要素（<a>）を消す機能を無効にするには、テンプレートファイルを編集します。リンクを表示したいアンカー要素（<a>）にjs-viewing-indelibleというclass名を記述します。サイトの管理上の支障などがなければ、このclass名はとくに変更する必要はありません。

// viewing
viewingEraseMark    : 'a:not(.js-viewing-indelible)',

現在表示中のページと同じリンクのアンカー要素（<a>）が外れても表示が崩れないようにする

またアンカー要素にスタイルが当たっていた場合、その要素が組み込みJSによって外されることによって表示が崩れることがあります。そういった表示崩れを防止するために.js-viewing-receptorというclassが用意されています。
このクラスをアンカー要素に設定することで、そのアンカーの親要素にデフォルトで.viewingというclassが付与されます。そのクラスに対して任意にCSSを記述して表示崩れを防止できます。

// viewing
viewingMark    : 'a.js-viewing-receptor',

Ver. 3.0.45 をダウンロード

View Transitions API を利用したテーマのカスタマイズ

この実装が可能な a-blog cms のバージョン

最終的な実装結果

一覧ページ例

詳細ページ例

具体的な実装方法

beginner/include/head/link.html

include/entry/summary-image.html

include/entry/body-no-date.html

SetRendered と GET_Rendered について

最後に

現在位置に装飾する

デモ

linkMatchLocationMark

linkMatchLocationCategoryMark

デフォルトの設定

設定のカスタマイズ

使い方

HTML

CSS

Ver. 2.11.74 をダウンロード

現在のURLと一致するa要素を表示する

デフォルトの設定

機能紹介

現在表示中のページと同じリンクのアンカー要素が外れないようにする（Ver. 3.0以前）

現在表示中のページと同じリンクのアンカー要素（<a>）が外れても表示が崩れないようにする