AW-INC. 研究開発室

think about

AW Carousel（WordPress プラグイン）

AW WP Plugin シリーズ

AW Carousel は、見本や作例を 1 枚ずつ切り替えて見せるための WordPress ブロックです。スライドにはどのブロックでも置けるので、AW Code や AW Term の表示をテーマごとに並べて比べる、画像と説明を交互に見せる、といった使い方ができます。

見本（リッチモード）

画像や動画のためのモードです。舞台の形（ここでは 16:9）に収め、スライドの上に名前とキャプションを重ね、下にサムネイルを並べます。画像の click か右下の釦で拡大表示（modal）が開き、拡大表示の中でも矢印で送れます。全画面の釦でブラウザの全画面になり、自動再生の進捗は上の細い線で分かります。動画のスライドは再生中に自動送りを止めます。

見本 1 舞台は 16:9。画像の click で拡大表示が開きます。
見本 2 サムネイルからも選べます。
見本 3 右下の釦で全画面になります。
見本 4 自動再生の進捗が上の細い線に出ます。
文章のスライド リッチモードでは文章も舞台の上に中央で表示されます。

画像や動画のほか、どのブロックでも置けます。

1 / 5

見本（シンプルモード）

内容をそのまま並べる形。スライド名の一覧で切り替え、AW Term、AW Code、文章のスライドを混ぜてあります。

test-node-01.example.com
$ uname -maarch64$ sudo systemctl is-active sshdactive$ ssh test-node-02.example.com uptime 12:34:56 up 3 days,  1 user,  load average: 0.10, 0.08, 0.05
first-alive.phpPHP
<?php/** * Return the first host that answers on port 22. */function first_alive( array $hosts, int $timeout = 2 ): ?string {    foreach ( $hosts as $host ) {        $fp = @fsockopen( $host, 22, $errno, $errstr, $timeout );        if ( $fp ) {            fclose( $fp );            return $host;        }    }    return null;} echo first_alive( [ 'test-node-01.example.com', 'test-node-02.example.com' ] ) ?? 'none', PHP_EOL;
probe.pyPython
import asyncio async def probe(host: str, port: int = 22) -> bool:    try:        _, w = await asyncio.wait_for(asyncio.open_connection(host, port), 2)    except (OSError, asyncio.TimeoutError):        return False    w.close()    return True print(asyncio.run(probe("test-node-01.example.com")))

スライドには画像、段落、引用、埋め込みなど、どのブロックでも置けます。右下の一覧から名前で選ぶか、矢印、キーボードの左右、スワイプで切り替えます。

1 / 4

矢印と点の形で、自動再生あり、切り替えはスライド。

矢印と点の操作部。点はタブとして読み上げられます。

自動再生を有効にすると、ポインターや焦点が乗っている間は止まり、手で動かすと自動再生は止まります。

動きを減らす設定の読者には、切り替えの動きも自動再生も使いません。

1 / 3

特長

  • 2 つのモード：シンプルは内容をそのまま、リッチは画像と動画のための舞台（16:9、4:3、1:1、3:2、21:9、内容に合わせる）と収め方、キャプション、サムネイル、拡大表示、全画面、自動再生の進捗を備えます。
  • どのブロックでも：画像、段落、引用、埋め込み、AW Code、AW Term をそのままスライドにできます。
  • 操作部を選べる：矢印と点、矢印とスライド名の一覧（名前の付いた見本が多いときに便利）、矢印だけ、なし。
  • キーボードとスワイプ：左右の矢印キー、Home と End、タッチ画面のスワイプ。「1 / N」の表示と、最後から最初へ戻る指定。
  • 自動再生：ポインターや焦点が乗っている間は止まり、読者が手で動かすと止まります。動きを減らす設定の読者には再生しません。
  • アクセシビリティ：名前付きの領域として読み上げられ、各スライドは「スライド 2 / 5: 名前」と告知され、見えていないスライドは操作の対象から外れます。
  • サーバー側で描画：JavaScript が無い環境ではスライドを順に並べて表示します。外部との通信はありません。

使い方

ブロックエディターで「AW Carousel」を追加すると、スライドが 2 枚入った状態で始まります。各スライドの中に好きなブロックを置き、右側の設定でスライドの名前を付けます。カルーセル側の設定は、操作部の種類、切り替えの動き（フェードかスライド）、「1 / N」の表示、ループ、自動再生とその間隔、読み上げ用の名前です。

動作環境

  • WordPress 6.5 以上（7.1 で検証）
  • PHP 7.4 以上（8.5 で検証）
  • ブロックテーマとクラシックテーマの両方。ビルド工程や外部ライブラリは不要です

ライセンスと購入

AW Carousel のコードは GPLv2 以降で提供します。ライセンスキーは、更新の配信とサポートを受けるためのものです。価格と購入方法は準備中で、AW Term、AW Code と組み合わせた技術記事向けの組み合わせも用意する予定です。

更新履歴

  • 1.1.0（2026-10-21）：リッチモード（舞台、キャプション、サムネイル、拡大表示、全画面、自動再生の進捗）。キー操作とスワイプを自身の操作部に限定。
  • 1.0.0（2026-10-21）：初版。

AW WP Plugin シリーズ

本製品は、WordPress の投稿画面で技術的な内容をきれいに見せるプラグイン群「AW WP Plugin シリーズ」の一つです。6 製品は同じ作り（同じ編集画面、同じ設定の形、同じ更新の仕組み）で、同時に有効化しても互いに干渉しません。シリーズの一覧もご覧ください。

  • AW Term — 端末のセッションを、打つ動きと出力の順で再生。10 種の端末の見た目、コピー、テーマ切り替え。
  • AW Code — 185 言語のシンタックスハイライト。行番号、行の強調、折り返し、90 種のテーマ。Crayon の記法もそのまま表示。
  • AW Carousel（このページ）— 見本や画面を切り替えて見せるカルーセル。写真と動画向けのリッチモードは拡大表示と全画面に対応。
  • AW Markdown — Markdown をそのまま書ける。Mermaid の図は読者の明暗に合わせて描画。コードは AW Code の表示に。
  • AW Formula — KaTeX の数式、mhchem の化学反応式、SMILES からの構造式。JavaScript が無くても元の記法が読める。
  • AW Contact — 問い合わせフォーム。迷惑投稿対策と受信の記録を備え、同じ部品を WordPress の無いサイトにも置ける。