JavaScriptライブラリ「Wijmo（ウィジモ）」の便利なウィジェットを試す

jQuery UIの標準ウィジェットを補完する高機能ライブラリ「Wijmo」の活用 第2回

　本連載では、グレープシティが提供するJavaScriptライブラリ「Wijmo（ウィジモ）」について、サンプルとともに利用例を紹介します。今回はWijmoが提供する数多くのウィジェット（UI部品）の中からいくつかを取り上げて、コーディング例を通してその利用法を紹介します。

はじめに

　Wijmo（ウィジモ）は、グレープシティがHTML/JavaScript環境に向けて提供しているJavaScriptライブラリです。WijmoはjQueryやjQuery UI、jQuery Mobileをベースに、WebサイトやWebアプリケーションで活用できる高機能で多様なウィジェット（UI部品）を利用者に提供します。

　本記事ではWijmoが提供する40種類以上のウィジェットから、すぐに使い始められてWijmoの便利さを体感できるものという観点から以下のウィジェットを紹介します。

• Dialogウィジェット（wijdialog）：ダイアログを表示
• Calendarウィジェット（wijcalendar）：カレンダーを表示
• LineChartウィジェット（wijlinechart）：折れ線グラフを表示

　なお、本記事では基本的な機能を抜粋して紹介しています。機能の詳細やプロパティ・メソッドはWijmoのドキュメントを参照してください。

図1　Webで公開されているWijmoのドキュメント

対象読者

• WebサイトやWebアプリケーションのレベルをワンランク上げたい方
• 短納期で高度なWebサイトの作成を求められている方
• Webサイト作成において充実したサポートを求める方

必要な環境

　Wijmoを利用するにはjQueryおよびjQuery UI（モバイル向けの場合はjQuery Mobile）の参照が必須となり、現行バージョンのWijmoではjQuery 1.9.1とjQuery UI 1.10.1（jQuery Mobile 1.4.0）が指定されています。これらのライブラリをWijmoと一緒に読み込む方法は後述します。

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

• Windows 7 64bit版
• Internet Explorer 11

Wijmoウィジェットを利用する下準備

　Wijmoのウィジェットを利用するためには、HTMLファイルにおいてWijmoライブラリ一式を読み込む必要があります。リスト1はWijmoライブラリを読み込むための記述で、HTMLファイルのheadタグ内に記述します。（1）と（2）がWijmoのCSS指定、（3）と（4）は依存ライブラリを自動的に読み込むRequireJsの読み込みおよび設定です。

［リスト1］Wijmoライブラリを読み込む記述

<!-- WijmoテーマCSS ……（1） -->
<link href="http://cdn.wijmo.com/themes/aristo/jquery-wijmo.css" rel="stylesheet" type="text/css" />

<!-- WijmoウィジェットCSS ……（2） --> 
<link href="http://cdn.wijmo.com/jquery.wijmo-pro.all.3.20141.34.min.css" rel="stylesheet" type="text/css" /> 

<!-- RequireJs ……（3） -->
<script type="text/javascript" src="http://cdn.wijmo.com/external/require.js"></script>

<!-- RequireJsにこのページで読み込むライブラリを設定 ……（4） -->
<script type="text/javascript">
    requirejs.config({
        baseUrl: "http://cdn.wijmo.com/amd-js/3.20141.34/",
            paths: {
                "jquery": "jquery-1.9.1.min",
                "jquery-ui": "jquery-ui-1.10.1.custom.min",
                "jquery.ui": "jquery-ui",
                "jquery.mousewheel": "jquery.mousewheel.min",
                "globalize": "globalize.min"
            }
    });
</script>

　ウィジェットを利用するときにはRequireJsが提供するrequireメソッドでウィジェットのコードを読み込みます。例えば後述するDialogウィジェット（wijdialog）を利用する場合、リスト2のように記述します。

［リスト2］ウィジェットを読み込む記述

<script type="text/javascript">
    require(["wijmo.wijdialog"], function(){ // wijdialogウィジェットを読み込み
        $(function(){ 
            // ここにウィジェットに関する処理を記述
        }
    }); 
</script>