GrapeCity.devlog

グレープシティ株式会社のDeveloper Tools〈開発支援ツール〉の最新情報をお届けします。製品のTIPSや発売情報、イベントのお知らせなどをいち早く発信中です。

Wijmo & Web Components クイックスタート

7月25日、弊社はJavaScriptライブラリ「Wijmo」の最新バージョン「2018J v2」をリリースしました

今回はこの「2018J v2」で追加された機能の中から「Web Components対応」をピックアップし、ご紹介したいと思います。

Web Componentsとは?

Web Componentsは、近年新しく追加されたHTMLの標準機能です。この機能を使用すると、WebページやWebアプリケーション上で再利用可能なウィジェットやコンポーネントを、サードパーティ製のJavaScriptライブラリやフレームワークを使わずに作成できます。

2018年8月16日現在、WebブラウザではChromeのみがこの機能に対応していますが、Web Componentsの公式サイトより提供されているPolyfillを活用することで、Firefoxなどをはじめとするその他のブラウザでも、Web Componentsを使用することが可能です。

Wijmoはバージョン「2018J v2」で、Web Componentsに対応しました。専用の相互運用モジュールを参照し所定の設定を行うことで、カスタムHTML要素によるWijmoコントロールの設定が可能となります。

Wijmo & Web Components クイックスタート

以下では、WijmoのFlexGridをWeb Components形式で表示する例をご紹介したいと思います。

1.参照設定とモードの有効化設定

はじめに、HTMLファイルを作成し、各種モジュール・CSSの参照設定とWijmoのWeb Componentsモード有効化設定を行います。

Polyfillの参照

Web Componentsの公式サイトで提供されている、以下2つのPolyfillを参照します。

<!-- Polyfillの参照 -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/webcomponentsjs/2.0.2/custom-elements-es5-adapter.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/webcomponentsjs/2.0.2/webcomponents-bundle.js"></script>

Web Componentsモードの有効化

Wijmoの本体モジュールを参照する前に次のスクリプトを実行して、WijmoのWeb Componentsモードを有効にします。これはWijmoをWeb Componentsとして実行するための宣言です。

<!-- Wijmo web components mode の有効化 -->
<script>
    window['wj-control-is-element'] = true;
</script>

Wijmo 本体モジュール・CSS・相互運用モジュールの参照

最後にWijmoの本体モジュール、CSS、相互運用モジュールの参照を行います。

<!-- Wijmo 本体モジュール・CSS・相互運用モジュールの参照 -->
<link rel="stylesheet" href="https://cdn.grapecity.com/wijmo/5.latest/styles/wijmo.min.css" />
<script src="https://cdn.grapecity.com/wijmo/5.latest/controls/wijmo.min.js"></script>
<script src="https://cdn.grapecity.com/wijmo/5.latest/controls/wijmo.grid.min.js"></script>
<script src="https://cdn.grapecity.com/wijmo/5.latest/interop/webcomponents/wijmo.webcomponents.min.js"></script>
<script src="https://cdn.grapecity.com/wijmo/5.latest/controls/cultures/wijmo.culture.ja.min.js"></script>

これでWijmoをWeb Components形式で利用するための準備は完了です。

2.コンポーネントの作成

次に、HTMLのカスタム要素を使ってWijmoコンポーネントを作成します。

Web Components形式でWijmoを使用する場合、wjc-コンポーネント名という形でコントロールの指定が可能です。今回はFlexGridでデータ表示を行うので、wjc-flex-gridコンポーネントと、その列を表すwjc-flex-grid-column子コンポーネントを使用します。

以下の例は、wjc-flex-gridコンポーネントに対し「No」「商品名」「受注日」「金額」「値引」の5列(5つのwjc-flex-grid-column子コンポーネント)を設定する例です。

<wjc-flex-grid id="grid">
  <wjc-flex-grid-column binding="No"></wjc-flex-grid-column>
  <wjc-flex-grid-column binding="商品名"></wjc-flex-grid-column>
  <wjc-flex-grid-column binding="受注日"></wjc-flex-grid-column>
  <wjc-flex-grid-column binding="金額"></wjc-flex-grid-column>
  <wjc-flex-grid-column binding="値引"></wjc-flex-grid-column>
</wjc-flex-grid>

加えてWijmoでは、これらの要素にカスタム属性を記述して、各コンポーネントのプロパティ設定を行うこともできます。以下は「商品名」列と「金額」列に対し、それぞれ幅と書式情報を設定する例です。

幅設定の例

<wjc-flex-grid-column binding="商品名" width="200"></wjc-flex-grid-column></wjc-flex-grid>

書式設定の例

<wjc-flex-grid-column binding="金額" format="c"></wjc-flex-grid-column>

これで、HTMLファイルの設定は完了です。

3.JavaScriptによる処理

次に、JavaScriptファイルを作成し、Wijmoコンポーネントに対するロジック処理を記述します。

wjc-flex-gridなどのコンポーネントはHTML要素(HTMLElement)を継承しているので、JavaScriptによる標準のHTML要素の操作と同じように処理を記述できます。例えば以下のように、document.getElementByIdメソッドを使ってHTML要素を取得することが可能です。

var grid = document.getElementById('grid');  

さらに、取得した要素ではWijmo独自のプロパティを設定できます。今回はHTMLでFlexGridに設定した列にあわせて以下のようなデータを想定し、wjc-flex-gridのプロパティitemSourceにデータ設定してみたいと思います。

今回設定するデータ

var data = [ 
    {No:0, 商品名:"うまい素", 受注日: "2016/12/28", 金額: 11040, 値引: true},
    {No:1, 商品名:"チョコクリームアイス", 受注日: "2015/12/17", 金額: 15600, 値引: "false"},
    {No:2, 商品名:"ピュアシュガー", 受注日: "2014/01/17", 金額: 2800, 値引: "false"},
    {No:3, 商品名:"果汁100%レモン", 受注日: "2013/10/22", 金額: 12240, 値引: "true"},
    {No:4, 商品名:"パルメザンチーズ", 受注日: "2014/08/22", 金額: 10500, 値引: "false"}
];

設定はとても簡単です。次のようにして取得したwjc-flex-grid要素のitemSourceプロパティに、上記のデータを設定します。

grid.itemsSource = data;

これで全ての設定が完了しました。以上のコードを実装したサンプルはこちらです。

いかがだったでしょうか。Web Componentsを利用すると、HTMLコードの記述のみでコントロールを表示することができるようになります。また、このようにすることでアプリケーションにおけるビューとビジネスロジックの分離が可能となり、MVWスタイルでの開発も容易です。

本記事のほか、Wijmo製品サイトではWeb Componentsの詳細や、npmでWeb Componentsを使ったアプリを作成する方法について紹介する「Web Components入門サンプル」を公開していますので、ぜひご確認ください。