20:33web時間経過で画像が切り替わっていくスライドショーや、画像をクリックしたときに、ページ遷移なしで拡大画像をポップアップで表示するなど、動きのあるホームページが当たり前になっています。これらはJavaScriptによって実装されているので、自分のホームページでも使いたいと思うと、専門の知識や技術が必要になります。JavaScriptを修めた人しか使えないのか、というと、そのようなことはありません。「ライブラリ」と呼ばれる、有志の人が公開してくれているJavaScriptのプログラムを活用することで、手軽に実装可能です。ここでは、スライドショーのためのライブラリ『Swiper』、画像ポップアップのためのライブラリ『Zooming』、二つを紹介いたします。人の書き方を見ることで学べることもたくさんあります!ライブラリを使いながら、JavaScriptの知識を深めていきましょう!スライドショーを実装するライブラリ『Swiper』ホームページにスライドショーを実装するなら『Swiper』がおすすめです!JavaScriptでスライドショーを実装しようとすると、後述の『jQuery』を併用するライブラリが多いのですが、Swiperは単体で動くため、無駄な読み込みがありません。レスポンシブに対応していて、動作感が軽量な点も特徴的です。スライドショーとは、表示する画像やテキストを切り替えながら順番に表示していくもので、横、もしくは縦にスライドさせたり、クロスフェードさせたりする表現です。同じような意味で「スライダー」、「カルーセル」という言葉も使われます。ホームページのトップで使用されることが多く、個人サイト、企業サイト問わず、幅広く使用されています。Slider...』というタイトルのページを開く。※3.4.2はバージョン番号なので、ダウンロードしたタイミングによっては数値が違っている可能性があります。※わかりやすさを優先して、htmlファイルと同じフォルダに置いていますが、読み込めれば、どこに置いていても問題ありません。Swiperを組み込みたいページにjs、cssを読み込む例:画像が並んだページにSwiperを読み込みます。ルールに基づいてclassを設定する例では以下のように設定しています。classを設定したことで、レイアウトが変わりました。6.HTMLにSwiperを起動させるスクリプトを追加する。Swiperを起動させるための次のようなスクリプトを追加してください。Swiperを適用したいブロックSwiperを適用したい範囲のブロックに設定したclass属性値を指定すれば動作します。上記例のとおりだと、.swiper-containerです。オプション(省略可)オプションを設定することで、動作の内容を変更できます。次のようなフォーマットに倣い、オプションを設定します。オプションを付けずにSwiperを実行した際の挙動例DEMOページ7.補足情報よく使うオプションの設定を一部抜粋してご紹介いたします。画像が切り替わる速度は2秒にしています。DEMOページ上記オプション(パラメーター)を簡単に説明すると以下の通りです。autoplay何秒ごとに画像を切り替えるか設定します。オプションにこのパラメーターが含まれていると、読み込まれたらスライドが始まるようになります。ms(ミリ秒)で設定します。例は2000なので、2000/1000で2秒ということになります。loopスライドを繰り返し再生するかどうかの設定です。trueなら繰り返すようになります。effect画像の切り替わり方を変更します。’fade’を指定すると画像が徐々に変わっていくようになります。Swiperにはオプションがいくつも用意されているので、すべてを覚えるのは簡単ではありません。詳細は公式のAPIをご確認ください。URL:http://idangero.us/swiper/api/別の記事でもSwiperの使い方について紹介しておりますので、よければそちらもご覧ください。スライダープラグイン「Swiper」で前後の画像を表示するjQueryなしで動作し、動作が軽量。膨大なオプションが用意されており、非常にカスタマイズ性に優れています。画像をクリックした際に、ページ移動などをせず、拡大版の表示をさせる表現です。通販サイトなどでよく使用されています。LightBox(ライトボックス)という名前のライブラリで一躍有名になり、派生版がいくつも出ています。この記事で紹介するZoomingも派生版ですが、手軽に使えるので本家ではなくこちらをご紹介いたします。Zoomingの実装・使い方1.公式からZoomingのファイルをダウンロードする。※現在、公式は非公開中になっております。類似のライブラリが多く、検索エンジンではなかなかヒットしないので次のリンクをご参照ください。JOURNYをクリックすると『github』という外部サイトに遷移しますので、そのまま次の順にクリックしてください。download』をクリック。フォルダの中に入っている、『zooming.js』もしくは『zooming.min.js』というファイルです。ルールに基づいてポップアップさせたいimg要素に属性を追加する。jsファイルを読み込み、img要素にdata-action=”zoom”を指定します。画像が並んだページに追加します。jsファイルを読み込み、data-action属性を追加しただけですが、動作するようになっています。DEMOページJavaScriptライブラリの定番!jQueryについてライブラリを調べていると、『jQuery』という単語がついたものがたくさん出てくると思います。jQueryとはJavaScriptのライブラリの一つで、冗長になる記述を簡潔に書けるようにしてくれるものです。ライブラリのなかにはjQueryと併用することでしか動かないものも多いのでご注意ください。jQueryとJavaScriptは違う?jQueryとは、JavaScript簡潔に書けるようにするための関数を定義し、独自の形で使えるようにしたもの。内容を見ると全てJavaScriptで書かれています。別物ではないのですが、100%同じではありません。そもそも、JavaScriptはプログラミング言語で、jQueryはそのライブラリという位置づけなので、比較できるものではないのです。上手く言えませんが、jQueryはJavaScriptだけど、JavaScriptはjQueryではない。そのようなイメージです。同じものと考えてしまうと、思い込みが理解の邪魔をしてしまうかもしれませんので、初めは別物と考えておいておいた方が学習しやすいと思います。理解を深めた後であれば正しく認識できるようになるはずです。jQueryは機能特化型のライブラリじゃないSwiperやZoomingもJavaScriptのライブラリですが、jQueryのように「JavaScriptとどう違う?」という疑問は浮かばないと思います。前述の二つのライブラリは、それぞれ、特化した機能があり使い方が明確なためでしょう。jQueryは特定の機能に秀でているわけではありません。ホームページに機能を持たせるためではなく、JavaScriptそのものを容易に扱えるようにするためのライブラリで、目指している方向が違うのです。他のライブラリと立ち位置が大きく違う点も、初学者を苦しめる原因になっているように思います。私も苦しめられました...。アニメーションに関する関数も用意されています。それを使うことで、ホームページに動きを実装可能です。詳細は割愛しますが、オリジナルの表現を実装したいと考えたときはJavaScriptをそのまま書くより、jQueryを使った方が楽に作成できるはずです。まとめ上記以外に、いくつもライブラリがありますので、実装したい要件で検索すると便利なライブラリが出てくるかもしれません。jQueryを併用しないと動かないライブラリもある点は注意が必要です。ホームページに動きをつけたいのであれば、基本的にはJavaScriptとCSSを組み合わせて実装します。クリックやスクロールなど、閲覧者の動作に応じて動きをつけたいと考えた場合はJavaScriptの利用は必須です。冒頭にも記載しましたが、他の人のスクリプトを見ることで勉強になることはたくさんあります。自分ルールになってしまうと、間違っていたり、もっと短く書けたりする部分にも気づけないままになる可能性があります。私は人が作ったものを使うことに対して、肯定的に考えられませんでしたが、時短や勉強のためと考えてからは抵抗感も薄れてきました。編集部SEO対策実績「20,000社」を超えるGMOソリューションパートナー株式会社がインハウスSEOに取り組む企業様・個人に向けSEO情報を発信。"Web初心者にもわかりやすく"をコンセプトにSEO対策情報をお届けします。11:00webIllustratorのパターンを知らない初心者でも最後まで読めば、簡単にパターンが作れるようになります。12:00web文章を書くことに慣れていないと、知らず知らずのうちに不自然な文章になってしまうことも多いはず。日本語は単語ひとつの情報量が多く、似た意味なのに違う言葉も多いので、無意識に「重ね言葉」を使っている場合があります。12:00SEOツールWeb担当者であれば、Googleアナリティクス4(GA4)のエンゲージメントについて知っておく必要があります。18:34web今回は、CSSで動きをつける際によく使われる「animation」と「@keyframes」の解説をしていきます。12:00webパワフルで拡張性のあるJavaScriptのスライダー『Swiper』。11:00webIllustratorのパターンを知らない初心者でも最後まで読めば、簡単にパターンが作れるようになります。12:00SEOツールWeb担当者であれば、Googleアナリティクス4(GA4)のエンゲージメントについて知っておく必要があります。18:34web今回は、CSSで動きをつける際によく使われる「animation」と「@keyframes」の解説をしていきます。12:00web文章を書くことに慣れていないと、知らず知らずのうちに不自然な文章になってしまうことも多いはず。日本語は単語ひとつの情報量が多く、似た意味なのに違う言葉も多いので、無意識に「重ね言葉」を使っている場合があります。「CSSの勉強を始めてみた...SEOお役立ち資料ダウンロードGMO順位チェッカーダウンロードはこちらSEOチェックリストダウンロードはこちらSEOタイムズとは?SEOタイムズは、Webマーケティングに取り組むWeb担当者向けのSEO対策特化型の情報メディアです。テーマは「SEO開拓者のバイブル」。"初心者にもわかりやすく"をコンセプトに、SEO対策に関する有益な情報を発信しています。20,000社以上の幅広い業種の集客支援実績から得られた経験とノウハウをベースに最新の情報をお届けします!今すぐ出来るSEO対策情報も満載。あなたのWebマーケティング戦略を成功に導きます。