ロード
概要
各コンポーネントのJavascriptファイルやHTMLファイルはブラウザにロードされる必要があります。ここでは、どうやってそれらのファイルをロードするのかを指定する方法について説明します。
ロード方法
コンポーネントのロード方法には、以下の方法があります。
- bm-autoload/bm-automorph属性を持つタグを記述する
- <script>タグでインポートする
- 設定ファイルの“molds”/“components”セクションに記述する
- プログラムから動的に追加する
- モーフィングする
bm-autoload属性を持つタグを記述する
ファイル名を指定する
これはサンプルコンポーネントで使用した方法です。カスタムタグの“bm-autoload”属性にJavascriptファイルへのURLを記述します。
<pad-hello bm-autoload="/pad-hello.js"></pad-hello>
するとBitsmistJSライブラリが、指定されたURLからファイルを自動的にダウンロードします。その後コンポーネントが初期化され、インターフェースのHTMLファイルがロードされて画面に表示されます。
この例では相対パスを使っていますが、絶対パスでも構いません。ただし、XMLHttpRequestを使用して取得しているため、絶対パスを使って別のオリジンからロードする場合は、サーバー側でAccess-Control-Allow-Originヘッダーを付加する必要があります。
ファイル名を指定しない
bm-autoload属性の値にURLを指定しない場合は、デフォルトのパスとファイル名が使用されます。
<pad-hello bm-autoload></pad-hello>
と指定された場合、デフォルトのパスは現在のパス(現在表示しているhtmlのパス)、デフォルトのファイル名はタグ名に拡張子をつけた“pad-hello.js”となります。例えばhttps://example.com/index.htmlを表示している場合、https://example.com/pad-hello.jsが読み込まれます。
デフォルトのパスとファイルは設定で変更することが可能です。
<script>タグでインポートする
通常のJavascriptのようにHTMLファイル内に<script>タグを記述してインポートします。
<script type='text/javascript' src='/bar-hello.js'></script>
上記の文でコンポーネントは読み込まれているため、カスタムタグではbm-autoload属性は不要です。
<pad-hello></pad-hello>
Webpack等を使用して、複数のコンポーネントを一つのファイルにバンドルする場合は、この方法でロードすることになります。
HTMLのみのコンポーネントの場合、このロード方法は使用できません。
設定ファイルの“molds”/“components”セクションに記述する
各コンポーネントの設定の“molds”/“components”セクションに追加するコンポーネントを記述することで、そのコンポーネントの子コンポーネントとして追加することができます。
{ "components": { "PadSetting": { "loadings": { "rootNode": "#widgets" }, "settings": { "name": "PadSetting" } } } }
追加するコンポーネントは、親コンポーネント配下の“rootNode”で指定されたノードに、追加されます。
“molds”/“components”セクションはLoaderOrganizerによって、操作されます。設定の記述方法、2つのセクションの違いなど、詳細については以下を参照ください。
プログラムから動的に追加する
プログラムから動的にコンポーネントを追加することも可能です。その場合、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()メソッドを使用して、そのコンポーネントの子コンポーネントして追加することができます。addComponent()には設定内容を記述したオブジェクトを渡すことで、初期化できます。
document.querySelector("bm-router").addComponent("PadFilter", { "loadings": { "path":"common", "rootNode":"#pads" } });
上記の例の場合、bm-routerコンポーネントの#padsノードに、PadFilterという子コンポーネントを追加しています。
addComponent()メソッドはLoaderOrganizerによって提供されます。
モーフィングする
独自のイベントハンドラなどを持たない単純なコンポーネントの場合、別のコンポーネントをもとに新しいコンポーネントを作成し、それを利用することができます。
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属性)
ベースURL・コンポーネントパス・テンプレートパスは、システム設定・各コンポーネント固有の設定の両方で行うことができます。システム設定、コンポーネント設定の両方に同じ指定がある場合は、各コンポーネントの設定が優先されます。これを利用して、特定のコンポーネントだけシステム全体とは違うURLをベースとすることができます。
上記の要素を繋げたフォルダからファイルがダウンロードされます。いずれも初期値は““(空文字列)です。例として以下のように設定したとします。
設定 | 値 |
---|---|
ベースURL | https://example.com |
コンポーネントフォルダ | components |
テンプレートフォルダ | templates |
ヘッダーコンポーネント”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" } } } }
URL指定時の設定の上書き
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と指定された場合、各設定が以下のようにセットされます。
設定 | 値 |
---|---|
loadings.appBaseUrl | ““(空文字列) |
loadings.componentPath | ”“(空文字列) |
loadings.templatePath | ”“(空文字列) |
loadings.path | https://example.com/component/transactions |
loadings.fileName | pad-main |
そのため、テンプレートHTMLはhttps://example.com/component/transactions/pad-main.htmlが読み込まれます。