[]
        
(Showing Draft Content)

Wijmoの参照

アプリケーションでWijmoを使用するには、いくつかの参照をHTMLページに追加してWijmoをインクルードします。


Wijmoアプリケーションに必要な最小限のファイルセットは次のとおりです。

  • wijmo.css: すべてのWijmoコントロールのスタイル設定に使用されるCSSルールが含まれています。

  • wijmo.min.js:GlobalizeEventControl、およびCollectionViewクラスなどのWijmoインフラストラクチャが含まれています。

これらに加えて、使用するコンポーネントに応じて、次のファイルを1つ以上追加します。

  • wijmo.grid.min.js:FlexGridコントロールが含まれています。

  • wijmo.chart.min.js:FlexChartおよびFlexPieコントロールが含まれています。

  • wijmo.input.min.js:ComboBoxAutoCompleteInputDateInputTimeInputNumberInputMaskListBoxMenu、およびCalendarコントロールなどの入力コントロールが含まれています。

  • wijmo.gauge.min.js:LinearGaugeRadialGaugeBulletGraphなどのゲージコントロールが含まれています。

  • wijmo.nav.min.js:TabPanelTreeViewなどのナビゲーションコントロールが含まれています。

  • 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ファイルをダウンロードして、アプリケーション内のフォルダにコピーします。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>

CDNからWijmoを参照する

この場合、ファイルをダウンロードする必要はありません。次の行を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などの相互運用モジュールは、最後に指定してください。