見出し一覧をポップアップ

cocohore!がしばらく停止ということで、以前作った「本文の見出しを抽出するスクリプト」の改造欲がフツフツと高まった結果(^^;、ポップアップタイプのものができあがりました。バックナンバーやカテゴリ別ページで使うといい感じです。

----

ページの読み込みが終る頃ぐらいに、サイドバーにある「見出し一覧をポップアップ」というリンクをクリックしてみてください。

マウスオーバーもしくはタブキーで各見出しに移動できます。

また、クリックやエンターキーでスクロール(page down)もしますので、長い記事の時にはこれまた便利です。（現時点ではfirefox系限定ですが）

まだいろいろと不具合があるのですが、ご意見募集のため暫定公開することにしました。よろしくおねがいします。_(._.)_

----

* 動作状況

Internet Explorer 6 & Opera 7.23 [Windows XP], Firefox 0.8 [Linux (Mandrake 9.2)]で動作を確認しました。Konquerorでは、いつものごとく動いていません。popup→真っ白。(^^;

不具合としては、IE6ではスクロールのためのエンターキーが効いてません。また、Opera7.23ではタブキーさえ効いてくれません。なぜ？(T_T)

* 設置方法

ココログ専用ですが、typepad系なら動くかもしれません。プラスやプロで動作するかどうかも不明です。

まず、headingList01a.htmlという外部ファイルをダウンロードして、自分のブログにアップロードします。

次に、適当なマイリストに次のような項目を追加してリンクを作成します。

タイトル：

見出し一覧をポップアップ

URL：

javascript:window.open('http://facet.cocolog-nifty.com/divers/headingList01a.html','_blank','scrollbars=yes,width=200,status=yes,resizable=yes,left=0,top=0');eval();

すると、サイドバーにあるような、ポップアップ用リンクが作られます。
# 今回はいつもと違ってメモ欄を使わないので、呼び出し部分がシンプルですね。(^^)

----

* カスタマイズ

popupウィンドウの大きさや位置は、上記URLにあるjavascriptのwindow.open()内のパラメータで制御しています。とほほのJavaScriptリファレンスなどを参考に、適宜変更してください。

また、popup画面のスタイルは、ダウンロードしたhtmlファイル内の/head/styleにあるCSSを編集することで変更できます。

一覧全体がpre、各項目がdivになっています。

----

* 雑感

前回の見出し一覧スクリプトでは、一回クリックしてしまうと一覧が上に消え去ってしまうのでいちいち「戻る」を押さなくてはいけなかったので、今回のポップアップタイプの方が使い勝手がいいような気がしますね(^^)。

本当はcocohore!みたいにフレームにしようと思ったんですが、ポップアップの方しか思いつきませんでした。

そういえば、Slipnirでポップアップってどうやるんでしょう……。Operaやfirefoxは同じタブブラウザでもデフォルトでポップアップしてくれますけど。

Mac系のブラウザでの動作も気になります。

また、今回の呼び出し部分のjavascriptは完全にbookmarklet向きなので、そのままbookmarkletにしたら動くのかと思っていたんですが、甘かったようです。で、とりあえずマイリスト設置タイプのものだけリリースということに(^^;。bookmarkletができたら便利なんだけどなあ……。

それから、firefoxの場合、閲覧中のページの読み込みが完全に終らないと作動してくれないようです（何故？）。

また、IEやOperaでも、バックナンバーなど記事数が多いページではなかなかポップアップしないので、「ページの読み込みが終る頃に」という注釈つきにしました。

あと、TABじゃなくてShift+TABで閲覧すると、記事を古い順に読めたりもしますね。

また、一覧全体をpreにしたのは、単に当幅フォントにするためです（monospace指定が効かないのは何故でしょう？）。

ul/liを使わずにpre/divになっているのは、単に無性に今のようなツリーにしてみたくなったんだけど、ul/liでどうしたらいいかわからず、苦し紛れに作った結果です（笑）。でも、divだと、見出しが長いとツリーが崩れちゃうんですよね。 で、しょうがないのでCSSでnowrapを使って誤魔化している、というわけです。ということで、そのうちul/liバージョンも作るかも。

あと、ポップアップ用リンクのhrefにjavascriptを仕込んでいるのが少し不満なんですが、設置の手軽さをとりあえず優先してみました。

それから、記事中にh4以下の小見出しを使っていると、それも一覧できていいかもしれません。ただし、記事を作成する際のテキストフォーマットを「改行を反映させる」に設定している場合は、記事内の見出しは抽出できません。同様に、文章作成時に記事全体をdiv等のタグで覆っている場合も見出し要素は抽出されません。現時点では。

----

などなど、疑問や不具合も盛り沢山(^^;なんですが、結構おもしろい機能になってきていると思うので、ご感想、ご意見、アドバイス、アイデア等、なんでも気軽にコメントしていただけると幸いです。