素材の準備からサイトへの設置まで、手順を追って解説します。
JSON設定ファイルを使うシンプルな仕組みで、コーディング不要で導入できます。
ANTI SWIPER RUBIKは、JSONファイルで素材を管理し、CDNから配信されるスクリプトが多方向カルーセルを自動生成します。
画像・動画を自分のサーバーにFTPアップ
素材のパスや切替間隔をJSONファイルに記述
HTMLにscriptタグとdivタグを追加するだけ
上下左右ランダムにスライドが動き始める
※ 素材ファイル（画像・動画）はお客様のサーバーに保存します。ANTI SWIPER RUBIKのサーバーには素材は保存されません。CDNからスクリプトを配信し、JSONを読み込んでカルーセルを表示する仕組みです。
ファイルサイズが大きすぎると読み込みが遅くなりUXが低下します。アップロード前に最適化してください。
Squoosh.app で圧縮するのが最も手軽です。
※ Web埋め込みでは動画をユーザーがダウンロードしながら再生します。重すぎるとUXが低下します。FFmpegを使った一括変換スクリプト（Windows用）：
ffmpeg.exe を作業フォルダに置くoptimize.bat を作成optimize.bat にドラッグ＆ドロップ@echo off chcp 65001 >nul echo [ ANTI SWIPER RUBIK: 動画最適化 ] for %%F in (%*) do ( echo 処理中: %%~nxF ffmpeg.exe -i "%%~fF" -ss 0 -t 4 -vf "scale=854:480" -c:v libx264 -b:v 1000k -preset fast -an -movflags +faststart "%%~dpnF_optimized.mp4" echo 完了: %%~dpnF_optimized.mp4 ) echo --- すべての変換が完了しました --- pause
FileZilla などのFTPクライアント、またはサーバーのファイルマネージャーを使って素材をアップロードします。
/（Webサイトのルート）
│
├── index.html ← カルーセルを設置するページ
├── standard-grid-config.json ← JSON設定ファイル（定番プラン）
│
├── images/
│ ├── photo01.jpg
│ ├── photo02.webp
│ └── photo03.jpg
│
└── videos/
├── video01.mp4
└── video02.mp4
※ JSONファイルはHTMLファイルと同じディレクトリに置いてください。素材のパスはHTMLファイルからの相対パスで記述します。
カルーセルの動作はJSONファイルで設定します。定番プランのファイル名は standard-grid-config.json です。
{
"move_interval": 3000,
"media_pool": [
{ "type": "image", "src": "images/photo01.jpg" },
{ "type": "image", "src": "images/photo02.webp" },
{ "type": "image", "src": "images/photo03.jpg" },
{ "type": "image", "src": "images/photo04.jpg" },
{ "type": "image", "src": "images/photo05.jpg" }
]
}
move_intervalスライドの切替間隔（ミリ秒）。3000 = 3秒。個別に duration を指定した素材はその値が優先されます。
media_pool表示する素材の配列。type に "image" または "video"、src に素材のパスを指定します。最大20点まで登録可能。
{
"move_interval": 4000,
"media_pool": [
{ "type": "image", "src": "images/photo01.jpg" },
{ "type": "video", "src": "videos/video01.mp4" },
{ "type": "image", "src": "images/photo02.webp" },
{ "type": "video", "src": "videos/video02.mp4" },
{ "type": "image", "src": "images/photo03.jpg" }
]
}
HTMLに2つの要素を追加するだけです。YOUR_API_KEY をご購入後に受け取ったAPIキーに置き換えてください。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>マイカルーセル</title>
<style>
/* カルーセルの表示サイズを指定 */
.grid-carousel-viewport {
width: 100%;
max-width: 800px;
height: 450px;
margin: 0 auto;
overflow: hidden;
}
</style>
</head>
<body>
<!-- カルーセルのコンテナ -->
<div class="grid-carousel-viewport">
<div class="grid-carousel-sheet"></div>
</div>
<!-- ANTI SWIPER RUBIK スクリプト -->
<script src="https://as-rubik.com/saas-backend/cdn-server.php?key=YOUR_API_KEY"></script>
</body>
</html>
既存のHTMLに以下の2箇所を追加するだけです。
.grid-carousel-viewport {
width: 100%;
max-width: 800px;
height: 450px;
margin: 0 auto;
overflow: hidden;
}
<div class="grid-carousel-viewport">
<div class="grid-carousel-sheet"></div>
</div>
<script src="https://as-rubik.com/saas-backend/cdn-server.php?key=YOUR_API_KEY"></script>
.grid-carousel-viewport {
width: 100%;
height: 600px; /* 高さを変更 */
max-width: 1200px; /* 最大幅を変更 */
}
.grid-carousel-viewport {
width: 100vw;
height: 100vh; /* 画面全体 */
max-width: none;
}
アップロード後、ブラウザで実際のURL（https://）にアクセスして確認します。
※ localhost や file:// で開いたHTMLではAPIキーの認証が正常に動作しない場合があります。必ずサーバー上の https:// URLでテストしてください。
src パスが正しいか確認optimize.bat でFFmpeg再エンコードすると解消できるstandard-grid-config.json か確認