ロード

各コンポーネントのJavascriptファイルやHTMLファイルはブラウザにロードされる必要があります。ここでは、どうやってそれらのファイルをロードするのかを指定する方法について説明します。

コンポーネントのロード方法には、以下の方法があります。

• bm-autoload/bm-automorph属性を持つタグを記述する
• <script>タグでインポートする
• 設定ファイルの“molds”/“components”セクションに記述する
• プログラムから動的に追加する
• モーフィングする

これはサンプルコンポーネントで使用した方法です。カスタムタグの“bm-autoload”属性にJavascriptファイルへのURLを記述します。

<pad-hello bm-autoload="/pad-hello.js"></pad-hello>

するとBitsmistJSライブラリが、指定されたURLからファイルを自動的にダウンロードします。その後コンポーネントが初期化され、インターフェースのHTMLファイルがロードされて画面に表示されます。

bm-autoload属性の値にURLを指定しない場合は、デフォルトのパスとファイル名が使用されます。

<pad-hello bm-autoload></pad-hello>

と指定された場合、デフォルトのパスは現在のパス（現在表示しているhtmlのパス）、デフォルトのファイル名はタグ名に拡張子をつけた“pad-hello.js”となります。例えばhttps://example.com/index.htmlを表示している場合、https://example.com/pad-hello.jsが読み込まれます。

通常のJavascriptのようにHTMLファイル内に<script>タグを記述してインポートします。

<script type='text/javascript' src='/bar-hello.js'></script>

上記の文でコンポーネントは読み込まれているため、カスタムタグではbm-autoload属性は不要です。

<pad-hello></pad-hello>

Webpack等を使用して、複数のコンポーネントを一つのファイルにバンドルする場合は、この方法でロードすることになります。

各コンポーネントの設定の“molds”/“components”セクションに追加するコンポーネントを記述することで、そのコンポーネントの子コンポーネントとして追加することができます。

{
    "components": {
        "PadSetting": {
            "loadings": {
                "rootNode": "#widgets"
            },
            "settings": {
                "name": "PadSetting"
            }
        }
    }
}

追加するコンポーネントは、親コンポーネント配下の“rootNode”で指定されたノードに、追加されます。

プログラムから動的にコンポーネントを追加することも可能です。その場合、2つの方法があります。

ドキュメントツリーにタグを追加します。ロードが必要な場合、必要な情報をタグ属性に指定しておく必要があります。また追加した後は、オートロードを開始するために、コンポーネントのloadTags()メソッドを実行してください。loadTags()の引数には、起点となるノードを指定します。

document.querySelector("#pads").insertAdjacentHTML("afterbegin", "<pad-filter bm-autoload bm-path='common'></pad-filter>");
document.querySelector("#pads").loadTags(document.querySelector("#pads"));

各コンポーネントが持っているaddComponent()メソッドを使用して、そのコンポーネントの子コンポーネントして追加することができます。addComponent()には設定内容を記述したオブジェクトを渡すことで、初期化できます。

document.querySelector("bm-router").addComponent("PadFilter", {
    "loadings": {
        "path":"common",
        "rootNode":"#pads"
    }
});

上記の例の場合、bm-routerコンポーネントの#padsノードに、PadFilterという子コンポーネントを追加しています。

独自のイベントハンドラなどを持たない単純なコンポーネントの場合、別のコンポーネントをもとに新しいコンポーネントを作成し、それを利用することができます。

bm-autoload属性にHTMLファイルへのURLを指定した場合、内部で自動的にComponentクラスを継承した新しいクラスを作成し、そのクラスをタグと紐付けます。

<pad-hello bm-autoload="/pad-hello.html"></pad-hello>

上記の例の場合、Componentクラスを継承したPadHelloクラスが作成され、pad-helloタグに紐づけられます。その後タグがインスタンス化され、Componentクラスの初期化が始まり、HTMLファイルがサーバーから読み込まれ、カスタムタグ内に表示されます。

デフォルトのパスとファイル名を利用する場合、bm-automorph属性を指定します。

<pad-hello bm-automorph></pad-hello>

デフォルトではComponentクラスを継承しますが、bm-automorph属性でスーパークラスを指定することもできます。

<pad-hello bm-automorph='MyComponent'></pad-hello>

なお、指定するクラスをロードする必要がある場合、bm-autoload属性を使ってロードする必要があります。

<pad-hello bm-autoload='https://example.com/mycomponent.js' bm-automorph='MyComponent'></pad-hello>

この場合、https://example.com/mycomponent.jsがロードされた後に、MyComponentクラスを継承したPadHelloクラスが作成され、タグに紐づけられます。

最初に読み込まれたHTMLファイル（例えばindex.html）内にあるロード対象コンポーネントは、DOMContentLoadedイベントでロードが開始されます。ロード対象コンポーネントは“bm-autoload”、または“bm-automorph”属性を持つタグです。

また読み込まれたコンポーネントのHTMLがノードにアタッチされた時に、そのコンポーネント内にロード対象コンポーネントがあれば、さらにそれらのファイルがロードされます。

サンプルとして作成したコンポーネントではファイルは全てルート直下に置きました。実際の運用では、コンポーネントを分類して特定のフォルダにまとめることになると思います。その場合、bm-autoload属性でURLを個別に指定するのではなく、デフォルトのパスをうまく使うことで、記述量を減らすことができます。ここではデフォルトのパスについて説明します。

デフォルトのパスは、以下の設定で指定できます。

• ベースURL （system.appBaseUrl/loadings.appBaseUrl）
• コンポーネントフォルダ （system.componentPath/loadings.componentPath）
• テンプレートフォルダ （system.templatePath/loadings.templatePath）
• パス （loadings.path/bm-path属性）

上記の要素を繋げたフォルダからファイルがダウンロードされます。いずれも初期値は““（空文字列）です。例として以下のように設定したとします。

ヘッダーコンポーネント”bar-header”が以下のようにHTMLファイルに指定してあった場合、

<bar-header bm-autoload bm-path="common"></bar-header>

コンポーネントはhttps://example.com/components/common/bar-header.jsから読み込まれ、テンプレートHTMLファイルはhttps://example.com/templates/common/bar-header.htmlから読み込まれます。

デフォルトパスの指定はタグの属性、または設定で行います。設定には大きく分けると、全コンポーネントで共通のグローバル設定と、コンポーネント固有の設定があります。

ベースURL・コンポーネントパス・テンプレートパスは、基本的にはグローバル設定で行います。

BITSMIST.v1.settings.merge({
    "system": {
        "appBaseUrl":"https://example.com",
        "componentPath":"components",
        "templatePath":"templates",
    },
});

上記の内容を、例えば“settings.js”という名前で保存し、HTMLのスクリプトファイルで読み込みます。

<script type='text/javascript' src='/settings.js'></script>

パスはそれぞれのコンポーネントの属性で設定します。

<bar-header bm-autoload bm-path="common"></bar-header>

“molds”/“components”セクションを使って追加、またはコードから動的に追加する場合は、セクション内のコンポーネントの設定に記述することもできます。

{
    "components": {
        "PadSetting": {
            "loadings": {
            　　　　  "appBaseUrl": "https://util.example.com/",
            　　　　  "componentPath": "",
            　　　　  "templatePath": "",
            　　　　  "path": "widgets"
            },
            "settings": {
            　　　　  "name": "PadSetting"
            }
        }
    }
}

この方式でロードする場合、ベースURL・コンポーネントパス・テンプレートパスは、各コンポーネント固有の設定でも行うことができます。この場合、 システム設定は無視されコンポーネントの設定が使用されます。つまりコンポーネントはhttps://util.example.com/widgets/からロードされます。

bm-autoload属性でURLを指定しない場合、デフォルトのファイル名が使用されます。デフォルトではタグ名がファイル名となりますが、設定で変更することが可能です。

ファイル名は、bm-filename属性または設定の“loadings.fileName”で変更可能です。ここで指定したファイル名に拡張子“.html”または“.js”を付加したものが、ロードするファイル名となります。

ファイル名はそれぞれのタグの属性で指定します。拡張子は不要です。

<bar-header bm-autoload bm-filename="header"></bar-header>

“molds”/“components”セクションを使って追加、またはコードから動的に追加する場合は、セクション内のコンポーネントの設定に記述することもできます。

{
    "components": {
        "BarHeader": {
            "loadings": {
                "fileName": "header"
            },
            "settings": {
                "name": "BarHeader"
            }
        }
    }
}

bm-autoload属性にURLを指定した場合、その値に応じて“loadings.appBaseUrl”, “loadings.componentPath”, “loadings.path”, “loadings.fileName”の設定が自動的にセットされます。またURLにHTMLを指定した場合は, さらに“loadings.autoMorph”がTrueに設定されます。

例としてbm-autoloadにhttps://example.com/component/transactions/pad-main.jsと指定された場合、各設定が以下のようにセットされます。

そのため、テンプレートHTMLはhttps://example.com/component/transactions/pad-main.htmlが読み込まれます。