◎ JavaScriptを学ぶ

コピペだけ!簡単すぎるCDNを使った「slick slider」

【フルーツをスライドさせてみよう!】


今回は、ダウンロードも不要、jsファイルも用意せずに、オールCDN(コンテンツデリバリーネットワーク)を用いて、素早くスライダーを制作する方法をご紹介します。近年は、様々なminファイルが、CDNで手軽に利用できるようになりました。

まずは、「slick slider」公式サイトをご紹介します。

githubから必要データをDLする方法もありますが、CDNを使ってみましょう。

CDNとは
CDNはContent Delivery Networkの略で、「コンテンツ配信ネットワーク」の意味。インターネット上にキャッシュサーバーを分散配置し、エンドユーザーに最も近い経路にあるキャッシュサーバーから画像や動画などのWebコンテンツを配信する仕組みのこと。CDNサービスは、CDNの仕組みを利用して、企業向けに画像や動画を多用するWebサイトの配信を代行するサービスを指す。

CDNサービスの事業者は、キャッシュサーバーをインターネットのIX(相互接続点)に近い位置や、大手プロバイダーのネットワーク内などに配置するので、企業のWebサーバーと自動的に同期できる。

DNS設定をすれば、オリジナルのWebサーバーへのアクセスがCDN事業者のキャッシュサーバーへ振り分けられるため、キャッシュサーバーがオリジナルのWebサーバーに代わってコンテンツを配信する。また、Webサーバーへのアクセスを代理するため、アクセスが集中する場合でもWebサイトの負荷を軽減できる。
(出典/IT用語辞典)

要は、すでにサーバー上に用意されているデータを、リンクすることで最適化を図る技術です。ローカルであっても、ネットが繋がっている環境であることが条件です。


  1. head内に、以下を記述する。→ slick.css、slick-theme.cssを、「CDN」からリンクする 

  2. body内に、以下を記述する。→ くだものの画像を、並べてみよう。autoplayの中のdivが、スライダーの対象だよ。
  3. body内に、以下を記述する。→ slick.min.jsを、「CDN」からリンクする

  4. くだものの画像が、くっついてしまう場合、CSSを追記してみてください。


以上で、設定は終わりです。どうかな?うまく動き出したかな。 
▶︎サンプルを見る


▶︎ くだものフリー素材


scriptの記述を変えるだけで、スライダーのデザインも変更できます。公式サイトで確認してみてください。