2013年10月30日水曜日

連載:ちょっとディープなXPages 第2-6回~JavaScriptをもっと知ろう

みなさん!XPages開発していますか!?

今回から、JavaScriptでよく使用されるパターンについてご紹介したいと思います。

その前に、

なぜパターンが必要か?

パターンとは、ソフトウェア開発においてよくある問題に対しての、定型的な解決方法のことです。テンプレートといってもいいでしょうね。

なぜ必要なのかは、私が今更述べなくてもいいでしょうけど、一応おさらい。

簡単に再利用できる

多くの人に使用されていて実績がある

未然にトラブルを防ぐ

などの効能があるので、多くのパターンを習得して使いこなせるといいですね。

名前空間パターン

名前空間とは、名前の集合をグルーピング化する考え方のことです。ネームスペースといったほうがわかりやすいかもですね。

JavaScriptでは、関数名やオブジェクト名が衝突しても後のものが上書きされるだけで、コンパイル時にも実行時にもエラーにならず、バグが見つけにくいものの1つです。

XPagesで、SSJSなどで関数を下記のような書き方をする場合が多いと思いますが、他のスクリプトライブラリで同じ関数名を使ってしまっていても、やはりエラーにならず上書きされるだけです。

function methodName(){
}

名前が衝突しないように、プレフィクスなどを付けることもあるかと思いますが、それでは関数名が長くなって使いづらいですよね。

そこで名前空間パターンです。

名前空間の宣言

名前空間の宣言は、下記のようにします。

var myNameSpace = {}; //名前空間の宣言
myNameSpace.methodName = function(){
}
    

オブジェクト・リテラルの書き方と変わりません。空のオブジェクトを生成しているだけです。

もともとJavaScriptには名前空間の概念はなく、当然そのようなステートメントはありません。JavaScriptの持つオブジェクトの柔軟性を利用しています。

JavaScriptでは、既に存在するオブジェクトにメンバーを追加できる仕様となっています。このパターンでは、空のオブジェクトにメソッドを追加指定だけなんですね。で、この空のオブジェクトを名前空間と見立てているだけです。

入れ子の名前空間

さて、名前空間の中にさらに名前空間は作れるでしょうか?

先程も述べたとおり、既に存在するオブジェクトにメンバーを追加できるわけですから、オブジェクトのメンバとしてオブジェクトを入れることができます。

これを利用すれば入れ子もできます。

var myNameSpace = {}; //名前空間の宣言
myNameSpace.subNameSpace = {}; // 入れ子の名前空間の宣言
myNameSpace.subNameSpace.methodName = function(){
}
    

簡単ですね。

1つ注意があるとすれば、varを付けるのは初めだけということです。この例では変数の宣言は"myNameSpace"だけで、あとはそれにメンバーを追加しているだけですから。

追加できるメンバーはメソッドだけではないですから、文字列や数値を定数として定義することも、もちろんできます。

XPagesでの活用は?

ちなみに、私はXPagesのサーバーサイド・JavaScriptでは、スクリプトライブラリのSSJSの先頭で、ファイル名と同じ名前空間を宣言するようにし、メソッドなどをその名前空間に入れるようにしています。

メソッド名の重複を気にしなくなるので非常に便利です。みなさん試してみて下さい。

海老原 賢次(EBIHARA Kenji)

リコーITソリューションズ株式会社(RICOH IT SOLUTIONS CO.,LTD.)

鹿児島ソリューション部(Kagoshima Department)

連載:ちょっとディープなXPages 第2-5回~JavaScriptをもっと知ろう

みなさん!XPages開発していますか!?
JavaScriptでよく使用されるパターンについてご紹介したいと思いますが、その前にパターンでもよく使用されるオブジェクト・リテラルについて説明したいと思います。

オブジェクト・リテラル

リテラルとはソースコード中に直接記載される定数のことです。
数値・文字列のリテラルは下記のようになります。これは通常良く使われますよね。
var name = 'abcd'; //文字リテラル
var count = 0; //数値リテラル
    
オブジェクト・リテラルは、下記のような記述になります。
//{}で囲むとオブジェクト・リテラル
// メンバー名 : 値 でプロパティ
// メンバー名 : function(){} でメソッド
var obj = {
    name: 'hoge', //プロパティ
    getName: function(keisho){
        return this.name + ' ' + keisho;
    }
}
print(obj.name); // "hoge"
print(obj.getName('さん')); // "hoge さん"
    
メソッドは名前なし関数を定義することで実装することができます。またその内部で自分自身を表すのに this を用いることができます。
これで作成されたオブジェクトは他のオブジェクトと何ら変わらず扱えるため、当然プロパティ値を変更したり、メンバーを追加したりすることもできます。
var obj = {
    name: 'hoge', //プロパティ
    getName: function(keisho){
        return this.name + ' ' + keisho;
    }
}
obj.name = 'geho'; //プロパティ値の変更
obj.lastName = 'foo'; //プロパティの追加
    
リテラルは定数なのに変更できるのはどういうこと?と思われる方がいるかもしれませんが、それを理解するにはメモリのヒープ領域のポインタが…みたいな話になるのでここでは割愛します。(^^ゞ
これの利点としては、関連するいくつかのリテラルや、クラスでいうところの static な変数や関数をまとめておくことができることが挙げられます。
また、関数で多くの引数が必要になる場合、使用者側はその順番を把握しなくてはならず、また省略できる項目が中にあった場合、nullなのか空文字なのかわかっておく必要があり、不便です。また拡張する場合は、引数の最後に付け足していくほかありません。
そこで、引数をオブジェクトととし、関数を使用する側はオブジェクト・リテラルを使用して渡すことで、非常にわかりやすくなり、拡張しやすくもなります。
//bad pattern
var addUser = function(name, lastName, age, corporation, department){
}
//Good Pattern
var addUser = function(user){
    user.name; //などとして引数にアクセス
    var department = user.department || 'なし'; //departmentがない場合のデフォルト値
}
//使用者側
addUser({
    lastName: 'ebihara', //順番を意識しなくても良い
    name: 'kenji',
    age: '39',
    corporation: 'RITS'
    //department: 'kagoshima //省略できる項目は入れない事もできる。(関数側で配慮が必要)
});
    
Javaなど他のオブジェクト指向言語では、オブジェクトを作成するにはクラスが必要なのに、この場合のクラスは何?と思う人もいると思います。
実はJavaScriptにはクラスと言う概念はありません。存在するのは、オブジェクトと関数のみです。
しかし関数にはクラスのように扱える、コンストラクタ関数というものもあります。
これについては次回以降に説明したいと思います。
海老原 賢次(EBIHARA Kenji)
リコーITソリューションズ株式会社(RICOH IT SOLUTIONS CO.,LTD.)
鹿児島ソリューション部(Kagoshima Department)

連載:ちょっとディープなXPages コラム2

みなさん!XPages開発していますか!?
前の投稿から、だいぶ時間が立ってしまって申し訳ありません!
ちょっとハードな仕事にハマってしまっていました・・・
今回はコラムということで、お伝えしていこうと思います。
というのも今回の内容は、2013年11月6~8日に開催される、XPages Dayでもちょっと触れる部分で、この記事をその資料としてもご提供しようという腹づもりです。

DBへのjQueryのインポート方法について

jQueryについて

jQueryは、JavaScriptライブラリの中でもデファクト・スタンダードと言ってもいいくらい、普及しているもので、非常に少ないコード量で多くのことを実行できるのが特徴です。
ご存じない方は、下記のサイトなどが参考になると思います。
jquery.com(公式サイト)
私も使い始めて、めちゃめちゃJavaScriptのコーディング時間が減りました!ほんとにもう手放せないです。(個人の感想です)
XPagesではJavaScriptライブラリとしてDojoが採用されていますが、正直なところjQueryの方が扱いやすいですし、何よりjQueryの方が普及率が格段に高いので、情報量やプラグインの数も多いのが決定的です。
そんなjQueryをXPagesで最大限に活用して楽しましょう!

jQueryのDBへのインポート

jQueryも(当然なのですが)JavaScriptで書かれているので、スクリプトライブラリに入れればいい・・・はずなのですが、何故か構文エラーになってしまいます。
そこで、少々面倒ですが下記の手順でインポートします。
※サーバーに置いて読み込ませることもできますが、実際にはそれが出来る環境は限られますからねぇ。
  1. 公式サイトからファイルをダウンロードします。

    * ver 2.x系は、IE6,7,8をサポートしていないので注意!
  2. Domino DesignerのDBで「パッケージ・エクスプローラ」を開きます。 * そのウィンドウがない場合は、メニューの「ウィンドウ」→「Eclipseビュー」→「パッケージ・エクスプローラ」から選択します。
    イメージ
  3. パッケージエクスプローラーの「WebContent」フォルダに「js」というフォルダを新しく作り、ダウンロードした .js ファイルをドラッグ&ドロップします。
    フォルダの追加は、「WebContent」フォルダの上で右クリック→「新規」→「その他」→「一般」→「フォルダー」でできます。
    イメージ
  4. 次に使用したいXPagesでリソースを指定します。この時、プロパティウィンドウの「すべてのプロパティ」→「resources」に追加します。
    [+]を押すとリソースのタイプを聞いてくるので"JavaScript"を選択します。
  5. 「clientSide」に"true"、「src」に"./js/jquery-1.10.2.min.js"(ファイル名はダウンロードしたファイルのファイル名です)と入れます。
    イメージ
これで、jQueryがブラウザでロードされるはずです。
すべての画面で使用したいのであれば、カスタムコントロールのリソースとして追加したり、Themeを利用するのも手ですね。

jQueryの使い方については…

後ほど解説していきたいと思いますが、Webで検索すると日本語の記事も多くあるので、探してみて下さいね。
海老原 賢次(EBIHARA Kenji)
リコーITソリューションズ株式会社(RICOH IT SOLUTIONS CO.,LTD.)
鹿児島ソリューション部(Kagoshima Department)

2013年10月25日金曜日

連載:ちょっとディープなXPages コラム1

みなさん!XPages開発していますか!?
前回の予告でJavaScriptのパターンをいくつか紹介します、と書いていましたがJavaScriptをちょっとおやすみして、XPagesの小ネタをはさもうと思います。

renderedとloadedの違い

配置したコントロールを表示/非表示するときに、renderedのプロパティを使用するかと思います。
renderedに聞き覚えのない方は、下記のチェックボックスと言えばわかるでしょうか?
イメージ
このチェックボックスをoffにすると、「すべてのプロパティ」でrenderedの値が"false"になっているのが確認できると思います。
一方で同じ「すべてのプロパティ」にはloadedというものが有り、これを"false"に設定すると同じように表示されなくなります。
では、これらの違いはどこにあるのでしょうか?
実は、画面にあるコントロールは、renderedの値にかかわらず、サーバーのメモリに展開されますが、loadedを"false"とするとメモリ上にも展開されなくなります。
つまり実行時にコントロールが存在しない扱いになるわけです。
もちろん、メモリ上に展開しない分だけサーバーの負荷は減るわけで、パフォーマンスにも影響します。
じゃあ、loadedだけを使えばいいのかというとそういうわけではありません。メモリ上に展開しないということは、ボタンなどのイベント処理でアクセス出来ない-再表示させたりできなくなることになります。
なので、loadedの式は"動的な計算"は使えず"ページの読み込み時に計算"しか選択できないようになっています。

まとめ

画面内のボタン等で表示を切り替えたい場合は、renderedで、ページの読み込み時に表示/非表示が決定して、ページを離れるまで変更ない場合は、loadedで設定しましょう。

次はJavaScriptに戻ります

次はちょっと組立を変えて、JavaScriptのオブジェクト・リテラルについてお話します。
海老原 賢次(EBIHARA Kenji)
リコーITソリューションズ株式会社(RICOH IT SOLUTIONS CO.,LTD.)
鹿児島ソリューション部(Kagoshima Department)