- Coding Methodology
- 第99回 複数ページの解析に役立つChromeブラウザ拡張機能
第99回 複数ページの解析に役立つChromeブラウザ拡張機能
旧デザインから新デザインへのリニューアル案件で、現行ページをチェックするときなど、複数ページをまとめて効率よく解析したいタイミングは意外とあるもの。今回は、そんなときに役立つChrome ブラウザ拡張機能をご紹介します。
複数の URL を一気に開くことのできる「Pasty」
https://chrome.google.com/webstore/detail/pasty/hdjihnnclpjhfdbbinmgoiehhoehhlgf
図1 「Pasty」使用場面キャプチャ
URLを一気にコピーし、Chromeの右上にある「Pasty」アイコンをクリック。同ウインドウ別タブで全て開きます。
まずは確認したいページをまとめて開きましょう。 「Pasty」は、クリップボードにコピーされた複数のURL をワンクリックで開くこと のできる拡張機能です。（図1）
Chrome にインストール後、サイトマップやテキストファイルのURL をコピーし、 Pasty のアイコンをクリックするだけで複数タブが立ち上がり、該当ページが展開さ れます。また、文章中に空白や不要な文章が含まれていても、URL を判別して表示し てくれます。
URL をひとつひとつ開くのではなく一気に展開できるので、ページ数が多くても楽に 開けるのが便利です。
※開けるページ数は、お使いの環境、サイト仕様にもよりますので注意が必要です。
そのページに使われているライブラリやシステムが何かを教えてくれる「Wappalyzer」
図1 「Pasty」使用場面キャプチャ
URLを一気にコピーし、Chromeの右上にある「Pasty」アイコンをクリック。同ウインドウ別タブで全て開きます。
ページを解析していくときソースを開いて見ていかないと確認が難しいのが、
- ・Google Analytics などのアナリティクス
- ・WordPress などの CMS
- ・jQuery などの JS ライブラリ
- ・Bootstrap などのフレームワーク
- ・Apache などのサーバソフトウェア
など、そのページに何が実装されているのかといった、技術的な部分です。
「Wappalyzer」は、上記リストにあるものなど、936 以上もの多岐にわたる技術・ツールを判定し、一覧表示する拡張機能です。（図 2）
また、表示された項目をクリックすることで、その技術・ツールの公式サイトを表示してくれます。調査中のサイトに最新の技術が使われていても、これで確認することができます。
具体的にページ内でどう使われているかは改めてページを調査しないとわかりませんが、表示されることで瞬時に確認でき、見逃してしまうことが少なくなります。
拡張機能を上手に使って確認作業の効率化を
コーディングファクトリーでは、大規模リニューアル案件など、現行サイトを参考にしながら制作を進めるときは、あらかじめ対象となるページを解析し、制作方法を検討していきます。そのほかにも、参考にしたいサイトを調べるときなど、既存のサイトを解析する機会は意外とあるものです。手間のかかる解析作業ですが、ブラウザの拡張機能をうまく使えば、効率化を図ることができます。制作により多くの時間を使えるよう、短縮できるところは短縮していきましょう。
