多くの技術がウェブサイトの構築に使われています。コンテンツ管理システム^{(Content management systems)}、フレームワーク^(frameworks)、さまざまなスクリプト言語とプログラミング言語^{(different scripting and programming languages)}、支払いシステム^{(payment systems)}…あらゆる種類のもの！

お気に入りのWebサイトがどのように機能するかを知りたい場合、またはサイトで大ざっぱなものが使用されているかどうかを確認したい場合は、この記事で内部を調べて、その構築方法を確認する方法をいくつか紹介します。

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

開発者でない場合、または始めたばかりの場合は、より良いプログラミングの秘訣を学ぼうとしています。他の人のコードを見てください。Chromeのデベロッパーツールを使用してそれを行う方法を説明し^{(how to use Chrome’s Developer Tools)}ました。 

ChromeDevToolsは、サイトのHTML、JavaScript、CSSコードを表示し、それらが消費している可能性のあるソースを見つけ、ブラウザでサイトの読み込みパフォーマンスを確認する方法を支援します。すべての主要なWebブラウザーには、開発者用ツールのいくつかのバージョンがあります。

BuiltWith

BuiltWith.comは、サイトが使用するすべてのテクノロジーを確認するためにサイトに深く入り込むプロフェッショナルレベルのリソースです。現在、それらは6億7300万以上のウェブサイトとカウントをカバーしています。このサイトの背後にある主なアイデアは、ソフトウェア販売の人々のリードを生み出すのを助けることでした。

高度な機能は有料サブスクリプションでのみ利用できますが、誰でもBuiltWith.comにアクセスして、Webサイトのアドレス、テクノロジ名、またはキーワードを入力し、詳細なテクノロジプロファイルを取得できます。無料のアカウントにサイン^(Sign)アップすると、1日に5つの詳細な検索を実行できます。

Netcraftサイトレポート^{(Netcraft Site Report)}

Netcraftは、1995年以来Web開発者向けのリソースです。25年以上にわたる彼らの専門知識は、Netcraftの無料のサイトレポート^{(Site Report)}ツールに示されています。テクノロジーレポートと「サイトの所有者^{(who owns the site)}」のバックグラウンドレポートを組み合わせているため、サイトの全体像を把握できます。それがどこでホストされているか、誰がそれを所有しているか、そしていくつかのドメイン履歴がわかります。

Netcraftサイトレポート^{(Netcraft Site Report)}は無制限のルックアップを許可しているようです。それでも、本当に必要な場合にのみ使用してください。これは無料のリソースであり、開発者コミュニティはそれがそのまま維持されることを望んでいます。

W3Techsのサイト情報^{(W3Techs’ Sites Info)}

W3Techsのサイト情報ツールの動作は他のツールとは少し異なります。彼らは情報のデータベース^(database)を保持していますが、ツールですでに検索されているサイトにのみ存在します。以前にチェックされたことがないサイトをチェックしている場合、サイトは即座にクロールされます。 

提供されるレポートは、他のサービスが提供するものほど詳細ではありませんが、それでも洞察に満ちています。サイトが使用するCMS^(CMS)、プログラミング言語、Webサーバー、およびホスティングプロバイダーを取得します。W3Techsは、 ^(W3Techs)FirefoxとChromeのブラウザ拡張機能も提供しているため、クリックまたはタップするだけでサイトを確認できます。

ワッパライザー^(Wappalyzer)

サイトのテクノロジーをチェックするためのブラウザープラグインが必要な場合は、Wappalyzerに^(Wappalyzer)Firefox、Chrome、およびEdge用のプラグインがあります。プラグインは無料で使いやすく、読みやすいデザインでレイアウトされています。レポート内のテクノロジーをクリックすると、その説明が表示されます。これは、これまでに見たことのないものが見つかった場合に役立ちます。 

Wappalyzerは、Webサイトのアラートを作成する機能を備えた独自の機能を提供します。彼らは毎日サイトをチェックし、変更を検出した場合はメールで通知します。アラートでは、 Wappalyzer^(Wappalyzer)で無料のアカウントを作成し、月額10クレジットを支払う必要があります。

ただし、毎月50クレジットを無料で取得でき、アラートの費用は30日ごとに10クレジットのみです。したがって、5つ以下のサイトを監視している場合、WappalyzerAlertsは基本的に無料です。

Webspotter

Webspotterの1つのサービスを除くすべてが有料サービスですが、それは問題ありません。彼らの無料のWebspotterChrome拡張機能^{(Webspotter Chrome extension)}はそれを補います。Webspotter拡張機能はWappalyzerに似ています^(Wappalyzer)が、いくつかの異なる機能があります。リストされている各テクノロジーの横には、テクノロジーに関する統計、そのテクノロジーを使用しているWebサイトのリスト、およびテクノロジーの公式Webサイトへのリンクがあります。 

さらに興味深い機能は、電子メールの連絡先、ソーシャルメディアリンク、SEO分析^{(SEO analytics)}、およびその他の企業情報をWebサイトから引き出すWebspotterの機能です。それはサイトがどのように作られているかについては教えてくれませんが、それはオンラインマーケティングの目的や就職活動にも役立つかもしれません。

WordPressテーマ検出器^{(WordPress Theme Detector)}

たぶん、あなたはWeb開発にそれほど興味がないのですが、WordPressサイトをまとめていて、他の場所で見た機能を含めたいと思っています。WordPressテーマ検出器Chromeブラウザプラグインをダウンロードします^{(Download the WordPress Theme Detector Chrome browser plugin)}。 

WordPress Theme Detectorは、サイトが使用しているWordPressテーマ^{(WordPress theme)}を通知するだけでなく、使用しているWordPressプラグイン^{(WordPress plugins)}も通知します。また、誰がテーマまたはプラグインを作成したかを示し、それらを入手できる場所へのリンクを提供します。これにより、他のサイトで賞賛している要素をWordPress^(WordPress)サイトに簡単に組み込むことができます。

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

はい、インターネット^(Internet)上の任意のWebサイトに飛び込んで、それが何でできているかを確認するのはとても簡単です。これらのツールを2つ以上使用してみてください。一部のツールは、他のツールでは検出できないものを検出します。サイトに表示されるもののほとんどは、実際にはコンピューターにレンダリングされます。それが見やすいものです。それはあなたがあなたのウェブサイトをできるだけ安全^{(make your website as secure as possible)}にする必要がある理由でもあります。ディープダイビングを楽しんで、あなたが見つけたものや構築したものを私たちに知らせてください。

How Websites Work: Learn What’s Under the Hood

Many technologies go into building wеbsites. Content management systems, frameworks, different scripting and programming languages, payment systems…all sorts of things!

If you’re curious how your favorite website works, or want to see if a site is using something sketchy, this article will show you several ways to look under the hood and see how it’s built.

View the Website’s Code

If you’re not a developer, or just starting out, you’re about to learn the secret to better programming. Look at other people’s code. We’ve shown you how to use Chrome’s Developer Tools to do just that. 

ChromeDevTools will help you view a site’s HTML, JavaScript, and CSS code, find out what sources they may be consuming, as well as how to check a site’s loading performance in the browser. All major web browsers have some version of the developer’s tools available.

BuiltWith

BuiltWith.com is a professional-level resource that goes deep into sites to see all the technologies they use. Currently, they cover over 673 million websites and counting. The main idea behind the site was to help generate leads for people in software sales.

The advanced features are only available through a paid subscription, but anyone can go to BuiltWith.com, enter a website address, technology name, or keyword, and get a detailed technology profile. Sign up for a free account and you can do five detailed lookups a day.

Netcraft Site Report

Netcraft has been a resource for web developers since 1995. Their expertise over 25 years shows in Netcraft’s free Site Report tool. It combines a technology report with a “who owns the site” background report, so you get a thorough overview of the site. You’ll know where it’s hosted, and who owns it, plus some domain history.

The Netcraft Site Report appears to allow unlimited lookups. Still, use it only when you really need it. It’s a free resource and the developer community would like to see it stay that way.

W3Techs’ Sites Info

W3Techs’ Sites Info tool works a bit differently from the others. They keep a database of information, but only on sites that have already been searched through the tool. If you’re checking on a site that hasn’t been checked before, it will crawl the site instantly. 

The report provided is less in-depth than other services provide, but still insightful. You’ll get which CMS, programming languages, web server, and hosting provider a site uses. W3Techs also provide browser extensions for Firefox and Chrome so you can check sites with just a click or a tap.

Wappalyzer

If you prefer to have a browser plugin to check a site’s technologies, Wappalyzer has plugins for Firefox, Chrome, and Edge. The plugins are free, easy to use, and are laid out in an easy to read design. Clicking on any technology in the report will take you to an explanation of it, which is great if it finds something you haven’t seen before. 

Wappalyzer offers a unique feature with the ability to create an alert for a website. They check the site daily and email you if they detect a change. The alert will require you to create a free account with Wappalyzer and cost 10 credits per month.

But you get 50 credits for free every month and an alert only costs 10 credits for every 30 days. So Wappalyzer Alerts are basically free if you’re monitoring 5 or fewer sites.

Webspotter

All but one service of Webspotter is a paid service, but that’s okay. Their free Webspotter Chrome extension makes up for that. The Webspotter extension is similar to Wappalyzer, yet it has a few different features. Next to each technology listed, there are links to statistics about the technology, a list of websites using that tech, and the official website for the tech. 

An even more intriguing feature is Webspotter’s ability to pull email contacts, social media links, SEO analytics, and other company information out of a website. Although that doesn’t tell you about how the site is made, it could be useful for online marketing purposes or even job hunting.

WordPress Theme Detector

Maybe, you’re not so interested in web development but you’re putting together a WordPress site and would like to include features you’ve seen elsewhere. Download the WordPress Theme Detector Chrome browser plugin. 

Not only will the WordPress Theme Detector tell you what WordPress theme a site is using, but it’ll also tell you what WordPress plugins it’s using. It also shows you who created the theme or plugin and provides a link to where you can get them. That makes it so easy to incorporate elements into your WordPress site that you’ve admired on other sites.

Learn How Websites Work

Yes, it’s that easy to dive into any website on the Internet and see what it’s made of. Try using two or more of these tools, as some will pick up things that others don’t. Most of what you see on a site is actually rendered on your computer. That’s what makes it easy to look at. It’s also the reason why you need to make your website as secure as possible. Enjoy your deep diving and let us know what you find or build.

Related posts

• 最高の電話会議サービスとは–比較した最高のアプリ

• Windowsでファイルを自動的に移動、削除、またはコピーする

• CPU温度が高すぎるかどうかを確認する方法

• Windows、Mac、Linux向けの5つのベストブルーライトフィルターアプリ

• WindowsPackageManagerを使用してWindowsプログラムをインストールする方法

• Windows10/11に最適な天気ウィジェット

• Windows10に新しい機能を追加するための最良のプログラム

• Signalデスクトップアプリがプライバシーの保護にどのように役立つか

• Windowsコンピュータで重複するデジタル写真を取り除く方法

• PCでゲームプレイを記録する9つの方法

• 音声をテキストに変換するための2つの文字起こしツール

• Google Apps Script Editor：始めるために知っておくべきことすべて

• Zapier Email Parser：それを使用する3つの創造的な方法

• Chrome用の10の最高のプライバシー拡張機能（2022）

• 4つの最高のポートフォワーディングソフトウェアアプリとその使用方法

• Linuxsudoコマンドに代わる5つのWindows

• チャットボットとは何ですか？サイトでチャットボットを使用する方法

• 古いウェブカメラを使用してあなたの財産を無料で監視する

• 11Windows用の最高の無料スクリーンショットソフトウェア

• CMDをより面白くするための5つのコマンドプロンプトのトリック