5.20212.812
5.20212.812

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.angular.min.js:WijmoコントロールをAngularJSアプリケーションにカプセル化するディレクティブが含まれています。
  • wijmo.angular2.min.js:WijmoコントロールをAngularアプリケーションにカプセル化するコンポーネントが含まれています。
  • wijmo.react.min.js:WijmoコントロールをReactアプリケーションにカプセル化するコンポーネントが含まれています。
  • wijmo.vue.min.js:WijmoコントロールをVue 1.xアプリケーションにカプセル化するコンポーネントが含まれています。
  • wijmo.vue2.min.js:WijmoコントロールをVue 2.xアプリケーションにカプセル化するコンポーネントが含まれています。
  • wijmo.knockout.min.js:WijmoコントロールをKnockoutアプリケーションにカプセル化するコンポーネントが含まれています。

これらのファイルを配置する場所としては、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>

<!-- AngularJSとWijmoのフレームワーク相互運用(オプション。Angular/React/Vueなども同様) -->
<script src="scripts/vendor/angular.min.js"></script>
<script src="scripts/vendor/interop/angular/wijmo.angular.min.js"></script>

<!-- Wijmoライセンスキーの適用(オプション) -->
<script>
    wijmo.setLicenseKey('ここにライセンスキーの文字列を設定します');
</script>

CDNからWijmoを参照する

この場合、ファイルをダウンロードする必要はありません。次の行をHTMLページに追加するだけです。

<!-- Wijmoのスタイルとコア(必須) -->
<link href="https://cdn.grapecity.com/wijmo/5.20212.812/styles/wijmo.min.css" rel="stylesheet"/>
<!-- 
    必要に応じて、wijmo.min.cssの代わりにカスタムテーマを使用する
    <link href="https://cdn.grapecity.com/wijmo/5.20212.812/styles/themes/wijmo.theme.modern.min.css" rel="stylesheet"/>
-->
<script src="https://cdn.grapecity.com/wijmo/5.20212.812/controls/wijmo.min.js"></script>

<!-- Wijmoコントロール(オプション。必要なコントロールを含める) -->
<script src="https://cdn.grapecity.com/wijmo/5.20212.812/controls/wijmo.grid.min.js"></script>
<script src="https://cdn.grapecity.com/wijmo/5.20212.812/controls/wijmo.chart.min.js"></script>
<script src="https://cdn.grapecity.com/wijmo/5.20212.812/controls/wijmo.input.min.js"></script>
<script src="https://cdn.grapecity.com/wijmo/5.20212.812/controls/wijmo.gauge.min.js"></script>

<!-- Wijmoカスタムカルチャー(オプション。必要なカルチャーを含める) -->
<script src="https://cdn.grapecity.com/wijmo/5.20212.812/controls/cultures/wijmo.culture.ja.min.js"></script>

<!-- AngularJSとWijmoのフレームワーク相互運用(オプション。Angular/React/Vueなども同様) -->
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular.min.js"></script>
<script src="https://cdn.grapecity.com/wijmo/5.20212.812/interop/angular/wijmo.angular.min.js"></script>

<!-- Wijmoライセンスキーの適用(オプション) -->
<script>
    wijmo.setLicenseKey('ここにライセンスキーの文字列を設定します');
</script>

常に最新のリリースバージョンを使用する場合は、参照内のバージョン番号を5.latestに変更します。次に例を示します。

<!-- Wijmoの最新バージョン -->
<script src="https://cdn.grapecity.com/wijmo/5.latest/controls/wijmo.min.js"></script>
<link href="https://cdn.grapecity.com/wijmo/5.latest/styles/wijmo.min.css" rel="stylesheet"/>

メモ:参照の順序は重要です。wijmo.min.jsモジュールを最初に指定し、その後にコントロールモジュール、コントロール拡張の順に指定する必要があります。wijmo.angularなどの相互運用モジュールは、最後に指定してください。