エンタープライズ開発に適したJavaScriptライブラリ
AjaxやダイナミックHTMLなどの要素技術を利用した、リッチ・インターネット・アプリケーション（RIA）が企業システムのフロントエンドとしても注目されていますが、Webブラウザ上で稼働するRIA開発に欠かせないのが、JavaScriptライブラリーです。JavaScriptライブラリーは一般的に、ブラウザーの仕様や動作の差異を吸収し、ダイナミックHTMLの実装を簡略化する機能を提供して、RIA開発の生産性を向上します。その中でも最も高機能なオープンソースのJavaScriptライブラリーと評価されているのが「Dojo Toolkit」です。
「Dojo Toolkit」とは
Dojo Toolkitの特徴は、豊富なユーザー・インターフェイス部品（ウィジェット）や便利で網羅的なユーティリティー関数もさることながら、企業における大規模なWebアプリケーション開発を想定して設計されている点です。一貫性のあるモジュール化や拡張性が考慮されていることにより、保守性やスケーラビリティーに優れています。また、表形式のデータの編集やさまざまなグラフ表示機能を備え、ビジネス・アプリケーションの構築を容易にしてくれると同時に、パフォーマンス、国際化、アクセシビリティーなどの非機能要件もライブラリーとしてサポートされており、企業の製品やアプリケーション開発に最適であると言えます。
欧米では、すでに多くの企業のサイトやイントラネットでも利用されており、IBMではソフトウェア製品のフロントエンド構築技術として全面的に採用されています。本シリーズでは、豊富な機能の中から厳選した、ビジネス・アプリケーションのためのベスト・プラクティスを中心に、Dojo Toolkitの活用方法をご紹介します。
記事中のサンプルコードについて
なお本シリーズのサンプルコードでは、現時点での最新バージョンである、Dojo 1.5.0を使用します。Dojo Toolkitのソースコードはオープンソース・プロジェクトのサイトからダウンロードできます。ビルド済の「Dojo Toolkit Release」をダウンロードして展開すると、dojo-release-1.5.0というフォルダーの下に以下のフォルダーが作成されます。
- dojo: さまざまなフレームワークやユーティリティーを提供する基本ライブラリーです。
- dijit: ウィジェットと呼ばれるユーザー・インターフェイス部品のライブラリーです。
- dojox: 表形式のデータ編集やグラフ表示機能を含む拡張ライブラリーです。
本シリーズのサンプルコードは、特に指定のない限り、以下のような操作で実行することができます。
- dojo-release-1.5.0フォルダーと同じ場所に、examplesというフォルダーを作成します。
- examplesフォルダーに適当な名前のHTMLファイルとして、サンプルコードを保存します。
- 保存したHTMLファイルをWebブラウザーで開きます。
また、独自にビルドを行ったり、ユニット・テストを実行するためには、「Dojo Toolkit SDK」をダウンロードします。
なおDojo Toolkitは多くのブラウザに対応しており、対応ブラウザはDojo Toolkit 1.5リリースノートで確認することができます。本シリーズのサンプルコードについては、動作確認をFirefox 3.6およびInternet Explorer 8で行っております。
お使いのブラウザによっては、サンプルコードを実行するためにブラウザのアクセス制限を緩和しなければならない可能性があります。FirefoxやChromeでサンプルコードが表示できない場合は、以下の操作を試してみてください（※サンプルコードを試した後は、設定を元に戻すのを忘れないでください）。
- Firefox
「about:config」を開き、「security.fileuri.strict_origin_policy」設定をfalseに設定する。 - Chrome
起動オプションに-allow-file-access-from-filesを追加して起動する。
グラフを使いこなす 前編
Dojo Toolkitでは、グラフ（チャート）を表示するためのdojox.chartingというモジュールが提供されています。dojox.chartingは、dojox.gfxという2次元グラフィックス・ライブラリーを利用して、ブラウザー上で棒グラフ、折れ線グラフ、円グラフなど、主要なグラフ描画を行います。
1. グラフの構成要素
グラフは、主に以下の要素で構成されます。
- plot
実際にグラフの描画を行うコンポーネントです。グラフの種類によってplotを選択します。 - axis
グラフ軸の目盛りや表示を指定します。通常はx軸用とy軸用のaxisを指定します。 - series
グラフに表示するデータ系列を定義します。
チャート・コンポーネントにこれらの要素を、それぞれ、addPlot()、addAxis()、addSeries()メソッドで追加することで、表示するグラフを定義します。
- addPlot(/*String*/name, /*Object*/kwArgs)
グラフに描画を行うコンポーネントの追加をします。折れ線と面など複数追加可能です。 - addAxis(/*String*/name, /* Object */kwArgs)
グラフに軸を追加します。通常はx軸とy軸の2つを追加します。 - addSeries(/*String*/name, /*Array|Object*/data, /* Object */kwArgs)
グラフにデータ系列を追加します。
kwArgsでplot、axis、seriesにさまざまな設定ができます。詳しくは第4節で説明します。
