Griffon Plugin Trial ： Jzy3d Plugin

以前の記事で Charts プラグインを使って2次元のチャートを描画する方法を見ました。　今回は Jzy3d プラグインを使った3次元チャートの描画を試してみます（記事一覧）。　ちなみに使用するバージョンは

• Griffon 0.9.4
• Jzy3d プラグイン 0.1

です。

内容

• 準備
  • Griffon プロジェクトの作成
  • Jzy3d プラグインのインストール
• 3次元チャートを作成
  • チャートを構築するクラスの生成
  • ファイルの書き換え
  • アプリケーションの実行

参考 URL

• Jzy3d Plugin
• Jzy3d

準備

まずは Griffon プロジェクトの作成と Jzy3d プラグインのインストールを行う方法。

Griffon プロジェクトの作成

プロジェクト名は「FunctionPlotter3D」とします。　以下のコマンドでプロジェクトを作成：

griffon create-app FunctionPlotter3D

コマンド実行後、FunctionPlotter3D というフォルダができるので、そちらへ移動。　以下、このフォルダをプロジェクト・ルートと呼びます（$PROJECT_HOME で参照します）。　プロジェクトの作成がうまく行われていれば、コマンド「griffon run-app」を実行してアプリケーションを起動できます。

Jzy3d プラグインのインストール

Jzy3d プラグインをインストールするには、プロジェクト・ルートで以下のコマンドを実行：

griffon install-plugin jzy3d

まぁ、特に問題はないかと。　これらの準備は、各プロジェクトで1回行えば OK です。

3次元チャートを作成

次はチャートの作成。　以下の手順は、作成したいチャートごとに行います。

チャートを構築するクラスの生成

まずは、チャートを構築するコードを書くソースファイルを生成します。　作成するチャートの名前を決めて（ここでは defaultChart とします）、以下のように create-chart3d コマンドを実行します：

griffon create-chart3d defaultChart

実行終了後、以下のファイルが生成されます：

• $PROJECT_HOME/griffon-app/charts/functionplotter3d/DefaultChart3D.groovy

このファイル内に3次元チャートを構築するコードを書きます。　コーディングは jzy3d ライブラリをガッツリ使うようです（Groovy のビルダーを使った構築とかはできなさそう）。　今回は jzy3d の API には立ち入らずに自動で生成されるサンプル・コードをそのまま使うことにしましょう。

ちなみに、生成されるファイルには接尾辞として「3D」が自動でつきます。　また、griffon-app フォルダ下の charts フォルダはなければ作成されます。　Charts プラグインを使う場合も同じフォルダが作成されてましたね。

ファイルの書き換え

3次元チャートの構築コード自体を書き換えなくても、チャートを表示させるためにいくつか書き換えなければいけないファイルがあるので、それを見ていきましょう。　書き換えの必要があるのは以下の2つ：

• $PROJECT_HOME/griffon-app/conf/Application.groovy
• $PROJECT_HOME/griffon-app/views/functionplotter3d/FunctionPlotter3DView.groovy

Application.groovy ファイルでは、3次元チャートを MVC グループの構成要素に加える設定を行います。　3次元チャートを使用したい MVC グループのノードに、以下のような chart3d プロパティ（別の名前でも可能だけど）を設定します。　値は、先ほど生成したチャートを構築するクラスの完全修飾名です：

application {
    ...
}
mvcGroups {
    // MVC Group for "functionPlotter3D"
    'functionPlotter3D' {
        model      = 'functionplotter3d.FunctionPlotter3DModel'
        chart3d       = 'functionplotter3d.DefaultChart3D'    // この1行を追加
        view       = 'functionplotter3d.FunctionPlotter3DView'
        controller = 'functionplotter3d.FunctionPlotter3DController'
    }
}

FunctionPlotterView.groovy は3次元チャートを埋め込むコードを書き込みます。　埋め込みには widget ノードを使います。　引数には Application.groovy で指定した MVC 要素（ここでは chart3d と設定しました）から「chart3d.chart.canvas」と辿って取得できるオブジェクトを渡します。

package functionplotter3d

application(title: 'FunctionPlotter3D',
  size: [800,600],
  locationByPlatform:true,
  iconImage: imageIcon('/griffon-icon-48x48.png').image,
  iconImages: [imageIcon('/griffon-icon-48x48.png').image,
               imageIcon('/griffon-icon-32x32.png').image,
               imageIcon('/griffon-icon-16x16.png').image]) {
    // add content here
    widget(chart3d.chart.canvas)    // 3次元チャートを埋め込むコード
}

ここでは size プロパティや locationByPlatform プロパティなども変えてます。

アプリケーションの実行

以上の設定がきちんとできていれば、以下のコマンド

griffon run-app

でアプリケーションが起動され、以下のような3次元チャートが表示されるハズです：

前に試したときは描画がかなり重かったような気がするんですが、今日やったら特に重さを感じませんでした。　Griffon の方が何か改善されたのかな？

プログラミングGROOVY