Shoeisha Technology Media

CodeZine(コードジン)

記事種別から探す

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

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

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

ダウンロード WijmoSample.zip (6.7 KB)

 本連載では、グレープシティが提供する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のドキュメント
図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>

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

著者プロフィール

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

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

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

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

バックナンバー

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

おすすめ記事

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