WORDPRESS.ORG REVIEW / FREE GUTENBERG BLOCK
複数の動画を、
1つのスライダーに。
KaruStoryは、複数の動画を矢印・スワイプ・自動切替で表示するGutenbergブロックです。動画ごとに再生範囲と順番を指定でき、画像も同じスライダーに入れられます。
無料・GPLv2 or later WordPress.org審査版 0.1.9 WordPress 6.4+ PHP 7.4+
Concretusでは0.2.1を検証中です。
LIVE DOGFOOD DEMO
実際の表示を試せます。
下はコンクレタスの実験・施工動画を使った実物のKaruStoryです。停止、矢印、ドット、スワイプ、キーボードで動画を切り替えられます。
最初の動画posterを表示し、次の動画要素は切替直前まで作りません。端末の「視差効果を減らす」設定では自動切替が止まる場合があります。
作り方は、3ステップ。
01
複数の動画を選ぶ
WordPressのメディアライブラリから、スライドさせたいMP4動画をまとめて追加します。
02
順番と再生範囲を設定
ストーリーボードで並べ替え、各動画の開始・終了位置を非破壊で設定します。
03
動画スライダーとして公開
自動切替、矢印、ドット、スワイプを備えた動画スライダーになります。元動画の一本化は不要です。
編集画面と公開画面
KaruStoryの主な機能
動画から動画へ切替
複数の短い動画を、自動・矢印・ドット・スワイプでスライドできます。
非破壊の再生範囲
動画の開始・終了位置は再生指示だけ。元動画は変更しません。
画像にも対応
説明用の静止画を動画の前後へ混ぜ、16:9、9:16、1:1で表示できます。
スライドごとのCTA
タイトル、説明、リンク先を素材ごとに設定できます。
訪問者が操作できる
停止・再生、矢印、ドット、スワイプ、キーボード操作に対応します。
外部送信なし
分析・AIサービスへ送信せず、独自DBテーブルも作りません。
最初の素材を初期HTMLへ
JavaScriptが遅れた場合も、最初のビジュアルを残します。
後続素材を必要時だけ準備
自動再生中も、次の一件を切替直前に準備します。
動きを減らす設定を尊重
端末設定を既定で尊重し、表示上の停止・再生操作も残します。
MEASURED ON CONCRETUS
読み込み方法と測定結果
最初の素材を優先し、後続動画を初期表示でまとめて読みません。使っていないページではKaruStoryの公開CSS・JavaScript・ストーリー素材を読み込まない設計です。
94
Performance中央値
0
CLS / TBT
23
Story要求数
申請版0.1.8、Lighthouse 13.4.1モバイル、5回中央値。LCPは3,017.774msで、事前予算3,000msを17.774ms超過しました。これを性能試験合格とは表現せず、改善対象として記録しています。
製品仕様
| 製品名 | KaruStory – Video & Image Story Slider |
|---|---|
| WordPress.org審査版 | 0.1.9 |
| Concretus検証版 | 0.2.1 |
| 提供形態 | 無料、GPLv2 or later |
| 対応 | WordPress 6.4以上、PHP 7.4以上 |
| 保存 | 通常のGutenbergブロック属性。独自DBテーブルなし |
| 通信 | プラグインから外部AI・分析サービスへの送信なし |
| 動画処理 | 再生範囲の指定。圧縮、変換、切り抜きは行わない |
| 公開状況 | WordPress.orgプラグイン審査中（assigned slug: karustory） |
よくある質問
元の動画は編集されますか？
編集されません。開始・終了位置は公開画面での再生指示です。
YouTube動画を並べられますか？
WordPress.org審査版はWordPressメディアライブラリの画像と動画を対象にしています。YouTube埋め込みは別の機能です。
ページを開いた時に全動画を読み込みますか？
いいえ。最初の素材を表示し、後続素材は自動切替の直前または訪問者の操作時に準備します。
WordPress.orgから入手できますか？
現在は審査中です。承認後、このページに公式ダウンロード先を掲載します。
KaruStoryは、WordPress.orgで審査中です。
審査指摘へ対応した0.1.9を提出済みです。Concretusでは、編集画面の改善を含む0.2.1を別の検証版として使っています。承認後、WordPress.orgの公式ページと無料ダウンロードボタンをここへ追加します。