======サンプルユニットを作る====== =====概要===== 詳細な説明に入る前に実際のユニットがどのようになっているのか、簡単なユニットを作成して雰囲気を見てみましょう。ここではボタンを押すと挨拶をするユニットを作ります。タイトルの下にボタンが一つあり、そのボタンを押すと"Hello, World!"と挨拶するユニットです。 [[#完全なソース|全ソース]]は最後にあります。とてもシンプルなので、経験を積んだプログラマーの方なら最初に目を通しておくと、より早く理解ができるかもしれません。以下の流れでユニットを作成していきます。 - ユニットの名称を決める - ユニットのHTML/CSSファイルを作成する - ユニットのJSファイルを作成する - 設定を記述する - イベントハンドラを作成する - ユニットを表示するHTMLファイルを作成する - サーバに配置する =====1. ユニットの名称を決める===== ユニットを作るにあたって、まずユニットに必要な様々なものの名称を決めていきます。BitsmistJSのユニットは通常、以下のファイルが必要となります。 * ユニットの動作を記述するJavascriptファイル * 画面を定義するHTML/CSSファイルただし、ユニットによっては複数のHTMLファイルを切り替えて使ったり、画面が全くないものもあります。通常は独立したCSSファイルを用意しますが、HTMLファイルの中にCSSを記述してまとめることも可能です。また、動作が必要ないユニットはJavascriptファイルがなく、HTMLファイルのみとなります。名称を決める必要があるのは次の3つです。 * タグ名 * クラス名 * ファイル名ただし通常はタグ名を決めれば、後はデフォルトの名称を使えます。 ==== タグ名 ==== BitsmistJSでは、ユニットは全て標準技術であるWeb Componentsのカスタムエレメントを使って作成されるため、そのルールに従う必要があります。それぞれのユニットには独自のタグが必要となります。タグ名には必ずハイフンが一つ必要です。ルールについては、以下のページなどを参考にしてください。 * [[https://developer.mozilla.org/ja/docs/Web/Web_Components/Using_custom_elements | カスタム要素の使用 | MDN Web Docs]] 今回は"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"とします。 =====2. ユニットのHTML/CSSファイルを作成する===== 表示されるユニットの画面のHTMLファイルを作成します。タイトルの下に、ボタンが一つある画面です。


Hello, World!

HTMLのファイル名は先ほど決めた通り"pad-hello.html"です。ファイルには今回作成するタグの**中身のみ**を記述します。このHTMLファイルがタグの中に差し込まれます。次にCSSファイルを作成します。タイトルを青い文字で表示します。ファイル名は"pad-hello.css"です。


pad-hello {
    color: blue;
    display: block;
    text-align: center;
}

===== 3. ユニットのJSファイルを作成する ===== ユニットが何らかの動作をする場合、その動作を記述したクラスを定義したJavascriptファイルが必要になります。クラスはBitmistJSのベースユニットを継承する必要があります。 ====ベースとなるユニットを継承する==== BitmistJSではベースとなるユニットを継承し、カスタムコンポーネントを作成していきます。現在のところBitsmistJS Coreライブラリは"Unit"という名前のベースユニットのみを提供しています。 ====クラスを定義する==== 継承元のユニットはBITSMIST.V1グローバルオブジェクトの中に存在するので、実際に継承するときは以下のようになります。


class PadHello extends BITSMIST.V1.Unit
{
}

ファイル名は"pad-hello.js"です。 =====4. 設定を記述する===== 次にこのユニットの設定を先ほどと同じ"pad-hello.js"に記述します。設定は_getSettings()関数をオーバーライドして、設定内容のオブジェクトをリターンします。他の記述方法もあります。 * [[ja:bitsmist-js-core:unit:settings#設定の読込|ユニットの解説 - 設定 - 設定の読込]]


class PadHello extends BITSMIST.V1.Unit
{
    _getSettings()
    {
        return {
            "event": {
                "events": {
                    "btn-greet": {
                        "handlers": {
                            "click": "onBtnGreet_Click"
                        }
                    }
                }
            }
        };
    }
}

このユニット内にあるボタンをクリックした時に、どの関数を実行するかを指定する設定を"event.events"セクションに記述してあります。この記述方法の詳細については、[[ja:bitsmist-js-core:reference:perk:event-perk#設定|イベントパークのリファレンス]]をご覧ください。 =====5. イベントハンドラを作成する===== 次に"pad-hello.js"内にイベントハンドラを作成します。このユニットにはボタンが一個あり、そのボタンを押したときの動作を記述します。イベントハンドラ名は先ほどの設定に記述したとおり、"onBtnGreet_Click"としています。


class PadHello extends BITSMIST.V1.Unit
{
    ...省略...

    onBtnGreet_Click(sender, e, ex)
    {
        alert("Hello, World!");
    }
}

全てのイベントハンドラは同じシグニチャを持ちます。 * [[ja:bitsmist-js-core:unit:events#イベントハンドラの書き方|ユニットの解説 - イベント - イベントハンドラの書き方]] =====6. ユニットを表示するHTMLファイルを作成する===== 作成したユニットを表示するHTMLファイルを作成します。ファイル名は"sample.html"とします。



    ... 省略

今回作成したユニットのタグを配置しています。bm-autoloadタグの属性に、ユニットのJSファイルへのURLを記述します。このプロジェクトではすべてのファイルをルート直下におきます。 =====7. サーバに配置する===== 作成した4つのファイル、sample.html、pad-hello.js、pad-hello.html、pad-hello.cssを全てサーバ上のルート直下に配置します。今回は分かりやすさのために全てルート直下に配置していますが、自由に配置できます。 * [[ja:bitsmist-js-core:unit:loading|ユニットの解説 - ロード]] 配置が完了したら、実際にsample.htmlをブラウザで読み込み表示させます。ボタンを押すとメッセージが表示されるはずです。 =====完全なソース===== 今回作成した全ソースをまとめておきます。 BitsmisJS Sample

Hello Unit

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!"); } }