連載
» 2019年08月21日 05時00分 公開

Google Chrome完全ガイド:【Chrome拡張】このWebサイトいいね、どんなソフトウェアやサービスを使っているの?

デザインの優れたWebサイトや使い勝手のよいWebアプリを見つけたとき、「どうやって作ったんだろう?」と気になるようならば、事前に拡張機能「Wappalyzer」をインストールしておくと、利用されているソフトウェアやサービスを簡単に調べられます。

[島田広道,デジタルアドバンテージ]

この記事は会員限定です。会員登録(無料)すると全てご覧いただけます。

「Google Chrome完全ガイド」のインデックス

連載目次

優れたWebサイトの「作り」を知りたい!

 Webサイトの開発や運用に関わっているなら、デザインの優れたWebサイトや使い勝手のよいWebアプリに遭遇したとき、「これはどのように作られているんだろう?」と興味を持つのではないでしょうか?

 そのような場合に役立つのが、本稿で紹介する「Wappalyzer」です。これはGoogle Chrome(以下、Chromeと略)の拡張機能の一種で、無償でインストールして利用できます。Wappalyzerは1クリックで、表示中のWebページで利用されているソフトウェアやサービス、フレームワークなどを一覧表示してくれます。本稿ではデスクトップ版Chromeを対象として、その使い方や注意点などを説明します。

Wappalyzerについて

 WappalyzerはElbert Alias氏が開発したソフトウェアで、そのプログラムのソースコードはGitHubで公開されています。

 またChromeの拡張機能だけではなく、Mozilla FirefoxのアドオンブックマークレットJavaScriptによるアプリケーションAPIとしても提供されています。


WappalyzerをChromeにインストールする

 Wappalyzerを利用するには、まず以下のChromeウェブストア内の配布ページをChromeで開きます。

 次に[Chromeに追加]ボタンをクリックします。ダイアログが表示されたら、この拡張機能が必要とする権限を確認してから、[拡張機能を追加]ボタンをクリックします。

拡張機能「Wappalyzer」をChromeにインストールする(1/3) 拡張機能「Wappalyzer」をChromeにインストールする(1/3)
拡張機能「Wappalyzer」をChromeにインストールする(2/3) 拡張機能「Wappalyzer」をChromeにインストールする(2/3)
拡張機能「Wappalyzer」をChromeにインストールする(3/3) 拡張機能「Wappalyzer」をChromeにインストールする(3/3)

 すると自動的に、Wappalyzerのインストール完了を表すWebページが新規タブで表示されるので、いったん元のChromeウェブストアのタブを選択します。ここでアドレスバー(オムニボックス)右側のツールバーに注目すると、2つのひし形を縦に重ねたようなWappalyzerのアイコンが追加されているはずです。これでインストールは完了です。

Webサイトで使われているソフトウェア/サービスをWappalyzerでリストアップする

 解析したいWebページをChromeで開いたら、ツールバーにあるWappalyzerのアイコンをクリックすると、利用されているソフトウェア/サービスの一覧が表示されます。

 ここで注意が必要なのは、Wappalyzerが自身のツールバーアイコンを、発見したソフトウェア/サービス(の1つ)を表すアイコンに変えてしまうことです。つまりWebページごとにころころとアイコンが変わるため、アイコンが見つけにくいのが難点です(アイコンにマウスカーソルを乗せると「Wappalyzer」と表示されます)。

Wappalyzerアイコンをクリックして表示されたWebページの解析結果 Wappalyzerアイコンをクリックして表示されたWebページの解析結果

 検出されるソフトウェア/サービスは、60以上の「カテゴリー」に分類されます。上の画面でカテゴリーの部分をクリックすると、その市場占有率(シェア)のグラフなどを記したWebページが表示されます。

Copyright© Digital Advantage Corp. All Rights Reserved.

RSSについて

アイティメディアIDについて

メールマガジン登録

@ITのメールマガジンは、 もちろん、すべて無料です。ぜひメールマガジンをご購読ください。