======ロード====== =====概要===== 各ユニットのJavascriptファイルは、ブラウザにロードされる必要があります。ロード方法にはオートロードとマニュアルロードがあります。オートロードはユニットのタグの属性にbm-autoload属性を指定することで、自動的に必要なファイルをロードし、タグをインスタンス化します。マニュアルロードはscriptタグに明示的に必要なファイルを記述し、ユニットをロードします。前者は手軽なのですが、ロードするファイルがユニットごとにデフォルトでは3つ必要になります。後者の場合は、例えばWebpackなどを使うと、複数のユニットを一つにまとめることができます。ここでは、ユニットのロード方法について説明します。ここでは、ユニットの**クラスファイル**のロードについて説明します。設定、HTMLやCSSのロードについては以下をご覧ください。 * [[ja:bitsmist-js-core:unit:settings|ユニットの解説 - 設定]] * [[ja:bitsmist-js-core:unit:html|ユニットの解説 - HTML]] * [[ja:bitsmist-js-core:unit:css|ユニットの解説 - CSS]] =====ロード方法===== ユニットのロード方法には、以下の方法があります。 * bm-autoload属性を持つタグを記述する * 上記の文でユニットは読み込まれているため、カスタムタグではbm-autoload属性は不要です。

ただし、この方法でも、HTML/CSSファイルは必要な時に呼ばれるオートロード形式になります。HTML/CSSファイルも一緒にマニュアルでロードしたい場合は、Webpackなどを使用して、ファイルをまとめる必要があります。その場合は、複数のユニットを一つのファイルにまとめることも可能です。 HTMLのみのユニットの場合、このロード方法は使用できません。 ====設定の"unit.units"セクションに記述する==== 各ユニットの設定の"unit.units"セクションに、追加するユニットを記述することで、そのユニットの子ユニットとして追加することができます。オートロード、マニュアルロードのいずれも使うことができます。


{
    "unit": {
        "units": {
            "PadSetting": {
                "unit": {
                    "options": {
                        "parentNode": "#widgets"
                    }
                }
            }
        }
    }
}

追加するユニットは、親ユニット配下の"parentNode"で指定されたノードに、追加されます。 "unit"セクションはUnitPerkによって、操作されます。設定の記述方法については以下を参照ください。 * [[ja:bitsmist-js-core:reference:perk:unit-perk#設定|リファレンス - UnitPerk - 設定]] ====プログラムから動的に追加する==== プログラムから動的にユニットを追加することも可能です。その場合、2つの方法があります。どちらの方法でもオートロード、マニュアルロードのいずれも使うことができます。 ===タグを挿入する=== ドキュメントツリーにタグを追加します。既にロードされているユニットの場合、即座にインスタンス化されます。


this.insertAdjacentHTML("afterbegin", "");

ロードが必要な場合、必要な情報をタグ属性に指定し、追加した後に[[ja:bitsmist-js-core:reference:perk:unit-perk#materializeall|unit.materializeAll]]スペルを実行してください。ユニットがロードされて、インスタンス化されます。


this.insertAdjacentHTML("afterbegin", "");
this.use("spell", "unit.materializeAll");

===unit.materializeスペルを使う=== 各ユニットが持っている[[ja:bitsmist-js-core:reference:perk:unit-perk#materialize|unit.materialize]]スペルを使用して、そのユニットの子ユニットして追加することができます。materializeスペルに設定内容を記述したオブジェクトを渡すことで、初期化できます。


this.use("unit.materialize", "PadFilter", {
    "unit": {
        "options": {
            "path":"common",
            "parentNode":"#pads"
        }
    }
});

上記の例の場合、ユニットの#padsノードに、PadFilterという子ユニットを追加しています。 materializeAll/materializeスペルはUnitPerkによって提供されます。 * [[ja:bitsmist-js-core:reference:perk:unit-perk#materialize|リファレンス - UnitPerk - materialize]] * [[ja:bitsmist-js-core:reference:perk:unit-perk#materializeAll|リファレンス - UnitPerk - materializeAll]] ====モーフィングする==== 独自のイベントハンドラなどを持たない単純なユニットの場合、別のユニットをもとに新しいユニットを作成し、それを利用することができます。その際、表示するHTMLファイルを指定する方法と、デフォルトのファイルをロードする方法があります。 ===HTMLファイルを指定する=== bm-autoload属性にHTMLファイルへのURLを指定した場合、内部で自動的にUnitクラスを継承した新しいクラスを作成し、そのクラスをタグと紐付けます。

上記の例の場合、Unitクラスを継承したPadHelloクラスが作成され、pad-helloタグに紐づけられます。その後タグがインスタンス化され、Unitクラスの初期化が始まり、HTMLファイルとCSSファイルがサーバから読み込まれ、カスタムタグ内に表示されます。 ===デフォルトのファイルをロードする=== デフォルトのパスとファイル名を利用する場合、bm-automorph属性を指定します。

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

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

この場合、https://example.com/my-unit.jsがロードされた後に、MyUnitクラスを継承したPadHelloクラスが作成され、タグに紐づけられます。 =====ロードのタイミング===== 最初に読み込まれたHTMLファイル（例えばindex.html）内にあるロード対象ユニットは、DOMContentLoadedイベントでロードが開始されます。ロード対象ユニットは"bm-autoload"、または"bm-automorph"属性を持つタグです。また読み込まれたユニットのHTMLがノードにアタッチされた時に、そのユニット内にロード対象ユニットがあれば、さらにそれらのファイルがロードされます。 =====デフォルトのパス===== [[ja:bitsmist-js-core:general:sample|サンプルとして作成したユニット]]ではファイルは全てルート直下に置きました。実際の運用では、ユニットを分類して特定のフォルダにまとめることになると思います。その場合、bm-autoload属性でURLを個別に指定するのではなく、デフォルトのパスをうまく使うことで、記述量を減らすことができます。ここではデフォルトのパスについて説明します。 ====パスを決める設定==== デフォルトのパスは、以下の設定を元に決定されます。 * システムユニットパス（system.unit.options.path） * ユニットパス（unit.options.path/bm-path）システムユニットパスは、グローバル設定・各ユニット固有の設定の両方で行うことができます。システム設定、ユニット設定の両方に同じ指定がある場合は、各ユニットの設定が優先されます。これを利用して、特定のユニットだけシステム全体とは違うURLをベースとすることもできます。上記の設定を繋げたフォルダからファイルがダウンロードされます。いずれも初期値は""（空文字列）です。例として以下のように設定したとします。 ^設定^値^ |system.unit.options.path|https://example.com/units/| ヘッダーユニット"bar-header"が以下のようにHTMLファイルに指定してあった場合、

ユニットはhttps://example.com/units/common/bar-header.jsから読み込まれます。 ====デフォルトパスの設定方法==== デフォルトパスの指定は設定、またはタグの属性で行います。設定には大きく分けると、全ユニットで共通のグローバル設定と、ユニット固有の設定があります。設定の詳細については設定を参照ください。 * [[ja:bitsmist-js-core:unit:settings| ユニットについて - 設定]] システムユニットパスは、基本的にはグローバル設定で行います。


BITSMIST.v1.Unit.use("setting.merge", {
    "system": {
        "unit": {
            "options": {
                "path": "https://example.com/units/"
            }
        }
    },
});

上記の内容を、例えば"settings.js"という名前で保存し、HTMLのスクリプトタグで読み込みます。

ユニットパスはそれぞれのユニットの属性で設定します。

"unit"セクションを使って追加、またはコードから動的に追加する場合は、セクション内のユニットの設定に記述することもできます。


{
    "unit": {
        "units": {
            "PadSetting": {
                "unit": {
                    "options": {
                        "path": "common"
                    }
                },
            }
        }
    }
}


this.cast("unit.materialize", "PadSetting", {
    "unit": {
        "options": {
            "path": "common"
            "parentNode": "#pads"
        }
    }
});

_getSettings()や外部設定ファイルを使う方法では、デフォルトのパスの指定はできません。なぜならそれらの方法はユニットがロードされた後に実行されるためで、ロード前に指定することができないからです。 =====デフォルトのファイル名===== bm-autoload属性でURLを指定しない場合、デフォルトのファイル名が使用されます。デフォルトではタグ名がファイル名となりますが、設定で変更することが可能です。 ====ファイル名を決める設定==== ファイル名は、bm-filename属性または設定の"unit.options.fileName"で変更可能です。ここで指定したファイル名に拡張子"js"を付加したものが、ロードするファイル名となります。 ====デフォルトファイル名の設定方法==== ファイル名はそれぞれのタグの属性で指定します。拡張子は不要です。

"unit"セクションを使って追加、またはコードから動的に追加する場合は、セクション内のユニットの設定に記述することもできます。


{
    "unit": {
        "units": {
            "BarHeader": {
                "unit": {
                    "options": {
                        "fileName": "header"
                    }
                },
            }
        }
    }
}


document.querySelector("bm-router").use("unit.materialize", "BarHeader", {
    "unit": {
        "options": {
            "fileName": "header",
        }
    }
});

=====URL指定時の設定の上書き===== bm-autoload属性にURLを指定した場合、その値に応じて"unit.options.path", "unit.options.fileName"の設定が自動的にセットされます。またURLにHTMLを指定した場合は, さらに"unit.options.autoMorph"がTrueに設定されます。例としてbm-autoloadにhttps://example.com/unit/transactions/pad-main.jsと指定された場合、各設定が以下のようにセットされます。 ^設定^値^ |unit.options.path|https://example.com/unit/transactions/| |unit.options.fileName|pad-main|