Part IV：ナビゲーションの工夫とJavaScriptの使い方

BlueGriffonの目次作成機能を使うと，H1，H2．．．見出しを元に目次リンクを作成し，目次からページの各見出しに簡単にジャンプできるようになります．

まず，目次を挿入したい個所にカーソルを移動します．あらかじめ，「目次が入る場所」と書いておいて，その直後にカーソルを移動しておけばわかりやすいと思います．（下記ソースをコピーして，「5.3.1 BlueGriffonでHTMLやCSSのソースを編集・コピペする方法」で示した方法を使って，BlueGriffonで編集中のファイルに挿入しても良い．）

<nav class="TOC">
　<h2>目次</h2>
　目次が入る場所
</nav>

次に，BlueGriffonの「挿入」メニューから「目次」を選択すると，目次（Table of Contents）ダイアログが表示されます．たとえば，H2とH3の見出しのみを目次に含めたいときは，ダイアログのLevel 1のタグをh2に，Level 2のタグをh3にし，それ以下のレベルのタグを「--」に変更します．「目次内のすべての項目に番号を振る（Number all entries in the table of contents）」チェックボックスは好みに応じて選択してください．（このほか，目次作成に利用する要素のclassを指定することもできます．つまり，あるclass属性を持ったh2要素だけを目次の対象にする．）最後に「OK」ボタンを押すと，目次が挿入されます．目次が挿入されたら，「目次が入る場所」を消しましょう．（「ソース」ビューで，ゴミが残っていないかチェックすると良いと思います．）

BlueGriffonは，目次を挿入する際，目次からジャンプする先の見出し要素に，"mozTocH2"や"mozTocH3"などのclass属性と，"mozTocId*****"というユニークな値のid属性を持つアンカー要素を自動挿入します．そして目次では，そのアンカーに対してページ内リンクを張ります．また，目次のol要素にも"mozToc"というid属性を付けます．

<ol id="mozToc">
<!--mozToc h2 1 h3 2-->
  <li><a href="#mozTocId772585">H2見出し1</a>
  <ol>
    <li><a href="#mozTocId982316">H3見出し1</a></li>
    <li><a href="#mozTocId313747">H3見出し2</a></li>
  </ol></li>
  <li><a href="#mozTocId772599">H2見出し2</a></li>
</ol>


<!-- 以下本文 -->
<h1>H1見出し（目次には含めない）</h1>

<h2><a class="mozTocH2" name="mozTocId772585" />H2見出し1</h2>

<h3><a class="mozTocH3" name="mozTocId982316" />H3見出し1</h3>

<h3><a class="mozTocH3" name="mozTocId313747" />H3見出し2</h3>

<h2><a class="mozTocH2" name="mozTocId772599" />H2見出し2</h2>

作成した目次は，手で修正することもできます．余分なものが目次に含まれていたら，ol要素のリスト構造を壊さないように気をつけてそれを削除すればよいだけです．（目次自身がh2要素なので，作成した目次に目次へのリンクも含まれてしまいますが，手で消せばよい．）

目次を作成した後でページを編集して見出し構成が変わったら，BlueGriffonが挿入した目次を「ソース」ビューで削除して，もう一度目次を挿入してください．

上のソースを見れば，ページの中で「目次に戻る」リンクを付けたいときにどうすればよいかも分かるはずです．目次のol要素のid属性が"mozToc"であることを利用して，そこにリンクを張ればよいのです．（下記リンクにclass属性を付けているのは，CSSで色を付けたりするときに役に立つから．）

<a href="#mozToc" class="TOCBackLink">[目次]に戻る</a>

JavaScriptをページに埋め込むだけで，自動的に目次を作ることも出来ます． JavaScriptのライブラリであるjQueryを使って，ページをウェブブラウザに読み込むときに見出し要素を調べて，目次を自動生成します．ちょっとややこしいので，詳細は「7.2.2 jQueryを使った目次作成」で説明します．

「5.2.2 文書構造のマークアップ（HTML5）」を具体的に説明します．ページ内の主要ブロック（ヘッダー，ナビゲーション，メインコンテンツ，フッター）をHTML5の該当要素を使ってマークアップすることで，コンテンツの意味をユーザエージェント（ブラウザやスクリーンリーダ）に明確に示せるだけでなく，CSSと組み合わせて各ブロックをページ内に配置したりデザインしたりすることが容易になります．下記 JS BinのHTMLとCSSをコピペするところからページを作成しても良いと思います．

ヘッダー部にあるロゴ画像とグローバルメニュー（ナビゲーションメニュー）について説明します．

ページの左上部にサイトのイメージやブランドを表すロゴ画像を表示して，（トップページ以外の）どのページでもその画像をクリックするとサイトのトップページ（index.html）に戻れるようにするとよいと思います．

<a href="index.html"><img src="data/UnivWeb.gif" alt="簡単ユニバーサルウェブ"></a>

サイトのページごとにレイアウトなどのデザインを共通にしておいて，その各ページへのリンクをグローバルメニューに表示すれば，サイト内のページの移動が容易になります．ページのデザインが同じなので，違うページに移動してもメインコンテンツが変わるだけで，サイトの一体感が保たれます．下記にグローバルメニューのHTMLとCSSソースを載せておきます．これを真似すれば，「レイアウト例」と同じものを作ることができます．

作成したページ毎に，自ページへのリンクは消してください．（下記HTML例なら，「Part 3」ページを表示中なので，自分のページを示すタブではリンクを張っていない．）

ロゴ画像とH1見出しとメニューを組み合わせたヘッダー部の例も書いておきます．このHTMLとCSSをコピペすれば同じようなヘッダー部を作成できます．

以上で紹介した機能以外にも，パン屑リストやサイトマップなども便利ですね．「トップに戻る」リンクや「目次に戻る」リンクなどのページ内のナビゲーションを助けるリンクもユーザビリティを向上させると思います．

サイト内検索があると便利ですよね．GoogleのProgrammable Search Engine（旧 カスタム検索サービス）を使えば提供できます． 「Programmable Search」のヘルプに書かれた手順に沿って，オリジナルの検索機能を作成してください．これを使えば，下記のような検索機能を自分のサイトで提供できます．

<div>
	<script async src="https://cse.google.com/cse.js?cx=018029641430967136839:tasbxdbpt1y"></script>
	TWCU内検索：<div class="gcse-search"></div>
</div>

上記サービスの使い方がわからない人はGoogleが提供していた古い方法が今でも利用可能です．（HTMLはもちろんJavaScriptでも自分で検索機能を作ることはできないので，他のプログラムの助けを借りる必要があります）

以下，Googleが提供していた古い方法を紹介します． Googleが公開しなくなった「Google：リンク，検索機能を追加」の「Google フリー検索 （ベーシック版）: ウェブ検索 + サイト検索」の通りにすれば，www.cis.twcu.ac.jpドメインに限定した検索機能を提供できます．（つまり，学生ごととかサイトごとではなく，大学全体が検索対象になる．）

WWWを検索 | www.cis.twcu.ac.jpを検索

大サービスで，上記検索フォームのソースを下記に掲載します．(一行が長いので字を小さくしました．)

<!-- SiteSearch Google -->
<div>
<form method="get" action="http://www.google.co.jp/search">
<table>
  <tr valign="top">
    <td><a href="http://www.google.co.jp/">
      <img src="http://www.google.com/logos/Logo_40wht.gif" style="border: 0; align: absmiddle;" alt="グーグル検索" /></a>
    </td>
    <td>
      <input type="text" name="q" size="31" maxlength="255" value="" />
      <input type="hidden" name="ie" value="utf-8" />
      <input type="hidden" name="oe" value="utf-8" />
      <input type="hidden" name="hl" value="ja" />
      <input type="submit" name="btnG" value="Google 検索" />
      <div style="font-size: small;">
        <input type="hidden" name="domains" value="www.cis.twcu.ac.jp" />
        <p>
          <label for="global_search">WWWを検索</label>
            <input type="radio" name="sitesearch" id="global_search" value="" /> | 
          <label for="cis_search">www.cis.twcu.ac.jpを検索
            </label><input type="radio" name="sitesearch" id="cis_search" value="www.cis.twcu.ac.jp" checked="checked" />
        </p>
      </div>
    </td>
  </tr>
</table>
</form>
</div>
<!-- SiteSearch Google -->

タブ表示でコンテンツを切り換える方法は直感的なので，（アクセシビリティに配慮する必要はあるけれど）ユーザにとって使いやすい方法かもしれません．タブ表示を実装する方法はいろいろありますが，「jQuery版：タブパネルと目次作成」でjQueryを使った方法を実装してみました．詳細は「7.2.1 jQueryを使ったタブパネル表示」で説明します．

「jQuery版：タブパネルと目次作成」にタブパネルを使った例を示しました．下記にソース例を書くので真似してみてください．head要素内とbody要素内に分けてBlueGriffonに追加すると，（ブラウザーでプレビューすれば）タブ表示になっているのが分ると思います．感動 :-)

<head>
　（略）

  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
  <link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/themes/smoothness/jquery-ui.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>

  <script>
    $(function(){
      $('#jqtab').tabs({
      });   
    });   
  </script>
</head>

<body>

  <h1 class="title">jQueryでタブパネル作成</h1>

  <p>うんたらかんたら．．．</p>

  <div id="jqtab">
    <ul>
      <li><a href="#tab-1">タブ1のラベル</a></li>
      <li><a href="#tab-2">タブ2のラベル</a></li>
      <li><a href="#tab-3">タブ3のラベル</a></li>
    </ul>

    <div id="tab-1">
    （タブ1の内容）
    </div>

    <div id="tab-2">
    （タブ2の内容）
    </div>

    <div id="tab-3">
    （タブ3の内容）
    </div>

   </div> <!-- end of jqtab -->

  <p>この段落は id属性がjqtabのdivブロックの外にあるので，タブ表示から外れる．</p>

</body>

head要素の中で，jQueryのJavaScriptライブラリ，タブ表示などのユーザインタフェース（UI）の見栄えを決める（ul要素をタブらしく見せる）CSS，タブ表示などのUIを作成するJavaScriptを読み込んでいます．さらに，head要素内のscript要素で，タブ表示の関数を呼び出しています．

body要素を見てみると，各タブの内容はdivブロックになっていて，ul要素がタブのように表示され，タブをクリックするとJavaScriptによって該当タブ以外の内容が隠されているわけです．タブ表示されるコンテンツ全体は jqtab というid属性を持つdiv要素で囲まれています．

jQueryの詳細は，jQuery（英語）参照．jQuery UIのテーマ一覧は，上記jQueryサイトのThemeRoller参照．（"UI darkness"を使いたいならば，CSSの"smoothness"を"ui-darkness"に置き換えればよい．）

「目次の自動生成を行う jQuery.exTOC.js」を利用すると自動で目次を作成できます．「jQueryの使用例」がこの仕組みで目次を付けているので，下記説明を参照しながらこのページのソースを見てみると良いと思います．

1. 下記ファイルを，HTMLファイルの下に作成したjsフォルダーにダウンロード．
   • 目次作成のJavaScript：extoc_1_0.js
   • 目次のCSS：ex_TOC.css
2. HTMLファイルのhead部に下記コードを書き込む．

   <script src="http://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
   <script src="js/extoc_1_0.js"></script>
   <link rel="stylesheet" type="text/css" href="js/ex_TOC.css" />
   <script>
     $(function(){
       $('h2.thisTOC').exTOC({
         contents: 'main',     // main要素の中にあるコンテンツを目次作成の対象にする
         headFrom : 2,         // h2要素から
         headTo : 4,           // h4要素までを目次作成の対象にする
         insertMethod : 'after',
         numberinghead: true,  // 目次に通し数字をつける
         smooth: false
       });
   
       $('h2[class!="thisTOC"]').before('<p class="TOCBackLink"><a href="#TOC">[目次]に戻る<\/a><\/p>');
     });
   </script>
   

   1行目でWebに置いてあるjQueryのライブラリを読み込んでいます．2行目と3行目で，手順1でダウンロードした目次作成用のJavaScriptとCSSを読み込んでいます．4行目からは，目次作成の細かい指定です．最後のほうで，目次に戻るリンクも自動挿入しています．目次作成の指定などに関する詳細は，「目次の自動生成を行う jQuery.exTOC.js」参照．

3. HTMLファイルのbody部の目次を入れたい箇所に下記コードを書き込む．

   <nav class="TOC">
      <h2 id="TOC" class="thisTOC">目次</h2>
   	<!-- ここ下記mainブロック内にある見出しを利用した目次が挿入される -->
   </nav>
   

4. 目次に含めたいコンテンツ全部を，main要素の中に入れる．