AMP

サイトのナビゲーション

モバイルサイトには通常、サイトのナビゲーション メニューを設けます。こうしたメニューにはさまざまな形式があります。このチュートリアルでは、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 {
  flex: 1;
  margin-left: -36px;
}
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 ページを更新して再読み込みします。次のように表示されます。

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

ページの見栄えがよくなりました。では、仕上げとしてフォントをカスタマイズします。