#daiizメモ

ときどきいいことを書きます

トップ > web-components > Web Components を学ぶ #4 「Chrome Dev Editor でPolymerコンポーネントをつくる」

Web Components を学ぶ #4 「Chrome Dev Editor でPolymerコンポーネントをつくる」

web-components Polymer chrome-dev-editor 作品 tech

いよいよ、初めてのカスタムエレメント作りに挑戦します。
前回開発の準備をした<my-signboard>タグを作製する過程を紹介します。<my-signboard>タグは観光地などでよく見る以下のような案内看板の(かなりシンプルな)イラストを提供します。

f:id:daiiz:20140829113619j:plain

上高地で撮った上記写真を見ると、案内看板には、

  • 場所の名前（日本語）
  • 場所の名前（英語）
  • 距離
  • 建造物区分

が記されていることがわかります。これまでのウェブページ作成方法では、これらの情報は<div>タグの中にその他のタグをネストさせながら、内部に直接記述していたと思います：

<style>
 　...
</style>
<div id="signboard">
  <center>
    <div id="top">河童橋 1.1km</div>
    <div id="bottom">Kappa-bashi Bridge</div>
  </center>
</div>

この記述方法には、ざっと以下のような問題点が考えられます。

  • idを見ないと<div>が何を表しているのかわからない。
  • "signboard"というidは同じHTMLファイル中で二度と使えない。
  • 実際に表示される４つの情報以外に興味はないのに、<div id="top">や<div id="bottom">などの内部構造を知らなくてはいけない。個人的には結構苦痛^^;
  • 「河童橋」の情報を「大正池」のものに変更する際に、間違えて変なところを変更してしまい、レイアウトがメチャクチャになるかもしれない。

そこで、Web Componentsの出番です！
これからつくる案内看板コンポーネント<my-signboard>を使えば、前述した<div id="signboard">...</div>は以下のように書くことができます。

<my-signboard ja="河童橋" en="Kappa-bashi" km=1.1 classname="Bridge">
</my-signboard>

先ほどはタグの内部に直接記述していた４つの案内情報を、ここではそれぞれタグの属性(attribute)として記述することができます。そしてタグの内部はカラッポっでOKなのです。タグの属性は以下の情報を保持しています。（念のため紹介します。）

  • ja：場所の名前（日本語）
  • en：場所の名前（英語）
  • km：距離
  • classname：建造物区分

つくりはじめます

作業中は「Ctrl + S」キーを押して適宜上書き保存してください。

index.htmlを編集しよう

Chrome Dev Editorの左パネルのファイルリストで、前回の記事で準備したindex.htmlをクリックして開きます。

f:id:daiiz:20140829112929p:plain

初期状態でいろいろ書いてありますが、今回はほとんど使わないため、とりあえず、すべて消してしましましょう。そして、以下のコードをコピーしてindex.htmlにペーストしてください。

<!doctype html>
<html>
  <head>
    <title>my-signboard</title>
    <script src="../platform/platform.js"></script>
    <!-- (1) -->
  </head>
  <body unresolved>
    <!-- (2) -->
  </body>
</html>

案内看板コンポーネント用のフォルダとファイルをつくろう

まずは、フォルダをつくります。エディタの左パネルの「▼ my-signboard」を右クリックして、表示されるメニューから「New Folder...」をクリックします。

f:id:daiiz:20140829112939p:plain

ポップアップウィンドウが開きフォルダ名を聞かれるので、「my-signboard」と入力して「CREATE」をクリックします。

f:id:daiiz:20140829112946p:plain


続いてコンポーネント用のファイルをつくります。いま作った「my-signboard」フォルダを右クリックして、表示されるメニューから「New File...」をクリックします。

f:id:daiiz:20140829112957p:plain

ポップアップウィンドウが開きファイル名を聞かれるので、「my-signboard.html」と入力して「CREATE」をクリックします。

f:id:daiiz:20140829113006p:plain

これで、「my-signboard」フォルダの中に「my-signboard.html」が生成されました。

my-signboard.htmlを編集しよう

エディタの左パネルのファイルリストで、「my-signboard.html」をクリックして開きます。何も記述されていないと思いますので、以下のコードをコピー／ペーストしてください。

<link rel="import" href="../bower_components/polymer/polymer.html">

<polymer-element name="my-signboard" attributes="ja en km classname">
  <template>
    <style>
      #signboard {
        width: 300px;
        background-color: #814022;
        color: #FFF;
        padding: 10px;
        margin: 20px;
        margin-bottom: 40px;
        font-family: Meiryo;
        border-radius: 4px;
        box-shadow: 0px 10px #5A281D;
      }
      #top {
        font-size: 30pt;
      }
      #bottom {
        font-size: 18pt;
        margin-top: -10px;
      }
    </style>
    <div id="signboard">
      <center>
        <div id="top">
          {{ja}} {{km}}km
        </div>
        <div id="bottom">
          {{en}} {{classname}}
        </div>
      </center>
    </div>
  </template>
  <script>
    Polymer("my-signboard", {});
  </script>
</polymer-element>

ソースコード中にはWeb Componentsのキーワードである<link rel="import"...>や<template>、またPolymerフレームワークで重要な役割を担うPolymer関数が見つかると思います。これらの挙動に関しては今後記事にする予定です。

ふたたび、index.htmlを編集しよう

これが最後のステップです。「index.html」を開いてください。最初のステップでペーストしたコードが表示されます。そのなかの<!-- (1) -->、<!-- (2) -->を以下のようにそれぞれ書き換えてください。

<!-- (1) -->↓
<link rel="import" href="my-signboard/my-signboard.html">
<!-- (2) -->↓
<my-signboard ja="河童橋" en="Kappa-bashi" km=1.1 classname="Bridge"></my-signboard>


最終的には、index.htmlは以下のようになっていると思います。かなりシンプルですね！

<!doctype html>

<html>
  <head>
    <title>my-signboard</title>

    <script src="../platform/platform.js"></script>
    <link rel="import" href="my-signboard/my-signboard.html">
  </head>

  <body unresolved>
      <my-signboard ja="河童橋" en="Kappa-bashi" km=1.1 classname="Bridge"></my-signboard>
  </body>
</html>

上書き保存して完成です。

表示しよう

エディタの左パネルのファイルリストで、「index.html」を右クリックして、メニューから「Run」をクリックしてください。

f:id:daiiz:20140829132816p:plain

Chromeのタブが開き、ウィンドウに以下のような案内板が表示されたら大成功です。<my-signboard>タグでは文字の色や大きさ、看板の色などのstyle情報を一切書いていないのに、しっかり看板らしく表示できるという点がポイントです。

f:id:daiiz:20140829113335p:plain

お疲れ様でした^^v

おまけ課題

課題

「河童橋」の看板の下に「大正池」の看板を表示してください。「大正池」の情報は以下の写真を参考にしてください。

f:id:daiiz:20140829130505j:plain

課題の答え

index.htmlの<body>タグの中身を以下のように書き換えて、「Run」します。

<my-signboard ja="河童橋" en="Kappa-bashi" km=1.1 classname="Bridge"></my-signboard>
<my-signboard ja="大正池" en="Taisho-ike" km=2.5 classname="Pond"></my-signboard>

f:id:daiiz:20140829130926p:plain

このように表示されたでしょうか

一度コンポーネントを作ってしまえば、後は大量に看板を生産できますね！