ほーむぺーじのソースをこまかくみて判別 #HTML

ネット上にあるサイトを開いて「これと同じで良い」みたいな
ムチャブリをされた時に、できるだけ効率的に、このサイトが
何で作られているのか？を判別して、似たようなサイトを作るための方法です。

ちなみにChrome拡張のVue/ReactのDevToolを入れておくと、
もろにVueやReactの場合は反応する。一番早い判別はコレ。

■sitesucker

https://nuconeco.net/sitesucker/
まず構造とかちゃんと見る。CSSとJSは最近はほぼ圧縮されてると思うので、
コレだけで何かを特定するのは難しいですが、
JSで書かれてるヤツは、バーチャルなルーティングなので
実物のディレクトリとかDOMが書かれたhtmlは落ちて来ないです。
DOMが落ちてくるという事は静的サイトジェネレーターか、SSRかな〜と推測。

■Prepros

https://prepros.io/
とりあえずローカル立ちあげて、ブラウザのデベロッパーツールで見る。（一番速い）
細かいパーツのCSSはコレで見たほうが速いかもですが、
全部のパーツをデベロッパーツールで拾うのは地獄なのでやらない。

■Sourcetree

https://www.sourcetreeapp.com/
弄くり回す場合は、ローカルに初期状態を保存する。（一番ラク）

■Snappy Snippet

https://github.com/kdzwinel/SnappySnippet
htmlとcssを逆展開する拡張を入れる。入れ方は下記とほぼ同じ。
でもクラス名が本物と違うようになる。
https://naokixtechnology.net/javascript/2851
HTMLとCSSだけをちゃんとマネしたい場合は「ウェブページ、完全」でダウンロードした方が
安定しそうですな。

■codePen

https://codepen.io/pen/
ココに貼ってhtmlとCSSを見る。昔のサイトならコレで大概理解できるが
最近のはJSで制御されてるので、ほぼ動かない。
※ほぼ動かないって事はJSフレームワークっぽい何かを使ってる。

このやり方は、HTMLとCSSは独自のクラスに置き換わるが、圧縮されてない感じに見える。
表面のスタイルだけをマネしたい、という場合はコレで一旦やる。

■chromeの「デベロッパーツール」から「ソース」を見る

https://ascii.jp/elem/000/000/999/999122/
Webpackやらなんやらのツールは著作権表記は残すので、
そこからある程度予測する。例えば、こんな表記がある

/*!
 * VERSION: 2.1.3 //←ココ
 * DATE: 2019-05-17
 * UPDATES AND DOCS AT: http://greensock.com //←ココ
 *
 * @license Copyright (c) 2008-2019, GreenSock. All rights reserved.
 * This work is subject to the terms at http://greensock.com/standard-license or for
 * Club GreenSock members, the software agreement that was issued with your membership.
 *
 * @author: Jack Doyle, jack@greensock.com
 */

サイト名を指定してバージョン番号で検索します。

site:http://greensock.com VERSION: 2.1.3

大概の場合、これで何を使っているのか分かる。上の場合はgsapですよね。
https://greensock.com/gsap-plugins/

/*!
 * UAParser.js v0.7.19
 * Lightweight JavaScript-based User-Agent string parser
 * https://github.com/faisalman/ua-parser-js
 *
 * Copyright © 2012-2016 Faisal Salman <fyzlman@gmail.com>
 * Dual licensed under GPLv2 or MIT

こちらは、ちゃんとURLが載ってました。モバイルなどの判別ですね。
https://github.com/faisalman/ua-parser-js

/*
object-assign
(c) Sindre Sorhus
@license MIT

なんかのポリフィルですね。あとコレnpmのパッケージ以外配布してないので、
このサイト、やっぱり何かの「jsフレームワーク」を使ってるっぽい。
https://www.npmjs.com/package/object.assign

■圧縮されたmain.jsをできる限りみる。

多分NuxtかNextで作ってるんだろうと予想してみる。
（サクサクなパフォーマンスからもReactっぽい何かだと感じる。）

この圧縮されたjsは目で見ることは不可能ですので整頓する。
https://beautifier.io/
とりあえず圧縮されたJSを引き伸ばしてみて、「雰囲気」を感じ取ります。
雰囲気から元のソースを想像して何を使ってるんだろな〜を予測します。

■※ここから先、さらにおそろしく地味な作業です。

そして開いている元ソースを書けないから、多分ワケわからんと思うんで、
あとは興味あったら読んでくだせぇ…。

$("#で検索して、なんとなくjQuery使って動かしてるっぽいDOMを特定する。
jQueryをminifyしただけの場合はコレで簡単にコピーできるんですが、
...あ、あんまりjQueryを使ってないかも。シンタックスシュガー的な使い方に。

addEventListener("mouseenter"
addEventListener("mouseleave"
addEventListener("click"

clickで検索してイベント系の周りを見渡していると、
addEventListerに変換されているので、元はonClick的な感じだったのかも。

で、その下のほうに何かの残骸が見えてきます。

WebGLRenderer(100, 100, {

あ〜これ、上記の書き方はthree.jsですよね。。メニューはこれで表示してるのかな。。？

              key: "show",
              value: function() {
                  this.container.dataset.state = "show", s.b.fromTo(this.logo, .8, {
                      opacity: 0,
                      x: -40
                  }, {
                      opacity: 1,
                      x: 0,
                      ease: u
                  })
              }
          }, {
              key: "hide",
              value: function() {
                  T.hide(), this.container.dataset.state = "hide", s.b.to(this.logo, .8, {
                      opacity: 0,
                      x: 40,
                      ease: u
                  })
              }

変数は圧縮されちゃってますが、上記はgsapの設定ですね。
アニメーションは、ほぼこのツールで設定されてるっぽいですね。

gsapなのかcssなのか見極めが難しいですが、
CSSのtransitionの設定が分かれば、パラメーターを入れてみるとこれで再現できそうです。
　↓
http://ds-overdesign.com/transform/matrix.html

regeneratorRuntime.mark
new Promise

これbabelとes6.promiseがセットで使われてそう。。

throw new ReferenceError("this hasn't been initialised - super() hasn't been called");

このエラーコードはbabel-plugin-transform-es2015-classesの物ですね。。
ES6の拡張で、クラス構文で書いているんじゃなかろうか。。

TypeError("Cannot call a class as a function")
this.btnNext = $("#PageTop .section-news .arrow-next"),
this.btnPrev = $("#PageTop .section-news .arrow-prev"),
this.btnNext.addEventListener("click", this.change.bind(this, 1))

あ、これはreact-slickかな？？多分。

Super expression must either be null or a function

このエラー文章は、、Reactの系統ですよね。。

(n.parallax = new Q("[data-parallax]"))

react-parallax的な感じのものも必要そう？

後はDOMをコメントアウトしながら、対応するJSを割り出していく。
例えば、「更新情報」を差し込んでるコンテナを消してみる。

Error: Barba.js: no container found

なるほど、ココはBarba.jsで差し込んでいるのか。。

あと、お問い合わせフォームに文字打ち込んでみて、リロードしてみる。
リロードしたら消えてるっぽいのでreduxみたいなのは使ってないと思う。

スクロールにも、なめらかになる工夫がされているような気がする。
これかな？？
https://min30327.github.io/luxy.js/
いや、多分tweenmax（GSAP）っぽいな。
https://inertia-momentum-scroll.webflow.io/tweenmax-js

React系の何か＋ES6（Babel）で、gsapとthree.jsとslick

この場合だとNext.jsかGatsby.jsか分からないけど、Reactっぽいどっちか。
Reactから派生してる技術を使っていけば、似たようなものが作れます。

…と、いうわけで、

依頼主「これと同じで良い」
→「Next.jsを使うので、その日数で工数を算出します」または
→「ウチはReactのエンジニア居ないんで無理です」

と回答ができる。
「jQueryでなんとかできそうですね〜」とか答えちゃうと、もうヤバい。
その後はもう地獄です。工数算出する時はキチッとソースまで見て答えましょう。

以上です。