今回調べるのはDELAUNAY（ドロネー）のサイト。
https://delaunay.jp
背景の図形をどのように実現しているのか調べるのが主目的。
まずは<head>内の気になるスクリプト周りを見てみる。
<script src="/js/html5shiv-printshiv.js"></script>HTML5で書かれたサイトをIE8以前のブラウザにも対応させるためのスクリプトらしい。
<script type="text/javascript" src="//fast.fonts.net/jsapi/a8ffbd17-fc9e-499e-bc5c-63da9386a13d.js"></script>fonts.comのWebフォントを使用するためのコード。
<link rel='dns-prefetch' href='//s.w.org' />WordPressが勝手に挿入するDNSプリフェッチの設定。DNSプリフェッチを使用すると、外部ドメインの名前解決を事前に強制でできるため表示速度を上げることができるらしい。検索するとこれを消すための方法があふれている。
<script type="text/javascript">
window._wpemojiSettings = {"baseUrl":"https:\/\/s.w.org\/images\/core\/emoji\/11\/72x72\/","ext":".png","svgUrl":"https:\/\/s.w.org\/images\/core\/emoji\/11\/svg\/","svgExt":".svg","source":{"concatemoji":"https:\/\/delaunay.jp\/wp\/wp-includes\/js\/wp-emoji-release.min.js?ver=4.9.11"}};
// 長いので以下略
</script>WordPressで絵文字を使えるようにするためのスクリプトらしい。これもみんな消したがっている。
<script type='text/javascript' src='https://delaunay.jp/wp/wp-includes/js/jquery/jquery.js?ver=1.12.4'></script>
<script type='text/javascript' src='https://delaunay.jp/wp/wp-includes/js/jquery/jquery-migrate.min.js?ver=1.4.1'></script>あとはjQueryの読み込みと、、、、
<link rel='https://api.w.org/' href='https://delaunay.jp/wp-json/' />これは、WordPress4.4からコアに実装された REST API を呼び出すためのコードらしい。外部のサイトやサービスで、データを抜き出しやすくなるとのこと。不要な人は不要でしょう。
次にフッター下にあるスクリプト群を見てみる。
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script>!window.jQuery && document.write('<script src="/js/jquery-1.7.2.min" charset="utf-8"><\/script>')</script>
<script src="/js/jquery.easing.1.3.js"></script>
<script src="/js/jquery.tile.min.js"></script>またjQuery関連。
<script src="/js/utility.js"></script>こちらの中身は空。
<script src="/js/common.js"></script>こちらはいろいろ書かれているがボリュームは少ない。
スクロールとかサイトの表示周りの基本的なことだけっぽい。
<script src="https://code.createjs.com/createjs-2015.11.26.min.js"></script>HTML5でリッチコンテンツを制作するためのJavaScriptライブラリのスイートであるCreateJSを読み込んでいる。アニメーションもできるようなのでこれを使って背景を表現しているのかもしれない。ここはまだライブラリの読み込みだけなので、実体のスクリプトを探そう。
<script src="/js/top_canvas.js"></script>Canvasとかいろいろ書いてあるのでこれっぽい。後でじっくり解読する。
<script src="/js/top.js"></script>内容は少なく、何か初期化っぽい感じかな？
<script type='text/javascript'>
/* <![CDATA[ */
var wpcf7 = {"apiSettings":{"root":"https:\/\/delaunay.jp\/wp-json\/contact-form-7\/v1","namespace":"contact-form-7\/v1"},"recaptcha":{"messages":{"empty":"\u3042\u306a\u305f\u304c\u30ed\u30dc\u30c3\u30c8\u3067\u306f\u306a\u3044\u3053\u3068\u3092\u8a3c\u660e\u3057\u3066\u304f\u3060\u3055\u3044\u3002"}}};
/* ]]> */
</script>
<script type='text/javascript' src='https://delaunay.jp/wp/wp-content/plugins/contact-form-7/includes/js/scripts.js?ver=5.0.2'></script>
<script type='text/javascript' src='https://delaunay.jp/wp/wp-includes/js/jquery/jquery.form.min.js?ver=4.2.1'></script>
<script type='text/javascript' src='https://delaunay.jp/wp/wp-content/plugins/contact-form-7-add-confirm/includes/js/scripts.js?ver=5.1'></script>WordPressのプラグイン、Contact Form 7 関連の記述。
<script type='text/javascript' src='https://delaunay.jp/wp/wp-includes/js/wp-embed.min.js?ver=4.9.11'></script>WordPressの記事をEmbedするための機能らしい。
というわけで、/js/top_canvas.jsが本丸ということは分かったので、次回このファイル内を詳しく見てみよう。
