ネット上にあるサイトを開いて「これと同じで良い」みたいな
ムチャブリをされた時に、できるだけ効率的に、このサイトが
何で作られているのか?を判別して、似たようなサイトを作るための方法です。
ちなみに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でなんとかできそうですね〜」とか答えちゃうと、もうヤバい。
その後はもう地獄です。工数算出する時はキチッとソースまで見て答えましょう。
以上です。