スプラトゥーン2のメニューみたいな水っぽい波紋の動きをWordPressで実装する方法

menu

Home
ＷＥＢ制作 , ＴＩＰＳ
スプラトゥーン2のメニューみたいな水っぽい波紋の動きをWordPressで実装する方法

記事の詳細

スプラトゥーン2のメニューみたいな水っぽい波紋の動きをWordPressで実装する方法

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

ということで、今回はスプラトゥーン2の公式サイトのグローバルメニューのふよふよ動いている部分の作り方をご紹介します！

参考サイト様：https://www.nintendo.co.jp/switch/aab6a/coop/index.html

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

今回のブログの見出しはコチラです！

1 ふよふよ動かすにはどうしたらよいのか？
2 WordPressで設置する事を想定してコードを組む
3 各種ライブラリを読み込む
4 ソースコードを設置する
5 ライブラリを活用して動きのある面白いサイトに！

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

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

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

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

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

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

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

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

1. 下記のjQueryライブラリの公式ページを開きます。
　 http://jquery.com/download/
2. ページの上の方にあるリンクをクリックします。

3. ダウンロードが始まります。

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

1. 下記のjQuery UIライブラリの公式ページを開きます。
　 https://jqueryui.com/
2. ページの右上の方にある「Stable」をクリックします。

3. ダウンロードが始まります。
4. ダウンロードしたファイルを解凍します。
　 ※フォルダ内にいろいろと入っていますが「jquery-ui.js」のみ使用します。

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

1. 下記のRaindropsライブラリの公式ページを開きます。
　 http://daniellaharel.com/raindrops/
2. メニューの「ダウンロード」をクリックします。

3. 「ダウンロード」項目の「Github」をクリックします。

4. 画面中央右側にある「Clone or download」をクリックします。

5. 「Download ZIP」をクリックします。

6. ダウンロードが始まります。
7. ダウンロードしたファイルを解凍します。
　 ※フォルダ内の「raindrops.js」を使用します。

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

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

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

<script src="(ファイル格納フォルダ)/jquery-3.2.1.min.js"></script>
<script src="(ファイル格納フォルダ)/jquery-ui.js"></script>
<script src="(ファイル格納フォルダ)/raindrops.js"></script>

1

2

3

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

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

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

・”$”はNG↓

・”jQuery”はOK↓

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

ソースコードを設置する

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

<div class="stage" style="background: #000;">
    <div class="puyopuyo" style="height:200px;"></div>
</div>

<script>
<!--
;(function($) {
  $(function(){
    let $puyopuyo= $('.puyopuyo');
    $puyopuyo.raindrops({
      color: '#f3f3f3',  // 色
      waveHeight: 60,    // 沈み込む高さ？
      waveLength: 40,    // ？
      canvasHeight: 200, // 表示領域の高さ
      rippleSpeed: 0.01, // 縦方向の波が揺れる速度？
      frequency: 2,      // 波紋が生まれる頻度
      density: 0.005     // 波の余韻みたいなものを設定する値
    });
  });
})(jQuery);
//-->
</script>

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

</div>

<!--

;(function($) {

$(function(){

let $puyopuyo= $('.puyopuyo');

$puyopuyo.raindrops({

color: '#f3f3f3', // 色

waveHeight: 60, // 沈み込む高さ？

waveLength: 40, // ？

canvasHeight: 200, // 表示領域の高さ

rippleSpeed: 0.01, // 縦方向の波が揺れる速度？

frequency: 2, // 波紋が生まれる頻度

density: 0.005 // 波の余韻みたいなものを設定する値

});

})(jQuery);

//-->

</script>

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

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

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

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

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

いかがでしたか？

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

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

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

ではまた！