公開サイトにどのCMSが使われているか見分ける方法

フリーになってからご無沙汰していたので、久しぶりに前の勤め先にご挨拶をしてきました。
そのときに、私の後任の制作の人にこんな質問をされました。

「公開されてるサイトにどんなCMSが使われてるか、一発で見やぶる方法ないすか？」

実務でやっていると、使用されているCMSを調べたいという場面はけっこうあります。
CMSベースと思われるのに精密なデザインのサイトに出会ったときとか、新規案件の相談を受けたものの、現状サイトにどのCMSが使われているのか聞かされていない場合などです。

私が扱ったことがある、MovableType・WordPress・XOOPS・a-blog cms・SOY CMSに絞ってまとめてみます。

Firefoxの解析ツール「Wappalyzer」

「Wappalyzer」というFirefoxアドオンがあります。
これは表示しているページのソースを解析して、どのようなアプリケーションが絡んでいるか調べてくれるものです。主にGoogle Analyticsの有無などで使うようですが、MovableTypeやWordPress、XOOPSも対象になります。

ただ、あまりCMSに関する精度は高くなく、一部埋め込みや、根本からテーマを構築するような作り方をしたサイトは解析できません。

※ツールの名前を思い出せませんでした。川上さんありがとうございます。

MovableType

検索フォーム

どのCMSにも言えることですが、検索フォームが付いていればform要素周辺を見ることで、かなりの確率で見破ることができます。
サイト全体がCMSで管理されていれば、普通はCMS内蔵の検索エンジンを使うからです。

MovableTypeの場合、環境変数でパスを変えていない限り、検索エンジンのファイル名は必ず「mt-search.cgi」になります。
また、limitやincludeBlogsなどのオプションが引数で渡されています。

<form method="post" action="http://example.com/mt/mt-search.cgi">
	<input type="text" id="search" class="ti" name="search" value="" />
	<input type="hidden" name="IncludeBlogs" value="1,2,3" />
	<input type="hidden" name="limit" value="20" />
	<button type="submit">Search</button>
</form>

不自然な改行

MovableTypeは「ブロックタグや条件分岐タグの前後に改行が出力されてしまう」という仕様上の特徴があります。

プラグイン追加や、タグの前後の改行を詰めてしまうことで回避できますが、前者は再構築の速度に影響しますし、後者はコードの可読性が落ちるので、そこまでするコーダーはあまりいません。

このため、他のCMSで作られたサイトよりソースコードに余計な改行が多くなります。
新着情報の各エントリーの前後が二行以上開いていたり、head要素内に改行が多数存在している場合は、MovableTypeを使っている確率が高いです。

画像配置

MovableType で作成された新着情報などで画像が貼られている個所を見てみると、「mt- enclosure」というspan要素で囲まれていることがあります。
また、冗長なインラインスタイルが入っています。

<span class="mt-enclosure mt-enclosure-image" style="display: inline;"><img alt="example.jpg" src="http://example.com/images/example.jpg" class="mt-image-center" style="text-align: center; display: block; margin: 0pt auto 20px;" width="480" height="360" /></span>

WordPress

head要素

WordPressはMovableTypeほどコーディングの自由が利かないため、だいたいはWappalyzerで見破ることができます。
head要素にマニフェストファイルが自動リンクされるのも特徴的です。

<link rel="wlwmanifest" type="application/wlwmanifest+xml" href="http://example.com/wp-includes/wlwmanifest.xml" />

また、METAの管理に「All in One SEO」を使用するのが一般的なので、これを導入しているサイトではhead要素のかなり下の方にdescription・keywords・canonicalがあります。

クォーテーションの混在

WordPress は不特定多数の手によって開発されてきたせいなのか、リストなどの自動出力部分のHTMLに、「シングルクォーテーション」が使用されている個所と「ダブルクォーテーション」が使用されている個所が混在しています。
なので、全体のコードをざっくり見てもなんとなくわかると思います。

XOOPS

検索フォーム

少し古いXOOPSのテーマだと、検索フォームに「xoops」という接頭語が付いた引数が指定されていることがあります。

<input name="query" id="legacy_xoopsform_query" size="14" type="text">
<input name="andor" id="legacy_xoopsform_andor" value="AND" type="hidden">
<input name="action" id="legacy_xoopsform_action" value="results" type="hidden">
<input name="submit" id="legacy_xoopsform_submit" value="検索" type="submit">

div要素

XOOPSは、本文を囲むカラムのdivに「blockContent」classが付けられる慣習があります。
公式テーマがそうだからです。

<div class="blockContent">～</div>

また、通常コンテンツの管理には「pico」というモジュールが使われることが多いので、会社概要やプライバシーポリシーなどの本文上にpicoのアンカーが入っているかもしれません。

<a name="top_of_pico_body" id="top_of_pico_body"></a>

XOOPSは外部のモジュールを多数組み合わせて構築する性格上、どうしてもソースコードに一貫性がなくなります。
XHTMLとHTML4の書式が混在していたり、一部だけやたらインラインスタイルが使われていたら、XOOPSの可能性が高いのではと思います。

a-blog cms

a-blog cmsは、かなりわかりやすいです。
「特定のフォルダに入れたHTMLがそのままサイトルートに反映される」という仕様があるため、cssやjsなどのパスがかなり変わった相対パスになっていますし、パス内には必ず「themes」があるはずです。

また、head内に管理用のjavascriptが読み込まれていますし、METAのgeneratorも必ず入ることになっています。

<link rel="stylesheet" href="/css/acms.css" type="text/css" media="all">
<script type="text/javascript" src="/index.js?=xxxxxxxx" charset="UTF-8" id="acms-js"></script>

<meta name="generator" content="a-blog cms v1.3.1" />

実際、中にどのCMSが使われているかというのは、運営側にはバレバレでもどうということはありません。
a-blog cmsはその分、管理しやすさを重要視しているということなのでしょう。

SOY CMS

今のところ、SOY CMSでできたサイトを見分ける方法はよくわかりません。すみません。
現状、既存のサイトにCMSを埋め込むような使われ方が多いので、ソースコードに特徴が出ないのです。
SOY CMS2ではa-blog cmsやJimdoと同様のユニット式が採用されるので、今後はクセが出てくるものと思います。
【追記】中の人からお返事をいただきました。SOY CMS2に関してもコード状のクセが出てくることは、今のところないそうです。

現状ではRSSが配信されていた場合、ファイル名が「feed?feed=rss」になっているというくらいでしょうか。
（SOY CMS2ではフレンドリーURLになります）