RSS2.0

Html5 Outliner Extended

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

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

わたし自身もこれにだいぶお世話になっているのですが、使っているうちにもう少し使いやすくできたらと思うようになり、ちょっとした機能ではあるのですが拡張バージョンを作ってみました。
Html5OutlinerExt.png
HTML5 Outliner のオリジナルバージョンは MIT License でソースコードも公開されています。作者は dymonaz ( Dominykas Blyžė ) さんという方です。

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

 最新バージョン

ダウンロードはこちらからどうぞ。
html5outlinerExt.0.5.1.crx
HTML5 Outliner ver 0.5.1 相当です。

 追加機能

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

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

冒頭のスクリーンショットと同じページをオリジナルバージョンの HTML5 Outliner で表示したものがこちらです。
original.png
オリジナル版はシンプルにアウトラインを見出しの内容だけでツリー表示したものです。これにアウトラインを修正する上で欲しいなーと感じた付加機能をつけ加えつつ見やすい形を目指しました。

インストール方法

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

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

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


公開範囲:
プロフィール HN: ももかん
ゲーム作ったり雑談書いたり・・・していた時期が私にもありました。
カレンダー
<<2019, 11>>
272829303112
3456789
10111213141516
17181920212223
24252627282930