このチュートリアルでは、Polymer 2.0を使用してエレメントを作成する方法を学習します。シンプルなPolymer Elementであるトグルボタンを作成します。完成したボタンは次のようになります:

Sample star-shaped toggle buttons, showing pressed and unpressedstate

次のような簡単なマークアップでトグルボタンを使用することができます:

<icon-toggle></icon-toggle>

Polymerを扱う際のキーコンセプトの多くをこの課題で紹介します。

すべてを理解していなくても心配しないでください。ここに示す各コンセプトについては、Polymerのドキュメントで詳しく説明しています。

このチュートリアルに行うには、以下のものが必要です。

  1. このコマンドを実行してスタートコードをダウンロードします:

    git clone https://github.com/PolymerLabs/polymer-2-first-element.git
    
  2. プロジェクトのフォルダを開きます:

    cd polymer-2-first-element
    

    プロジェクトのフォルダは次のようになっているはずです:

    README.md
    bower.json
    demo/
    icon-toggle-finished/
    icon-toggle.html
    index.html
    

    メインのファイルはicon-toggle.htmlで、Custom Elementを定義しています。

デモをローカルで実行するためにPolymer CLIをインストールします。

Polymer CLIはNode.js、npm、git、Bowerを必要とします。詳細なインストール手順については、Polymer CLIのドキュメントを参照してください。

下記コマンドでPolymer CLIをインストールします:

npm install -g polymer-cli

To install the element's dependencies and run the demo:

  1. プロジェクトディレクトリで bower install を実行します:

    bower install
    

    これにより、Polymerライブラリやその他のWeb Componentsの使用に必要な、コンポーネントと依存しているパッケージがインストールされます。

    プロジェクトディレクトリに bower_components という名前のフォルダが追加されているのが確認できます:

    README.md
    bower.json
    bower_components
    demo/
    icon-toggle-finished/
    icon-toggle.html
    index.html
    
  2. Polymerの開発用サーバーをプロジェクトディレクトリから実行します:

    polymer serve --open
    

    icon-toggleが表示されるはずのところにテキストが表示されるのが確認できます。それはあまり面白く見えませんが、すべてが機能していることを示しています。

    (このURLには実際のディレクトリ名ではなく、このエレメントの bower.json にリストされているコンポーネント名である icon-toggle が含まれていることに注意しましょう。なぜ polymer serve がこれを行うのか疑問に思うなら、HTMLのインポートと依存関係の管理を参照してください。)

Initial state of the demo. The demo
shows three icon-toggle elements, two labeled 'statically-configured icon toggles' and one labeled
'data-bound icon toggle'. Since the icon toggles are not implemented yet, they appear as
placeholder text reading 'Not much here yet'.

もしすべてうまく行っていたら、step 2へ進みます.

Step 2: ローカルDOMの追加