すでにメンバーの場合は

無料会員登録

GitHubアカウントで登録 Pikawakaが許可なくTwitterやFacebookに投稿することはありません。

登録がまだの方はこちらから

Pikawakaにログイン

GitHubアカウントでログイン Pikawakaが許可なくTwitterやFacebookに投稿することはありません。

お役立ち情報

【お役立ち情報】 気になるWebサービスの技術情報がわかるGoogle Chromeアドオン「Wappalyzer」を使ってみよう!

ぴっかちゃん
ぴっかちゃん

プログラミングに興味がある人であれば、普段使っているWebサービスがどんな技術・言語を使って制作されているのかは気になるところ。Google Chromeアドオン「Wappalyzer」を使って、気になるあのWebサービスの技術分析をしてみよう!

Wappalyzerの動画
プログラミングの勉強をしている時に、このサイトではどの言語が使われているのだろうと思ったことはないでしょうか。ブラウザのディベロッパーツールを使ってコードを読み解けば、どのプログラミング言語を使っているのか、どんな技術を用いて構築されているサイトなのかということは分かります。

しかし、プログラミングに関して広範な知識がないと、どの言語や技術を使っているのか判断するのは難しいので初学者にはハードルが高いですよね。また、ベテランのプログラマーでも、サイトの技術情報を調べるのはかなり面倒な作業です。

そこで、今回はWebサービスがどんな技術・言語を使って制作されているのかを確認できるGoogle Chromeアドオン「Wappalyzer」というツールを紹介します。

技術情報が外部に漏れないような設定がなされているサイトもあるので、全ての技術情報が検出できるわけではありませんが、気になっていたWebサービスが、実はこんな言語や技術が使われているのかという発見と学びを得ることができます。

それでは早速、そのインストール方法と使い方を説明します。

Wappalyzerのインストール方法

Wappalyzerは、Google Chromeのアドオン(add-on:ソフトウェアに後から追加することができる拡張機能プログラムのこと)です。無料で利用できるツールなので導入コストもかかりません。アドオンを使い慣れている人にはおさらいになりますが、下記にインストール方法を説明します。

1.Google ChromeでGoogleウェブストアを開く

Google ChromeでGoogleウェブストアを開きます。検索欄に「Wappalyzer」と入力しましょう。
Googleウェブストアを開く画像

2.追加したい機能拡張を選択して「Chromeに追加」をクリック

追加したい機能拡張を検索して選択し「Chromeに追加」をクリックします。
「Chromeに追加」をクリックする画像

3.「機能拡張に追加」をクリックする

ポップアップのモーダルウィンドウで表示される「機能拡張に追加」をクリックします。
「機能拡張に追加」をクリックする画像

4.インストール完了

ブラウザの右上にあるアドオンの欄にWappalyzerのアイコンが表示されるようになれば、インストール完了です。
インストール完了の画像

拡張機能を管理するアイコンをクリックしてWappalyzerがアドオンの欄に常に表示されるようにピン留しておくと良いかもしれません。
ピン留の画像

ポイント
  1. Google ChromeでGoogleウェブストアを開く
  2. 追加したい機能拡張を選択して「Chromeに追加」をクリック
  3. 「機能拡張に追加」をクリックする
  4. インストール完了

Wappalyzerの使い方

Wappalyzerの使い方は非常に簡単です。下の動画のようにブラウザの右上にあるWappalyzerをクリックすると、サイトの技術情報が検出されます。
Wappalyzerの使い方の動画

Wappalyzerを使って知ることができる機能とは

Wappalyzerで知ることのできる情報は、プログラミング言語の他にも様々な技術情報があります。ここでは具体例を見ながら、その一部を確認していきましょう。

プログラミング言語

まずは本サイトではどんなプログラミング言語が使われているか見てみましょう。PikawakaはRubyで作成されていることがわかります。
プログラミング言語の画像
どんな言語でサイトが構築されているのかを知れるのは、プログラミング学習者にとって便利ですよね。

フレームワーク

下の画像はGithubの技術情報を見たときの画像です。様々なフレームワークが使われていることが分かります。
フレームワークの画像
プログラミング言語に付随する情報としてフレームワークの種類も重要な要素ですよね。特に人気が安定しているJavaScriptフレームワークについては種類も多いので、気になるサイトをこまめにチェツクしていくことでトレンドを追っていくこともできそうです。

ライブラリ

下の画像は人材マッチングサービスWantedlyの技術情報です。
ライブラリの画像
フレームワークと同様に、プログラミング言語関連で知っておきたい情報にライブラリがあります。このように複数のライブラリを使っているサイトも多くあります。

CMS

独自のWeb構築ではなくCMSを採用する企業も増えてきました。特にWebサービス本体はオリジナルでサイト作成をし、コーポレイトサイトや採用サイトなどはCMSを使ってコストダウンするといったWeb運用パターンは多いです。そんな代表例としてよく挙がるのが下の画像のクックパッド株式会社です。
CMSの画像
WordPressを使っているかどうかを確認するには、いくつかの方法がありますがWappalyzerを使えばワンクリックで分かってしまいます。あの大企業でもWordPressを使っているのかと思うことも少なくありません。もちろん、Movable TypeやShareWithといった他の人気CMSも検出可能です。

アナリティクス

下はニューヨークタイムズのサイトでWappalyzerを使ったときの画像です。
アナリティクスの画像
Web担当者、Webマーケターなどにとって、他社がどんなアクセス解析を採用しているのかは気になるポイントですよね。Googleアナリティクスを使っている企業が多いですが、有料サービスや特化したアクセス解析を利用しているサイトもあります。プログラミング関連だけでなく、こうした顧客が求めているような情報も一括で得られるのがWappalyzerの使い勝手の良さです。

データベース

下は株式会社カカクコムのコーポレイトサイトでWappalyzerを使ったときの画像です。
データベースの画像
このようにデータベースに関する情報も得られます。

eコマースプラットフォーム

下はAppleのサイトでWappalyzerを使ったときの画像です。
eコマースプラットフォームの画像
さすがにGAFAクラスの大企業になってくると、セキュリティも強固でサイトから得られる情報も少なくなってきますが、AppleがどのようなEコマースのカートシステムで使っているかということが、アドオンを追加するだけで確認できるのは楽しいですね。

Font Script

下はWappalyzerを使って見た求人サイトbosyuの技術情報です。
Font Scriptの画像
Webデザイナーであれば、Webサイトで使われているWebフォントについての情報も知りたい技術情報の一つですよね。もちろん、ソースコードを見れば、どんなWebフォントを使っているかわかりますが、クリック一つでチェックできる便利さには叶いません。

その他

その他にも、ブログシステム、タグマネージャー、リバースプロキシ、支払い処理、ウィジェット、アドネットワーク、ビデオプレーヤー、マーケティングオートメーション、CDN、Paasなど、様々な技術情報を検出することができます。

一部ではハッキングでも使われているアドオンと言われたりもしており、一見マニアックのようにも感じられますが、得られる情報の幅からしてもプログラミングに興味ある人だけでなく、企業のWeb担当者やマーケターといったビジネスパーソンにもオススメしたいツールです。

特に、Webサイトやアプリの制作現場では、クライアントから「競合他社のサイトと同じようなサービスを作りたい」といった依頼も多いと思います。そんな時にもWappalyzerがChromeに追加されていれば、調査にかかる時間がかなり短縮されるでしょう。まだ、インストールしていないという人は、導入を検討してみてはいかがでしょうか。

この記事のまとめ

  • WappalyzerはWebサービスがどんな技術・言語を使って制作されているのかを確認できるGoogle Chromeの無料アドオン
  • ブラウザの右上にあるアイコンをワンクリックするだけで技術情報を得ることができる
  • プログラミングに興味がある人だけでなく、Web担当者やマーケターといったビジネスパーソンにもオススメのツール

3

わかった!