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

サイト構築 -JavaScript

Post on:2019年8月28日

pagemapの特徴

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

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

pagemap

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

pagemap（マップを拡大表示）

pagemapのデモ

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

デモページ: Text

デモページ: Box

pagemapの使い方

Step 1: 外部ファイル

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

<body>
  ...
  コンテンツ
  ...

  <script src="pagemap.min.js"></script>
</body>

<body>

...

コンテンツ

...

</body>

Step 2: HTML

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

<body>
  ...
  コンテンツ
  ...
  <canvas id="map"></canvas>

  <script src="pagemap.min.js"></script>
</body>

<body>

...

コンテンツ

...

</body>

Step 3: JavaScript

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

<body>
  ...
  コンテンツ
  ...
  <canvas id="map"></canvas>

  <script src="pagemap.min.js"></script>
  <script>
    pagemap(document.querySelector('#map'));
  </script>
</body>

<body>

...

コンテンツ

...

pagemap(document.querySelector('#map'));

</script>

</body>

オプション

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

#map {
    position: fixed;
    top: 0;
    right: 0;
    width: 200px;
    height: 100%;
    z-index: 100;
}

#map {

position: fixed;

top: 0;

right: 0;

width: 200px;

height: 100%;

z-index: 100;

}

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

pagemap(document.querySelector('#map'), {
    viewport: null,
    styles: {
        'header,footer,section,article': rgba(0,0,0,0.08),
        'h1,a': rgba(0,0,0,0.10),
        'h2,h3,h4': rgba(0,0,0,0.08)
    },
    back: rgba(0,0,0,0.02),
    view: rgba(0,0,0,0.05),
    drag: rgba(0,0,0,0.10),
    interval: null
});