JavaScriptによる目次の自動生成について

前へ 次へ
このQ&Aのポイント
  • 現在、私はiswebにサイトをもっており、そのページで目次が自動生成されるようにしたいと考えています。
  • phpなどは利用できないのでjavascriptで何とかしたく、googleで検索したところ次のようなページを見つけました。"Table of Contents script"
  • この方法を試してみたいのですが、解説が英語であり、何よりも私がjavascriptについてほとんど分かっていないため、どうしてもうまくいきません。
回答を見る
  • ベストアンサー

JavaScriptによる目次の自動生成について

現在、私はiswebにサイトをもっており、そのページで目次が自動生成されるようにしたいと考えています。 phpなどは利用できないのでjavascriptで何とかしたく、googleで検索したところ次のようなページを見つけました。 "Table of Contents script" http://www.quirksmode.org/dom/toc.html この方法を試してみたいのですが、解説が英語であり、何よりも私がjavascriptについてほとんど分かっていないため、どうしてもうまくいきません。 とりあえず、このページで紹介されているスクリプトと、これを機能させるために必要だという "getElementsByTagNames" http://www.quirksmode.org/dom/getElementsByTagNames.html のスクリプトを一つにして"toc.js"を作り、目次を自動生成させたいページの<head>部分に <script type="text/javascript" src="toc.js"></script> と記述してみました。 以上のやり方が正しいのかどうかも自信がありませんが、肝腎の、目次の表示のさせ方（目次を表示させたい箇所に何をすればいいのか）がよく分かりません。 <div id="innertoc">や<span>が鍵らしいのですが、どうもよく分かりません。 紹介ページのソースも覗き視ましたが、どうも肝腎の箇所が見当たりません。 分からないことだらけで申し訳ありませんが、解決法をご存知の方はぜひお教えください。 よろしくお願いします。

質問者が選んだベストアンサー

  • ベストアンサー
  • hrm_mmm
  • ベストアンサー率63% (292/459)
回答No.3

とりあえず、今すぐ可能というところでは、ご呈示のJavaScriptでいきましょうか。 JavaScript　offだと表示出来ないのはしかたのないところですが。 でも、そのページには利用法が書いてないので、関数内の解説で解る人は、解説読まなくても、scriptを見れば使い方も解るよってところですね。 そのうえMACのIE5.2ではcrashするとも書いてあるので、来訪対象者によってはbrowserチェックしたうえで実行するようにした方がよいかも？。 使い方は、 まずは、御記載の通り２つ必要で、合体して一個の外部ファイルにするのは問題なし。 あとは、本体htmlに以下を挿入,id="top_index"についてはユニークなもので有ればよい。ただし、createTOC()内で既に使われているものは使わないように。 ーーhead内にーー <script type="text/javascript" > window.onload = function(){ var toc = createTOC(); if( toc) document.getElementById('top_index').appendChild( toc ); } </script> ーーbody内のindex表示をしたいところにーー <div id="top_index"></div>

world0621
質問者

お礼

どうもありがとうございます。 お蔭さまで完璧に、私の希望通りに動いてくれるようになりました。 厚くお礼申し上げます。 お礼の序というわけではありませんが、もう一つ追加で質問しても宜しいでしょうか。 この"Table of Contents script"は、ページを開いた初期状態では目次が隠れており、"show page contents"をクリックしてはじめて目次が表示されます。 しかし、ページを開いた時点ですでに目次が表示されているようにするにはどうすればよいのでしょうか。 追加質問がここでのルールやマナーに反するようでしたら撤回しますが、もしご回答を頂戴できれば幸いです。

その他の回答 (3)

  • hrm_mmm
  • ベストアンサー率63% (292/459)
回答No.4

operaやmozillaでチェックしたところでは、初期状態では表示ですけど？ 「show page contents」の文字をクリックしても、一回目はここがhideになるだけでリンク文字列は表示のまま、２日目のクリックから消えて表示してのトグルになるけど。 スタイルシートか何かでわざわざ消してるのでしょうか？ トグル文字と連動して一回目のクリックで消えるようにというなら、window.onloadの最後に一行足して下さい。 window.onload = function(){ var toc = createTOC(); if( toc) document.getElementById('top_index').appendChild( toc ); showhideTOC(); }

world0621
質問者

お礼

本当にありがとうございます。 ご提示くださった1行を加えたところ、お蔭様で初期状態からちゃんと表示されるようになりました。 また、ご説明するのが遅くなってしまい申し訳ありませんが、このスクリプトの配布元のCSSも一緒にコピーしてテストしていましたため、その影響もあったようです。 CSSから1行削除したところ、初期状態からちゃんと表示されるようになりました。 ただ、大変申し上げづらいのですが、動作確認をしていたらもう一つ別の問題が見付かってしまいました。 配布元のオリジナルは初期状態で目次が表示されないようになっていたため、表示されていても、どこか見出しへのアンカーをクリックすると目次が「初期状態」に戻って勝手に閉じてしまうのです。 配布元でも "In addition, it's called whenever the user clicks on a link. This immediately hides the ToC." と解説されています。 どうにかしてこの機能を取り除き、「目次が開閉するのは"... page contents"をクリックした時だけ」になるように設定することはできないものでしょうか。 showhideTOC()の'none'と'block'を入れ替えてみたりと、素人考えでいろいろ試してみたのですがどうしてもうまくいきません。 厚かましいお願いであることは承知していますが、もしご回答くだされば幸いです。 よろしくお願いいたします。

noname#36864
noname#36864
回答No.2

http://www.quirksmode.org/dom/getElementsByTagNames.html 単純にこのページのgetElementsByTagNamesと言う関数を貼りつければ良いと思いますよ。 まだ足りない関数があるようなら同じように探して貼りつければ動くと思います。

world0621
質問者

お礼

ご回答ありがとうございます。 ほぼ解決しました。

  • ANASTASIAK
  • ベストアンサー率19% (658/3306)
回答No.1

まずもって、そもそも「目次の自動生成」とはなんぞやという ところを説明してもらえないと、アドバイスのしようもないで す。通常はCGIなどを使ってＨＴＭＬに吐き出させます。そうい うものをお望みなら、JavaScriptでは無理です。

world0621
質問者

補足

回答ありがとうございます。 また、私の説明不足で申し訳ありませんでした。 ここでいう「目次の自動生成」とは、「ページ内の見出しタグから目次を自動生成する、Wikipediaなどにある機能」のことです。 "Table of Contents Generator" http://bono.s201.xrea.com/2006/05/130-toc_generator/ のようなプラグインがあるのは知っていましたが、cgiでも出来るとは知りませんでした。 そういったcgiを紹介しているページをご存知でしたらお教えください。 また、私は "Table of Contents script" http://www.quirksmode.org/dom/toc.html のjavascriptでも同様の働きをしてくれるものと考えておりましたが、違うのでしょうか。

  1. カテゴリ
  2. [技術者向] コンピューター
  3. プログラミング・開発
  4. JavaScript

関連するQ&A

  • サイト内の目次を自動生成してくれるCGIかPHPを探しています。できれ

    サイト内の目次を自動生成してくれるCGIかPHPを探しています。できればJavaScriptでもなんでもいいのです。 普通のサイトマップ作成ツールはタイトル名だけをサイトマップで書き出してくれるソフトはあるのですが、ファイルへのリンクに<h1>～<h6>までの見出しも含めて自動でサイトマップにしてくれ、ファイルを更新すると目次のページも自動的に更新されると理想です。 よろしくお願いいたします。

    • ベストアンサー
    • CGI
  • 自動目次生成で特定の見出しだけ表示させたい

    自動目次生成で特定の見出しタグ<h4>だけとかを閲覧者が選ん絞り表示させるように出来ますでしょうか？これができれば<h4>は動画だけにつけているタイトルとかなら閲覧者は動画の見出しだけを表示させることが出来ます。 使っているのはJavaScriptのjQueryのjqtocです。 機能の付け方がわかりません。 よろしくお願いいたします。

  • 見出しも目次に出来るサイトマップ生成ソフトを探しています。サイトの全自

    見出しも目次に出来るサイトマップ生成ソフトを探しています。サイトの全自動の目次生成をしてくれるCGI、PHP、JavaScriptなどを探しています。 理想はファイルをドラッグするだけでサイトマップを作ってくれるものです。タイトル名だけ目次にしてくれるソフトはありますが、見出しも含めてツリー型に作ってくれるソフトまたはJavaScriptやCGIが欲しいです。 サイトマップは見だしが目次にならないので、タイトルはもちろん、<h1>～<h6>までの見出しまでサイトマップにして書き出してくれるソフト化、自動でトップページが更新されるようにしたいです。 よろしくお願いいたします。

    • ベストアンサー
    • HTML
  • 目次生成ができるマクロが知りたいです

    PowerPoint VBAにて下記内容の目次が生成できるマクロを探しております。 ・セクションから項目名を取得 ・ページ数自動取得 実行例 　内容 　　セクション名：野菜　スライド数：4 　　セクション名：果物　スライド数：2 　実行結果 　　目次 　　野菜　P.1～4 　 果物　P.5～6 わからないなりに1週間作成してみたのですが、ページ数の表示がどうしてもうまくいかず、途方に暮れております。 有識者の方々、どうかご教示いただけますでしょうか。

  • Javascriptについて

    ページA　ページB　があって ページＡにiframeでページＢを埋め込んだり、ページＢ単体で表示したい場合、 それぞれで使用したいJavaScriptはそれぞれで読み込んでも良いですか？ 同一のJavaScriptそれぞれのページで読み込む。 <script type="text/javascript" src="xxx.js"></script>

  • jQueryの自動目次生成の設定について

    JavaScriptのjQueryのJqtocですが自動的に目次も開くようにすると１２００ピクセル以下のモニターだと本文と重なってしまう不具合がでます。 １２００以上の場合は不具合は出ません。 そこでこれを１２００ピクセル以下のモニターでも重ならないように目次は、画面からはみだしてもいいので横スクロールで見れるように設定を変更したいのですが可能でしょうか？ また逆に１９００ピクセルほどのモニターで見ると本文と目次が離れすぎてしまいます。 できれば本文も目次も１２００に固定してセンタリングできればと思っています。 できれば完全に１２００pxに固定してどのモニターで見ても本文と目次が同じ位置で表示されるようにしたいです。 １０００ピクセル以下の場合は目次は、重なる方のデメリットのほうが大きいのではみだしてもいいので横スクロールして見るようにしたいです。 初期の状態は画面全部に目次も入るように映す設定のようですが、目次は見えなくても良いので重ならないで横スクロールするようにしたいです。 どこを変更すればいいのかわかりません。 よろしくお願いいたします。

  • JavascriptでHTMLをパースするライブラリの使い方

    javascriptでHTMLをパースして、DOMに変換してくれるライブラリを探していたら以下のサイトにたどり着きましたが使い方がわかりません。 http://ejohn.org/blog/pure-javascript-html-parser/ サイトの中段あたりに、 「DOM Document Creator」 というところのサンプルのように、 <script src="htmlparser.js"></script> で外部ファイルをちゃんと読み込んで、 var dom = HTMLtoDOM("<p>Data: <input disabled>"); のようにすると、 domという変数にHTMLtoDOMの引数がDOMに変換されて 格納されるはずなんですが・・・ FirefoxでHTMLtoDOM is not defined とエラーがでてしまいます。 見識ある方、このライブラリを使用する方法を教えていただきたいです。

  • このJavaScriptを動かしたい！

    こんばんわ。 http://bodytag.org/bt_melter/ ↑ こちらのサイトのようなJavaScriptを動かしたいのですが、 どうやったら動くのでしょうか。 JSファイルをDLして、サーバにアップしました。 もちろんHTMLにも<script>～</script>を記述しました。 JSファイルをいじくったりしなければ作動しないのでしょうか？？

  • JavaScriptで擬似フレーム、読み込み完了を知るには？

    サイト内の各ページ上部に、Ajaxで共通のメニュー部分.htmlを読み出し、表示しています。 参考：AjaxでIFRAME的な表示をやってみる http://bizcaz.com/archives/2006/11/13-000253.php 参考：階層メニューにJavaScriptで書き換え http://www.dhtmlgoodies.com/index.html?whichScript=dhtmlgoodies_menu2 <html> <head> <script type="text/javascript" src="prototype.js"></script> <script type="text/javascript" src="ajaxcontents.js"></script> <script type="text/javascript" src="ListbasedDHTMLmenu.js"></script> </head> <body> <span id="ajax_content_block"></span> <script type="text/javascript"> <!-- ajax_content_onload_get('メニュー部分.html','','ajax_content_block','ajax_content_progress'); //--> </script> <div> 本文 </div> </body> </html> ajaxcontents.jsでメニュー部分.htmlを読み出しListbasedDHTMLmenu.jsで階層メニューに書き換えています。 "dhtmlgoodies_menuObjはNullまたはオブジェクトではありません" のエラーが出て、階層メニュー部分が表示されません。 dhtmlgoodies_menuObjは階層メニュー書き換えのListbasedDHTMLmenu.jsで使われています。 ページ読み出しjavascript完了後に、ページ書き換えjavascriptを実行すればと思っているのですが、 方法の検討がつきません。 if ( location.search.indexOf("1") == -1 ) { setTimeout("_reload()",100); } function _reload() { location.href = location.href + "?1"; } ↑でリロードさせて見たのですが、バックすると表示されなくなります。 すいませんがアドバイスをお願いいたします。

  • JavaScript内にJavaScriptを読み込む方法

    HTML内に <script type=\"text/javascript\" src=\"main.js\"></script> という一行を追加すると、バナーが表示されるというスクリプトを作成しています。 main.jsは、 html = \'<script language=\"JavaScript\">\'; html += \'var url0101 = \"url01.xxx.jp\";\'; html += \'var url02 = \"url02.oooo.jp\";\'; html += \'</script>\'; html += \'<script language=\"JavaScript\" src=\"http://xxx.xxxx.xxx/test.js\"></script>\'); html += \'<script language=\"JavaScript\">\'; html += \'Function01(\"check\")\'; html += \'</script>\'; document.write(html); というような風になっており、 (1) 変数の宣言 ↓ (2) http://xxx.xxxx.xxx/test.jsの読み込み ↓ (3) (2)で読み込んだjs内の関数Function01を実行 という流れです。 FireFoxでは表示されましたが、IE6では (2)のjsを読み込む前に(3)のFunction01が実行され、 「オブジェクトを指定してください」のエラーが表示されてしまいます。 よい方法がありましたら教えていただけますでしょうか？ よろしくお願いします。

注目のQ&A

カテゴリ

専門家に質問してみよう

職業から探して質問する

あなたにピッタリな商品が見つかる！ OKWAVEセレクト

質問する