ShowTable of Contents
Domino サーバーには、予め XPages で利用する為の dojo がプリインストールされています。
例えば、8.5.1 であれば dojo 1.3.2、8.5.2 であれば dojo 1.4.1 がインストールされており、開発者はこれらの dojo の機能を使って、よりリッチなアプリケーションを開発する事ができます。
一方で、dojo はオープンソースの支援によって開発されている為、基本的に Domino のバージョンアップより早い速度で新しいバージョンがリリースされており、通常、開発者がこの恩恵を受けるには Domino のバージョンが上がり、プリインストールされた dojo のバージョンがあがるのを待たなければなりません。
そこで、このページでは既存の XPages のコアコントールなどに影響を与えない様に、プリインストールされた dojo と、最新のバージョンの dojo を同じアプリケーション内で併用する方法を紹介します。
最新のバージョンの Dojo を扱うメリットとデメリット
最新のバージョンの dojo を使うメリットとしては、下記の点が挙げられます。
- Domino に含まれている dojo のバージョンとは関係なく、常に最新の dojo の機能を利用できる。
- dojo のカスタムビルドの機能を利用し、予めアプリケーションに必要な dojo のモジュールをひとつの JavaScript ファイルにまとめておく事により、dojo.require による遅い初期ロード時間を短縮できる。
- 通常、Domino のバージョンアップにより dojo もバージョンアップされてしまう為、アプリケーション内で独自に dojo を利用している場合は Domino のバージョンアップの際に動作に問題が出ないかを常に確認する必要がある。しかし独自に dojo ライブラリを設置する方法をとれば、Domino のバージョンアップとは無関係に dojo のバージョンをコントロール出来る為、Domino バージョンアップにおけるアプリケーションへの影響を防ぐ事ができる。
一方で、この方法をとる事のデメリットや注意点は下記の様な点があります。
- dojo ライブラリと関連する CSS やイメージを nsf 内にインポートする事が困難な為 、Domino サーバー上に最新の dojo を設置する必要がある。その為、単独のアプリケーションが利用するという理由だけでシステムへのファイル設置が許可されない場合は難しい。
- 基本的に XPages の既存のコントロールや、XPages の dojoType, dojoAttribute 属性ではプリインストールされた dojo を利用する事が前提となる為、最新の dojo を利用する部分は Pure HTML と Client Side JavaScript でコーディングする事が基本になる。(または XPages Extensibility API を使用して、最新の dojo を利用した独自のコントロールを作成する方法もある。)
- 次のセクションから、実際の使用方法について説明します。
dojo のカスタムビルド
dojo ではバージョン 1.3 以降、dojo、dijit、dojox といったデフォルトのネームスペースを変更する事により、複数のバージョンの dojo を併用する方法が用意されています。
今回の例では、Domino で利用されている dojo ではデフォルトのままの dojo、dijit、dojox というネームスペースを使用し、新しく設置する新しいバージョンの dojo ではネームスペースを dojo15、dijit15、dojox15 といったネームスペースに変更する事で、複数のバージョンをロードしても競合する事なく利用する事が可能になります。
最新の dojo のダウンロード
dojo の公式ページにアクセスし、ビルドツールが包含された Dojo SDK という最も大きなサイズのものをダウンロードします。
http://www.dojotoolkit.org/download/#sdk
記事執筆時点では 1.5.0 が最新な為、dojo 1.5.0 を使用します。
名前空間を変更してビルドする
ダウンロードしたファイルを解凍し、util\buildscripts に存在する build.bat を使用して、下記の様にカスタムビルドを作成します。
build.bat profile=standard action=release version=1.5.0 scopeMap="[[\"dojo\",\"dojo15\"],[\"dijit\",\"dijit15\"],[\"dojox\",\"dojox15\"]]"
上記のスクリプトでは、scopeMap の所で名前空間を変更してビルドしています。
このビルドスクリプトでは、メリットのセクションでも記載した通り、依存モジュールを予めひとつのスクリプトにまとめる事により、初期ロードのパフォーマンスを改善する事なども出来ます。
ビルドの詳細についてはこの記事では記載しない為、興味のある方は下記のページを参照してください。
http://www.dojotoolkit.org/reference-guide/build/buildScript.html
ビルドした dojo を配置する
ビルドした dojo を Domino サーバーに設置します。
ビルドが成功していると解凍したディレクトリの直下に release というディレクトリが生成され、そこにすべての JavaScript ファイル、CSSファイル、画像が設置されます。
下記の様に生成されたディレクトリ毎、Domino サーバーの dojo と同じディレクトリにコピーします。
xcopy /S /I /Y "releases\dojo" "C:\Program Files (x86)\IBM\Lotus\Notes\Data\domino\js\_dojo-1.5.0"
尚、上記のコピー先のディレクトリは Windows 7 64bit 版の Domino Designer のみがインストールされた環境のものです。環境によって異なる可能性がある為、適宜コピー先を変更して実行ください。
また、コピーはエクスプローラのコピーでも構いません。
NOTE: コピー先のディレクトリ名がアンダースコアからはじまっていますが、これは元々 dojo-1.5.0 とコピーした所、既存の XPages で読み込まれるバージョンがなぜか新しく設置した 1.5.0 を読み込む様になってしまった為、最初にアンダースコアを付けて回避しています。
おそらく、XPages の内部で dojo をロードする際に、Domino の JS ディレクトリ以下の dojo-{バージョン番号} という規則で最も新しいものを読み込む、といった様な実装になっているのかもしれません。
設置した dojo を XPages で利用する
これで最新の dojo の設置が完了したので、XPages で実際に使用してみます。
何事も Hello World から、という事で dojo のバージョンをアラート表示させてみましょう。
Domino Designer を開き、新しいアプリケーション、新しい XPages を作成し、下記の様に記述します。
<?xml version="1.0" encoding="UTF-8"?>
<!-- (1) dojo のテーマを使用する為、dojoTheme="true" を指定 -->
<xp:view xmlns:xp="http://www.ibm.com/xsp/core"; dojoTheme="true">
<!-- (2) 設置した最新の dojo の JS、CSS を読み込む。 -->
<link rel="stylesheet" type="text/css" href="/domjs/_dojo-1.5.0/dojo/resources/dojo.css" />
<script type="text/javascript" src="/domjs/_dojo-1.5.0/dojo/dojo.js"></script>
<!-- (3) dojo の設定。 名前空間の変更をここでも指定する必要がある -->
<script>
djConfig = {
isDebug : false,
parseOnLoad: false,
baseUrl: "/domjs/_dojo-1.5.0/dojo/",
scopeMap: [
["dojo", "dojo15"],
["dijit", "dijit15"],
["dojox", "dojox15"]
]
};
</script>
<!-- (4) 最新の dojo を利用した Hello World -->
<script type="text/javascript">
dojo15.require("dijit.Dialog");
dojo15.ready(function(){
new dijit15.Dialog({
title: 'Hello ' + dojo15.version,
style: 'width: 300px',
content: 'Hey!'
}).show();
});
</script>
</xp:view>
- dojo のテーマを利用する為、XPages に dojoTheme="true" が指定されている事に注意してください。
- 設置した最新の dojo の JS, CSS の URL を指定しています。
- グローバル変数 djConfig で、ビルド時に変更した名前空間の変更を明示的に指定しています。
- 名前空間を変更した dojo15 という変数名で dojo 1.5.0 を利用し、dijit.Dialog ウィジェットを使ってメッセージを表示しています。
保存してプレビューを行うと、下記の様に最新の dojo を利用したダイアログメッセージが表示されます。
また、もちろんこの状態で XPages のコアコントロールを XSP ファイルにドラッグ & ドロップで配置して、プリインストールされたバージョンの dojo と、今書いた最新のバージョンの dojo を利用するコードを共存させる事が可能です。
最後に
以上で XPages で最新の dojo の機能を利用する方法をご紹介しましたが、様々なウィジェットや機能を XPages 上で利用するには、独特な HTML、CSS が障壁となり、少しコツがいるものがあるのは事実です。
このページではそのすべてを紹介する事は出来ていませんが、XPages によってオープンなテクノロジがプラットフォームになった事により、予め用意された方法だけでなく、様々な方法で Notes/Domino アプリケーションでもより自由に、より洗練されたアプリケーションを開発する事が出来るという可能性を秘めています。
このページがその可能性のひとつの入り口として、参考にして頂ければ幸いです。