記事の詳細

世間ではスプラトゥーン2が流行っているようですね。
私も流行りに遅れないように、スプラトゥーン2を……することはできないので。(本体を持っていません…)
スプラトゥーン2っぽいことをしようと思います!

ということで、今回はスプラトゥーン2の公式サイトのグローバルメニューのふよふよ動いている部分の作り方をご紹介します!
01_huyohuyomenu
参考サイト様:https://www.nintendo.co.jp/switch/aab6a/coop/index.html

今回の記事を読むことで、下記のようなふよふよした領域を作ることができます。

ふよふよ動かすにはどうしたらよいのか?

パッと見どうやっているのか全くわからないので調べてみると、下記の参考サイト様を発見しました!
水っぽい動きのjQueryプラグイン3選

上記のサンプルページを見ると、スプラトゥーン2の公式サイトのふよふよ動く部分に非常に似た動きをしていますね!
ということで、こちらの技術を参考にして作ってみようと思います!

WordPressで設置する事を想定してコードを組む

参考サイト様の記事が非常に優秀な出来をしているため、普通のサイトであればサンプルのソースコードを使えばそのまま使えます。
そのため、本記事ではWordPressで設置する場合を想定した場合のコードの組み方を解説します。

まず初めに、今回の動作に必要なファイルを下記に列挙します。
・jQueryライブラリ
・jQuery UIライブラリ
・Raindropsライブラリ

各ライブラリのダウンロード方法は以下に記載します。

jQueryライブラリのダウンロード方法

1. 下記のjQueryライブラリの公式ページを開きます。
  http://jquery.com/download/
2. ページの上の方にあるリンクをクリックします。
02_jquery_dl
3. ダウンロードが始まります。

jQuery UIライブラリのダウンロード方法

1. 下記のjQuery UIライブラリの公式ページを開きます。
  https://jqueryui.com/
2. ページの右上の方にある「Stable」をクリックします。
03_jqueryui_dl
3. ダウンロードが始まります。
4. ダウンロードしたファイルを解凍します。
  ※フォルダ内にいろいろと入っていますが「jquery-ui.js」のみ使用します。
04_jqueryui_file

Raindropsライブラリのダウンロード方法

1. 下記のRaindropsライブラリの公式ページを開きます。
  http://daniellaharel.com/raindrops/
2. メニューの「ダウンロード」をクリックします。
05_reindrops_menu
3. 「ダウンロード」項目の「Github」をクリックします。
06_reindrops_github
4. 画面中央右側にある「Clone or download」をクリックします。
07_reindrops_clone_select
5. 「Download ZIP」をクリックします。
08_reindrops_dl
6. ダウンロードが始まります。
7. ダウンロードしたファイルを解凍します。
  ※フォルダ内の「raindrops.js」を使用します。

これで、各種ライブラリのダウンロードは完了となります。

各種ライブラリを読み込む

ライブラリは下記のような記述で読み込みます。

読み込みのタイミングはhead内でもbody内でも構いませんが、必ずふよふよさせるdivの箱の前に読み込みましょう。

ただし、ここで一つ注意があります!
raindrops.jsをWordPressで使用する際に、下記のようなエラーが出力される場合があります。
09_reindrops_error

該当箇所を詳しく見ると、”$”を使用している箇所でエラーが発生しています。
これは、WordPressでよく見られる”$”が”jQuery”以外のライブラリで定義されている(使われている)場合に出るエラーです。
そのため、”raindrops.js”でエラーが発生している箇所を”$”から”jQuery”に変更してください。

・”$”はNG↓
10_reindrops_ng

・”jQuery”はOK↓
11_reindrops_ok

これで、ライブラリの読み込みは完了となります。

ソースコードを設置する

今回は下記のようなコードを設置しました。

※今回は実験的な実装なのでdivに直接styleを書き込んでいますが、styleを設定する際には必ず別途cssファイルを作成して、そちらで設定をすることを強く推奨します。

ふよふよ動くギミックはscriptタグで囲んだ中のコードで設定しています。
可能な限りコメントは書いていますが…ちょっとわかりづらい部分や言語化できなかった部分があるので、実際に作成して数値をいじってみて確認して下さい!(丸投げ)
今回参考にしたサイト様を見る限り他にもオプションがあるようなので、上記のオプションだけでなく、色々なオプションも試してみることを推奨します。

ちょっと話がそれてしまいますが、ライブラリの読み込みの際に”$”を”jQuery”にする処理を行いましたが、scriptタグの中では行っていません。
理由としては、”$”を”jQuery”として動かすためにカプセル化を行っているため、このような記述をしても正常に動作するようになっています。
詳細は下記記事を参考にして下さい。
参考:【jQuery】jQueryの小ネタ(カプセル化、プラグイン化など)

これで、スプラトゥーン2の公式サイトのふよふよする領域が作れるようになりました。

ライブラリを活用して動きのある面白いサイトに!

いかがでしたか?

ライブラリを活用すると、こんなにも簡単に難しそうなギミックが実装できてしまいます。
有志の方が作るライブラリは自身の知識の引き出しの一つとなり、大きな武器にもなります。
素晴らしいサイトを見ることで何ができるかを知り、実際に実装することで技術を身に着けることは、Web制作を行う上で必要な作業の一つであると考えます。

…と偉そうなことを言っていますが、今回のネタの提供はM氏でした。

もっといろんなサイトを見ないとダメですね…(・・;)

ではまた!

この記事であなたの課題を解決することができましたか?

疑問点があったり、解決できなかったことがありましたら、お気軽にご相談してください。

The following two tabs change content below.
網干 裕介

網干 裕介

コーダーの網干裕介(あぼしゆうすけ)と申します。webサイトは見た目が非常に重要なのですが、サイトを構成するソースコードも見た目が重要だと考えています。内も外も魅力的なコンテンツが作れる人物になれるよう、日々努力しています。

ほかの投稿も読んでみませんか?

  1. この記事へのコメントはありません。

  1. この記事へのトラックバックはありません。

仕事ではパソコンが使いこなせるのが当たり前

相模原市産業会館パソコン教室

AD

ページ上部へ戻る