今回は、他人のWEBサイトやホームページはなんのCMSで作られているのか？もしくはどんなツールが入っているのか？を簡単に見る事が出来る方法を紹介します。
またその方法を更に分かり易くしてくれるChromeのプラグイン（拡張機能）を一つ紹介します。
- 見本サイトが使ってるツールを知りたい
- Analyticsなどのコードが入っているか確認したい
- とにかく全て真似をしたい
- この便利機能は何なのかを知りたい
サイトに入ってるツールを調べる方法
他人のWEBサイトに入ってる情報を見るには、ブラウザのデベロッパーツールを使用します。
デベロッパーツールの基礎的な使い方は下記の記事を見ていただければ分かります。
このデベロッパーツールの「ページのソースを確認」を見て導入されているCMSやツールを確認します。
これは、簡単に説明するとWEBサイトの裏側の仕組み（ソースコード）を見る事が出来ます。ここに記述されているCMSやツール名を見れば何のツールで作成されているのか分かります。
何のCMSを使っているかを調べる方法
最近のWEBサイトは大まかに「WordPress」「EC CUBE」「Bootstrap」の何れかで作成されているものが多いかなといった印象です。（Bootstrapはフレームワークと言われるもの。）
次点で「Movable Type」「WIX」「Jimdo」あたりかと思われます。
これらのCMSやフレームワークを使用するには必ず記述しないといけないコードがいくつかあります。
デベロッパーツールでソースコードを見た際に、その”必ず記述しないといけないコード“が存在したら、そのツールを使っている事になります。それらのコードは大体上から100行目までの間にあるかと思いますので、その辺りを見て探し出します。
では実際に私のサイトを例に見ていきます。
先に答えを言ってしまいますが、私のサイトは「WordPress」で作成しています。WordPressの場合は「wp-content」とのファイルが必ず入っているのでソースコード上にも「…/wp-content/…」とのパスがいくつか表示されるはずです。
この様に「wp-content」とのパスが指定されている部分が何箇所かありました。と言うことは「WordPress」を使用してるって事になります。
※なるべくheadタグ内にある記述の方が信頼性が高いです。<p>や<span>などで囲まれた「wp-content」との文字列は関係ありません。何れにしてもソースコードの上の方を確認すればOKです。
AnalyticsやSearch consoleのコードの確認
サイト運営をしている方で、Google AnalyticsのトラッキングコードやSearch consoleの埋め込みタグなどをサイト上に設置した後に、本当にちゃんと設置できているのか？もしくはどこに設置されたのか？気になっていてもたってもいられない…って考えてしまうのは、あるあるかと思います。
この辺の導入の確認もソースコードを見れば簡単に分かります。
Analyticsの場合は、<!– Global site tag (gtag.js) – Google Analytics –>ってなってる部分を見つけて下さい。そのすぐ下にある「gtag(‘config’, ‘UA-XXXXXXXX’);」の部分があなたのIDです。このIDがあなたのGoogleアカウントで登録しているAnalyticsのIDと一致していれば、 Analyticsが導入されている事が確認出来ます。
Search consoleの場合は、google-site-verificationって文字列を見付けて下さい。これが基本的にWEBサイトに埋め込むSearch consoleのタグです。
※Search consoleの場合、Analyticsのトラッキングコードからデータを取得出来るので必ず入ってるとは限りません。またこれらも基本的にheadタグ内に記述がされているかと思います。
他にもアイコンフォントが使えるかどうかを確認したい場合は「fontawesome」との記述を見つけて「link」内にそれが入っていれば「ftpontawesome」のアイコンは使えます。
ツール名を調べる時は検索をかけよう
ソースコードを目視で一つずつ見ていくのは技術者でもかなりキツイです。というより、いちいち目視では調べません。
ソースコード上で確認したいタグや外部ソースがある場合はPCの機能にある検索を使いましょう。詳しい使い方は下記の記事に書いてあります。
Analyticsのコードを確認したいのなら、そのままcommand（control）＋Fで「Google Analytics」と検索をかければ一発で見つかります。その他のツールやCMSの場合は下記の文字列を検索してみて下さい。一致した場合はそのツールを使用している事になります。
| 探すテキスト | 入ってるツール |
|---|---|
| wp-content | WordPress |
| eccube | EC CUBE |
| bootstrap | Bootstrap |
| mt | Movable Type |
| six | WIX |
| jimstatic | Jimdo |
| analytics | Google Analytics |
| google-site-verification | Search console |
| fontawesome | Fontawesome |
wappalyzerなら一瞬でわかる
最後に、これまで紹介してきた確認方法をしなくても、一瞬でしかも物凄く見易い調べ方を紹介します。
その方法は、Chromeの拡張機能である「wappalyze」を使います。
まずは拡張機能のページで「wappalyzer」と検索してインストール。もしくは下記のサイトからインストールして下さい。
すると下記の様にアイコン付きで何のツールを利用していて、何が埋め込まれているかが一目でわかる様になります。
以上が「サイトに何のツールを入れてるか確認する方法」でした。
このツールを調べる行為は、WEBサイトの改修業務やテンプレートを使用する際になどに役に立ってきます。
