更新日： 14/04/16

yFiles Ajax (評価版) のインストールと動作確認

【概要】

yFiles Ajax は Java と Ajax (JavaScript ライブラリー) で動作するライブラリーを提供し、WEB-ブラウザ上で動作するアプリケーションを開発できます。

以下に、 yFiles Ajax 本体と、そのサンプルをインストールする手順を紹介します。

※ yFiles Ajax を利用するには、「Eclipse + TOMCAT 開発環境」が必要です。"Eclipse + TOMCAT (yFiles Ajax の開発環境) のインストール" を参照下さい。

1) 評価版(３０日)のダウンロード

以下の WEB-サイトから評価版をダウンロードできます。

Evaluate yFiles Ajax
(http://www.yworks.com/en/products_yfilesajax_eval.php)

ダウンロードされるモジュールは、以下です。
yfilesajax-1.4-java-server-2.8-eval.zip ... 21.9 MB

2) 評価版 (30日) のインストール手順

yfilesajax-1.4-java-server-2.8-eval.zip を展開して下さい。

yfilesajax-1.4-java-server-2.8-eval というフォルダーが生成されます。

その内容は以下です。

フォルダー		内容
demos	....	yFiles Ajax のサンプル
doc	....	各種の詳細説明書
lib	....	yFiles Ajax と yFiles for Java のライブラリー
yfiles-for-java	....	yFiles for Java の解説
3rdPartyLicenses	....	ライセンス関係
ファイル		内容
README.html	....	インストールなどの説明
yfiles-ajax-license.xml	....	yFiles Ajax の評価キー
CHANGES_yFilesAJAX.html	....	更新履歴
CHANGES_yFilesJava.html	....	更新履歴
SOFTWARE_LICENSE_AGREEMENT.html	....	ライセンス使用同意書

このフォルダーに Eclipse のプロジェクトを対応させて動作確認をしていきます。
その手順を以下に説明します。

3) TOMCAT プロジェクトを作成する

Eclipse 3.6 (Helios) を起動します。

--> [ワークスペース・ランチャー] が起動されるので、ワークスペースを "../workspace" に指定して、[OK] を押します。
Eclipse の設定を確認します。

メニューの "ウィンドウ(W)-> 設定(P)" を選択します。

--> [設定] ダイアログが表示されるので、
- "Java-> インストール済みのJRE" タブを選択し、続いて "JRE1.5" であることを確認します。
- "Java-> コンパイラー" タブを選択し、続いて "コンパイラー準拠レベル(I)："-> "1.5" を選択します。
- "Tomcat" タブを選択し、続いて "バージョン 6.X" であることを確認します。
  
  ”tomcat6.0 .... TOMCAT ver-6.0” のフォルダー位置が正しいことを確認します。
- 上記手順で問題がなければ [OK] ボタンを押します。

右上のパースペクティブ・タイプ "JavaEE" を選択し、"プロジェクト・エクスプローラ" 上で、右クリックします。

--> ダイアログが表示されるので、"新規(N)-> 動的 Web プロジェクト"を選択します。

--> [動的 Web プロジェクト] ダイアログが表示されるので、下記を指定します。

動的 Web モジュールバージョン(V)：	2.5
プロジェクト名：	yfiles-ajax
デフォルト・ロケーションを使用(D)：	オフ
ロケーション(L)：	G:\Hulinks\yFiles\Ajax\yfilesajax-1.4-java-server-2.8-eval ※ '2)' のステップで評価版を展開したフォルダーを指定します。

[New Runtime(R)..] を押します。

--> [新規サーバー・ランタイム環境] ダイアログが表示されるので、

"Apache Tomcat v6.0" を指定し、[次へ(N)>] を押します。

--> "インストール・ディレクトリーを指定して下さい" の指示が表示されるので、

[参照(B)] を押して、Tomcat6.0 のフォルダーを指定します。
[完了(F)] を押します。　
[動的 Web プロジェクト] ダイアログに戻り、[次へ(N)] を押します。

--> [新規動的 Web プロジェクト] ダイアログが表示されるので、
- "ビルド・パス上のソース・フォルダー(S)"： src　を選択し、[除去(R)] を押します。
- [フォルダーの追加(A)..] を押します。
  
  --> [ソース・フォルダーの追加] ダイアログが表示されるので、
  
  "demos\src" を指定して、[OK] を押します。
- [新規動的 Web プロジェクト] ダイアログに戻り、[次へ(N)] を押します。
- "コンテンツ・ディレクトリー(D)：" を "demos/web-content" に変更します。
  [完了(F)] を押します。
--> Eclipse ウィンドウの下方のステータス欄に "yfiles-ajax を検証中:(XX%)" が表示されます。

数分掛かりますが、100％になるのを待って下さい。

4) "yfiles-ajax" プロジェクトをカスタマイズする

"yfiles-ajax" プロジェクトの上で、右クリックし、"プロパティ(R)" を選択します。

--> [yfiles-ajax のプロパティ] ダイアログが表示されるので、
- "Java のビルド・パス"、"ライブラリー(L)" を選択し、[Jar 追加(J)..] を押します。
  
  --> [JAR の選択] ダイアログが表示されるので、
  
  y.jar と yfiles-ajax.jar を指定し、[OK] を押します。
--> [yfiles-ajax のプロパティ] ダイアログに戻って、"Deployment Assembly" を選択します。
- --> [Java のビルド・パスの設定] ダイアログが表示されるので、[適用] を押します。
  
  --> [Web Deployment Assembly] の画面が表示されるので、
  
  [追加(D)..] を押します。
  
  --> [New Assembly Directive] ダイアログが表示されるので、
  
  "フォルダー" を指定し、[次へ(N)] を押します。
  
  "lib/resources" を指定し、[完了(F)] を押します。
  
  [追加(D)..] を押して、上記の操作と同様に
  
  "フォルダー" -> "lib/javascript" を指定し、[完了(F)] を押します。
　
--> [Web Deployment Assembly] の画面に戻り、
- "/lib/javascript" の右横のマスをダブル・クリックし、
  "/" -> "javascript" に置き換えます。
- "/lib/resources" の右横のマスをダブル・クリックし、
  "/" -> "resources" に置き換えます。
- [追加(D)..] を押します。
  
  --> [New Assembly Directive] ダイアログが表示されるので、
  　 "Java Build Path Entries" を指定し、[次へ(N)]を押します。
  
  　 "y.jar, yfiles-ajax.jar" を指定し、[完了(F)] を押します。
--> [Web Deployment Assembly] の画面に戻り、
- [OK] を押します。

5) 必要なライブラリーと評価用キーをコピーする

"yfilesajax-1.4-java-server-2.8-eval\lib\java\" フォルダーにある２つのファイルを選択し、
　　　　　　　 yfiles-ajax.jar ..... 65.9 MB
　　　　　　　 y.jar ..... 3.93 MB
　
Eclipse プロジェクト・エクスプローラの "demos/web-content/WEB-INF/lib" の上にドラッグ＆ドロップします。

　 --> [File Operation] ダイアログが表示されるので、
　　　 "ファイルをコピーする(C)" を選択し、[OK] を押します。
同様に、"yfilesajax-1.4-java-server-2.8-eval\yfiles-ajax-license.xml" を選択し、"demos/web-content/WEB-INF" の上にドラッグ＆ドロップします。
"yfiles-ajax" プロジェクトの上で、右クリックし、"リフレッシュ(F)" を選択します。

6) ローカル・サーバーを定義する

"サーバー" タブを選択し、画面上で、右クリックします。

--> ダイアログが表示されるので、"新規(W)-> サーバー" を選択します。
- --> [新規サーバー] ダイアログが表示されるので、
  
  "Tomcat v6.0 サーバー" を指定し、[次へ(N)]を押します。
- --> "追加および除去" の画面が表示されるので、
  
  "yfiles-ajax" を指定し、[追加(D)] を押します。次に、[完了(F)] を押します。
- --> サーバーの画面に、"ローカル・ホストの Tomcat v6.0 サーバー" の項目が追加されます。

7) yFiles Ajax のサンプルを起動する

サーバーの画面で、"ローカル・ホストの Tomcat v6.0 サーバー" の上で右クリックします。

--> ダイアログが表示されるので、"開始(S)" を選択します。

--> "コンソール" タブを選択すると、サーバー起動のログが表示されていてサーバーに関連するいくつかのモジュールが Start しています。

最後に、評価用キーの有効期限が表示されています。
WEB-ブラウザ上で、"http://localhost:8080/yfiles-ajax/" を入力します。

--> yFiles Ajax のサンプル画面が表示されます。

--> 画面の中の "Organization Chart" を選択すると、"Organization Chart" デモが開きます。

・次の操作を行います。
1. "構成図(Structure View)"ペインで、"Richard Fuller-> RobertHartman" を選択します。
2. "オプション(View Options)"ペインで、"Local View" を選択します。
3. 引き続き、"Show Colleagues" を選択します。
  --> 図のように、本人(Robert Hartman)を中心にした人間関係
  　　即ち、上司、同僚、部下が上手くレイアウトされて表示されます。