6. ナビゲーションの工夫

皆さんが作成するサイトのユーザビリティを向上させるために「最終課題」に利用できる技術を紹介します.(アクセシビリティへの配慮もしてあります.)

6.1 目次の作成

目次を自動作成する方法を2つ紹介します.

6.1.1 BlueGriffonで目次作成

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属性を付けます.

リスト21 BlueGriffonが作成する目次の例
<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で色を付けたりするときに役に立つから.)

リスト22 [目次]に戻るリンク
<a href="#mozToc" class="TOCBackLink">[目次]に戻る</a>

6.1.2 JavaScriptで目次作成

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

6.2 ナビゲーションの工夫

サイトを作成すると,グローバルナビゲーションのメニューを作りたくなると思います.それも含めて,「最終課題」サイトの「レイアウト例」を元に,ページ内のコンテンツ配置(レイアウト)の方法や,ユーザのナビゲーションを助ける仕組みをいくつか解説します.

6.2.1 文書の構造をレイアウトする

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

リスト24 HTML5文書の基本構造例(flexbox版)
HTML5文書の基本構造例 on jsbin.com

6.2.2 ヘッダー部

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

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

リスト26 ロゴ画像
<a href="index.html"><img src="data/UnivWeb.gif" alt="簡単ユニバーサルウェブ"></a>

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

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

リスト27b メニューの作り方(flexbox版)

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

リスト27c ヘッダーの例

6.2.3 そのほかのナビゲーションの工夫

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

『HTML5+CSS3の新しい教科書』の「Lesson8 ナビゲーションを作る」には,パンくずリストの作り方も含めて詳しく説明してありますので是非参考にしてください.

6.2.4 検索

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

TWCU内検索:
リスト28a GoogleのProgrammable Search Engineの利用例(渡辺のアカウントに紐付いているので授業外での利用禁止)
<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ドメインに限定した検索機能を提供できます.(つまり,学生ごととかサイトごとではなく,大学全体が検索対象になる.)

 

グーグル検索

|

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

リスト28b Googleを利用したドメイン内検索のHTML
<!-- 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 -->

6.2.5 タブ表示

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

7. JavaScript

JavaScriptの起源は,ウェブページの処理能力を高めるためにNetscape社が開発したScript言語です.その後,いくつかの段階を経て,ヨーロッパの標準機関ECMAがJavascript 1.1をベースに,ECMAScriptとして標準化しました.今ではAjaxで代表されるWeb 2.0やWebアプリケーション(例:GmailやGoogle Map)を支える技術として,ほとんどの商用サイトや凝った個人サイトなどで使用されています.スマホのアプリケーションも,HTML5+CSS3+JavaScriptで動いているものが多いです.JavaScriptとJavaは直接関係ありませんが文法はよく似ているので,Javaを習ったことがある人なら理解しやすいと思います.

JavaScriptは,単なるScript言語ではなく,マウスがクリックされたとかボタンを押したとかのイベントを拾ったり,ウェブページの DOM(Document Object Model)を操作してダイナミックにページを書き換えたりすることもできます.

コンテンツの構造をHTMLでマークアップし,コンテンツの表現をCSSで指定していれば,JavasScriptで動的にあるいはスマートにHTMLとCSSを変更することができます(つまり,ユーザの操作によって或いは自動的に,コンテンツを書き換えたり表示スタイルを変更したりできます.).豊かなインターラクションを提供するためのライブラリ(よく使う機能をまとめたプログラムの集まり)のひとつがjQueryです.

7.1 JavaScriptの例

JavaScriptのとっても簡単な例として,マウスをかざすと大きくなるリンクを作ってみました.onmouseoverというイベントを拾って,リンク領域にマウスをかざす(MouseOver)と,この要素(this)のスタイル(style)のフォントサイズ(fontSize)をとても大きくする(xx-large)指示が書いてあります.そして,マウスがはずれる(OnMouseOut)とフォントサイズを元に戻して(medium)います.

JavaScript実習

リスト11 マウスをかざすと大きくなるリンクのHTMLソース
<a href="略" onmouseover="this.style.fontSize='xx-large'" onmouseout="this.style.fontSize='medium'">JavaScript実習</a>

7.2 JavaScriptライブラリの利用

jQueryに代表されるJavaScriptのライブラリを使うと,目次やタブパネルなどのナビゲーションに役立つ機能をはじめとして,写真を表示する際に有効な機能など,ユーザビリティを画期的に向上させるインターラクティブなサイトを構築することができます.

7.2.1 jQueryを使ったタブパネル表示

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

リスト31 タブパネルのHTMLソース例
<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"に置き換えればよい.)

7.2.2 jQueryを使った目次作成

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

  1. 下記ファイルを,HTMLファイルの下に作成したjsフォルダーにダウンロード.
  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要素の中に入れる.