HUMCOM Libraries

汎用的に使えるSSJSのライブラリ集である。

XPagesにはサーバ側で動くJavaScriptと、ブラウザ側で動くJavaScriptの2種類がある。前者を「Server Side JavaScript」(SSJSと略称)、後者を「Cient Side JavaScript」(CSJSと略称)と呼ぶ。 やや極論かもしれないが、XPagesを始めたばかりなら、SSJSだけやってればいいと思う。XPagesに慣れてきて、ちょっとブラウザ上で凝ったことをやりたくなってからCSJSに手を出せば いいと思う。

SSJSについて

SSJS自体は普通のJavaScriptだが、XPages独自の機能が最初から組み込まれているのが特徴。

これらの具体的な使い方はまた後ほど。

SSJSはどこに書くかというと、XPagesのページを記述するときの<xp:xxx>要素のいろんな属性指定の中に書く。例えば、文字を出力する<xp:label>という要素というか コントロールがあるが、ブラウザのページに出力したい文字列が"HUMCOM Project"だとすると、以下のように記述する。

  <xp:label value="HUMCOM Project" />
  

今日の日付みたいに、可変の文字列を出力したい場合にSSJSを使う。@Now()はSSJSに用意されてい@関数で、現在の時刻を返す関数。

  <xp:label value="#{javascript:@Now()}" />
  

つまり、まずWebページのリクエストを受けると、#{javascript:}と書かれた部分をJavaScriptとして@Now()を実行し、Date型の日付/時刻データを返す。 それを"2015/11/26"のような文字列に変換し、<xp:label value="2015/11/26" />として処理され、画面に今日の日付が出る、という仕組みになっている。

他にも、コントロールの表示/非表示の判断などにもSSJSが使われる。renderedという属性は表示/非表示を決めるもの。trueの時に表示する。 以下のコードはものすごく冗長に書いてあるが、今度は<![CDATA[#{javascript:...}]]>というのが出てきた。これもrendered="#{javascript:....}"と同じ意味で、 「CDATAセクション」と呼ばれるもの。こちらは中で"などをエスケープ無しに使えるようになっている。

  <xp:label value="もう2016年になってしまった">
      <xp:this.rendered>
        <![CDATA[#{javascript:
          if (@Year(@Now()) > 2015) {
            return treu;
          } else {
            return false;
          }}]]>
        </xp:this.rendered>
  </xp:label>
  

簡潔に書けば、上記のコードは以下のと同じ。

  <xp:label value="もう2016年になってしまった" rendered="#{javascript:@Year(@Now()) > 2015}" />
  

他にも、ボタンを押したときのイベントハンドラや、データソースの指定、スタイルの指定など、あらゆるところにかける。 どういう記述にすればいいかを細かく覚える必要はなくて、GUIタブ側で可変のマークが付いてるところで、JavaScriptを打ち込んでみればいい。

SSJSの組み込み

ただ、JavaScriptのコードが3行以上になるようなら、SSJSのライブラリに処理を逃がし、XPageやカスタムコントロール上の記述からは関数を呼び出すだけにして 置くほうがページの記述がすっきりしていい。XMLとJavaScriptが混在してると、インデントのめちゃくちゃになるしね。

SSJSライブラリの書き方

SSJSはコード/スクリプトライブラリと開き、右ボタンクリックで「新規作成」を選び、「サーバーJavaScript」を選べばいい。名前はライブラリの中身を連想するいい名前をつけておく。

SSJSの作成場所
SSJSの新規作成

この中にJavaScriptの文法で何かの処理を行う関数を書いていく。

例えば、ユーザーの漢字名を返すgetUserKanjiname()という関数を用意したければ、こんな関数を用意すればいい(中身は省略)。

  function getUserKanjiname() {
    ....
  }
  

後は必要に応じて、必要な関数をずらずらと書いていけばいい。

XPage内から関数を呼び出すには、XPageの先頭でSSJSを組み込むようにして、関数名を呼び出せばいい。 例えば、"app"というSSJSがあるとしたら、こんな感じで組み込めばいい。

  <?xml version="1.0" encoding="UTF-8"?>
  <xp:view xmlns:xp="http://www.ibm.com/xsp/core"
      xmlns:xc="http://www.ibm.com/xsp/custom">
      <xp:this.resources>
          <xp:script src="/app.jss" clientSide="false"></xp:script>
      </xp:this.resources>
      ....
  </xp:view>
  

GUIで設定するなら、XPageのプロパティで「リソース」→「追加」→「JavaScriptライブラリ」と選んでいけばいい。

SSJSの組み込み

後は、<xp:label>内から以下のように呼び出せばいい。

  <xp:label id="label2">
      <xp:this.value><![CDATA[#{javascript:getUserKanjiname()}]]></xp:this.value>
  </xp:label>
  

モジュールパターンライブラリ

JavaScriptでライブラリを作るときの方法に「モジュールパターン」というのがあるらしい。いくつか流儀があるみたいだが、自分はこんな感じで記述してる。

  01: $hc = {};
  02:
  03: (function() {
  04:   // Constants
  05:   var PREFIX = "HUMCOM";
  06:
  07:   $hc.publicMethod_A = function(params) {
  08:     ...
  09:   }
  10:   $hc.publicMethod_B = function(params) {
  11:     ...
  12:   }
  13:
  14:   // -------------- Private Method ---------------
  15:   function _private_A(params) {
  16:     ...
  17:   }
  18: })();
  

こういう形でライブラリを定義すると、機能別にいくつかのライブラリを用意することができる。

では、そのライブラリを紹介していこう。

ライブラリはGitHubでも公開している。

HUMCOM Base

他のHUMCOMライブラリからも呼ばれる基本的なメソッドを用意している。

主にデバッグ関係のライブラリ。あと、@関数でちょっと使いにくい関数を自分が使いやすい形に変更してる。

HUMCOM Account Service

ユーザーアカウントに関する機能を提供するライブラリ。

HUMCOM DataBase Serice

文書ロックや設定読み出しなどのサービスを提供するライブラリ。

HUMCOM ItemList Library

可変数のアイテムを扱うオブジェクトを作るときに便利なプロトタイプオブジェクト。