サイトに何のツールを入れてるか確認する方法

Tool/App

今回は、他人の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-contentWordPress
eccubeEC CUBE
bootstrapBootstrap
mtMovable Type
sixWIX
jimstaticJimdo
analyticsGoogle Analytics
google-site-verificationSearch console
fontawesomeFontawesome

wappalyzerなら一瞬でわかる

最後に、これまで紹介してきた確認方法をしなくても、一瞬でしかも物凄く見易い調べ方を紹介します。

その方法は、Chromeの拡張機能である「wappalyze」を使います。

まずは拡張機能のページで「wappalyzer」と検索してインストール。もしくは下記のサイトからインストールして下さい。

https://www.wappalyzer.com/

すると下記の様にアイコン付きで何のツールを利用していて、何が埋め込まれているかが一目でわかる様になります。


以上が「サイトに何のツールを入れてるか確認する方法」でした。

このツールを調べる行為は、WEBサイトの改修業務やテンプレートを使用する際になどに役に立ってきます。

2020年5月29日Tool/AppKnow-How,Software

Posted by KT