Shoeisha Technology Media

CodeZine(コードジン)

記事種別から探す

最新フレームワーク「Angular 2」と組み合わせて「Wijmo(ウィジモ) 5」を使おう

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

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

 本連載では、グレープシティが提供するJavaScriptライブラリWijmo(ウィジモ)について、サンプルとともに利用例を紹介します。今回は、JavaScriptフレームワーク「Angular 2」とWijmoを組み合わせて利用する方法について説明します。

目次

はじめに

 Wijmo(ウィジモ)は、グレープシティがHTML/JavaScript環境に向けて提供しているJavaScriptライブラリで、WebサイトやWebアプリケーションで活用できるUI部品を利用者に提供します。現行版はECMAScript 5に対応した「Wijmo 5」です。

 一方、Angular 2は、Googleとオープンソースコミュニティが開発しているJavaScriptフレームワーク「AngularJS」の新バージョンです。Wijmo 5はもともと、AngularJSの従来バージョン(AngularJS 1)での利用をサポートしていましたが、Wijmo 5の現行バージョン「2016J v2」に対するアップデート(5.20162.231)で、Angular 2(2.0.0)での利用をサポートしました。

 本記事では、Wijmo 5をAngular 2と組み合わせて利用する設定や実装方法を、サンプルをあげながら説明していきます。

対象読者

  • WebサイトやWebアプリケーションのレベルをワンランク上げたい方
  • より軽量/高速なJavaScriptのUI部品を探している方
  • やはりフレームワークは新しいものに限るという方

必要な環境

 Wijmo 5はECMAScript 5に対応する、いわゆるモダンブラウザをサポートします。対応ブラウザはWijmoのWebサイトで案内されています。

 Angular 2のプロジェクトを実行するにはNode.jsが必要となります。また、Angular 2は現在もバージョンアップが続いていますが、本記事では、Wijmo 5が正式にサポートするバージョン2.0.0を利用します。

 以上より、今回は以下の環境で動作を確認しています。

  • Windows 10 64bit版
    • Wijmo 5 5.20162.231 体験版
    • Angular 2 2.0.0
    • Node.js v6.9.2 64bit版
    • Microsoft Edge 38.14393.0.0

 なお、Angular 2の開発ではJavaScriptそのものではなくTypeScript(変換してJavaScriptを生成する、いわゆるAltJS言語)を利用する場合が多く、本記事でもTypeScriptを利用します。Wijmo 5はTypeScriptで開発されており、この意味でAngular 2との親和性が高いといえます。

プロジェクトの環境設定

 最初に、Angular 2とWijmo 5のプロジェクトを作る手順を、順に説明していきます。

Angular 2のプロジェクトテンプレートを取得

 Angular 2のプロジェクトのテンプレートは、GitHubで公開されています。今回はAngular 2(バージョン2.0.0)のテンプレートをダウンロードします。

図1 GitHubからAngular 2のプロジェクトテンプレートをダウンロード
図1 GitHubからAngular 2のプロジェクトテンプレートをダウンロード

 ダウンロードした圧縮ファイルを展開後、まずプロジェクトフォルダ内で、Node.jsのコマンド「npm install」を実行して、必要なライブラリをダウンロードします。完了後に「npm start」コマンドを実行すると、WebブラウザでWebページを表示します。プロジェクトテンプレートの詳細は公式サイトも参照してください。ダウンロードできるサンプルコードにもプロジェクトテンプレート(angular-startup)を含めています。

Wijmo 5のモジュールをプロジェクトテンプレートに設定

 Wijmo 5が利用できるよう、プロジェクトテンプレートを設定していきます。まず、Wijmo 5が含まれるWijmo Enterpriseの体験版を、グレープシティのWebページからダウンロードします。

図2 Wijmoの体験版をダウンロード
図2 Wijmoの体験版をダウンロード

 ダウンロードした圧縮ファイルから、Wijmo 5のフォルダ(Wijmo5EntEval_5.20162.231)を展開して、プロジェクトテンプレートと同じフォルダに配置します。このときフォルダ名を「wijmo_download」に変更しておきます。

図3 Wijmo 5を展開して配置
図3 Wijmo 5を展開して配置

 次に、プロジェクトで利用するライブラリを定義するpackage.jsonファイルのdependencies属性に、リスト1のようにWijmoの定義を追記します。

リスト1 Wijmoのパッケージ定義(wijmo-001-gauge/package.json)
"dependencies": {
  (中略)
  "wijmo": "../wijmo_download/NpmImages/wijmo-system-min"
},

 リスト1の記述後に「npm install」コマンドを実行すると、Wijmo 5のフォルダからプロジェクト内(node_modules/wijmoフォルダ)に、Wijmo 5のライブラリ一式がコピーされます。

 さらに、モジュールローダーSystemJSの設定ファイル(systemjs.config.js)に、Wijmoの設定をリスト2のように記述します。

リスト2 SystemJSへのWijmo設定(wijmo-001-gauge/systemjs.config.js)
map: {
  (中略)
  // Wijmo ...(1)
  'wijmo': 'node_modules/wijmo'
},
packages: {
  (中略)
  // Wijmo ...(2)
  wijmo: {
    defaultExtension: 'js'
  }
}

 (1)は、Wijmoのパッケージがコピーされるnode_modules/wijmoフォルダに短縮名「wijmo」を設定する記述、(2)は、デフォルトのファイル拡張子を「js」に指定する記述です。これらの記述により、「node_modules/wijmo/wijmo.angular2.gauge.js」という実際の相対パスの代わりに、「wijmo/wijmo.angular2.gauge」という記述でWijmoのコンポーネントを指定できるようになります。

[参考]Wijmo 5が対応するモジュール仕様

 今回利用するプロジェクトテンプレートでは、SystemJSと呼ばれるモジュールローダーを利用して、モジュールを動的に参照します。リスト1で指定した「wijmo-system-min」は、SystemJSのモジュール仕様に対応したWijmo 5のモジュールです。

 Wijmo 5では、SystemJSとは別のモジュール仕様であるCommonJSに対応した「wijmo-commonjs-min」、AMD(Asynchronous Module Definition)に対応した「wijmo-amd-min」が提供されており、必要に応じて選択できます。

WijmoのCSSファイルをコピーして参照

 Wijmo 5のフォルダのDist/stylesから、wijmo.min.cssファイルをプロジェクトのルートフォルダにコピーして、index.htmlファイルで参照させます。

リスト3 WijmoのCSSファイルを参照(wijmo-001-gauge/index.html)
<link rel="stylesheet" href="wijmo.min.css">

 ここまでの手順で、Angular 2プロジェクトでWijmoを利用する準備が整いました。


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

著者プロフィール

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

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

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

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

バックナンバー

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

もっと読む

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