更新日:
【お役立ち情報】 WappalyzerでWebサービスの技術情報を知ろう！
プログラミングに興味がある人であれば、普段使っているWebサービスがどんな技術・言語を使って制作されているのかは気になるところ。Google Chromeアドオン「Wappalyzer」を使って、気になるあのWebサービスの技術分析をしてみよう！
プログラミングの勉強をしている時に、このサイトではどの言語が使われているのだろうと思ったことはないでしょうか。ブラウザのディベロッパーツールを使ってコードを読み解けば、どのプログラミング言語を使っているのか、どんな技術を用いて構築されているサイトなのかということは分かります。
しかし、プログラミングに関して広範な知識がないと、どの言語や技術を使っているのか判断するのは難しいので初学者にはハードルが高いですよね。また、ベテランのプログラマーでも、サイトの技術情報を調べるのはかなり面倒な作業です。
そこで、今回はWebサービスがどんな技術・言語を使って制作されているのかを確認できるGoogle Chromeアドオン「Wappalyzer」というツールを紹介します。
技術情報が外部に漏れないような設定がなされているサイトもあるので、全ての技術情報が検出できるわけではありませんが、気になっていたWebサービスが、実はこんな言語や技術が使われているのかという発見と学びを得ることができます。
それでは早速、そのインストール方法と使い方を説明します。
Wappalyzerのインストール方法
Wappalyzerは、Google Chromeのアドオン（add-on：ソフトウェアに後から追加することができる拡張機能プログラムのこと）です。無料で利用できるツールなので導入コストもかかりません。アドオンを使い慣れている人にはおさらいになりますが、下記にインストール方法を説明します。
1.Google ChromeでGoogleウェブストアを開く
Google ChromeでGoogleウェブストアを開きます。検索欄に「Wappalyzer」と入力しましょう。
2.追加したい機能拡張を選択して「Chromeに追加」をクリック
追加したい機能拡張を検索して選択し「Chromeに追加」をクリックします。
3.「機能拡張に追加」をクリックする
ポップアップのモーダルウィンドウで表示される「機能拡張に追加」をクリックします。
4.インストール完了
ブラウザの右上にあるアドオンの欄にWappalyzerのアイコンが表示されるようになれば、インストール完了です。
拡張機能を管理するアイコンをクリックしてWappalyzerがアドオンの欄に常に表示されるようにピン留しておくと良いかもしれません。
- Google ChromeでGoogleウェブストアを開く
- 追加したい機能拡張を選択して「Chromeに追加」をクリック
- 「機能拡張に追加」をクリックする
- インストール完了
Wappalyzerの使い方
Wappalyzerの使い方は非常に簡単です。下の動画のようにブラウザの右上にあるWappalyzerをクリックすると、サイトの技術情報が検出されます。
Wappalyzerを使って知ることができる機能とは
Wappalyzerで知ることのできる情報は、プログラミング言語の他にも様々な技術情報があります。ここでは具体例を見ながら、その一部を確認していきましょう。
プログラミング言語
まずは本サイトではどんなプログラミング言語が使われているか見てみましょう。PikawakaはRubyで作成されていることがわかります。
どんな言語でサイトが構築されているのかを知れるのは、プログラミング学習者にとって便利ですよね。
フレームワーク
下の画像はGithubの技術情報を見たときの画像です。様々なフレームワークが使われていることが分かります。
プログラミング言語に付随する情報としてフレームワークの種類も重要な要素ですよね。特に人気が安定しているJavaScriptフレームワークについては種類も多いので、気になるサイトをこまめにチェツクしていくことでトレンドを追っていくこともできそうです。
ライブラリ
下の画像は人材マッチングサービスWantedlyの技術情報です。
フレームワークと同様に、プログラミング言語関連で知っておきたい情報にライブラリがあります。このように複数のライブラリを使っているサイトも多くあります。
CMS
独自のWeb構築ではなくCMSを採用する企業も増えてきました。特にWebサービス本体はオリジナルでサイト作成をし、コーポレイトサイトや採用サイトなどはCMSを使ってコストダウンするといったWeb運用パターンは多いです。そんな代表例としてよく挙がるのが下の画像のクックパッド株式会社です。
WordPressを使っているかどうかを確認するには、いくつかの方法がありますがWappalyzerを使えばワンクリックで分かってしまいます。あの大企業でもWordPressを使っているのかと思うことも少なくありません。もちろん、Movable TypeやShareWithといった他の人気CMSも検出可能です。
アナリティクス
下はニューヨークタイムズのサイトでWappalyzerを使ったときの画像です。
Web担当者、Webマーケターなどにとって、他社がどんなアクセス解析を採用しているのかは気になるポイントですよね。Googleアナリティクスを使っている企業が多いですが、有料サービスや特化したアクセス解析を利用しているサイトもあります。プログラミング関連だけでなく、こうした顧客が求めているような情報も一括で得られるのがWappalyzerの使い勝手の良さです。
データベース
下は株式会社カカクコムのコーポレイトサイトでWappalyzerを使ったときの画像です。
このようにデータベースに関する情報も得られます。
eコマースプラットフォーム
下はAppleのサイトでWappalyzerを使ったときの画像です。
さすがにGAFAクラスの大企業になってくると、セキュリティも強固でサイトから得られる情報も少なくなってきますが、AppleがどのようなEコマースのカートシステムで使っているかということが、アドオンを追加するだけで確認できるのは楽しいですね。
Font Script
下はWappalyzerを使って見た求人サイトbosyuの技術情報です。
Webデザイナーであれば、Webサイトで使われているWebフォントについての情報も知りたい技術情報の一つですよね。もちろん、ソースコードを見れば、どんなWebフォントを使っているかわかりますが、クリック一つでチェックできる便利さには叶いません。
その他
その他にも、ブログシステム、タグマネージャー、リバースプロキシ、支払い処理、ウィジェット、アドネットワーク、ビデオプレーヤー、マーケティングオートメーション、CDN、Paasなど、様々な技術情報を検出することができます。
一部ではハッキングでも使われているアドオンと言われたりもしており、一見マニアックのようにも感じられますが、得られる情報の幅からしてもプログラミングに興味ある人だけでなく、企業のWeb担当者やマーケターといったビジネスパーソンにもオススメしたいツールです。
特に、Webサイトやアプリの制作現場では、クライアントから「競合他社のサイトと同じようなサービスを作りたい」といった依頼も多いと思います。そんな時にもWappalyzerがChromeに追加されていれば、調査にかかる時間がかなり短縮されるでしょう。まだ、インストールしていないという人は、導入を検討してみてはいかがでしょうか。
また、「他の便利なChromeアドオンも知っておきたい！」という方はこちらの書籍も参考にするとよいでしょう！
この記事のまとめ
- WappalyzerはWebサービスがどんな技術・言語を使って制作されているのかを確認できるGoogle Chromeの無料アドオン
- ブラウザの右上にあるアイコンをワンクリックするだけで技術情報を得ることができる
- プログラミングに興味がある人だけでなく、Web担当者やマーケターといったビジネスパーソンにもオススメのツール
