この記事では、「Swiperの使い方とオプション」について詳しく解説します。記事の後半ではWeb制作でよく使われるSwiperの「スライドショー」「カルーセルスライダー」「レスポンシブ」の3つのカスタマイズ事例も紹介していきます！
- Swiperの使い方
- Swiperのオプションの使い方
プログラミング学習でこのような経験はありませんか？ これらの悩みは、学習環境を整えることで全て解決することができます。 ZeroPlus Gateでは、30日間無料で最適な学習環境を提供しています。 条件なしでこのレベルの環境を無料で提供しているのはZeroPlus Gateだけです。 少しでも興味がある方は、以下のリンクからサービスの詳細をご覧ください。
ただし、無料サービスの提供には参加者の数に制限があります。
目次
Swiperとは
Swiperとはスライドショーが作れるJavaScriptのプラグインです。
他にスライドショーが作れるプラグインには「slick」があります。slickはjQueryに依存するプラグインですが、SwiperはjQueryに依存しないプラグインです。そのためSwiperは、jQueryを読み込まない分動作が軽くなっています。
Swiperの使い方
ここからはSwiperを使うための準備と、基本的な使い方について解説します。
Swiperの導入方法
導入方法としては下記2つの方法があります。
- ローカルファイルとしてダウンロード
- CDNを利用する
Swiperを導入する場合はCDNを利用するのが簡単です。ローカルにファイルをダウンロードしなくても、公式サイトの記述をheadタグやbodyタグにコピー&ペーストするだけで使えるからです。
ただし、自社のサーバーにSwiperファイルを保存して利用する場合は、ローカルファイルにダウンロードしましょう。
CDNを使う場合
CDNとは「Content Delivery Network（コンテンツデリバリーネットワーク）」の略称で、外部ファイルをリンク1つで使用することができる仕組みのことです。
1. SwiperのCDNを準備する
CDNを利用する場合は、まずSwiperの公式サイトの「Get Started」をクリック。
「Use Swiper from CDN」の部分にリンクが載っているので、こちらのコードをheadタグに貼り付けます。
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/swiper@8/swiper-bundle.min.css"/>
<script src="https://cdn.jsdelivr.net/npm/swiper@8/swiper-bundle.min.js"></script>2. SwiperのHTMLテンプレートをHTMLファイルに貼り付ける
「Use Swiper from CDN」の少し下のあたりに「Add Swiper HTML Layout」があります。
そこにSwiperのHTMLテンプレートが載っています。そのコードをコピーして、HTMLファイルに貼り付けてください。
<!-- スライダーのメインコンテナ要素（必須） -->
<div class="swiper">
<!-- スライドを囲む要素（必須） -->
<div class="swiper-wrapper">
<!-- スライド要素（必須） -->
<div class="swiper-slide"><img src="スライド画像1のパス" alt=""></div>
<div class="swiper-slide"><img src="スライド画像2のパス" alt=""></div>
<div class="swiper-slide"><img src="スライド画像3のパス" alt=""></div>
</div>
<!-- ページネーション要素（省略可能） -->
<div class="swiper-pagination"></div>
<!-- ナビゲーションボタン要素（省略可能） -->
<div class="swiper-button-prev"></div>
<div class="swiper-button-next"></div>
<!-- スクロールバー要素（省略可能） -->
<div class="swiper-scrollbar"></div>
</div> SwiperのHTMLの基本構成は下記のとおりです。下記の3つは必須要素となります。
- スライダーのメインコンテナ要素
- スライドを囲む要素
- スライド要素
下記HTMLの3つの記述は省略可能な要素となります。
- ページネーション要素
- ナビゲーションボタン要素
- スクロールバー要素
3. Swiperを初期化
Swiperの初期化をするため、下記のコードをJavaScriptファイルに記述します。なお、ページネーション・ナビゲーションボタン・スクロールバーの部分は省略可能です。
let mySwiper = new Swiper ('.swiper', {
// オプション設定
loop: true,
// 以下のコードは省略可能
//ページネーション表示設定
pagination: {
el: '.swiper-pagination', //ページネーション要素
type: 'bullets', //ページネーションの種類
clickable: true, //クリックに反応させる
},
//ナビゲーションボタン（矢印）表示の設定
navigation: {
nextEl: '.swiper-button-next', //「次へボタン」要素の指定
prevEl: '.swiper-button-prev', //「前へボタン」要素の指定
},
//スクロールバー表示の設定
scrollbar: {
el: '.swiper-scrollbar', //要素の指定
},
//ここまで省略可能
});
ローカルファイルとしてダウンロードする場合
1. ローカルファイルの準備
まず、Swiperを動かすために必要なCSSファイル、JavaScriptファイルを以下のページからダウンロードします。
「swiper-bundle.min.css」「swiper-bundle.min.js」をそれぞれクリックして開きます。
ファイルをクリックすると下記画像のような画面になります。画面右上の「View Raw」をクリックするとそのファイルが開くので、コピーするか保存します。
上記でローカルに作成したswiper-bundle.min.css、swiper-bundle.min.jsを、下記のようにheadタグに記述します。
<!-- swiperのCSSファイル -->
<link rel="stylesheet" href="css/swiper-bundle.min.css">
<!-- swiperのJavaScriptファイル -->
<script src="js/swiper-bundle.min.js"></script>２. SwiperのHTMLテンプレートをHTMLファイルに貼り付ける
「Use Swiper from CDN」の少し下あたりに「Add Swiper HTML Layout」があります。（ここからはCDNを使う場合と同様です）
そこにSwiperのHTMLテンプレートが載っています。そのコードをコピーして、HTMLファイルに貼り付けてください。
<!-- スライダーのメインコンテナ要素（必須） -->
<div class="swiper">
<!-- スライドを囲む要素（必須） -->
<div class="swiper-wrapper">
<!-- スライド要素（必須） -->
<div class="swiper-slide"><img src="スライド画像1のパス" alt=""></div>
<div class="swiper-slide"><img src="スライド画像2のパス" alt=""></div>
<div class="swiper-slide"><img src="スライド画像3のパス" alt=""></div>
</div>
<!-- ページネーション要素（省略可能） -->
<div class="swiper-pagination"></div>
<!-- ナビゲーションボタン要素（省略可能） -->
<div class="swiper-button-prev"></div>
<div class="swiper-button-next"></div>
<!-- スクロールバー要素（省略可能） -->
<div class="swiper-scrollbar"></div>
</div>4. Swiperを初期化
Swiperの初期化をするため、下記をJavaScriptファイルに記述します。
let mySwiper = new Swiper ('.swiper', {
// オプション設定
loop: true,
// 以下のコードは省略可能
//ページネーション表示設定
pagination: {
el: '.swiper-pagination', //ページネーション要素
type: 'bullets', //ページネーションの種類
clickable: true, //クリックに反応させる
},
//ナビゲーションボタン（矢印）表示の設定
navigation: {
nextEl: '.swiper-button-next', //「次へボタン」要素の指定
prevEl: '.swiper-button-prev', //「前へボタン」要素の指定
},
//スクロールバー表示の設定
scrollbar: {
el: '.swiper-scrollbar', //要素の指定
},
//ここまで省略可能
});
Swiperの基本サンプル
以下がSwiperの使用サンプルです。
必須要素である下記3つをHTMLファイルに記述しています。
- swiper要素（スライダーのメインコンテナ要素）
- swiper-wrapper要素（スライドを囲む要素）
- swiper-slide要素（スライド要素）
省略可能な要素であるページネーション、スクロールバー、ナビゲーションボタンはこのサンプルでは記述しません。
JavaScriptファイルにSwiperの記述をして、オプションではloop（スライドの無限再生）を設定しています。
<!-- スライダーのメインコンテナ要素（必須） -->
<div class="swiper">
<!-- スライドを囲む要素（必須） -->
<div class="swiper-wrapper">
<!-- スライド要素（必須） -->
<div class="swiper-slide"><img src="images/sample.png" alt=""></div>
<div class="swiper-slide"><img src="images/sample2.png" alt=""></div>
<div class="swiper-slide"><img src="images/sample3.png" alt=""></div>
</div>
</div>.swiper {
max-width: 400px;
}
.swiper-wrapper {
height: auto;
}
.swiper-slide {
height: auto;
}
.swiper-slide img {
width: 100%;
height: 100%;
}let mySwiper = new Swiper ('.swiper', {
// オプション設定
loop: true,
});出力結果
Swiperのオプション
Swiperには多数のオプションが用意されています。
オプションでは以下の設定をすることができます。
- スライドの無限ループ、自動再生
- ナビゲーションやページネーション、スクロールバーの設定
- 垂直スライド
- グリッドスライド
- エフェクトキューブ...etc
オプションの使い方
Swiperのオプションは「オプション名：値」のように記述し、オプションを追記する場合は「,（カンマ）」区切りで追記します。
オプションは値を「ture / false」のどちらかを設定するものもあれば、数字を設定したり、「’値’」のように記述したりするものもあります。
オプションによって設定する方法が違うので注意しましょう。
オプションの記述方法
let mySwiper = new Swiper ('.swiper', {
// オプション設定
// ここにオプションを記述する
// オプションを追記する場合、「,（カンマ）」で区切る
オプション名: 値,
オプション名: 値
});制作で使われるオプションを2,3個ずつまとめて紹介します。
なお、設定できるオプションやそのパラメータは数が多いので、ここではすべて紹介しませんが、一部を紹介していきます。
オプション：loop, autoplay
loop, autoplayオプションについて解説します。
| オプション名 | 値（赤字は初期値） | 概要 |
| autoplay | true/false | 自動再生 |
| loop | true/false | 無限再生 |
2つのオプションを使用した、写真が自動で切り替わっていく動きの例を紹介します。
let mySwiper = new Swiper ('.swiper', {
// オプション設定
loop: true, // スライドの無限ループ
autoplay: { // スライドの自動再生
delay: 3000, // スライド間の遷移の遅延を設定 (ミリ秒設定） 1000ミリ秒=1秒
},
});出力結果
今回のサンプルではオプションにより以下3つの設定を行いました。
- autoplay: true で自動再生
- delay: 3000 で3秒ごとにスライド
- loop: true で無限に再生
pagenation, navigation, scrollbar について解説します。
それぞれ、JavaScriptファイルに記述するだけではなく、HTMLファイルにもオプションを表示させる要素を記述します。
pagenation：ページネーション表示
下記はpagenationのパラメータです。
| パラメータ名 | 値（赤字は初期値） | 概要 |
| el | null | ページネーション要素のCSSセレクタまたはHTML要素を指定 |
| type | bullets / fraction / progressbar / custom | 表示形態を指定 |
| clickable | true/false | ページネーションのアイコンクリックで対応スライド表示 |
navigation：ナビゲーション（前後スライドボタン）表示
下記はnavigationのパラメータです。
| パラメータ名 | 値（赤字は初期値） | 概要 |
| nextEl | null | 「次へ」ボタン要素のCSSセレクタまたはHTML要素を指定 |
| prevEl | null | 「前へ」ボタン要素のCSSセレクタまたはHTML要素を指定 |
| hideOnClick | true/false | スライダーのコンテナをクリックしたらナビゲーションボタンの表示・非表示切り替え |
| disabledClass | 'swiper-button-disabled' | 前後のスライドがないときに、指定のクラス付与 |
| hiddenClass | 'swiper-button-hidden' | ナビゲーションボタン非表示の場合に付与されるクラス名 |
scrollbar：スクロールバーの表示
下記はscrollbarのパラメータです。
| パラメータ名 | 値（赤字は初期値） | 概要 |
| el | null | スクロールバー要素のCSSセレクタ、またはHTML要素を指定 |
| hide | true/false | 操作終了時に自動的に非表示 |
| draggable | true/false | クロールバーをドラッグしてスライド操作 |
3つのオプションを使用した、ボタンを押すことで画像を切り替えられる動きの例を紹介します。
<!-- スライダーのメインコンテナ要素（必須） -->
<div class="swiper">
<!-- スライドを囲む要素（必須） -->
<div class="swiper-wrapper">
<!-- スライド要素（必須） -->
<div class="swiper-slide"><img src="images/sample.png" alt=""></div>
<div class="swiper-slide"><img src="images/sample2.jpg" alt=""></div>
<div class="swiper-slide"><img src="images/sample3.png" alt=""></div>
</div>
<!-- ページネーション要素（省略可能） -->
<div class="swiper-pagination"></div>
<!-- ナビゲーションボタン要素（省略可能） -->
<div class="swiper-button-prev"></div>
<div class="swiper-button-next"></div>
<!-- スクロールバー要素（省略可能） -->
<div class="swiper-scrollbar"></div>
</div>let mySwiper = new Swiper ('.swiper', {
// オプション設定
loop: true,
autoplay: {
delay: 3000,
},
pagination: {
el: '.swiper-pagination', //ページネーション要素
type: 'bullets', //ページネーション種類
clickable: true, //クリックに反応させる
},
//ナビゲーションボタン（矢印）表示設定
navigation: {
nextEl: '.swiper-button-next', //「次へボタン」要素指定
prevEl: '.swiper-button-prev', //「前へボタン」要素指定
},
//スクロールバー表示設定
scrollbar: {
el: '.swiper-scrollbar', //要素指定
},
});出力結果
今回のサンプルではオプションにより以下3つの設定を行いました。
- paginationでページネーション表示。typeにfractionを適用。
- navigationでナビゲーションボタン表示。
- scrollbarでスクロールバー表示。
pagenation, navigation, scrollbar を使う場合は、HTMLにページネーション要素、ナビゲーションボタン要素、スクロールバー要素の記述を忘れないようにしましょう。
オプション：initialSlide, speed, effect
initialSlide, speed, effectについて解説します。
| オプション名 | 値（赤字は初期値） | 概要 |
| initialSlide | 0 | 最初に表示させるスライド番号 |
| speed | 300 | ライドが切り替わるアニメーション速度（ミリ秒） |
| effect | ’slide’ /’ fade’ / ‘cube’ / ‘coverflow’ / 'flip' | スライドの動きエフェクト指定 |
3つのオプションを使用した、フェードイン・アウトしながら画像を自動的に切り替える動きの例を紹介します。
let mySwiper = new Swiper ('.swiper', {
// オプション設定
loop: true,
autoplay: {
delay: 3000,
},
pagination: {
el: '.swiper-pagination',
type: 'fraction',
},
navigation: {
nextEl: '.swiper-button-next',
prevEl: '.swiper-button-prev',
},
scrollbar: {
el: '.swiper-scrollbar',
},
// 以下、追記
initialSlide: 1, // 1枚目スライドを「0」、2枚目スライドを「1」として指定
speed: 1000, // スライドアニメーション速度（ミリ秒） 1000 = 1秒
effect: 'fade', // スライドの動きエフェクト指定
});出力結果
今回のサンプルではオプションにより以下3つの設定を行いました。
- initialSlideで「1」を適用し、2枚目のスライドを初期表示（1枚目のスライドが「0」、2枚目のスライドが「1」、3枚目のスライドが「2」と数える）
- speedで1000ミリ秒（1秒）ごとにスライドが切り替わるアニメーション設定
- effectでスライドの動きをフェードイン
swiperでカルーセルスライダーのカスタマイズ
カルーセルスライダーとは、横にスクロールするスライドギャラリーのことです。
カルーセルスライダーで、3つの画像をスライド表示させてみましょう。
<!-- スライダーのメインコンテナ要素（必須） -->
<div class="swiper">
<!-- スライドを囲む要素（必須） -->
<div class="swiper-wrapper">
<!-- スライド要素（必須） -->
<div class="swiper-slide"><img src="images/dummy.png" alt=""></div>
<div class="swiper-slide"><img src="images/dummy2.jpg" alt=""></div>
<div class="swiper-slide"><img src="images/dummy3.jpg" alt=""></div>
</div>
<!-- ページネーション要素（省略可能） -->
<div class="swiper-pagination"></div>
<!-- ナビゲーションボタン要素（省略可能） -->
<div class="swiper-button-prev"></div>
<div class="swiper-button-next"></div>
<!-- スクロールバー要素（省略可能） -->
<div class="swiper-scrollbar"></div>
</div>.swiper{
max-width: 100%;
}
.swiper-wrappar {
height: auto;
}
.swiper-slide {
height: auto;
}
.swiper-slide img{
width: 100%;
height: 100%;
}let mySwiper = new Swiper('.swiper', {
// オプション設定
loop: true,
autoplay: {
delay: 3000,
},
pagination: {
el: '.swiper-pagination',
type: 'bullets',
clickable: true,
},
navigation: {
nextEl: '.swiper-button-next',
prevEl: '.swiper-button-prev',
},
scrollbar: {
el: '.swiper-scrollbar',
},
speed: 1000,
effect: 'slide',
slidesPerView: 3, // 画像の表示枚数
spaceBetween: 20, // 画像間の余白（px）
});出力結果
表示するスライドの枚数は、オプションのslidesPerViewで指定できます。スライド画像間の余白は、spaceBetween: 20 （20px）を適用しています。
Swiperのスライドショー
Swiperを使ってスライドショーを実装してみましょう。
let mySwiper = new Swiper('.swiper', {
// オプション設定
loop: true,
autoplay: {
delay: 3000,
},
pagination: {
el: '.swiper-pagination',
type: 'bullets',
clickable: true,
},
navigation: {
nextEl: '.swiper-button-next',
prevEl: '.swiper-button-prev',
},
scrollbar: {
el: '.swiper-scrollbar',
},
speed: 1000,
effect: 'slide',
});出力結果
Swiperのレスポンシブ
Swiperではオプションでレスポンシブの設定をすることができます。
例えば、モバイル表示ではスライドショー、PC表示では縦にスライドさせる動きは、以下のコードで実装できます。
let mySwiper = new Swiper('.swiper', {
// オプション設定
loop: true,
autoplay: {
delay: 3000,
},
pagination: {
el: '.swiper-pagination',
type: 'bullets',
clickable: true,
},
navigation: {
nextEl: '.swiper-button-next',
prevEl: '.swiper-button-prev',
},
scrollbar: {
el: '.swiper-scrollbar',
},
speed: 1000,
effect: "slide",
slidesPerView: 1,
breakpoints: { // ブレイクポイント
992: { // 画面幅992px以上で適用
slidesPerView: 3,
spaceBetween: 20
}
},
});出力結果
breakpointsオプションでブレイクポイントを設定できます。上記ではブラウザ幅が992px以上になったとき、下記になるように設定しました。
- slidePerViewでスライド枚数が3枚表示
- スライド間余白が20px
Swiperが動かないときの対処法
Swiperが動かない場合は以下の理由が考えられます。
- SwiperのCSS・JavaScriptファイルを読み込んでいない
- ファイルの読み込みの記述順が間違っている
- SwiperのCDNファイル、もしくはダウンロードしたファイルが正しく読み込まれていない
- HTMLにSwiperの必須要素を記述していない
- JavaScriptファイルでの記述ミス
SwiperのCSS・JavaScriptファイルを読み込んでいない
SwiperはローカルファイルとCDN、どちらの場合でも共通でSwiperのCSS・JavaScriptファイルが両方必要です。
ローカルファイルの場合
<!-- swiperのCSSファイル -->
<link rel="stylesheet" href="css/swiper-bundle.min.css">
<!-- swiperのJavaScriptファイル -->
<script src="js/swiper-bundle.min.js"></script>CDNの場合
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/swiper@8/swiper-bundle.min.css"/>
<script src="https://cdn.jsdelivr.net/npm/swiper@8/swiper-bundle.min.js"></script>どちらかが記述されていないとSwiperは動かないので、確認しましょう。
SwiperのローカルファイルまたはCDNが正しく読み込まれていない
CDNのファイルやダウンロードしたファイルのパスが、headタグ内もしくは閉じbodyタグの直前に正しく記述されているか確認しましょう。
パスの記述が間違っていたり、CDNの場合はURLが間違っていると正しく読み込むことができません。
ファイルの読み込みの記述順が間違っている
URLやパスが正しく記述されていても、記述の順番が間違っていると動きません。コードは上から順に読み込まれるため、Swiperのファイルが先に読み込まれるようにしましょう。
例えば、以下のような場合ではSwiperは動作しません。（閉じbodyタグの直前に記述する場合）
<!-- Swiperの設定が記述されているスクリプトファイル -->
<script src="main.js"></script>
<!-- SwiperのCDNファイル -->
<script src="https://unpkg.com/swiper@8/swiper-bundle.min.js"></script>
</body>main.jsにはSwiperの設定が記述されていますが、SwiperのCDNファイルが後から読み込まれているため、Swiperが動作しません。
この場合、CDNファイル（もしくはローカルファイル）を先に記述し、後からmain.jsを読み込むように記述します。下記のように修正してみてください。
<script src="https://unpkg.com/swiper@8/swiper-bundle.min.js"></script>
<script src="main.js"></script>
</body>headタグに記述する場合、Swiperの設定が記述されているファイルには「defer属性」を付与した状態で記述しましょう。
<!-- SwiperのCDNファイル -->
<script src="https://unpkg.com/swiper@8/swiper-bundle.min.js"></script>
<!-- Swiperの設定が記述されているスクリプトファイル -->
<script src="main.js" defer></script>
</head>defer属性
defer属性を付与されたJavaScriptファイルは、JavaScriptファイルの読み込みが、HTMLファイルの解析と並行で行れます。HTMLファイルの読み込み完了後にJavaScriptファイルの実行が開始されます。
HTMLにSwiperの必須要素を記述していない
HTMLファイルに、Swiperを構成する必須要素が記述されていない場合、Swiperはうまく動作しません。
HTMLファイルのSwiper必須要素とは下記の記述です。
<!-- スライダーのメインコンテナ要素（必須） -->
<div class="swiper">
<!-- スライドを囲む要素（必須） -->
<div class="swiper-wrapper">
<!-- スライド要素（必須） -->
<div class="swiper-slide"><img src="スライド画像1のパス" alt=""></div>
<div class="swiper-slide"><img src="スライド画像2のパス" alt=""></div>
<div class="swiper-slide"><img src="スライド画像3のパス" alt=""></div>
</div>
</div>上記の必須要素がファイルに記述してあるか確認しましょう。
JavaScriptファイルでの記述ミス
HTMLファイルにSwiperの必須要素を記述していても、JavaScriptファイルでの記述にミスがあると動きません。
例えば、下記のような理由が考えられます。
- new Swiperのクラス名の記述間違い
- オプション名の記述間違い
- オプションを追記した場合ので、「,（カンマ）」区切り忘れ
- オプションの値の記述ミス
new Swiperのクラス名の記述間違い
new Swiperの後に記述するクラス名の記述が違うと動作しません。
let mySwiper = new Swiper ('.swiper', { // クラス名間違い
// オプション設定
loop: true,
});オプション名の記述間違い
Swiperのオプションは数が多いので、オプション名は公式サイトで確認しましょう。
オプションを追記した場合で、「,（カンマ）」区切り忘れ
オプションを追記した場合は、「,（カンマ）」で区切ることを忘れないようにしましょう。
let mySwiper = new Swiper ('.swiper', {
// オプション設定
loop: true // オプション追記する場合は「,」で区切る
direction: "vertical",
});オプションの値の記述ミス
Swiperのオプションの値は、オプションによって「’’（シングルクォーテーション、もしくはダブルクォーテーション）」で記述する値もあれば、true/false、数値で記述する値もあります。
こちらも公式サイトで確認しましょう。
まとめ
Swiperについて解説しました。SwiperはさまざまなオプションとCSSを組み合わせてカスタマイズすることができます。slickと違ってjQueryを読み込まない分、動作が軽いので、活用していきましょう！
今回紹介しきれなかったオプションはまだまだありますので、さらにオプションを追加してオリジナルのスライドショーを制作してみてください。
このようにWeb制作では覚えることがたくさんあります。少しずつ学習を進めていきましょう。
Web制作は、その他にも学ぶべき知識が数多くあります。
Web制作初学者がWeb制作を学習するにあたって、押さえておくべき知識・技術は「Web制作学習ロードマップ」の記事にまとめています。どこまで勉強すればいいか分からない、次はどんなスキルを勉強すればいいか分からない、という方はぜひ参考にしてみてください！
Swiperまとめ
- Swiperはオプション設定が豊富
- jQuery非依存で使えて、動作が軽い
- オプションでレスポンシブ設定できる
プログラミング学習でこのような経験はありませんか？
- 目標に向けて何を学べば良いかわからない
- 調べても解決策が見つからない
- 現場レベルのスキルが身につくのか不安
これらの悩みは、学習環境を整えることで全て解決することができます。
ZeroPlus Gateでは、30日間無料で最適な学習環境を提供しています。
- なんでも相談できる専属メンター
- いつでも技術相談ができるプロ講師
- 元IT企業CTO監修のカリキュラム
条件なしでこのレベルの環境を無料で提供しているのはZeroPlus Gateだけです。
ただし、無料サービスの提供には参加者の数に制限があります。
少しでも興味がある方は、以下のリンクからサービスの詳細をご覧ください。
