• コーディング ファクトリーHOME
  • Coding Methodology
  • 第99回 複数ページの解析に役立つChromeブラウザ拡張機能

コーディングメソドロジー

第99回 複数ページの解析に役立つChromeブラウザ拡張機能

旧デザインから新デザインへのリニューアル案件で、現行ページをチェックするときなど、複数ページをまとめて効率よく解析したいタイミングは意外とあるもの。今回は、そんなときに役立つChrome ブラウザ拡張機能をご紹介します。

複数の URL を一気に開くことのできる「Pasty」

https://chrome.google.com/webstore/detail/pasty/hdjihnnclpjhfdbbinmgoiehhoehhlgf

今回のプロジェクトのGit ブランチ・ルール

図1 「Pasty」使用場面キャプチャ
URLを一気にコピーし、Chromeの右上にある「Pasty」アイコンをクリック。同ウインドウ別タブで全て開きます。

まずは確認したいページをまとめて開きましょう。 「Pasty」は、クリップボードにコピーされた複数のURL をワンクリックで開くこと のできる拡張機能です。(図1)

Chrome にインストール後、サイトマップやテキストファイルのURL をコピーし、 Pasty のアイコンをクリックするだけで複数タブが立ち上がり、該当ページが展開さ れます。また、文章中に空白や不要な文章が含まれていても、URL を判別して表示し てくれます。

URL をひとつひとつ開くのではなく一気に展開できるので、ページ数が多くても楽に 開けるのが便利です。

※開けるページ数は、お使いの環境、サイト仕様にもよりますので注意が必要です。

そのページに使われているライブラリやシステムが何かを教えてくれる「Wappalyzer」

https://wappalyzer.com/

今回のプロジェクトのGit ブランチ・ルール

図1 「Pasty」使用場面キャプチャ
URLを一気にコピーし、Chromeの右上にある「Pasty」アイコンをクリック。同ウインドウ別タブで全て開きます。

ページを解析していくときソースを開いて見ていかないと確認が難しいのが、

  • ・Google Analytics などのアナリティクス
  • ・WordPress などの CMS
  • ・jQuery などの JS ライブラリ
  • ・Bootstrap などのフレームワーク
  • ・Apache などのサーバソフトウェア

など、そのページに何が実装されているのかといった、技術的な部分です。
「Wappalyzer」は、上記リストにあるものなど、936 以上もの多岐にわたる技術・ツールを判定し、一覧表示する拡張機能です。(図 2)

また、表示された項目をクリックすることで、その技術・ツールの公式サイトを表示してくれます。調査中のサイトに最新の技術が使われていても、これで確認することができます。

具体的にページ内でどう使われているかは改めてページを調査しないとわかりませんが、表示されることで瞬時に確認でき、見逃してしまうことが少なくなります。

拡張機能を上手に使って確認作業の効率化を

コーディングファクトリーでは、大規模リニューアル案件など、現行サイトを参考にしながら制作を進めるときは、あらかじめ対象となるページを解析し、制作方法を検討していきます。そのほかにも、参考にしたいサイトを調べるときなど、既存のサイトを解析する機会は意外とあるものです。手間のかかる解析作業ですが、ブラウザの拡張機能をうまく使えば、効率化を図ることができます。制作により多くの時間を使えるよう、短縮できるところは短縮していきましょう。

  • 大規模サイト制作のご案内 大規模サイトプロジェクトのポイントやサービス内容をご紹介
  • レスポンシブWebデザインセミナーがDVDになりました。
  • コーディングメソドロジー
  • コーディングファクトリートピックス
  • 受注活動サポートサービス
  • コーディングファクトリーニュース
  • IllustratorでのWebデザイン
  • 求人案内
  • 株式会社モノサス
  • お問い合わせ

    コーディング相談ダイヤル

    お問い合わせ

  • ご相談、お問い合わせフォーム

    ご相談、お問い合わせフォーム