#navi_header|技術| 見出しのネストが複雑なWebページを閲覧していると、目次が欲しくなってきます。 コンテンツによっては、手動または自動で見出しの目次が生成され、クリックすればその見出しにジャンプできるようになっています。 しかしそうした目次が無い場合は、大きなドキュメントになるほど、文書構造を把握することが困難になり理解するのに時間もかかってしまいます。 そうした時に、コンテンツ側ではなくブラウザ側で自動的に見出し一覧を生成してくれる機能があると便利です。 以下のChrome拡張をインストールすると、そうした機能を使えるようになります。 - HeadingsMap - Chrome ウェブストア -- https://chrome.google.com/webstore/detail/headingsmap/flbjommegcjonpdmenkdiocclhjacmbi/related?utm_source=chrome-ntp-icon -- ツールバー上のボタンをクリックすると、ページ表示領域に見出し一覧のブロックを追加します。 - HTML5 Outliner - Chrome ウェブストア -- https://chrome.google.com/webstore/detail/html5-outliner/afoibpobokebhgfnknfndkgemglggomo/reviews?utm_source=chrome-ntp-icon -- アドレスバーに表示されるアイコンをクリックすると、見出しリンク一覧をポップアップ表示します。 -- "HTML5" と頭についているものの、旧来のHTML4系のページでも正常に動作します。 以下が実際に表示された様子で、左側のページ表示領域に埋め込まれているのが"HeadingsMap", 中央にアドレスバーからポップアップしているのが"HTML5 Outliner"の見出し一覧です。(2017-02時点のChrome56 + Win10 でスクリーンショットを撮り直してます) &image(yb://images/20150427_chrome_heading_outline/20150427_chrome_heading_outline.png) それぞれどんな違いがあるか、簡単にまとめます。 - HeadingsMap -- Chrome拡張とFirefox AddOnの両方がある。 -- 見出しが長いと省略される。 -- 見出し一覧のブロックのサイズが変更できない。 - HTML5 Outliner -- 以下のgithubプロジェクトでHTML5のアウトライン化に関連するプロダクトがまとめて開発されており、Chrome拡張はその中の一つ。 --- https://github.com/h5o --- https://h5o.github.io/ -- Chrome拡張の他に、ブックマークレットで半透明なdivブロックを追加して見出しリンクの一覧を表示することもできる。そのためクロスブラウザ対応と言えなくもない。 -- 長い見出しは折り返される。省略されることはない。 なお、見出し一覧を生成したいコンテンツが仕事に関連する非公開コンテンツの場合も考えられます。そうしたコンテンツを上記Chrome拡張は読み取ることになりますが、コンテンツの内容を不正に外部サーバなどに送信していないか気になるところです。 そこで、HTTPプロキシを間に入れてHTTP/HTTPS通信を確認したところ、不正なサーバにコンテンツ内容を勝手に送信しているような通信は両方共確認できませんでした。 そのため、両方共、コンテンツへのアクセスは純粋に見出しを抽出して一覧を生成するためだけにアクセスしており、非公開コンテンツに対して使っても問題ないと思われます。("HTML5 Outliner"はgithub上でソースが公開されていますので、ソースの方も確認し、XMLHttpRequestなどの呼び出しが無いことを確認済み) #navi_footer|技術|