starter-kitには、アプリケーションのビューを構築するためのプレースホルダーページが含まれています。 しかし、ある時点で、おそらくより多くのページを追加したくなるでしょう。

本ステップでは、アプリケーションに新規ページすなわちトップレベルビューを追加するプロセスを順を追って説明していきます。

まず、新たなビューの内容をカプセル化する新しいCustom Elementを作成します。

  1. src/my-new-view.htmlという名前の新しいファイルを作成し、エディタで開きます。

  2. 足場(scaffolding)となるコードを追加します。これらは、Polymerを用いた新しいCustom Element定義のための足場となります:

    <!-- Load the Polymer.Element base class -->
    <link rel="import" href="../bower_components/polymer/polymer-element.html">
    
    <dom-module id="my-new-view">
      <!-- Defines the element's style and local DOM -->
      <template>
        <style>
          :host {
            display: block;
    
            padding: 16px;
          }
        </style>
    
        <h1>New view</h1>
      </template>
      <script>
        // Your new element extends the Polymer.Element base class
        class MyNewView extends Polymer.Element {
          static get is() { return 'my-new-view'; }
        }
        //Now, register your new custom element so the browser can use it
        customElements.define(MyNewView.is, MyNewView);
      </script>
    </dom-module>
    

現時点では、エレメントはただ「New view」と記載のある<h1>があるだけのベーシックな状態ですが、 後ほどのステップにおいて、もっと興味深いページにしていきます。

Custom Elementは定義されましたが、まだアプリケーションによって使用されていません。 エレメントを使用するためには、アプリケーション側のHTMLに追加する必要があります。

  1. テキストエディタでsrc/my-app.htmlを開きます。

  2. <iron-pages>エレメント内に既存ページ一式を見つける事ができます:

    <iron-pages
        selected="[[page]]"
        attr-for-selected="name"
        fallback-selection="view404"
        role="main">
      <my-view1 name="view1"></my-view1>
      <my-view2 name="view2"></my-view2>
      <my-view3 name="view3"></my-view3>
      <my-view404 name="view404"></my-view404>
    </iron-pages>
    

    <iron-pages>は、ルートと共に変化するpage変数にバインドされ、他のページを隠しながらアクティブなページを選択します。

  3. iron-pagesタグ内に新規ページエレメントを追加します:

    <my-new-view name="new-view"></my-new-view>
    

    <iron-pages>は次のようになります:

    <iron-pages
        selected="[[page]]"
        attr-for-selected="name"
        fallback-selection="view404"
        role="main">
      <my-view1 name="view1"></my-view1>
      <my-view2 name="view2"></my-view2>
      <my-view3 name="view3"></my-view3>
      <my-new-view name="new-view"></my-new-view>
      <my-view404 name="view404"></my-view404>
    </iron-pages>
    

    注:通常、新しいCustom Elementを追加する際は、コンポーネント定義の読み込みのため、HTML Import(訳注:)を追加したくなるかもしれません。しかしながら、本アプリケーションテンプレートは、ルートに基いたトップレベルのビューを、必要に応じて遅延ロードするように予めセットアップされています。よって、今回のケースでは、新しい<my-new-view>エレメントを使用するために、HTML Importを追加する必要はありません。

    アプリケーションテンプレートに付随する次のコードによって、ルートが変更された際に、各ページ定義が読みこまれていることが保証されます。ご覧のように、各ルート定義をインポートする際、アプリケーションは単純な規約('my-' + page + '.html')に従います。さらに複雑なルーティングと遅延ロードを処理したい場合は、このコードに手を加えて修正します。

    既存のテンプレートコード ー 既存コードのため追記不要

      _pageChanged(page) {
        // Load page import on demand. Show 404 page if fails
        var resolvedPageUrl = this.resolveUrl('my-' + page + '.html');
        Polymer.importHref(
            resolvedPageUrl,
            null,
            this._showPage404.bind(this),
            true);
      }
    

アプリケーション内に新しいエレメント定義と宣言を行いました。あとは、ユーザーが新規ページに移動できるように、ページ左部のドロワーナビゲーションメニューに項目を追加するだけです。

  1. src/my-app.htmlをエディタで開いたままにしておいてください。

  2. <app-drawer>エレメント内に、ナビゲーションメニューを見つけることができます。

      <!-- Drawer content -->
      <app-drawer id="drawer" slot="drawer">
        <app-toolbar>Menu</app-toolbar>
        <iron-selector selected="[[page]]" attr-for-selected="name" class="drawer-list" role="navigation">
          <a name="view1" href="/view1">View One</a>
          <a name="view2" href="/view2">View Two</a>
          <a name="view3" href="/view3">View Three</a>
        </iron-selector>
      </app-drawer>
    

    各ナビゲーションメニュー項目は、CSSでスタイリングされたアンカーエレメント(<a>)で構成されています。

  3. 次の新しいナビゲーション項目をメニューの下部に追加します。

    <a name="new-view" href="/new-view">New View</a>
    

    ナビゲーションメニューは次のようになります:

    ...
      <!-- Drawer content -->
      <app-drawer id="drawer" slot="drawer">
        <app-toolbar>Menu</app-toolbar>
        <iron-selector selected="[[page]]" attr-for-selected="name" class="drawer-list" role="navigation">
          <a name="view1" href="/view1">View One</a>
          <a name="view2" href="/view2">View Two</a>
          <a name="view3" href="/view3">View Three</a>
          <a name="new-view" href="/new-view">New View</a>
        </iron-selector>
      </app-drawer>
    ...
    

新規ページが完成しました!polymer serve --openコマンドを使って、アプリケーションをローカルサーバーで確認してみましょう。

Example new page

アプリケーションをWebにデプロイするにあたって、デプロイ用ファイルを準備するためにPolymer CLIを使用します。Polymer CLIは、例えば、遅延ロードされるビューのような、要求に応じてロードされることになるフラグメント(訳注:HTMLコードの断片)について把握しておく必要があります。

  1. polymer.jsonをテキストエディタで開きます。

  2. fragmentsのリストに、src/my-new-view.html を追加します。

    新しいリストは次のようになります:

    "fragments": [
      "src/my-view1.html",
      "src/my-view2.html",
      "src/my-view3.html",
      "src/my-new-view.html",
      "src/my-view404.html"
    ]
    

注:遅延ロードをさせたり、async属性を使って非同期でロードさせたりするファイルについては、fragments リストにファイル名を追加するだけで済みます。同期読み込みとなる<link rel = "import">タグを使用してインポートされたファイルは、fragments に追加しないでください。

アプリケーションに新規ページを追加しました。次のステップでは、すぐに使える既製のCustom Elementをインストールしアプリケーションに追加する方法を学びます。

次のページ: エレメントの追加