[]
アプリケーションでWijmoを使用するには、いくつかの参照をHTMLページに追加してWijmoをインクルードします。
Wijmoアプリケーションに必要な最小限のファイルセットは次のとおりです。
wijmo.css: すべてのWijmoコントロールのスタイル設定に使用されるCSSルールが含まれています。
wijmo.min.js:Globalize、Event、Control、およびCollectionViewクラスなどのWijmoインフラストラクチャが含まれています。
これらに加えて、使用するコンポーネントに応じて、次のファイルを1つ以上追加します。
wijmo.grid.min.js:FlexGridコントロールが含まれています。
wijmo.input.min.js:ComboBox、AutoComplete、InputDate、InputTime、InputNumber、InputMask、ListBox、Menu、およびCalendarコントロールなどの入力コントロールが含まれています。
wijmo.gauge.min.js:LinearGauge、RadialGauge、BulletGraphなどのゲージコントロールが含まれています。
wijmo.culture.[CultureName].min.js: アメリカ英語以外の言語でアプリケーションを開発するためのカルチャー固有ファイルが含まれています。
wijmo.theme.[ThemeName].css: Wijmoコントロールの外観のカスタマイズに使用されるCSSルールが含まれています。wijmo.cssの代わりに、これらのファイルのいずれかを使用します。
Wijmoには、コントロールを最も一般的なJavaScriptフレームワークのネイティブコンポーネントとして使用できる相互運用モジュールが含まれています。
wijmo.angular2.min.js: WijmoコントロールをAngularアプリケーションにカプセル化するコンポーネントが含まれています。
wijmo.react.min.js: WijmoコントロールをReactアプリケーションにカプセル化するコンポーネントが含まれています。
wijmo.vue2.min.js: WijmoコントロールをVue 2.xアプリケーションにカプセル化するコンポーネントが含まれています。
これらのファイルを配置する場所としては、2つの選択肢があります。1つは、Wijmoをダウンロードし、必要なファイルをアプリケーション内の適切なフォルダにコピーします。もう1つは、クラウド上のコンテンツ配信ネットワーク(CDN)でホストされているWijmoファイルを参照します。以下のセクションに例を示します。
Wijmoファイルをダウンロードして、アプリケーション内のフォルダにコピーします。Wijmoスクリプトファイルを「scripts/vendors」というフォルダに、cssファイルを「styles」というフォルダに配置した場合は、次の行をHTMLページに追加します。
<!-- Wijmoのスタイルとコア(必須) -->
<link href="styles/wijmo.min.css" rel="stylesheet"/>
<!--
必要に応じて、wijmo.min.cssの代わりにカスタムテーマを使用する
<link href="styles/themes/wijmo.theme.modern.min.css" rel="stylesheet"/>
-->
<script src="scripts/vendor/controls/wijmo.min.js"></script>
<!-- Wijmoコントロール(オプション。必要なコントロールを含める) -->
<script src="scripts/vendor/controls/wijmo.grid.min.js"></script>
<script src="scripts/vendor/controls/wijmo.chart.min.js"></script>
<script src="scripts/vendor/controls/wijmo.input.min.js"></script>
<script src="scripts/vendor/controls/wijmo.gauge.min.js"></script>
<!-- Wijmoカスタムカルチャー(オプション。必要なカルチャーを含める) -->
<script src="scripts/vendor/controls/cultures/wijmo.culture.ja.min.js"></script>
<!-- Wijmoライセンスキーの適用(オプション) -->
<script>
wijmo.setLicenseKey('ここにライセンスキーの文字列を設定します');
</script>
この場合、ファイルをダウンロードする必要はありません。次の行をHTMLページに追加するだけです。
<!-- Wijmoのスタイルとコア(必須) -->
<link href="https://cdn.mescius.com/wijmo/5.20241.9/styles/wijmo.min.css" rel="stylesheet"/>
<!--
必要に応じて、wijmo.min.cssの代わりにカスタムテーマを使用する
<link href="https://cdn.mescius.com/wijmo/5.20241.9/styles/themes/wijmo.theme.modern.min.css" rel="stylesheet"/>
-->
<script src="https://cdn.mescius.com/wijmo/5.20241.9/controls/wijmo.min.js"></script>
<!-- Wijmoコントロール(オプション。必要なコントロールを含める) -->
<script src="https://cdn.mescius.com/wijmo/5.20241.9/controls/wijmo.grid.min.js"></script>
<script src="https://cdn.mescius.com/wijmo/5.20241.9/controls/wijmo.chart.min.js"></script>
<script src="https://cdn.mescius.com/wijmo/5.20241.9/controls/wijmo.input.min.js"></script>
<script src="https://cdn.mescius.com/wijmo/5.20241.9/controls/wijmo.gauge.min.js"></script>
<!-- Wijmoカスタムカルチャー(オプション。必要なカルチャーを含める) -->
<script src="https://cdn.mescius.com/wijmo/5.20241.9/controls/cultures/wijmo.culture.ja.min.js"></script>
<!-- Wijmoライセンスキーの適用(オプション) -->
<script>
wijmo.setLicenseKey('ここにライセンスキーの文字列を設定します');
</script>
常に最新のリリースバージョンを使用する場合は、参照内のバージョン番号を5.latestに変更します。次に例を示します。
これはテスト目的でのみ使用する必要があり、運用アプリケーションには推奨されません。
<!-- Wijmoの最新バージョン -->
<script src="https://cdn.mescius.com/wijmo/5.latest/controls/wijmo.min.js"></script>
<link href="https://cdn.mescius.com/wijmo/5.latest/styles/wijmo.min.css" rel="stylesheet"/>
メモ:参照の順序は重要です。wijmo.min.jsモジュールを最初に指定し、その後にコントロールモジュール、コントロール拡張の順に指定する必要があります。wijmo.angularなどの相互運用モジュールは、最後に指定してください。