詳細な説明に入る前に実際のユニットがどのようになっているのか、簡単なユニットを作成して雰囲気を見てみましょう。ここではボタンを押すと挨拶をするユニットを作ります。タイトルの下にボタンが一つあり、そのボタンを押すと“Hello, World!”と挨拶するユニットです。
全ソースは最後にあります。とてもシンプルなので、経験を積んだプログラマーの方なら最初に目を通しておくと、より早く理解ができるかもしれません。
以下の流れでユニットを作成していきます。
ユニットを作るにあたって、まずユニットに必要な様々なものの名称を決めていきます。BitsmistJSのユニットは通常、以下のファイルが必要となります。
ただし、ユニットによっては複数のHTMLファイルを切り替えて使ったり、画面が全くないものもあります。通常は独立したCSSファイルを用意しますが、HTMLファイルの中にCSSを記述してまとめることも可能です。また、動作が必要ないユニットはJavascriptファイルがなく、HTMLファイルのみとなります。
名称を決める必要があるのは次の3つです。
ただし通常はタグ名を決めれば、後はデフォルトの名称を使えます。
BitsmistJSでは、ユニットは全て標準技術であるWeb Componentsのカスタムエレメントを使って作成されるため、そのルールに従う必要があります。それぞれのユニットには独自のタグが必要となります。タグ名には必ずハイフンが一つ必要です。
ルールについては、以下のページなどを参考にしてください。
今回は“pad-hello”というタグにします。
ユニットに動作(イベントハンドラ)が必要な場合、クラスを定義して作成する必要があります。BitsmistJSではタグ名のハイフンを取り除き、それぞれの単語の先頭を大文字にしたものをデフォルトのクラス名としています。今回の場合は“PadHello”という名前になります。
動作が必要ない場合Javascriptファイルは不要ですが、内部では自動的にタグ名を元にクラスを生成し処理しています。
BitsmistJSのデフォルトではタグ名に拡張子“.js”をつけたものをJavacriptのファイル名、“.html”をつけたものをHTMLファイル、“.css”をつけたものをCSSファイルのファイル名としています。
今回は1つのJavascript、1つのHTMLファイル、1つのCSSファイルからなるユニットを作るので、ファイル名をそれぞれ“pad-hello.js”、“pad-hello.html”、“pad-hello.css”とします。
表示されるユニットの画面のHTMLファイルを作成します。タイトルの下に、ボタンが一つある画面です。
<h1>Hello, World!</h1> <button id="btn-greet">Greet</button>
HTMLのファイル名は先ほど決めた通り“pad-hello.html”です。
ファイルには今回作成する<pad-hello>タグの中身のみを記述します。このHTMLファイルが<pad-hello>タグの中に差し込まれます。
次にCSSファイルを作成します。タイトルを青い文字で表示します。ファイル名は“pad-hello.css”です。
pad-hello { color: blue; display: block; text-align: center; }
ユニットが何らかの動作をする場合、その動作を記述したクラスを定義したJavascriptファイルが必要になります。クラスはBitmistJSのベースユニットを継承する必要があります。
BitmistJSではベースとなるユニットを継承し、カスタムコンポーネントを作成していきます。現在のところBitsmistJS Coreライブラリは“Unit”という名前のベースユニットのみを提供しています。
継承元のユニットはBITSMIST.V1グローバルオブジェクトの中に存在するので、実際に継承するときは以下のようになります。
class PadHello extends BITSMIST.V1.Unit { }
ファイル名は“pad-hello.js”です。
次にこのユニットの設定を先ほどと同じ“pad-hello.js”に記述します。設定は_getSettings()関数をオーバーライドして、設定内容のオブジェクトをリターンします。
他の記述方法もあります。
class PadHello extends BITSMIST.V1.Unit { _getSettings() { return { "event": { "events": { "btn-greet": { "handlers": { "click": "onBtnGreet_Click" } } } } }; } }
このユニット内にあるボタンをクリックした時に、どの関数を実行するかを指定する設定を“event.events”セクションに記述してあります。この記述方法の詳細については、イベントパークのリファレンスをご覧ください。
次に“pad-hello.js”内にイベントハンドラを作成します。このユニットにはボタンが一個あり、そのボタンを押したときの動作を記述します。イベントハンドラ名は先ほどの設定に記述したとおり、“onBtnGreet_Click”としています。
class PadHello extends BITSMIST.V1.Unit { ...省略... onBtnGreet_Click(sender, e, ex) { alert("Hello, World!"); } }
全てのイベントハンドラは同じシグニチャを持ちます。
作成したユニットを表示するHTMLファイルを作成します。ファイル名は“sample.html”とします。
<html> ... 省略 <body> <pad-hello bm-autoload="/pad-hello.js"></pad-hello> </body> </html>
今回作成したユニットのタグを配置しています。bm-autoloadタグの属性に、ユニットのJSファイルへのURLを記述します。このプロジェクトではすべてのファイルをルート直下におきます。
作成した4つのファイル、sample.html、pad-hello.js、pad-hello.html、pad-hello.cssを全てサーバ上のルート直下に配置します。
今回は分かりやすさのために全てルート直下に配置していますが、自由に配置できます。
配置が完了したら、実際にsample.htmlをブラウザで読み込み表示させます。ボタンを押すとメッセージが表示されるはずです。
今回作成した全ソースをまとめておきます。
<html> <head> <script type="text/javascript" src="https://cdn.jsdelivr.net/gh/bitsmist/bitsmist-js_v1@0.12.3/dist/bitsmist-js_v1.min.js"></script> <title>BitsmisJS Sample</title> </head> <body> <pad-hello bm-autoload="/pad-hello.js"></pad-hello> </body> </html>
<h1>Hello Unit</h1> <button id="btn-greet">Greet</button>
pad-hello { color: blue; display: block; text-align: center; }
class PadHello extends BITSMIST.v1.Unit { _getSettings() { return { "event": { "events": { "btn-greet": { "handlers": { "click": "onBtnGreet_Click" } } } } }; } onBtnGreet_Click(sender, e, ex) { alert("Hello, World!"); } }