使い方ガイド

ANTI SWIPERは、素材（画像・動画）をご自身のサーバーにアップロードし、発行されたスクリプトタグをHTMLに貼り付けるだけで動作します。
このガイドでは素材の準備からサイトへの設置まで、順を追って解説します。

仕組みの概要

ANTI SWIPERはお客様のサーバーに置かれた素材ファイルをカルーセル表示するJavaScriptライブラリです。素材ファイルそのものはお客様のサーバーで管理します。

📁 素材はお客様のサーバーに置く

画像・動画ファイルはご自身のWebサーバーにアップロードします。ANTI SWIPERのサーバーには保存しません。

🔑 APIキーがCDNを認証する

購入時に発行されたAPIキーをスクリプトタグに記載することで、CDNからJavaScriptライブラリが配信されます。

📄 HTMLに2つ追加するだけ

①カルーセル用のdivタグ ②スクリプトタグ（初期設定込み）をHTMLに追加すれば完成です。

🌐 本番サーバー上でのみ動作

APIキーはご登録のドメインに紐づいています。ローカル環境（localhost）では動作しません。

1素材の準備・最適化

ファイルサイズが大きすぎると表示が遅くなります。アップロード前に以下の目安でファイルを最適化してください。

🖼️ 画像（JPG / PNG / WebP）

目安サイズ：500KB以下
最大解像度：1920×1080
推奨形式：JPG（MozJPEG）または WebP

最適化には Squoosh.app（無料・ブラウザ上で使用可）がおすすめです。

Squoosh.app で画像を開く
「Resize」で解像度を調整
「MozJPEG」を選択
500KB以下になるようQualityを調整して保存

🎬 動画（MP4）

目安サイズ：500KB以下
推奨尺：4秒（カルーセルの切替間隔と合わせるため）
推奨形式：MP4（H.264）
解像度：854×480 程度で十分（Webでは4K不要）

※ Web埋め込みでは動画をユーザーがダウンロードしながら再生します。ファイルが重いとページのUXが低下するため、適切な最適化が必要です。デジタルサイネージ（ローカル再生）の場合はこの制限はありません。

FFmpegを使った一括変換スクリプト（Windows用）：

FFmpeg をダウンロードし、ffmpeg.exe を作業フォルダに置く
同フォルダに下記内容で optimize.bat を作成
動画ファイルを optimize.bat にドラッグ＆ドロップ

optimize.bat

@echo off
chcp 65001 >nul
echo [ ANTI SWIPER: 動画最適化 ]

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

2サーバーへのアップロード

最適化した素材ファイルをご自身のWebサーバーにアップロードします。以下のいずれかの方法で行ってください。

方法A：ホスティングのファイルマネージャー（初心者向け）

レンタルサーバーの管理画面にログイン
「ファイルマネージャー」または「ファイル管理」を開く
公開フォルダ（通常 public_html）に移動
素材用フォルダ（例：images / videos）を作成してアップロード

方法B：FTPクライアントを使う

FTPクライアントをインストール（FileZilla（無料）など）
ホスティングの管理画面でFTP接続情報（ホスト・ユーザー名・パスワード）を確認
FTPクライアントで接続し、公開フォルダに素材をアップロード

推奨ディレクトリ構成

サーバー上のファイル構成例

/ （サイトのルートディレクトリ）
│
├── index.html          ← カルーセルを設置するページ
│
├── images/             ← 画像フォルダ
│   ├── photo01.jpg
│   ├── photo02.jpg
│   └── photo03.webp
│
└── videos/             ← 動画フォルダ（任意）
    ├── video01.mp4
    └── video02.mp4

ポイント： JavaScriptコード内で指定するパスは、HTMLファイルからの相対パスになります。上記の構成なら 'images/photo01.jpg' のように指定します。

3HTMLへの組み込み

購入完了メールに記載されているAPIキーを使って、以下のコードをHTMLに追加します。

完全なテンプレート（コピーして使用）

HTML

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>カルーセルサンプル</title>
  <style>
    .anti-swiper-container {
      width: 100%;
      max-width: 800px;
      height: 400px;
      margin: 0 auto;
      position: relative;
      overflow: hidden;
      border-radius: 10px;
    }
    @media (max-width: 768px) {
      .anti-swiper-container { height: 250px; }
    }
  </style>
</head>
<body>

  <div class="anti-swiper-container">
    <div class="anti-swiper-track"></div>
  </div>

  <!-- ↓ YOUR_API_KEY_HERE をご自身のAPIキーに置き換えてください -->
  <script src="https://anti-swiper.com/saas-backend/cdn-server.php?key=YOUR_API_KEY_HERE"></script>
  <script>
    window.addEventListener('load', function() {
      requestAnimationFrame(function() {
        const ProLib = window.AntiSwiperPro || window.AntiSwiperMedium;
        if (typeof ProLib !== 'undefined') {
          new ProLib('.anti-swiper-container', {
            displayCount: 10,   // 表示枚数（最大10）
            random: true,       // ランダム選択 true/false
            mediaItems: [
              { type: 'image', src: 'images/photo01.jpg' },
              { type: 'image', src: 'images/photo02.jpg' },
              { type: 'video', src: 'videos/video01.mp4' },
              // ここに素材を追加（最大20点）
            ]
          });
        } else {
          console.error('ANTI SWIPER: ライブラリの読み込みに失敗しました。APIキーを確認してください。');
        }
      });
    });
  </script>

</body>
</html>

既存ページに追加する場合

新規ページではなく既存のHTMLに追加する場合は、以下の3つをそれぞれ適切な場所に追加してください。

① CSSを <head> 内に追加：

<style>
  .anti-swiper-container {
    width: 100%;
    max-width: 800px;
    height: 400px;
    margin: 0 auto;
    position: relative;
    overflow: hidden;
    border-radius: 10px;
  }
</style>

② カルーセルを表示したい場所に div を追加：

<div class="anti-swiper-container">
  <div class="anti-swiper-track"></div>
</div>

③ スクリプトタグを </body> の直前に追加：

<script src="https://anti-swiper.com/saas-backend/cdn-server.php?key=YOUR_API_KEY_HERE"></script>
<script>
  window.addEventListener('load', function() {
    requestAnimationFrame(function() {
      const ProLib = window.AntiSwiperPro || window.AntiSwiperMedium;
      if (typeof ProLib !== 'undefined') {
        new ProLib('.anti-swiper-container', {
          displayCount: 10,
          random: true,
          mediaItems: [
            { type: 'image', src: 'images/photo01.jpg' },
            { type: 'image', src: 'images/photo02.jpg' },
            // 素材を追加
          ]
        });
      }
    });
  });
</script>

⚠️ 注意： YOUR_API_KEY_HERE の部分を必ずご自身のAPIキーに置き換えてください。APIキーは購入完了メールに記載されています。

4サイズ・CSSのカスタマイズ

カルーセルのサイズや見た目は .anti-swiper-container のCSSを変更することで調整できます。

サイズ変更

CSS

/* 幅と高さを変更 */
.anti-swiper-container {
  max-width: 1200px;  /* 幅の最大値 */
  height: 500px;      /* 高さ */
}

/* レスポンシブ対応 */
@media (max-width: 1024px) {
  .anti-swiper-container {
    max-width: 100%;
    height: 350px;
  }
}
@media (max-width: 768px) {
  .anti-swiper-container {
    height: 220px;
  }
}

枠線・影・角丸の追加

CSS

.anti-swiper-container {
  border-radius: 16px;                        /* 角丸 */
  box-shadow: 0 8px 32px rgba(0,0,0,0.12);   /* 影 */
  border: 2px solid #e5e7eb;                 /* 枠線 */
}

フルワイド（画面幅いっぱい）にする

CSS

.anti-swiper-container {
  width: 100%;
  max-width: 100%;
  height: 60vw;      /* 画面幅の60%の高さ（比率を維持） */
  max-height: 600px;
  border-radius: 0;
}

5テスト・公開

素材ファイルとHTMLをサーバーにアップロード
ブラウザから https://yoursite.com/carousel.html にアクセス
カルーセルが正常に表示されることを確認
スマートフォンでも表示を確認（レスポンシブ）

テスト用フォルダの活用： 本番ページに組み込む前に、/test/ などのフォルダを作って動作確認をするのがおすすめです。確認後に robots.txt で検索エンジンから除外することもできます。

⚠️ ローカル環境では動作しません： APIキーはご登録のドメインに紐づいています。localhost や file:// では表示されません。必ずサーバー上で確認してください。

トラブルシューティング

❌ カルーセルが表示されない

APIキーが正しくコピーされているか確認
サブスクリプションが有効か確認
ブラウザのコンソール（F12）でエラーを確認
登録ドメインと設置ドメインが一致しているか確認

🖼️ 画像が読み込まれない

ファイルパスが正しいか確認（HTMLからの相対パス）
ファイルが実際にサーバーにアップロードされているか確認
ファイル名のスペルミス・大文字小文字に注意

🎬 動画が再生されない

MP4（H.264）形式か確認
ファイルサイズが大きすぎないか確認（500KB以下推奨）
FilmoraやWondershare等の編集ソフトで書き出したファイルは独自コーデックが含まれる場合があり再生されないことがある
その場合は optimize.bat でFFmpeg再エンコードすると解消できる

📱 スマホで表示が崩れる

CSSにレスポンシブ対応の @media を追加する
max-width: 100% を設定する
高さを vw 単位で指定する

上記で解決しない場合はお問い合わせフォームまでご連絡ください。エラーID（コンソールに表示）があれば合わせてお知らせください。

まだご購入でない方へ

月額¥500から。APIキーは購入直後にメールでお届けします。

定番プランを始める