SHOEISHA iD

※旧SEメンバーシップ会員の方は、同じ登録情報(メールアドレス&パスワード)でログインいただけます

CodeZine編集部では、現場で活躍するデベロッパーをスターにするためのカンファレンス「Developers Summit」や、エンジニアの生きざまをブーストするためのイベント「Developers Boost」など、さまざまなカンファレンスを企画・運営しています。

japan.internet.com翻訳記事

ASP.NETによるインクリメンタルナビゲーションの実装

フレームワーク「Theseus」を使用したWebサイトへの実装手順

  • X ポスト
  • このエントリーをはてなブックマークに追加

ダウンロード ソースコード (310.6 KB)

 インターネットが高速になり、画面の解像度も上がった現在、開発者は新しいスタイルのナビゲーションを導入できます。この記事では、新しいナビゲーションの1つである「インクリメンタルナビゲーション」の概要や、フレームワーク「Theseus」を使用したWebサイトへの実装手順を説明します。

  • X ポスト
  • このエントリーをはてなブックマークに追加

はじめに

 Webサイトのナビゲーションに関しては、以前から、目的ページを開くのに必要なクリック回数を少なくすることが重視されてきました。けれどもそれは、ナビゲーションの本来の目的、つまり「簡単に分かりやすく情報を見つけられる」ということに結びつくとは限りません。また、Webサイトが大きくなるにつれ、ドロップダウンメニューやツリービューなどの従来のナビゲーション制御は、実用的ではなくなってきます。インターネットが高速になり、画面の解像度も上がった現在、開発者は新しいスタイルのナビゲーションを導入できます。

 この記事では、新しいスタイルのナビゲーションの1つである「インクリメンタルナビゲーション」を取り上げます。このナビゲーションを実装するため、私はカスタマイズ可能なフレームワーク「Theseus」を作成しました。Theseusは、内部的にはASP.NETのSiteMapクラスと構成済みサイトマッププロバイダを使って、インクリメンタルナビゲーションを実装します。このフレームワークは記事の冒頭のリンクからダウンロードできます。

 まずは、インクリメンタルナビゲーションの概要を説明し、次にTheseusを使ったWebサイトへの実装手順を説明します。では、早速始めましょう。

インクリメンタルナビゲーションの利点

 最近のWebサイトではインクリメンタルナビゲーションを使っているものが増えています。この方式のナビゲーションでは、ユーザーは情報を求めていくつかの軽いページをクリックしていくことになります。クリックするたびに、小規模ながらすぐに見て分かる変化がナビゲーションユーザーインターフェース上に現れます。従来のドロップダウンメニューと異なり、クリック後に選べる項目は情報階層の次のレベルに限られます。また、階層構造における「現在位置情報」(パンくずリストなど)も明示されます。これは、現在のノードにたどり着くまでに通ってきた経路のことです。現在位置情報が示されていると、そこへ来るまでの道筋が分かり、それを逆に戻ることもできます。これは人間の思考の流れと同じなので、ユーザーにとって直観的で分かりやすいものに感じられます。これによって、要求ごとにレンダリングされるマークアップも少なくなります。

 これに対し、ドロップダウンメニューでは、ユーザーは事前にはわからない階層構造を意識することを強いられます。またドロップダウンメニューでは、利用可能な選択肢が常に表示される状態にあり、レンダリングされるマークアップが大きい割に、現在位置情報はほとんど表示されません。その結果、情報の階層構造が多重化されればされるほど、ユーザーにとってストレスとなり、どんどん分かりにくくなります。ユーザーにそんな負担をかけるわけにはいきません。

インクリメンタルナビゲーションの実例

 実際に使われているインクリメンタルナビゲーションの例として、The Encephalitis Society(脳炎協会)のWebサイトを見てみましょう。このサイトでは、何百ページもの情報を最大5層の階層に分類しています。サイトの訪問者は、脳炎(脳に大きな疾患をもたらす病気)の患者から医療関係者までさまざまです。そのため、整然として分かりやすいナビゲーションがこのWebサイトの使いやすさの要となります。

 このWebサイトのナビゲーションは、主に次の3つの要素で構成されています。

  • サイトタブ
  • セクションメニュー
  • サイドメニュー

 この3つの要素を次の画面図に示します。

ナビゲーションシステムの構造
ナビゲーションシステムの構造

 サイトタブは、ページ上部に並ぶ[Home]、[Information]、[The Society]などのタブです。サイトタブを選択すると、そのタブに対応する初期ページが表示されます。また、選択したサイトタブが強調表示され、セクションメニューに下位要素が表示されます。次の画面図は、[Information]タブを選択した後のナビゲーションUIを示しています。[Information]タブが選択されていることは、サイトタブの背景色と前景色の違いで分かります。

サイトタブの選択
サイトタブの選択

 ここからさらに下位のページに移動するには、セクションメニュー内のリンク([The Illness]、[Recovery and Rehabilitation]など)をクリックします。セクションメニュー内のリンクをクリックすると、新しいページが表示され、選択したリンクの文字が太字になります(次の画面図を参照)。また、選択したセクションメニュー項目の下位要素がサイドメニューに表示されます。

セクションメニューの項目の選択
セクションメニューの項目の選択

 サイドメニューには、選択したセクションメニュー項目に含まれる、残りのすべてのサイトマップノードが表示されます。次の画面図は、サイドメニューの[What is Encephalitis]を展開してその下位項目[Causes of Encephalitis]をクリックした状態です。これによって、脳炎の原因に関するページが表示されています。ナビゲーションUIで現在位置情報がはっきり分かる点に注目してください。文字の色と太字書式から、現在[Causes of Encephalitis]ページを表示中であること、このページの上位要素が[What is Encephalitis]であり、その上位要素は[The Illness]、その上が[Information]セクションであることが、はっきりと分かります。

サイドメニューから選択したページ
サイドメニューから選択したページ

 インクリメンタルナビゲーションを使用すると、パンくずリストコントロール(ASP.NETのSiteMapPathコントロール)を使う必要がなくなります。現在位置情報が分かりやすい形で示されていて、そのページに到達する経路がはっきり分かるからです。ユーザーは階層構造を意識しなくても、直観的に簡単にサイト内を移動できます。

 先に進む前に、The Encephalitis SocietyのWebサイトにアクセスし、このナビゲーションシステムの使いやすさを実感してみてください。見た目からはわからないかもしれませんが、このThe Encephalitis SocietyのWebサイトは、ASP.NETのサイトマップシステムとナビゲーション用Webコントロール群を使用しています。このサイトのナビゲーション構造は、Web.sitemapファイルに定義されています。サイトタブとセクションメニューはASP.NETのMenuコントロールで、サイドメニューはASP.NETのTreeViewコントロールで実装されています。

次のページ
インクリメンタルナビゲーションフレームワークの構築

この記事は参考になりましたか?

  • X ポスト
  • このエントリーをはてなブックマークに追加
japan.internet.com翻訳記事連載記事一覧

もっと読む

この記事の著者

japan.internet.com(ジャパンインターネットコム)

japan.internet.com は、1999年9月にオープンした、日本初のネットビジネス専門ニュースサイト。月間2億以上のページビューを誇る米国 Jupitermedia Corporation (Nasdaq: JUPM) のニュースサイト internet.comEarthWeb.com からの最新記事を日本語に翻訳して掲載するとともに、日本独自のネットビジネス関連記事やレポートを配信。

※プロフィールは、執筆時点、または直近の記事の寄稿時点での内容です

Andrew Wrigley(Andrew Wrigley)

※プロフィールは、執筆時点、または直近の記事の寄稿時点での内容です

この記事は参考になりましたか?

この記事をシェア

  • X ポスト
  • このエントリーをはてなブックマークに追加
CodeZine(コードジン)
https://codezine.jp/article/detail/4175 2009/08/06 14:00

おすすめ

アクセスランキング

アクセスランキング

イベント

CodeZine編集部では、現場で活躍するデベロッパーをスターにするためのカンファレンス「Developers Summit」や、エンジニアの生きざまをブーストするためのイベント「Developers Boost」など、さまざまなカンファレンスを企画・運営しています。

新規会員登録無料のご案内

  • ・全ての過去記事が閲覧できます
  • ・会員限定メルマガを受信できます

メールバックナンバー

アクセスランキング

アクセスランキング