いよいよ、初めてのカスタムエレメント作りに挑戦します。
前回開発の準備をした<my-signboard>タグを作製する過程を紹介します。<my-signboard>タグは観光地などでよく見る以下のような案内看板の(かなりシンプルな)イラストを提供します。
上高地で撮った上記写真を見ると、案内看板には、
- 場所の名前（日本語）
- 場所の名前（英語）
- 距離
- 建造物区分
が記されていることがわかります。これまでのウェブページ作成方法では、これらの情報は<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をクリックして開きます。
初期状態でいろいろ書いてありますが、今回はほとんど使わないため、とりあえず、すべて消してしましましょう。そして、以下のコードをコピーして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...」をクリックします。
ポップアップウィンドウが開きフォルダ名を聞かれるので、「my-signboard」と入力して「CREATE」をクリックします。
続いてコンポーネント用のファイルをつくります。いま作った「my-signboard」フォルダを右クリックして、表示されるメニューから「New File...」をクリックします。
ポップアップウィンドウが開きファイル名を聞かれるので、「my-signboard.html」と入力して「CREATE」をクリックします。
これで、「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」をクリックしてください。
Chromeのタブが開き、ウィンドウに以下のような案内板が表示されたら大成功です。<my-signboard>タグでは文字の色や大きさ、看板の色などのstyle情報を一切書いていないのに、しっかり看板らしく表示できるという点がポイントです。
お疲れ様でした^^v
おまけ課題
課題
「河童橋」の看板の下に「大正池」の看板を表示してください。「大正池」の情報は以下の写真を参考にしてください。
課題の答え
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>
一度コンポーネントを作ってしまえば、後は大量に看板を生産できますね！
