ウェブサイトの仕組みを調べる方法：サイトの内部構造からわかること

ウェブサイトの構築には、実にさまざまな技術が関わっています。コンテンツ管理システム（CMS）、フレームワーク、各種スクリプト言語やプログラミング言語、決済システムなど、挙げればきりがありません。

お気に入りのサイトがどのように動いているのか気になったことはありませんか？あるいは、あるサイトが怪しい技術を使っていないか確認したいと思ったこともあるかもしれません。この記事では、サイトの「フードの下」を覗いて、その作られ方を知るためのいくつかの方法をご紹介します。

ウェブサイトのソースコードを見る

開発者でない方や、プログラミングを始めたばかりの方にこそ知ってほしい上達の秘訣があります。それは「他人のコードを読むこと」です。Chromeのデベロッパーツールを使えば、誰でも簡単にそれができます。

Chrome DevToolsを使えば、サイトのHTML・JavaScript・CSSのコードを閲覧できるだけでなく、どのようなリソースを読み込んでいるのか、ブラウザ上での読み込みパフォーマンスはどうなっているのかまで調べられます。主要なWebブラウザにはいずれも何らかの形で開発者ツールが搭載されています。

BuiltWith

BuiltWith.comはプロフェッショナル向けのサービスで、サイトを深く分析し、使用されているすべての技術を把握できます。現在6億7300万以上のウェブサイトをカバーしており、その数は増え続けています。もともとはソフトウェア営業担当者のリード獲得を支援する目的で作られたサービスです。

高度な機能は有料サブスクリプション限定ですが、誰でもBuiltWith.comにアクセスし、ウェブサイトのアドレス、技術名、キーワードを入力すれば詳細な技術プロファイルを取得できます。無料アカウントに登録すると、1日に5回まで詳細な検索が可能です。

Netcraft Site Report

Netcraftは1995年からWeb開発者にとって頼れる情報源であり続けてきました。25年以上にわたる専門性が、無料のSite Reportツールにも表れています。このツールは技術レポートと「そのサイトの所有者は誰か」という背景レポートを組み合わせたもので、サイトの包括的な概要を把握できます。ホスティング先、所有者、ドメイン履歴までわかるのが強みです。

Netcraft Site Reportは検索回数に制限がないようですが、本当に必要なときだけ使うようにしましょう。無料リソースであり、開発者コミュニティはこの状態が続くことを望んでいます。

W3TechsのSites Info

W3TechsのSites Infoツールは、他のサービスとは少し仕組みが異なります。情報のデータベースを持っていますが、対象はすでにこのツールで検索されたサイトのみ。未調査のサイトをチェックした場合は、即座にクロールして情報を収集します。

提供されるレポートは他のサービスほど詳細ではありませんが、十分に有益です。サイトが使用しているCMS、プログラミング言語、Webサーバー、ホスティングプロバイダーなどがわかります。さらにW3TechsはFirefoxとChrome用のブラウザ拡張機能も提供しており、クリックひとつでサイトをチェックできます。

Wappalyzer

ブラウザのプラグインでサイトの技術をチェックしたいなら、Wappalyzerがおすすめです。Firefox、Chrome、Edge用のプラグインがあり、いずれも無料で使いやすく、読みやすいデザインになっています。レポート内の任意の技術をクリックすると、その解説ページへ移動します。見慣れない技術が見つかったときにとても便利です。

Wappalyzerには独自の機能として、特定のウェブサイトに対するアラート設定があります。毎日サイトを自動チェックし、変化を検知するとメールで通知してくれます。アラートには無料アカウントの作成が必要で、月10クレジットかかります。

ただし、毎月50クレジットが無料でもらえ、アラート1件あたりのコストは30日で10クレジット。つまり、監視するサイトが5件以下であれば、Wappalyzer Alertsは実質無料で使い続けられます。

Webspotter

Webspotterは無料で使えるのはChrome拡張機能だけで、その他のサービスは有料です。しかし、その無料のWebspotter Chrome拡張機能だけでも十分な価値があります。Webspotter拡張機能はWappalyzerと似ていますが、いくつか独自の機能を持っています。各技術の横には、その技術に関する統計へのリンク、その技術を使用しているウェブサイトの一覧、そして公式サイトへのリンクが表示されます。

さらに興味深いのは、Webspotterがウェブサイトからメールアドレスの連絡先、SNSリンク、SEO分析データなどの企業情報を抽出できる点です。サイトの作られ方そのものはわかりませんが、オンラインマーケティングや就職活動に役立つかもしれません。

WordPress Theme Detector

Web開発そのものにはあまり興味がなくても、WordPressサイトを作っていて、他のサイトで見かけた機能を取り入れたいという方はいるでしょう。そんなときはWordPress Theme DetectorのChrome拡張機能をダウンロードしてみてください。

WordPress Theme Detectorは、サイトが使用しているWordPressテーマを特定できるだけでなく、使用しているプラグインまで教えてくれます。テーマやプラグインの作者名も表示され、入手先へのリンクも提供されます。これにより、他のサイトで魅力的だと感じた要素を自分のWordPressサイトに取り入れるのが格段に簡単になります。

ウェブサイトの仕組みを学ぼう

インターネット上のどんなサイトでも、これほど手軽に中身を覗き見できるのです。複数のツールを併用してみてください。あるツールが検出できないものを別のツールが拾うこともよくあります。

実は、サイトに表示されているものの大部分は、あなたのコンピュータ上で描画されています。だからこそ簡単に覗けるのです。同時に、それは自分のウェブサイトを可能な限り安全にしておくべき理由でもあります。ディープダイビングを楽しんで、発見したことや作ったものがあればぜひシェアしてください。