SHOEISHA iD

※旧SEメンバーシップ会員の方は、同じ登録情報(メールアドレス&パスワード)でログインいただけます

CodeZine編集部では、現場で活躍するデベロッパーをスターにするためのカンファレンス「Developers Summit」や、エンジニアの生きざまをブーストするためのイベント「Developers Boost」など、さまざまなカンファレンスを企画・運営しています。

「Dojo道場」~実用アプリ構築のためのベストプラクティス

Dojo道場 ~ 第1回「グラフを使いこなす(前編)」

「Dojo道場」~実用アプリ構築のためのベストプラクティス

  • X ポスト
  • このエントリーをはてなブックマークに追加

 企業における大規模なWebアプリケーション開発を想定して設計されたJavaScriptライブラリー「Dojo Toolkit」は、欧米では、すでに多くの企業のサイトやイントラネットでも利用されており、IBMではソフトウェア製品のフロントエンド構築技術として全面的に採用されています。本シリーズでは、豊富な機能の中から厳選した、ビジネス・アプリケーションのためのベスト・プラクティスを中心に、Dojo Toolkitの活用方法をご紹介します。

  • X ポスト
  • このエントリーをはてなブックマークに追加

エンタープライズ開発に適した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: 表形式のデータ編集やグラフ表示機能を含む拡張ライブラリーです。

 本シリーズのサンプルコードは、特に指定のない限り、以下のような操作で実行することができます。

  1. dojo-release-1.5.0フォルダーと同じ場所に、examplesというフォルダーを作成します。
  2. examplesフォルダーに適当な名前のHTMLファイルとして、サンプルコードを保存します。
  3. 保存した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節で説明します。

会員登録無料すると、続きをお読みいただけます

新規会員登録無料のご案内

  • ・全ての過去記事が閲覧できます
  • ・会員限定メルマガを受信できます

メールバックナンバー

次のページ
2. グラフの種類

修正履歴

この記事は参考になりましたか?

  • X ポスト
  • このエントリーをはてなブックマークに追加
「Dojo道場」~実用アプリ構築のためのベストプラクティス連載記事一覧

もっと読む

この記事の著者

黒川 洋(クロカワ ヒロシ)

日本アイ・ビー・エム株式会社 ソフトウェア開発研究所に勤務。

※プロフィールは、執筆時点、または直近の記事の寄稿時点での内容です

中倉 勘作(ナカクラ カンサク)

2008年日本アイ・ビー・エム株式会社入社。現在、ソフトウェア開発研究所所属。 

※プロフィールは、執筆時点、または直近の記事の寄稿時点での内容です

この記事は参考になりましたか?

この記事をシェア

  • X ポスト
  • このエントリーをはてなブックマークに追加
CodeZine(コードジン)
https://codezine.jp/article/detail/5547 2010/11/11 14:00

おすすめ

アクセスランキング

アクセスランキング

イベント

CodeZine編集部では、現場で活躍するデベロッパーをスターにするためのカンファレンス「Developers Summit」や、エンジニアの生きざまをブーストするためのイベント「Developers Boost」など、さまざまなカンファレンスを企画・運営しています。

新規会員登録無料のご案内

  • ・全ての過去記事が閲覧できます
  • ・会員限定メルマガを受信できます

メールバックナンバー

アクセスランキング

アクセスランキング