HTML5 のセクションアウトラインを生成してみよう！

昨日

HTML5 のセクションアウトラインを取得する JavaScript - IT戦記という記事で、以下の JavaScript ファイルを公開しました
Outliner.js

で

公開したのはいいのですが、

@amachang 使い方がわからんです…。見てるページで試せるように、Bookmarkletになっていると嬉しいです。
http://twitter.com/os0x/status/3972339847

…肝心の使い方を書くのを忘れていました＞＜

＞＜

というわけで簡単に使い方を解説したいと思うます。
手順は 2 ステップ

1. まず outliner.js を読み込む

<!DOCTYPE html>
<html>
    <head>
        <title>hoge<title>
        <script type="text/javascript" src="http://amachang.sakura.ne.jp/misc/outliner.js"></script>
    </head>
:
:

2. createOutline を呼び出す

<script type="text/javascript">
var outline = createOutline(document);

// outline はセクションの情報の配列になっている
for (var i = 0; i < outline.length; i ++) {
    var section = outline[i];

    alert(section.headElement); // セクションに見出しがある場合、 headElement に見出し要素 (h1-6, hgroup) が入っている
    alert(section.element); // element にはセクションを作った要素（explicit なセクションでは section, article, aside, nav 、implicit なセクションでは見出し要素 (h1-6, hgroup) が入っている）
    alert(section.childs); // そのセクションの子セクションの情報が配列として入っている 
}
</script>

ね、

簡単でしょう？

というわけで

このライブラリを使ってページのアウトラインを表示する Bookmarklet を書いてみました

javascript:(function(s){ s.src = 'http://amachang.sakura.ne.jp/misc/outline/check.js'; document.body.appendChild(s) })(document.createElement('script'))

これをいろんな HTML5 なページで実行してみましょう！

まずは、 HTML5が話題になっているので試しに書いてみた。 - CSS HappyLife で紹介されているページ

次に、 http://gamuratwist.jp/blog/web/entry-96.php で紹介されているページ

次に、 http://rewish.org/etc/transition で紹介されているページ

次に、 HTML5で組んでみた | CSS-EBLOG で紹介されているページ

次に、 HTML5 で試しに Web ページを組んでみた (改訂版) – VERSIONFIVE で紹介されているページ

おおお。同じ HTML5 でも書く人によってセクションの形も千差万別ですね！

で、雑感

「どのようにセクションを構成するか」は人の好みによって大きく変わってくるもので結構性格が出るのかなーって思います
ですが、「ただ囲うだけ」のようなセクションは無駄にアウトラインが深くなるだけなので、むしろ div にすればいいのにとも思います。
「div 廚」という言葉を嫌って section を使う人も多いのではないかと思いますが、セクションアウトラインを「文章の構造を HTML の構造（DOM の構造）から分離するための概念」と考えれば、文章の構造を壊さないため、むしろ積極的に div を使っていくべきではないでしょうか*1。（ｷﾘｯ

というわけで

セクションアウトラインが見えて来ると今まで見えなかったものが見えてくる・・・かも！

（追記）あ、一個言い忘れてた！

セクションは、 section, article, aside, nav で囲われていなくても h1 や h2 などの「重み（ランク）」によって暗黙的に生成されますよ！
なので、既存の HTML も割と奇麗なアウトラインを生成します！これってセクションアウトラインが使われるようになるのには、重要なことですよね！
ちなみに、このページのアウトラインは以下のような感じ、はてな記法で書いても割と奇麗なアウトラインができてます！

*1:section を使うぐらいなら