Html5 Outliner Extended / 桃缶食べたい。

桃缶食べたい。

Html5 Outliner Extended

インストール方法

使い方

ソースコード

謝辞

追加機能

オリジナルバージョンとの比較

HTML5 で追加された article, aside, nav, section タグはセクショニング・コンテンツと呼ばれています。これらのタグは WEB ページのデータ的な構造を表すために使用されます。ただ、これらのセクショニング・コンテンツによって表されるページ構造のアウトラインは、デザイン（CSS など）をあてるためのタグ構造と必ずしも一致している必要がなく、視覚的にも確認しづらいものです。

ページのアウトラインを確認するツールとして、HTML5 Outliner という Chrome 拡張があります。
これは表示しているページの HTML を読み込んで section や article などのタグからページのアウトラインをツリー構造で表示してくれるものです。

わたし自身もこれにだいぶお世話になっているのですが、使っているうちにもう少し使いやすくできたらと思うようになり、ちょっとした機能ではあるのですが拡張バージョンを作ってみました。

HTML5 Outliner のオリジナルバージョンは MIT License でソースコードも公開されています。作者は dymonaz ( Dominykas Blyžė ) さんという方です。

本来ならオープンソースのプロジェクトらしくパッチを送って取り込んでもらえばいいのでしょうが、チキンなのでなかなかそこまでは踏み出せず、fork した形で公開することにしました。ここに置いてあるものは、オリジナルの HTML5 Outliner を独自に機能拡張した野良バージョンとなります。

・各アウトライン毎に対応する HTML タグを表示する（id が設定されていれば #id名という形で同時に表示）
・各アウトラインの見出しに対応する HTML タグを同時に表示する（かっこ内が見出しに対応するタグ）
・タグの種類によって色分け表示

冒頭のスクリーンショットと同じページをオリジナルバージョンの HTML5 Outliner で表示したものがこちらです。

オリジナル版はシンプルにアウトラインを見出しの内容だけでツリー表示したものです。これにアウトラインを修正する上で欲しいなーと感じた付加機能をつけ加えつつ見やすい形を目指しました。

Chrome の本家拡張サイトでは WEB ページからインストールすることができますが、公開サーバーが自前なのでインストールには一手間増えています。ご了承ください。

1. Chrome の「設定」から「機能拡張」のページを開く

2. ダウンロードした html5outlinerExt.0.5.1.crx をこのページにドラッグ & ドロップする。

あとは画面表示にしたがってインストールするだけです。

使い方はオリジナルバージョンと同じです。
アウトラインを確認したいページを開くと、アドレスバーの右端に解析用の緑のボタンが表示されます。
これを押すとポップアップでページのアウトラインが表示されます。

github にてソースコードを公開しています。
相変わらず MIT ライセンスですので、その範囲でご自由にご利用ください。
作者および著作権者はソフトウェアについて一切の責任を負いません

Extended code is:
Copyright (c) 2013 momokan (http://chocolapod.sakura.ne.jp/blog/entry/63)

Original code is:
Copyright (c) 2009, Dominykas Blyžė (http://code.google.com/p/h5o/)

this software is MIT License:
h5o-chrome/MIT-LICENSE.txt
h5o-js/MIT-LICENSE.txt

HTML5 Outliner オリジナルバージョンの開発者である dymonaz さんに、心よりの感謝を申し上げます。
素敵なプロダクトをありがとうございます。

WEB 技術コメント (0) 2013/08/13 00:28:16

<<2024, 11>>