Webページの構成を取得し、ページ全体を把握できるマップを自動生成するスクリプト -pagemap

Webページ内のコンテンツの構成を取得し、ページ全体を把握できるマップを自動生成するスクリプトを紹介します。マップはページ内リンクにも対応しています。

サイトのキャプチャ

pagemap
pagemap -GitHub

pagemapの特徴

pagemapはページ全体の構成を取得し、全体を把握できるマップを自動生成するスクリプトです。MITライセンスで、商用プロジェクトでも無料で利用できます。

全体マップは、デフォルトでは右上に表示されます。

サイトのキャプチャ

pagemap

マップを操作することも可能で、クリックするとそこに移動し、ドラッグするとスクロールしながら移動できます。

サイトのキャプチャ

pagemap(マップを拡大表示)

pagemapのデモ

デモは2種類用意されており、テキストのみ、ボックスのみ、でページ全体のマップが表示されます。

サイトのキャプチャ

デモページ: Text

サイトのキャプチャ

デモページ: Box

pagemapの使い方

Step 1: 外部ファイル

当スクリプトを</body>の上に外部ファイルとして記述します。

Step 2: HTML

マップを生成するためのcanvas要素をコンテンツの最後に記述します。

Step 3: JavaScript

あとはスクリプトを実行するだけで、マップが表示されます。

オプション

マップの表示位置を変更するには、CSSを調整します。

マップのデザインもカスタマイズできます。

sponsors

top of page

©2019 coliss