Navigating your site

モバイルサイトには通常、サイトのナビゲーションメニューを設けます。こうしたメニューにはさまざまな形式があります。このチュートリアルでは、AMP ページでのナビゲーションの表示について、以下のような例を試してみましょう。

ホームページに戻るリンク: 最も簡単な方法
ナビゲーションのサイドバー: amp-sidebar コンポーネントを使用

ホームに戻るリンク

ユーザーがウェブサイトの通常のナビゲーションオプションにアクセスできるようにするには、ホームページにユーザーを戻すのが最も簡単です。

<header> タグをリンクを含めた以下のバージョンに置き換える方法を試します。

<header class="headerbar">
  <a href="homepage.html">
    <amp-img
      class="home-button"
      src="icons/home.png"
      width="36"
      height="36"
    ></amp-img>
  </a>
  <div class="site-name">News Site</div>
</header>

以下のスタイルルールをインライン CSS に追加します。

.home-button {
  margin-top: 8px;
}
.headerbar {
  height: 50px;
  position: fixed;
  z-index: 999;
  top: 0;
  width: 100%;
  display: flex;
  align-items: center;
}
.site-name {
  margin: auto;
}
article {
  margin-top: 50px;
}

ここでページを更新します。ページの左上に homepage.html を指すリンクが表示されます。このホームアイコンをクリックしても、どこにも移動しないことがすぐにわかります（homepage.html ファイルがないからです）。

ホームアイコンのナビゲーション

このリンクをウェブサイトのホームページの URL に置き換えると、ユーザーが既存のウェブサイトのナビゲーションを使ってサイトの別の場所に移動できます。

これは既存のウェブサイトのナビゲーションを活用する最も簡単な方法です。では次に、サイトのナビゲーションとして一般的な方法を試しましょう。

サイドバーでの移動

ナビゲーションの一般的な方法は、メニューアイコンを追加して、クリックするとナビゲーションのリンク一式が（ページの横に）表示されるようにすることです。AMP では、こうしたナビゲーションを amp-sidebar コンポーネントを使って作成できます。

まず、amp-sidebar コンポーネントの JavaScript を <head> タグに追加します。

<script
  async
  custom-element="amp-sidebar"
  src="https://cdn.ampproject.org/v0/amp-sidebar-0.1.js"
></script>

次に、メニューアイコンが表示されるようにします。このアイコンがタップされると、サイドバーが開きます。<header> を次のコードに置き換えて、ホームアイコンの代わりに "ハンバーガー" アイコンを表示します。

<header class="headerbar">
  <div role="button" on="tap:sidebar1.toggle" tabindex="0" class="hamburger">
    ☰
  </div>
  <div class="site-name">News Site</div>
</header>

上記のコードではサイドバーを toggle（切り替える）のに、amp-sidebar 要素の on アクション属性を使用しています。サイドバー要素は sidebar1 ID で識別されます。では、サイドバーを追加しましょう。

以下の HTML を </header> のすぐ後に追加します。

<amp-sidebar id="sidebar1" layout="nodisplay" side="left">
  <div
    role="button"
    aria-label="close sidebar"
    on="tap:sidebar1.toggle"
    tabindex="0"
    class="close-sidebar"
  >
    ✕
  </div>
  <ul class="sidebar">
    <li><a href="#">Example 1</a></li>
    <li><a href="#">Example 2</a></li>
    <li><a href="#">Example 3</a></li>
  </ul>
</amp-sidebar>

サイドバーは非表示ですが、ユーザーがハンバーガーアイコンをタップすると、画面の左側にメニューが表示されます。メニューを閉じるには、X アイコンをタップします。

最後に、以下のスタイルルールをインライン CSS に追加します。

.hamburger {
  padding-left: 10px;
}
.sidebar {
  padding: 10px;
  margin: 0;
}
.sidebar > li {
  list-style: none;
  margin-bottom: 10px;
}
.sidebar a {
  text-decoration: none;
}
.close-sidebar {
  font-size: 1.5em;
  padding-left: 5px;
}

では、作成したサイドバーを確認しましょう。AMP ページを更新して再読み込みすると、次のように表示されます。

サイドバーメニューのナビゲーション

ページの見栄えがよくなりました。では、仕上げとしてカスタムフォントを追加しましょう。

前の章へ次の章へ