リッチ・クライアントWebアプリケーション Web2.0 & Mobile アプリケーションセミナー 2011年12月15日 日本アイ・ビー・エム株式会社

2011年12月15日
日本アイ・ビー・エム株式会社
Web2.0 & Mobile アプリケーションセミナー
リッチ・クライアントWebアプリケーション
日本アイ・ビー・エム システムズ・エンジニアリング株式会社
高橋 健太（[email protected]）
© 2011 IBM Corporation
IBM Proposal Template – Value Driven Proposals
Agenda
ƒ
ƒ
ƒ
ƒ
ƒ
2
デモ・アプリケーション
– 複雑なレイアウト
– 各種フォーム（カレンダー、バリデーション・チェック等）
– ドラッグアンドドロップ
– 並べ替え、直接編集等が可能な表（テーブル）
– グラフの描画
Dojo Toolkit
– What’s Dojo?
– Dojo最新情報
JavaScript / Dojo開発の基本
1. JavaScript
2. Dojo
Dojoアプリケーション開発の考慮点
1. プロジェクトの進め方
2. 共通コンポーネント設計
Dojo Build System
© 2011 IBM Corporation
IBM Proposal Template – Value Driven Proposals
デモ・アプリケーション
3
© 2011 IBM Corporation
IBM Proposal Template – Value Driven Proposals
複雑なレイアウト
ƒ コーディングなしで、凝ったレイアウトを持つアプリケーションが作成できる
ƒ タブ、アコーディオンといった、切り替え可能な画面を持つ機能
このレイアウトは
HTMLだけで実現可能
4
© 2011 IBM Corporation
IBM Proposal Template – Value Driven Proposals
各種フォーム（カレンダー、バリデーション・チェック等）
ƒ 以下のような多彩なフォームが利用可能
ƒ データベースとの連携（選択候補の提示など）もRESTインターフェースを用意するだけで良い
dijit.form.CheckBox
dijit.form.DateTextBox
dijit.form.ComboBox
dijit.form.TextArea
dijit.form.TextBox
dijit.form.TimeTextBox
dijit.form.InlineEditBox
dijit.form.CurrencyTextBox
dijit.form.NumberSpiner
dijit.form.ValidataionTextBox
dijit.form.FilteringSelect
dijit.form.NumberTextBox
dijit.form.Slider
5
© 2011 IBM Corporation
IBM Proposal Template – Value Driven Proposals
ドラッグアンドドロップ
ƒ スケジュール入力アプリケーションや、ショッピングカートの処理などが容易に作成可能
ƒ 下記画面は、サーバーサイドの実装はなしとして、慣れた人なら１日程度で作成可能
作成されたアイテ
ムは移動可能
ドラッグアンドドロップで
新規アイテムが作成可
能
6
© 2011 IBM Corporation
IBM Proposal Template – Value Driven Proposals
並べ替え、直接編集等が可能な表（テーブル） (1/2)
ƒ データもしくはRESTful Webサービスを用意するだけで、様々な機能を持つ表に表示が可能
dojox.grid.EnhancedGrid
ページ送り、ジャンプ
全体の件数表示
表示件数の変更
カラムのヘッダーをクリックで
ソート、ドラッグアンドドロップでカ
ラム順序変更可能
列をクリックで選択
様々な場所でカスタム
右クリックメニューが実装可能
7
© 2011 IBM Corporation
IBM Proposal Template – Value Driven Proposals
並べ替え、直接編集等が可能な表（テーブル） (2/2)
ƒ データもしくはRESTful Webサービスを用意するだけで、様々な機能を持つ表に表示が可能
dojox.grid.LazyTreeGrid
クリックで開閉
階層ごとにセルの結合を指定可能
ツリー状のデータを表示可能
8
© 2011 IBM Corporation
IBM Proposal Template – Value Driven Proposals
グラフの描画 (1/2)
ƒ 様々な種類のグラフを描画可能
ƒ サーバーサイドのデータと連携して、動的に切り替えも可能
9
© 2011 IBM Corporation
IBM Proposal Template – Value Driven Proposals
グラフの描画 (2/2)
ƒ 様々な種類のグラフを描画可能
ƒ サーバーサイドのデータと連携して、動的に切り替えも可能
10
© 2011 IBM Corporation
IBM Proposal Template – Value Driven Proposals
Dojo Toolkit
11
© 2011 IBM Corporation
IBM Proposal Template – Value Driven Proposals
What’s Dojo?
ƒ 概要
– JavaScriptの高機能なツールキット
– Dojo Foundationが提供（オープンソース）
– WASのFeature Packに含まれており、
IBMのサポート対象
ƒ 機能
– dojo ： Dojoの基本的な機能（UI関連除く）を提供
– dijit ： UI関連の機能を提供
– dojox ： 先進的な機能を提供
●Dojoによる仕様の違いの吸収
ユーザー
アプリケーション
ユーザー
アプリケーション
Internet Explorer
Mozilla Firefox
ユーザー
アプリケーション
ユーザー
アプリケーション
dojo
dojo
Internet Explorer
Mozilla Firefox
●Dojoの各モジュールの位置づけ
ƒ メリット
– リッチなUIを簡単に実現可能
– 標準ライブラリーが非常に充実している
– ブラウザ間の表示／動作の違いの吸収
– JavaScriptをより容易に記述できる
– 画面パーツの国際化対応
– 画面部品のコンポーネント化の方式を提供
12
dojox
dijit
dojo
dojo
© 2011 IBM Corporation
IBM Proposal Template – Value Driven Proposals
IBM Dojo
ƒ IBMのWebSphere Application ServerのFeature Pack for Web2.0 and Mobileに
Dojoが同梱されている
– このDojoはオープンソースとして公開されているDojoをベースとしている
– IBMサポートについては、FPに含まれるものが対象となるため、プロジェクトでは
IBM Dojoを含める必要がある
• オープンソースで公開されているDojoを入れないように注意
13
© 2011 IBM Corporation
IBM Proposal Template – Value Driven Proposals
【参考】 Dojo Update Information
ƒ Dojo 1.6
– Dojo Object Store
– AMDモジュールへの一部対応
– HTML5のdata属性への対応
• djConfigやdojoTypeといった特殊な属性が非推奨になり、ValidなHTMLとして作成可能
– IE6, IE7向けのパフォーマンス・チューニング
– ガントチャート生成のための機能の追加
– EnhancedGridのためのプラグインが多数追加
– その他様々な機能追加、修正
• 詳細はこちらから確認 : http://livedocs.dojotoolkit.org/releasenotes/1.6
ƒ Dojo 1.7
– モバイル機能の追加
• モバイル向けWidgetの大幅な追加、タッチイベントに対する操作(dojo.touch)
– AMDモジュールへの完全対応
• dojo.addOnLoadが非推奨になり、dojo.readyが推奨に変更
– 新しいイベントハンドリングのための機能 : dojo.on
– その他様々な機能追加、修正
• 詳細はこちらから確認 : http://livedocs.dojotoolkit.org/releasenotes/1.7
14
© 2011 IBM Corporation
IBM Proposal Template – Value Driven Proposals
【参考】 Dojo 1.7のサポートするブラウザー
ƒ デスクトップ向け
– Firefox 3.6-7
– Safari 5.0-5.1, Chrome 13 以降
– IE 6-9
– Opera 10.50 以降 (Dojo coreのみ)
ƒ モバイル機能 (dojox/mobile)
– iOS 4.x,5.0 (Mobile Safari) (Editor, Dialogを除く全てのDijit Widget)
– Android 2.2, 2.3, 3.1
– Blackberry 6
– 互換性のあるデスクトップ向けブラウザー
• IE 8-9, Firefox 3.6-7, Safari 5.0-5.1, Chrome 13 以降
15
© 2011 IBM Corporation
IBM Proposal Template – Value Driven Proposals
【参考】 HTML5のdata属性への対応
ƒ Dojo1.5以前の書き方（現在は非推奨）
<div dojoType="dijit.layout.BorderContainer" gutters=“true">
<div dojoType="dijit.layout.ContentPane" region=“center">
<h1>Dojo Sample Applications</h1>
</div>
</div>
ƒ Dojo1.6以降の書き方
<div data-dojo-type="dijit.layout.BorderContainer" data-dojo-props="gutters: true">
<div data-dojo-type="dijit.layout.ContentPane" data-dojo-props="region:‘center'">
<h1>Dojo Sample Applications</h1>
</div>
</div>
– HTMLとして正しい文法として判断されるため、IDEのValidationで警告が表示されなくなった
– 何がDojoのための属性なのか判別しやすくなった
– 以前の書き方でも動かないわけではないが、Dojo 2.0で削除される予定
16
© 2011 IBM Corporation
IBM Proposal Template – Value Driven Proposals
JavaScript / Dojo開発の基礎
1. JavaScript
17
© 2011 IBM Corporation
IBM Proposal Template – Value Driven Proposals
JavaScript / Dojo開発の基礎
ƒ 基本的に、Dojo Toolkitを利用した、JavaScriptでの開発が主体
– PC向け、モバイル向け、どちらも同じ技術で開発可能
– ユーザー・インターフェースに関するロジックを色々と実装することになるため、リッ
チ・クライアントであれば専任の担当者がいることが望ましい（規模にもよる）
ƒ JavaScriptを理解していないと、Dojo Toolkitの利用は難しい
– 基礎スキルとして、JavaScriptは必ず理解しておく必要がある
– とは言え、Dojoを使う上では言語の奥深い知識までは必ずしも必要ではない
18
© 2011 IBM Corporation
IBM Proposal Template – Value Driven Proposals
JavaScriptの開発 – JavaScriptの利用方法
ƒ JavaScriptの利用方法
– HTML内にscriptタグを記述し、その中に記述する
<script type="text/javascript">
(function(){
var Person = function(name, age) {
this.name = name;
this.age = age;
this.getAge = function(){
return this.age;
};
};
var kenta = new Person("Kenta Takahashi", 28);
console.log(kenta);
console.log(kenta.getAge());
})();
</script>
– HTML内にscriptタグを記述し、src属性で外部JSファイルを指定する
<script type="text/javascript" src="./person.js"></script>
19
© 2011 IBM Corporation
IBM Proposal Template – Value Driven Proposals
JavaScriptの開発 – 開発環境
ƒ コーディング
– JavaScriptをサポートしている任意のテキストエディタ (emacs, vim, …)
– eclipse
• Eclipse IDE for JavaScript Web Developers | Eclipse Packages :
http://www.eclipse.org/downloads/packages/eclipse-ide-javascript-webdevelopers/indigosr1
– Rational Application Developer
• 上記のプラグインの他、Dojo向けの様々な機能が追加
> IBM Dojoのデプロイ機能、Dojoコードアシスト、Dojo向けのValidator、等
ƒ 実行環境
– PC向け
• 実際のブラウザーで動作させて確認することが多い
• ローカルファイルでも実行可能
> ただし、XHRを利用するコードではブラウザーの設定や起動オプション等が必要
– モバイル向け
• PC上で確認する場合は、 SafariやGoogle Chrome等、モバイルのブラウザーと同じ
WebKitベースのブラウザーで確認する
• RADでDojo Mobileに対応したシミュレーターが提供されている
> Rich Page Designer (Beta) のチュートリアル : https://w3connections.ibm.com/wikis/home?lang=ja#/wiki/W9aebb3d90e9f_4d3c_95ef_caf
73f32d74e/page/Chiron%20Education
20
© 2011 IBM Corporation
IBM Proposal Template – Value Driven Proposals
【参考】 Dojoをローカルで動かすためのブラウザーの設定
ƒ
ƒ
Firefox
1. アドレスバーに about:config と入力する
2. サポートに関する警告が表示されるので、問題なければ許可する
3. フィルタ欄にfileuriと入力し、表示されるsecurity.fileuri.strict_origin_policyをfalseにする
Google Chrome
1. 起動オプション --allow-file-access-from-files をつけて起動する
21
© 2011 IBM Corporation
IBM Proposal Template – Value Driven Proposals
JavaScriptの開発 – 開発環境
ƒ デバッグ
– Internet Explorer
• IE6, 7 : プラグインを導入する
• IE8, 9 : 開発者ツール、もしくはプラグイン
– Firefox : firebug
– Google Chrome : Developer Tool
ƒ 単体テスト
– Dojo : D.O.H (Dojo Objective Harness)
• Dojo標準で付属される単体テストツール
> http://livedocs.dojotoolkit.org/util/doh
> RAD 8.0.4でD.O.Hのサポート機能が追加された
– その他
• QUnit等を利用する
ƒ 統合テスト
– Rational Functional Tester
– Selenium
22
© 2011 IBM Corporation
IBM Proposal Template – Value Driven Proposals
JavaScriptの開発 – デバッガー
ƒ Firebug
– Firefoxのアドオン
• https://addons.mozilla.org/ja/firefox/addon/firebug/
– 導入してF12キーで起動
– 以下のような機能
• DOMやスタイルの確認
• HTTPリクエストの確認
• JavaScriptのコンソールやブレークポイント
• etc…
ƒ Developer Tool
– Google Chrome標準の開発者向けツール
– Ctrl + Shift + J 等で起動
– 以下のような機能
• DOMやスタイルの確認
• HTTPリクエストの確認
• JavaScriptのコンソールやブレークポイント、圧縮コードのPretty Print
• etc…
23
© 2011 IBM Corporation
IBM Proposal Template – Value Driven Proposals
JavaScriptの開発 – デバッガー
ƒ デバッガーには、JavaScriptコンソールが通常付属されている
– JavaScript内でconsoleオブジェクトが利用可能
• console.debugなどで、JavaScriptコード内からデバッグ用の出力が可能になる
> alert等では確認できないオブジェクトの内容の確認などが可能
• ただし、IE6, 7等ではconsoleオブジェクトがないため、エラーが発生するので注意
<script type="text/javascript">
(function(){
var Person = function(name, age) {
this.name = name;
this.age = age;
this.getAge = function(){
return this.age;
};
};
var kenta = new Person("Kenta Takahashi", 28);
console.log(kenta);
console.log(kenta.getAge());
})();
</script>
24
© 2011 IBM Corporation
IBM Proposal Template – Value Driven Proposals
JavaScript / Dojo開発の基礎
2. Dojo
25
© 2011 IBM Corporation
IBM Proposal Template – Value Driven Proposals
Dojoの基本
ƒ Dojoの読み込み
<script src=“../dojo/dojo/dojo.js”
data-dojo-config="parseOnLoad: true, isDebug: true"></script>
– Dojoの最もベースとなるモジュールの読み込み
– data-dojo-config: dojoの設定内容を指定
• parseOnLoad : HTML内のDojoで利用する属性を記述された要素のパースを実施
• isDebug: dojoモジュールの非推奨メソッドの警告などをJavaScriptコンソールに表示
• その他、様々な設定が指定可能 : http://dojotoolkit.org/api/1.6/dojo/config
ƒ モジュールの読み込み
– dojo.jsを読み込んだ後、requireメソッドによって、Dojoのモジュールを読み込むことが出来る
26
<script src="../../dojo/dojo/dojo.js" data-dojo-config="parseOnLoad: false, isDebug:
true"></script>
<script type="text/javascript">
require(['dojo/date/locale']);
var now = new Date();
var ISODate = dojo.date.locale.format(now, {
datePattern: 'yyyy/MM/dd', selector: 'date'
});
var USDate = dojo.date.locale.format(now, {
datePattern: 'MMM. dd, yyyy', selector: 'date'
});
alert(ISODate+" is "+USDate);
</script>
© 2011 IBM Corporation
IBM Proposal Template – Value Driven Proposals
Dojoの配置 - Web 2.0 & Mobile FP
ƒ WebSphere Application Serverからデプロイする場合
①warファイルに同梱する
WAS V8 導入ディレクトリ
必要な部分を
コピー
IBM Dojoモジュール
・・・ Dojo Dijit
・・・ Dojo Core
・・・ Dojo dojox
②Webサーバーに配置する
・・・ IBM Atomライブラリー
・・・ IBM ゲージ・ウィジェット
・・・ IBM ILOG Dojo Diagrammer
・・・ IBM OpenSearchライブラリー
・・・ IBM SOAPライブラリー
・・・ Dojoユーティリティー・ツール
27
通常、外部から同じホスト名で認識される場所
※ 自アプリケーションと別の場所に配置する場合、
クロスドメインアクセス用のビルドが必要
© 2011 IBM Corporation
IBM Proposal Template – Value Driven Proposals
Dojoの配置 - Web 2.0 & Mobile FP
ƒ Rational Application Developerを利用する場合
– 動的Webプロジェクトの作成時、もしくは作成済みのプロジェクトのプロパティから、
プロジェクト・ファセットでWeb 2.0 > Dojoを追加
Dojo 1.7を選択
ILOGモジュール（後
述）が必要な場合はこ
こにチェックが必要
28
© 2011 IBM Corporation
IBM Proposal Template – Value Driven Proposals
Dojo coreを利用したコーディング – DOM操作
ƒ HTMLを形成するDOMツリーに対する操作を行うためのメソッド
– dojo.create : DOMの生成
– dojo.place : DOMの配置、置換
– dojo.destroy : DOMの削除
– dojo.byId : DOMの取得（ID属性）
– dojo.query : DOMの取得（様々な条件）
ƒ DOMはページのロード完了後に生成されるため、ロード完了後の実行を行うため、dojo.ready
(1.6以前はdojo.addOnLoad)を利用すること
<script type="text/javascript">
dojo.ready(function(){
var tableNode = dojo.create("table", {border: 2});
var tbodyNode = dojo.create("tbody", null, tableNode);
var trNode1 = dojo.create("tr", null, tbodyNode);
var thNode = dojo.create("th", {innerHTML: "Header"}, trNode1);
var trNode2 = dojo.create("tr", null, tbodyNode);
var tdNode = dojo.create("td", {innerHTML: "Hello, Dojo!"}, trNode2);
dojo.place(tableNode, dojo.byId("tableContainer"));
});
</script>
</head>
<body>
<div id="tableContainer"></div>
</body>
29
© 2011 IBM Corporation
IBM Proposal Template – Value Driven Proposals
Dojo coreを利用したコーディング – イベント処理
ƒ connect/disconnect : メソッドやイベントへのハンドラーを明示的に指定する方法
ƒ publish/subscribe/unsubscribe : イベントの発生と、それをトリガーにした処理をする仕組み
<script type="text/javascript">
dojo.ready(function(){
require(["dojo/_base/connect"], function(con){
var handle1 = con.connect(dojo.byId("myButton1"), "onclick", function(){
alert("onclick event occurred!");
con.subscribe("alertUser", function(text){
dojo.byId("alertTextNode").innerHTML = text;
});
con.disconnect(handle1);
});
MyButton2を押すと、
con.connect(dojo.byId("myButton2"), "onclick", function(){
dojo.publishが実行され、
con.publish("alertUser", ["I am alerting you."]);
alertUserイベントが発生
});
con.subscribe("alertUser", function(text){
alert(text);
});
MyButton1を押すと、
});
dojo.subscribeが実行され、
});
alertUserイベント発生時に
</script>
処理が入る
</head>
<body>
<button id="myButton1">MyButton1</button>
<button id="myButton2">MyButton2</button>
<div id="alertTextNode"></div>
</body>
30
© 2011 IBM Corporation
IBM Proposal Template – Value Driven Proposals
Dojo coreを利用したコーディング – サーバー連携
ƒ JavaScriptクライアントと、サーバーの連携方法は、従来のWebアプリケーションの画面遷移と大
きく異なる
– フォームでWebページそのものが遷移することは少ない
– データのみを受け取り、そのデータをJavaScriptで処理して、ページを書き換える（Ajax）
①HTML, JavaScript,
CSS等の取得
Servlet
HTTP
HTML, JavaScript, CSS
HTTP
JSON or XML
Webページ
HTTP
JSON or XML
31
RESTful
Webサービス
②各WebサービスにJavaScriptから
HTTPリクエストを送り、データを取得
RESTful
Webサービス
© 2011 IBM Corporation
IBM Proposal Template – Value Driven Proposals
Dojo coreを利用したコーディング – サーバー連携
ƒ JavaScriptからHTTPリクエストを送る
– XHR（XmlHttpRequest）と呼ばれる機能を用いて、リクエストを送ることが可能
– Dojoの場合は、dojo.xhrメソッドで、この機能を抽象化して提供している
HTTPメソッド、リクエスト先URL、
<script type="text/javascript">
返ってくる予定のデータ型の指定
require(["dojo/_base/xhr"]);
dojo.ready(function(){
dojo.xhr("GET", {
url: "./resources/employees",
preventCache : true,
HTTP GET
handleAs : "json",
/employees
load: function(employees, ioArgs) {
dojo.forEach(employees, function(employee, i){
dojo.place(dojo.create("div", {innerHTML:
employee.name}), dojo.body());
});
},
error: function(data, ioArgs) {
//TODO error handling!
リクエストの正常終了時に
}
実行される処理
});
})
</script>
32
RESTful
Webサービス
© 2011 IBM Corporation
IBM Proposal Template – Value Driven Proposals
Dojo coreを利用したコーディング – サーバー連携
ƒ サーバーサイドは、Web2.0 FPで提供されるJAX-RSとJSON4Jの機能を利用する
– JAX-RSによって、データのみを返すWebサービスを容易に作成できる
– JSON4Jによって、JavaScriptで簡単に利用できるデータ型である、JSON形式のデータが作成できる
@Path("employees")
public class Employees {
public Employees() {};
JSON
@GET
public String listEmployees() throws IOException {
JSONArray empArray = new JSONArray();
JSONObject emp1 = new JSONObject();
emp1.put("firstName", "Kenta");
emp1.put("lastName", "Takahashi");
empArray.add(emp1);
JSONObject emp2 = new JSONObject();
emp2.put("firstName", "Kenji");
emp2.put("lastName", "Kojima");
empArray.add(emp2);
return empArray.serialize();
}
[
{
"lastName":"Takahashi",
"firstName":"Kenta“
},
{
"lastName":"Kojima",
"firstName":"Kenji“
}
]
}
※ サーバーサイドの実装の詳細に関しては、以下のガイドをご参照下さい。
WebSphere Application Server Feature Pack 利用ガイド :
http://www.ibm.com/developerworks/jp/websphere/library/was/was7_fep_guide/index.html
33
© 2011 IBM Corporation
IBM Proposal Template – Value Driven Proposals
Dojo coreを利用したコーディング – データ・ストア
ƒ データ・ストア
– データ・フォーマットに捉われない一貫性のあるデータ・アクセスのためのインターフェースを定
義している
• データ･ストアがデータ・ソースのデータ・フォーマットを隠蔽
dojo.data API
属性(Attribute)
値(Value)
no
name
dpt
place
0100
川中
ISE
幕張
0200
山中
SWG
箱崎
0300
野中
ATS
幕張
アイデンティティ アイテム
(Item)
(Identity)
¾ dojo.data.api.Read
¾ dojo.data.api.Write
¾ dojo.data.api.Identity
¾ dojo.data.api.Notification
要求
データ・ストア
データを読み込む
JavaScriptオブジェクト
• dojo.data.ItemFileReadStore
• dojo.data.ItemFileWriteStore
• dojox.data.CsvStore
• dojox.data.XmlStore
など
34
データ・ソース
¾ファイル
- JSON
- XML
- CSV
¾Webサービス など
© 2011 IBM Corporation
IBM Proposal Template – Value Driven Proposals
Dojo coreを利用したコーディング – データ・ストア
ƒ dojo.data.ItemFileReadStoreの利用例
– ItemFileReadStoreは、JavaScriptで生成したデータや、指定したURL先のJSONファイルから
生成できるデータ・ストア
<script type="text/javascript">
require(["dojo/data/ItemFileReadStore"]);
元データ
var employeeData = [
{"firstName": "Kenta", "lastName":"Takahashi"},
{"firstName": "Hitoshi", "lastName":"Kondoh"},
{"firstName": "Yoshiki", "lastName":"Nakajima"},
データを指定した
{"firstName": "Takeshi", "lastName":"Ueda"},
データストアの生成
{"firstName": "Nobuhiro", "lastName":"Sue"}
];
var dataStore = new dojo.data.ItemFileReadStore({data:{items:employeeData}});
dojo.ready(function(){
検索条件と検索完了時の処理を
dataStore.fetch({
指定して、検索を実行
query: {"firstName":"*shi*"},
onComplete: function(employees) {
dojo.forEach(employees, function(employee, i){
dojo.place(dojo.create("li", {innerHTML: employee.firstName + " " +
employee.lastName}), dojo.byId("query"));
});
}
});
});
</script>
35
© 2011 IBM Corporation
IBM Proposal Template – Value Driven Proposals
Dijitを利用したコーディング – Widget生成
ƒ Widget : Dojoが提供する各種のGUIコンポーネント
– 入力フォーム、グリッド、etc…
ƒ Widgetの生成方法には二種類ある
– HTMLのパースによる生成
– JavaScriptによる生成
DojoのCSSと、DijitのテーマCSSの読み込み
<style type="text/css">
@import "../dojo/dojo/resources/dojo.css";
@import "../dojo/dijit/themes/claro/claro.css";
</style>
<script src="../dojo/dojo/dojo.js" data-dojo-config="parseOnLoad: true, isDebug:
true"></script>
<script type="text/javascript">
Widgetのコンストラクタによって
require(["dojo/parser", "dijit/form/Button"]);
DOMに追加
dojo.ready(function(){
new dijit.form.Button({label: "MyButton2"}, "button2Node");
var button3 = new dijit.form.Button({label: "MyButton3"});
dojo.place(button3.domNode, dojo.byId("button3Node"), "replace");
});
</script>
テーマの設定
</head>
Widget生成後にDOMに追加
<body class="claro">
<button data-dojo-type="dijit.form.Button">MyButton1</button>
<div id="button2Node"></div>
<div id="button3Node"></div>
parseOnLoadがtrueなので、dojo.parser
</body>
によってWidgetに変換される
36
© 2011 IBM Corporation
IBM Proposal Template – Value Driven Proposals
Dijitを利用したコーディング – テーマ
ƒ テーマ
– Dijitを利用するには、Dojoのテーマを読み込む必要がある
– 画面パーツの見た目（色使いやアイコンなど）を規定しているCSSファイル
– Claro（Dojo 1.5から）、Tundra、Soria、Nihiloの4種類が用意されている
ƒ 適用方法
<style type="text/css">
– <style>タグでCSSのインポート
@import "/dijit/themes/claro/claro.css";
– <body>要素のclass属性にテーマ名を指定
</style>
<body class="claro"> … </body>
Claro
Nihilo
Tundra
Soria
37
© 2011 IBM Corporation
IBM Proposal Template – Value Driven Proposals
IBM拡張 - ILOG Dojo Diagrammer
ƒ Dojoで各種ダイアグラムを表示するフレームワーク
– Webブラウザーのみでダイアグラムを表示可能
– 操作可能なダイアグラム
– 最適な自動レイアウト
ƒ 利用形態
– 産業施設の監視
• 電話通信網監視、電力網監視
– エンタープライズ・ビジネス
• BPM、BAM、BPM モデリングツール、
デシジョン・ツリー、PERT図、
ワークフロー
– エンタープライズ・ダッシュボード
• 組織図、BPモニタリング
– ソフトウェア・マネージメント
• UML図
– インダストリアル・エンジニアリング
• 各種プロセス図、
セマンティック・デザイン・ダイアグラム
38
© 2011 IBM Corporation
IBM Proposal Template – Value Driven Proposals
【参考】 IBM ILOG Visualization （可視化製品群）
【ソリューション】
z
Java、.NET 、C++環境およびAdobe Flex用のリッチなGUI構築を実現
z ダイアグラムや各種チャートの構築を実現
z
開発時間と開発コストの大幅な削減を実現
z
コーディング不要なデザインツール搭載。ユーザ固有の表示パーツを開発するシンボルエディタ装備
IBM ILOG Visualization – 製品構成
ILOG Visualization 製品ラインナップ
Java版
ƒ ILOG JViews Enterprise
ƒ ILOG JViews Diagrammer
ƒ ILOG JViews Gantt
ƒ ILOG JViews Maps
ƒ ILOG JViews Charts
ƒ ILOG JViews Maps for Defense
（防衛専用製品）
IBM ILOG Visualization 画面イメージ
.NET版
ƒ ILOG Gantt for .NET
ƒ ILOG Diagram for .NET
Flex版
ƒ ILOG Elixir Enterprise
C++版
ƒ ILOG Views
ƒ ＊ILOG JViews TGO (テレコム専用製品）
ƒ ＊ILOG JViews Graph Layout for Eclipse
＊ ・・・ 日本語版未発表
39
© 2011 IBM Corporation
IBM Proposal Template – Value Driven Proposals
IBM拡張 - ILOG Dojo Diagrammer - 機能
ƒ ダイアグラムの表示
サブグラフ
ノード
リンク
ƒ ダイアグラムの操作／その他機能
ツールチップ
Overview
40
・マウス及びキーボートによる各種操作
・ダイアグラムの拡大／縮小
・ノードの移動
・ノード内の文字編集
・サブグラフの展開／折り畳み
・ダイアグラム・エディター
・ノード／リンクの選択
・印刷
© 2011 IBM Corporation
IBM Proposal Template – Value Driven Proposals
IBM拡張 - ILOG Dojo Diagrammer - アーキテクチャー
WAS V8
Dojo
Webブラウザー
41
© 2011 IBM Corporation
IBM Proposal Template – Value Driven Proposals
IBM拡張 - ILOG Dojo Diagrammer - アプリケーション基本
ƒ ①ILOG Dojo Diagrammer モジュールのロード
– モジュールはIBM Dojoディレトリ―内に配置されている
<script type="text/javascript">dojo.require("ibm_ilog.diagram.widget.Diagram");</script>
ƒ ②ダイアグラムの表示
– データストアの指定によるデータの読み込み
<div data-dojo-type="dojo.data.ItemFileWriteStore" data-dojo-props=“url:’./mycompany.json’” data-dojo-id="graphModel" />
<div id="canvas" data-dojo-type='ibm_ilog.diagram.widget.Diagram'
style="width:900px;height:700px" data-dojo-props=“nodesStore:graphModel" />
ƒ ③各種項目の設定
– グラフ構造の定義 ・・・
– ノード外観の定義 ・・・
– リンク外観の定義 ・・・
– サブグラフ外観の定義
ノード間の関係性を指定
ノードの見た目を指定
リンクの見た目を指定
・・・ サブグラフの見た目を指定
ƒ ④グラフ・レイアウトの指定
– ノード配置のアルゴリズムを指定（次ページ）
42
各項目に用意されている
プロパティに値を設定
[{
shape: { x: 0, y: 0, width: 110,
height: 80, type: 'rect' },
fill: '#ff', stroke: { 'width': 2 }
}]
© 2011 IBM Corporation
IBM Proposal Template – Value Driven Proposals
IBM拡張 - ILOG Dojo Diagrammer - レイアウトの指定
ƒ 指定されたアルゴリズムによりノードの配置を自動決定
<div data-dojo-type="ibm_ilog.graphlayout.tree.TreeLayout" data-dojo-id="myLayout"/>
<div id="canvas" data-dojo-type='ibm_ilog.diagram.widget.Diagram'
data-dojo-props=“nodeLayout:myLayout, automaticNodeLayout: true, ... >
</div>
グラフ・レイアウト・アルゴリズムのサンプル
43
© 2011 IBM Corporation
IBM Proposal Template – Value Driven Proposals
IBM拡張 - ILOG Dojo Diagrammer - サーバでの処理
ƒ サーバー側でグラフ・レイアウト処理を実施させる事が可能
– 以下の様なケースで使用
• 非常に大きなダイアグラムを生成する
• モバイルなどCPU処理能力が低いクライアントを利用する
サーバーのグラフ・レイアウト処理の呼び出し
var treeLayout = new ibm_ilog.graphlayout.tree.TreeLayout();
graph.setNodeLayout(treeLayout);
var serverLayout = new ibm_ilog.graphlayout.ServerSideLayout(graph, url);
var deferred = serverLayout.layout();
重い処理
REST
サービス
Webブラウザー側
処理の軽減
データ
GFX
非同期
も可能
サーバー側にグラフ・レイアウト
用モジュールを配置
・dojo-diagrammer-server.war
Graph
Layout
Dojo
Webブラウザー
44
WAS V8
© 2011 IBM Corporation
IBM Proposal Template – Value Driven Proposals
Dojoアプリケーション開発時の考慮点
1. プロジェクトの進め方
45
© 2011 IBM Corporation
IBM Proposal Template – Value Driven Proposals
Architecture Decisions
ƒ リッチ・クライアント・アプリケーションのプロジェクトの主なArchitecture Decision例
– リッチ・クライアントを採用するかどうか
• 時期： 提案・コンサルティングフェーズ、もしくはソリューション・アウトラインフェーズの早
い段階（ソリューション・アウトラインの要員計画に影響するため）
– クライアントについて、プロトタイプ（モックアップ）・ベースのソリューション検討を行う
かどうか
• 時期： 提案・コンサルティングフェーズ、もしくはソリューション・アウトラインフェーズの早
い段階（ソリューション・アウトラインの要員計画に影響するため）
– 主なクライアント技術に何を採用するか
• JavaScript, Flash, OS nativeなどの検討
• 時期： ソリューション・アウトラインフェーズ（マクロ設計の要員計画に影響するため）
– JavaScriptの場合、ライブラリーに何を採用するか
• 時期： ソリューション・アウトラインフェーズ、もしくはマクロ設計の早い段階（マクロ設計の
要員計画に影響するため）
– クライアントの単体テスト、統合テストの自動化ツールに何を利用するか
• 時期： マクロ設計フェーズ
> 採用したライブラリーや設計のアーキテクチャにおけるテストが可能かどうか検討が必
要なため。テストが不可能な場合、アーキテクチャ側に再考が必要な場合もある。
46
© 2011 IBM Corporation
IBM Proposal Template – Value Driven Proposals
プロジェクト・プロセス定義
ƒ リッチ・クライアント・アプリケーションのプロジェクトのフェーズ定義の例
– ソリューション・アウトラインフェーズ
• 主にユーザーインターフェース要件の洗い出しを行う
• 何がJavaScriptで実現可能で、何ができないかについて判断できる要員が必要
• ユーザー・エクスペリエンスの観点で、使いやすいUIについて知見のある要員が必要
• 可能であれば、モックアップベースでの要件定義を進めると良い
– マクロ設計フェーズ
• 洗い出された要件から、以降で紹介するような仕組みをどの程度利用するか検討する
• 採用されたクライアント技術について熟知した、専任の担当者が必要
• 主に、モックアップを利用して画面設計を進めることになる
– マイクロ設計、開発フェーズ
• Widget仕様や、JavaScriptのオブジェクトの仕様を固め、実装を進める
– 単体テストフェーズ
• 共通モジュールに関するテストを行う（Widget仕様や、汎用オブジェクト、汎用メソッドレベ
ルのテスト）
• ここでは、画面に紐付くテストは行わない
• 自動化ツールとして、D.O.H.やQUnitなどを利用する
– 結合テストフェーズ
• 画面に紐付くテストを行う
• リッチ・クライアントのテストは繰り返し行うことになるので、なるべく自動化する
> 自動化ツールとして、SeleniumやRational Functional Testerなどを用いる
» RFTを利用する場合、サポートされていないWidgetがあるので注意が必要
47
© 2011 IBM Corporation
IBM Proposal Template – Value Driven Proposals
Dojoアプリケーション開発時の考慮点
2. 共通コンポーネント設計
48
© 2011 IBM Corporation
IBM Proposal Template – Value Driven Proposals
自作Dojo Object, Widgetの作成
ƒ Dojoでは、自作のDojo ObjectやDojo Widgetを作成する機能がある
– 既存のWidgetを指定した、機能の拡張も可能
/dojo/ibm/constants.js
getObjectによって、
新規ネームスペース
を持つオブジェクトを
作成
define(["dojo/_base/lang"], function(lang){
var con = lang.getObject("ibm.constants", true);
con.employeeTypes = ["Exective", "Manager", "Engineer"];
});
/dojo/ibm/form/MyButton.js
Extendsの
対象に指定
define([ "dijit/form/Button", "dojo/_base/declare" ],
function(Button, declare) {
var MyButton = declare("ibm.form.MyButton", Button, {
label: "MyButton!"
});
return MyButton;
});
ƒ Dojoのモジュールのプロパティ値を固定したり、画面レイアウトを持ったレイアウトオブ
ジェクト、共通オブジェクトなど、様々な用途で利用可能
49
© 2011 IBM Corporation
IBM Proposal Template – Value Driven Proposals
自作Dojo Object, Widgetの作成
ƒ 利用側のコードは、普通のDojoと全く同じ形で使える
<script type="text/javascript">
require(["dojo/parser", "ibm/constants", "ibm/form/MyButton",
"ibm/Messager"]);
dojo.ready(function(){
var mes = new ibm.Messager();
dojo.place(new ibm.form.MyButton({}).domNode, dojo.body());
var c = ibm.constants;
dojo.forEach(c.employeeTypes, function(type, i){
dojo.place(dojo.create("div", {innerHTML:type}), dojo.body());
});
});
</script>
ƒ 実行結果
50
モジュール側で指定
したラベルが表示さ
れている
© 2011 IBM Corporation
IBM Proposal Template – Value Driven Proposals
自作Dojo Object, Widgetの利用例
ƒ 単純な拡張の他、以下のような利用方法が考えられる
– 定数の共通化
• アプリケーションで定数として利用する値を格納し、各処理で利用する
• isDebug, isClientSideなど、デバッグやテスト用のフラグを管理する
– メッセージ管理
• アプリケーション内での汎用メッセージ出力オブジェクト
• info, confirm, warn, error, debugなど、出力の形式を抽象化する
– ページレイアウトのTemplate Widget化
• 動的に生成されるコンテンツを持ったレイアウトWidget
• JSP等のサーバーサイド側技術なしでも動的コンテンツが作成可能
– サーバーサイドへのリクエストの管理
• サーバーサイドへのリクエストを行うモジュール
– ページ管理Widget
• Webページそのものを大きなWidgetとみなし、ページのライフサイクルを管理
• JavaScriptのフレームワークとして利用
51
© 2011 IBM Corporation
IBM Proposal Template – Value Driven Proposals
【参考】 定数の共通化
ƒ アプリケーションで定数として利用する値を格納し、各処理で利用する
ƒ isDebug, isClientSideなど、デバッグやテスト用のフラグを管理する
開発中は、これらの値を
trueにしておく
define(["dojo/_base/lang“], function(lang) {
var con = lang.getObject("ibm.constants", true);
con.isDebug = true; //For Debug.
con.isClientSide = true; //For Mock-up without Server-side.
con.employeeTypes = ["Exective", "Manager", "Engineer"];
con.urls = [];
if (con.isCliendSide) {
con.urls.Index = "./index.html";
con.urls.Employees = "./json/employees.json";
} else {
con.urls.Index = "./";
con.urls.Employees = "./employees/";
}
});
52
サーバーサイドがない場合には、
HTMLファイルやJSONファイル
を利用する
本番環境では、HTMLやJSON
を返すServletにアクセス先を切
り替える
© 2011 IBM Corporation
IBM Proposal Template – Value Driven Proposals
【参考】 メッセージ管理
ƒ アプリケーション内での汎用メッセージ出力オブジェクト
ƒ info, confirm, warn, error, debugなど、出力の形式を抽象化する
define([ "dojo/_base/declare", "dijit/Dialog", "ibm/constants"],
function(declare, dialog, con) {
var mes = declare("ibm.Messager", null, {
_dialog : null, // dijit.Dialog
constructor : function() {
this.con = ibm.constants;
},
info : function(title, body, props) {
this._createNewDialog(title, body, props);
this._dialog.show();
},
タイトルやメッセージを引数と
して受け取る
中の出力方法は、アプリケー
ションの要件に応じて変更
（ここではダイアログに表示）
debug : function(message) {
if (this.con.isDebug) {
console.debug(message);
}
},
（続く）
53
© 2011 IBM Corporation
IBM Proposal Template – Value Driven Proposals
【参考】 メッセージ管理
（続き）
_createNewDialog : function(title, body, props) {
var _self = this;
ダイアログでメッセージ出力
する場合のロジック例
if (this._dialog) {
this._dialog.destroy();
}
this._dialog = new dijit.Dialog();
this._dialog.set("content", this._convertToDOMNode(body));
this._dialog.set("title", title);
for (prop in props) {
this._dialog.set(prop, props[prop]); // set props
}
},
// If a string message is specified as body, it should be converted to
// DOMNode.
_convertToDOMNode : function(body) {
if (typeof (body.nodeType) != "number") {
body = dojo.place(dojo.doc.createTextNode(body), dojo.create("p"));
}
return body;
}
メッセージは文字列でもDOMNodeでも受け取れる
ようにし、文字列の場合は内部でConvertする
});
});
54
© 2011 IBM Corporation
IBM Proposal Template – Value Driven Proposals
【参考】 ページレイアウトのTemplate Widget化
ƒ 動的に生成されるコンテンツを持ったレイアウトWidget
ƒ JSP等のサーバーサイド側技術なしでも動的コンテンツが作成可能
ƒ 大きく分けて、以下の二種類のWidgetに分けて生成すると良い
– ContentPaneを継承した、レイアウト用Widget
– _Widget, _TemplatedMixin等を継承した、テンプレート用Widget
テンプレート用Widget側の宣言
_Widget, _TemplatedMixin,
_WidgetsInTemplateMixinを継承
define(["dojo/_base/declare", "dojo/i18n", "dijit/layout/ContentPane", "dijit/_Widget",
"dijit/_TemplatedMixin", "dijit/_WidgetsInTemplateMixin"], function(declare, i18n, pane,
widget, template, templateWidget) {
var widget = declare("ibm.layout.MyDetailWidget", [widget, template, templateWidget],
{
templatePath: dojo.moduleUrl("ibm.layout", "MyDetailPane/MyDetailWidget.html"),
employee: null,
constructor: function(args) {
テンプレートとして使用するHTMLファイル
dojo.mixin(this, args.employee);
dojo.mixin(this, i18n.getLocalization("ibm", "labels"));
}
});
（続く）
55
エンティティオブジェクトと、ラベル名等を
mixinし、テンプレート内で使用できるようにする
© 2011 IBM Corporation
IBM Proposal Template – Value Driven Proposals
【参考】 ページレイアウトのTemplate Widget化
レイアウト用Widgetの宣言
ContentPaneを継承
（続き）
var pane = declare("ibm.layout.MyDetailPane", pane, {
constructor: function(args){
this.widget = new ibm.layout.MyDetailWidget({
employee: args.employee
});
},
コンストラクタでwidgetのnewを行う
buildRendering: function(){
this.inherited(arguments);
this.set("content", this.widget);
}
});
return pane;
buildRenderingでDOMの構成
});
56
© 2011 IBM Corporation
IBM Proposal Template – Value Driven Proposals
【参考】 サーバーサイドへのリクエストの管理
ƒ サーバーサイドへのリクエストを抽象化して、一箇所で管理する
– 正常時やエラー時の処理、どちらの場合でも最終的に行う処理などを引数に渡す
define(["dojo/_base/declare", "ibm/constants", "ibm/Messager"], function(declare) {
var req = declare("ibm.Requester", null, {
constructor: function(){
this.con = ibm.constants;
正常処理、エラー処理、最終処理を引数に取る
this.mes = new ibm.Messager();
},
_getRequestObject: function(_load, _error, _finally) {
var _self = this;
var defaultCallback = function(data, ioArgs) {
if(_self.con.isDebug) {
console.debug(data, ioArgs)
};
};
カスタムヘッダーなどの追加
var reqObj = {
preventCache : true,
handleAs : "json",
headers : {"X-IBM-API-Version" : "1.0"}
};
（続く）
57
© 2011 IBM Corporation
IBM Proposal Template – Value Driven Proposals
【参考】 サーバーサイドへのリクエストの管理
(続き)
if (_load) {
reqObj.load = function(data, ioArgs) {
_load(data, ioArgs);
if (_finally) { _finally(data, ioArgs); }
};
} else {
reqObj.load = defaultCallback;
}
if (_error) {
reqObj.error = function(data, ioArgs) {
_error(data, ioArgs);
if (_finally) { _finally(data, ioArgs); }
};
} else {
reqObj.error = defaultCallback;
}
return reqObj;
正常時の処理
エラー時の処理
外部に提供するメソッド
},
58
getEmployees: function(query, _load, _error, _finally) {
var req = this._getRequestObject(_load, _error, _finally);
req.url = this.con.urls.Employees;
if (query) {
req.url += "?"+dojo.objectToQuery(query);
}
dojo.xhrGet(req);
}
オブジェクトから検索クエリに変換してURLに付加
});
return req;
© 2011 IBM Corporation
});
IBM Proposal Template – Value Driven Proposals
【参考】 ページ管理Widget
ƒ Webページの抽象クラスを作成し、これを継承した各Webページを作成する
– 抽象クラスはdijit._Widgetを継承し、ここに共通処理を実装しておく
– dijit._Widgetの提供する、Dojo Widgetのライフサイクルを利用し、
個々のページに対して、処理を実行できる様々なタイミングを提供する
●抽象クラス
define(["dojo", "dojo/_base/declare", "dijit/_Widget", "ibm/constants", "ibm/Messager",
"ibm/Requester"], function(dojo, declare, widget){
var Page = declare("ibm.page._AbstractPage", widget, {
c : null, // ibm.constants
m : null, // ibm.Messager
xhr: null, // ibm.Requester
constructor : function() {
this.c = ibm.constants;
this.m = new ibm.Messager();
this.xhr = new ibm.Requester();
},
ほとんどのページで使う
共通オブジェクトや共通Widgetの初期化
（続く）
59
© 2011 IBM Corporation
IBM Proposal Template – Value Driven Proposals
【参考】 ページのライフサイクル管理
（続き）
buildRendering: function() {
var _self = this;
dojo.ready(function() {
if (_self.onBeforeBuildRender) {
_self.onBeforeBuildRender();
}
dojo.parser.parse(dojo.body());
パース処理の前後で実行する処理
if (_self.onBuildRendered) {
_self.onBuildRendered();
}
});
},
postCreate: function() {
var _self = this;
dojo.ready(function() {
if (_self.onPostCreated) {
_self.onPostCreated();
}
_self.startup();
});
},
startup : function() {
}
});
return Page;
});
60
© 2011 IBM Corporation
IBM Proposal Template – Value Driven Proposals
【参考】 ページのライフサイクル管理
ƒ 実装クラスは、抽象クラスを継承し、各タイミングでページの初期作成処理などを実装し、その他の
ページ固有の処理を実装する
●実装クラス
require(["dijit/layout/TabContainer", "dijit/layout/BorderContainer",
"dijit/layout/AccordionContainer", "ibm/form/MyButton", "ibm/layout/MyDetailPane"]);
define(["dojo/_base/declare", "ibm/page/_AbstractPage"], function(declare, abst){
var Page = declare("ibm.page.EmployeeViewer", abst, {
onBeforeBuildRender: function(){
console.log("onBeforeBuildRender");
},
onBuildRendered: function(){
console.log("onBuildRendered");
},
onPostCreated: function(){
console.log("onPostCreated");
},
抽象クラスの継承
実行結果
startup : function() {
console.log("startup");
}
});
return Page;
61
});
© 2011 IBM Corporation
IBM Proposal Template – Value Driven Proposals
Dojo Build System
62
© 2011 IBM Corporation
IBM Proposal Template – Value Driven Proposals
Dojoのビルド
ƒ Dojoのモジュール読み込みは、通常同期的に行われる
– 1モジュールの読み込みに、1つ以上のHTTPリクエストが発生するため、そのままだと遅い
ƒ ビルドを行うと、使用するJavaScriptなどのファイルを1ファイルにまとめることができる
– さらに、JavaScriptコードの圧縮も行うことが出来る
ƒ 実行時のパフォーマンスを大幅に向上させるので、必ず正式リリースの前には実施すること
– 可能であれば、開発中にも適宜ビルドで問題が発生しないか確認すること
ビルド前： 50ファイル、1.65秒
ビルド後： 5ファイル、151ミリ秒
ビ
63
ル
ド
© 2011 IBM Corporation
IBM Proposal Template – Value Driven Proposals
Dojoのビルド
ƒ
ビルドの実行
– Dojo内の /util/buildscripts ディレクトリーにビルドツールが配置されている
ƒ
実行手順
dependencies = {
1. プロファイルファイルを作成する
layers: [
• /util/buildscripts/profiles内に作成
{
2. ビルドコマンドを実行する
name: "./seminerTest.js",
dependencies: [
• profileオプションで、作成したプロファ
"dojo.data.ItemFileReadStore"
イルファイルを指定する
]
> 例： build.bat
}
profile=seminerTest
],
releaseName=seminerTest
prefixes: [
action=release mini=true
[ "dijit", "../dijit" ],
●プロファイルファイルの例
[ "dojox", "../dojox" ]
]
ƒ
詳細は以下のサイトなどを確認のこと
–
–
–
–
64
}
http://livedocs.dojotoolkit.org/build/index?action=show&redirect=build#the-dojo-build-system-prior-to-version-1-7
Dojo道場 ～ 第4回「ビルドでパフォーマンス・チューニング（1）」 ビルド・システムのメリットと使い方（1/3）：CodeZine :
http://codezine.jp/article/detail/5693
Dojo道場 ～ 第4回「ビルドでパフォーマンス・チューニング（2）」 高度なチューニング・テクニック（1/4）：CodeZine :
http://codezine.jp/article/detail/5694
Dojo道場 ～ 第4回「ビルドでパフォーマンス・チューニング（3）」 XDローダー（1/3）：CodeZine :
http://codezine.jp/article/detail/5695
© 2011 IBM Corporation
IBM Proposal Template – Value Driven Proposals
【参考】 Dojoのビルド時の圧縮
ƒ スペース、改行、コメントの削除
ƒ 変数名の短縮
function MyClass(){
this.foo = function(argument1, argument2){
var addedArgs = parseInt(argument1)+parseInt(argument2);
return addedArgs;
}
var anonymousInnerFunction = function(){
// do stuff here!
}
}
function MyFunc(){
// this is a top-level function
}
// we've got multiple lines of whitespace here
圧縮
function MyClass(){this.foo=function(_1,_2){var
_3=parseInt(_1)+parseInt(_2);return _3;};var _4=function(){};}function
MyFunc(){}
65
© 2011 IBM Corporation
IBM Proposal Template – Value Driven Proposals
JavaScript / Dojo リンク集
ƒ Dojo公式 : http://dojotoolkit.org/
–
–
–
–
–
–
–
–
最新・過去バージョンのダウンロード : http://download.dojotoolkit.org/
API Documentation : http://dojotoolkit.org/api/
チュートリアル : http://dojotoolkit.org/documentation/
デモとコードサンプル付きのドキュメント : http://dojotoolkit.org/reference-guide/
最新機能のドキュメント : http://livedocs.dojotoolkit.org/
Trac（バグトラッキングツール） : http://bugs.dojotoolkit.org/
公式フォーラム : http://dojo-toolkit.33424.n3.nabble.com/
Dojo Style Guide : http://dojotoolkit.org/community/styleGuide
ƒ Dojo道場 : http://codezine.jp/article/corner/397
–
–
–
–
–
–
–
–
–
–
–
66
第1回「グラフを使いこなす（前編）」 : http://codezine.jp/article/detail/5547
第1回「グラフを使いこなす（後編）」 : http://codezine.jp/article/detail/5572
第2回「データAPI（dojo.data）を使いこなす」 : http://codezine.jp/article/detail/5608
第3回「DataGridをもっと使いこなす」 : http://codezine.jp/article/detail/5640
第4回「ビルドでパフォーマンス・チューニング（1）」 ビルド・システムのメリットと使い方 : http://codezine.jp/article/detail/5693
第4回「ビルドでパフォーマンス・チューニング（2）」 高度なチューニング・テクニック : http://codezine.jp/article/detail/5694
第4回「ビルドでパフォーマンス・チューニング（3）」 XDローダー : http://codezine.jp/article/detail/5695
第5回「アニメーションを使いこなす」 dojo.Animationモジュール : http://codezine.jp/article/detail/5759
第6回「Dijitウィジェットを利用したアプリケーション作成の基礎」 : http://codezine.jp/article/detail/5835
第7回「カスタム・ウィジェット作成のためのウィジェット・ライフサイクル詳説」 : http://codezine.jp/article/detail/5879
第8回「コンポジット・ウィジェットでコンポーネント・プログラミング」 : http://codezine.jp/article/detail/6123
© 2011 IBM Corporation