Shoeisha Technology Media

CodeZine(コードジン)

特集ページ一覧

JavaScript UIフレームワーク「Vue.js」で「Wijmo(ウィジモ) 5」のリッチなUI部品を使おう

ECMAScript 5に準拠した高速・軽量なJavaScript UIライブラリ「Wijmo 5」の活用 第15回

  • LINEで送る
  • このエントリーをはてなブックマークに追加
目次

Vue.jsのWebページでWijmoのコントロールを利用

 Vue.jsのWebページでWijmoのコントロールを利用する方法を、図2のサンプルで説明します。このサンプルでは、Wijmoのゲージコントロール(LinearGauge)と、ゲージの値を設定するテキストボックスが表示されます。ゲージはマウスやタッチで、テキストボックスは数字入力で値を変更でき、ゲージとテキストボックスで相互に変更が反映されます。

図2 Vue.jsのWebページでWijmoのLinearGaugeを表示するサンプル(p002-basic)
図2 Vue.jsのWebページでWijmoのLinearGaugeを表示するサンプル(p002-basic)

 実装方法を以下で説明します。最初に、Vue CLIで生成したプロジェクトのフォルダーでリスト5のコマンドを実行して、Node.jsのパッケージマネージャーnpmから、プロジェクトにWijmoを追加します。

[リスト5]プロジェクトにWijmoを追加するコマンド
npm install @grapecity/wijmo.vue2.all

 次に、App.vueにリスト6の内容を実装します。

[リスト6]Wijmoのゲージを表示するコンポーネントの実装(p002-basic/src/App.js)
<template><!-- テンプレート ...(1)-->
  <div>
    <h1>Wijmo + Vue.js(ゲージ)</h1>
    <!-- WijmoのLinearGauge ...(1a)-->
    <wj-linear-gauge
      :is-read-only="false"
      :value="gaugeValue"
      :value-changed="onValueChanged"
      class="wijmo-control"
    ></wj-linear-gauge>
    <!-- テキストボックス ...(1b)-->
    ゲージの値:<input v-model.number="gaugeValue">
  </div>
</template>

<script><!-- ロジック ...(2)-->
// Wijmoをインポート ...(2a)
import '@grapecity/wijmo.vue2.gauge'; // ゲージ
import '@grapecity/wijmo.cultures/wijmo.culture.ja'; // 日本語カルチャ
import '@grapecity/wijmo.styles/wijmo.css'; // スタイル

export default { // コンポーネント実装 ...(2b)
  data() { // データの設定 ...(2c)
    return {
      gaugeValue: 30 // ゲージの初期値 ...(2d)
    };
  },
  methods: { // メソッド群の実装 ...(2e)
    onValueChanged(s) { // ゲージ変更時の処理 ...(2f)
      this.gaugeValue = s.value;
    }
  }
};
</script>

<style><!-- スタイル ...(3)-->
.wijmo-control {
  width: 400px;
  margin-bottom: 20px;
}
</style>

 Vue.jsのコンポーネントに対応する*.vueファイルには、(1)の<template>タグ内に表示内容のテンプレート、(2)の<script>タグ内にロジック、(3)の<style>タグ内にスタイルを、それぞれ記述します。以下で、それぞれの記述内容を説明します。

コンポーネントのテンプレートを記述する<template>

 <template>タグ内には、コンポーネントの表示内容を表すテンプレートを、HTMLタグ形式で記述します。(1a)の<wj-linear-gauge>タグが、WijmoのLinearGaugeに対応する記述です。Wijmoコントロールのタグ名は、「wj」という接頭辞で始まり、英小文字とハイフン区切り文字からなるコントロール名が続きます。

 ここでは、<wj-linear-gauge>に表2の属性を設定しています。

表2 <wj-linear-gauge>に設定する属性
属性名 属性の意味 設定内容
:is-read-only 読み取り専用かどうか false(操作可能)
:value ゲージの値 gaugeValue変数
:value-changed ゲージ変更時の処理 onValueChangedメソッド
class CSSのクラス 「wijmo-control」

 属性名の前のコロンは、属性値がJavaScript式として解釈されることを示します。例えば「:is-read-only="false"」は、is-read-only属性にfalseという(JavaScriptの)値を設定します。また、「:value="gaugeValue"」は、value属性にgaugeValue変数(詳細は後述)の値を設定します。

 (1b)はテキストボックスです。「v-model.number="gaugeValue"」はVue.jsで双方向データバインディングを指定する記述で、gaugeValue変数の値とテキストボックスの内容が双方向に同期するようになります。「.number」は、入力値を数値として扱う記述です。

[補足]Vue.jsのv-bindとv-model

 属性名の前にコロンをつけた「:value」記述は、「v-bind:value」を省略したものです。v-bindは、v-model同様データバインディングの記述ですが、v-modelと異なり、データの伝達が一方向です。ゲージの値を表す「:value」の場合、gaugeValue変数の値はゲージに反映されますが、ゲージの変更はgaugeValue変数に反映されません。そのため、:value-changedに設定したゲージ変更時の処理で、gaugeValue変数を明示的に更新する必要があります。

コンポーネントのロジックを記述する<script>

 <script>タグ内には、コンポーネントのロジック(変数や処理)を、JavaScriptで記述します。

 (2a)で、Wijmoをインポートします。ここではLinearGaugeなどゲージのコントロールを含むwijmo.vue2.gaugeをインポートしています。Wijmoの利用時はこのほかに、日本語に対応させるためのカルチャwijmo.culture.jaと、スタイルファイルwijmo.cssをインポートする必要があります。

 (2b)がコンポーネントの実装です。data関数(2c)はコンポーネントが保有する変数を返却する関数で、ここでは(2d)で、ゲージの値を表すgaugeValue変数に初期値を設定しています。コンポーネントのメソッドはmethods(2e)に記述します。ここではゲージ変更時の処理をonValueChangedメソッド(2f)で実装します。このメソッドでは、イベント変数sのvalueプロパティからゲージの値を取得して、gaugeValue変数に設定します。

コンポーネントのスタイルを記述する<style>

 <style>タグ内には、コンポーネントの表示を調整するスタイルを、CSSで記述します。ここでは、ゲージに設定したCSSクラスwijmo-controlに、幅とマージンを設定しています。


  • LINEで送る
  • このエントリーをはてなブックマークに追加

著者プロフィール

  • WINGSプロジェクト  吉川 英一(ヨシカワ エイイチ)

    <WINGSプロジェクトについて> 有限会社 WINGSプロジェクトが運営する、テクニカル執筆コミュニティ(代表 山田祥寛)。主にWeb開発分野の書籍/記事執筆、翻訳、講演等を幅広く手がける。2018年11月時点での登録メンバは55名で、現在も執筆メンバを募集中。興味のある方は、どしどし応募頂...

  • 山田 祥寛(ヤマダ ヨシヒロ)

    静岡県榛原町生まれ。一橋大学経済学部卒業後、NECにてシステム企画業務に携わるが、2003年4月に念願かなってフリーライターに転身。Microsoft MVP for ASP/ASP.NET。執筆コミュニティ「WINGSプロジェクト」代表。 主な著書に「入門シリーズ(サーバサイドAjax/XMLD...

バックナンバー

連載:ECMAScript 5に準拠した高速・軽量なJavaScript UIライブラリ「Wijmo 5」の活用

もっと読む

All contents copyright © 2005-2019 Shoeisha Co., Ltd. All rights reserved. ver.1.5