XPagesリッチテキストコントロールのカスタマイズ

XPagesのリッチテキストコントロール カスタマイズ

Notes/Dominoエンジニア XPages担当の米原です。

まだまだ現役でXpagesの開発を行っています！
最近行き詰まったところがありましたで備忘としてブログに残すことにしました。

リッチテキストの入力高さを固定（縦スクロール付き）方法

リッチテキストを画面に配置したのですが、文字を入力して改行していくと、
自動で入力枠が縦に広がり結構縦に長くなり1画面の領域を結構占領してしまいます。
どうにか縦の幅を狭くしたいと思いました。

入力をするとどんどん広がって他の項目が見えなくなったりします。

Dojo属性を追加することによりCKEditorのConfig値を変更しました。
autoGrow_maxHeight：縦幅の広がった際の最大値

こんな感じで最大枠を指定できます。長くなる場合は縦のスクロールバーが機能します。

ツールバーを消す方法

今回の場合上のツールバーも不要なので消したいと思います。

同じように、今度は　nameに　toolbar 、valueに　[[]] 　これで上のツールバーは消えます。

この様にしてすっきりしました！
ここで「tootbar」 の「value」 に表示したいアイコンを選択することも可能です。

詳しくはこちらを参照してください↓
https://www.ktrick.com/xpages-richtext-ckeditor-toolbar-customize/

設定値などは、こちらを参考にしました。
https://docs-old.ckeditor.com/ckeditor_api/symbols/CKEDITOR.config.html

また色々と試したいと思います！

by Kazuyuki Yonehara

XPages on Bluemix からオンプレミスDominoのデータにアクセス

Hybrid XPages アプリケーション on Bluemix

XPages on Bluemixが2016年5月に製品版としてリリースされ、クラウド上で簡単にXPAGESアプリケーションを開発する環境が用意されました。

XPages on Bluemixでは”XPages ランタイム” と呼ばれる実行環境からXPAGESを動かすことになります。xpages_runtime

ただ、XPagesランタイムはあくまで実行環境という位置づけであり、データ（文書）の格納を行うには、別途データ格納先として”XPages No SQL Database”と呼ばれるサービスと組み合わせて開発することが一般的でした。

"XPages No SQL Database"と言っても蓋を開けてみればただのNSFファイルであるので、フォームやビューを作って文書を格納することができます。

しかし、この”XPages No SQL Database”というサービスは今のところ Bluemix Labs Catalogと呼ばれる実験的なサービスの一部という扱いとなっており、データの永続性が保障されるわけではないというのがIBMからの発表になります。

そこで、今回ご紹介するのがデータの格納先としてオンプレミスのDominoを指定してクラウドサービスのXPages on Bluemixを使ってみようという試みです。

オンプレミスのDominoでなくても、SoftLayer等のクラウド上にあるDominoでもいいのですが、要はBluemixのサービス外からデータを参照させるという方法になり、「Hybrid XPages Application on bluemix」なんてカッコいい呼び方もされるみたいです。

 

BluemixのXPagesランタイムで使用するための Dominoサーバーのセットアップ

icon-website-support-200x20Hybrid XPagesアプリケーションを動作させるにはオンプレミスの Domino構成に少し手を加える必要があります。

"XPages No SQL Database"サービスを利用したことがあればイメージがつき易いと思うのですが、"XPages No SQL Database"のユーザー情報等では「/O=bluemix」の組織名が利用されています。

これではXPages on BluemixからオンプレミスのDominoには相互認証がなくアクセス出来ないことが容易に想像できると思います。

そこで、オンプレミスのDominoから信頼されているサーバーIDを新たに作成し、XPagesランタイム・コンテナーにアプリケーションをデプロイするタイミングでサーバーIDファイルも同時にプッシュして提供するという方法をとります。

そうすることでXPagesランタイムがNRPC（Notesポート:1352）を使いセキュアにデータにアクセスすることが出来るようになります。

ここから先の前提条件

  • Domino Designer, Administratorがインストール済みであること
  • Domino Designer 9.0.1FP6もしくは OpenNTF.org からリリース15以上のXPages Extension Libraryがインストール済みであること
  • Domino DesignerのプリファレンスからBluemixの設定が完了していること
  • Bluemix上でXPagesランタイムを使ったアプリを1つ用意してあること。またXPagesアプリケーションファイル、manifestファイルをダウンロード済みであること。

Step１： Bluemix用のサーバーIDの作成

  1. Domino Administratorを起動し「設定」タブをクリック
  2. 「ツール」ペインから、「登録」⇒「サーバー」を選択
  3. 認証者の選択ダイアログで認証者IDを指定して[OK]bluemix_server_01
  4. Cert IDのパスワードを入力して[OK]
    bluemix_server_02
  5. サーバーの登録ダイアログでは登録サーバーを任意で変更して[続行]
  6. 新規サーバーの登録ダイアログではBluemix用のサーバー情報を記入。[全てを登録]を押して登録を完了させます。
    bluemix_server_03サーバーのパスワードはオプションなので追加しない人も多いと思いますが、自分の場合は今回サーバーIDファイルを外部に提供するわけなのでパスワードをかけておくことにしました。
    また「ファイル」の箇所をチェックしておき書き出し保存しておいた方が後のステップで使う時に便利なのでお勧めします。

これでサーバーの登録は完了です。特に変わった設定はなかったかと思いますが、１つ違う点として、この作成したサーバーIDをもとに新たにDominoをインストールするという必要はありません。あくまでBluemixのXpagesランタイムに渡してやるだけで動作するようになります。

※注意１： 新たに追加したサーバーIDが「LocalDomainServers」に含まれていることを確認してください。

※注意２： Bluemix XPagesランタイムからアクセスがあるサーバーのサーバー文書の「セキュリティー」タブ一番下、Trusted Serversに新たに作成したサーバー名もしくはグループ名が入っていることを確認してください。

bluemix-domino-server-04

Step2: IBM Bluemix Manifestの設定

  1. Domino Designerを開き、あらかじめBluemixで作っておいたXPagesアプリケーション（nsf）を開きます。
  2. 「アプリケーション構成」⇒「IBM Bluemix Manifest」を開きます。
  3. 右上「Hybrid Configuration」から「Edit」ボタンを押します
    bluemix-domino-server-05
  4. Hybrid 構成の情報を入力します
    bluemix-domino-server-06

    • Remote Server Address ( APP_REMOTE_DATA_SERVER_ADDRESS)
      : オンプレミスDominoのIPアドレスを指定。
    • Remote Server Name (APP_REMOTE_DATA_SERVER_NAME)
      : オンプレミスDominoのサーバー名(例: App01/ZetaDataBank)。
    • Runtime Server Name (APP_RUNTIME_SERVER_NAME)
      : 上記で作成した新規サーバー名 (例: bluemix/ZetaDataBank)。
    • Runtime Server ID File (APP_RUNTIME_SERVER_IDFILE)
      : 上記で作成した新規サーバーのIDファイル。
    • Runtime Server ID Password (APP_RUNTIME_SERVER_PASSWORD)
      : サーバーIDにパスワードを指定した場合は入力。
    • Directory Assistance Enabled (APP_DA_ENABLED)
      : ハイブリッド構成でディレクトリアシスタンスを有効にするかを指定。
    • Directory Assistance Domain (APP_DA_DOMAIN)
      : ドメイン名を指定（例：ZetaDataBank）。
    • Directory Assistance Address Book (APP_DA_ADDRESS_BOOK)
      : ハイブリッド構成で認証のために必要なディレクトリNSF (例： “names.nsf”)。

以上で設定は完了です。

試しにXPagesアプリケーションに以下のようなXPageを作成してみました。

このサンプルXpageではオンプレミスにあるNSFファイルのビューを指定しています。

あとはDomino DesignerからBluemixへデプロイしてやります。

bluemix_server_07

Bluemixサービスが自動で再起動され、さきほど作成したXPAGEにアクセスしオンプレミスのデータが問題なく取れていれば成功です。

by ktatsuki

XPagesのラジオボタンをカッコいいデザインに変える方法

通常、ラジオボタンをCSSだけでデザインする場合によく使われる方法

通常、ラジオボタン、チェックボックスをデフォルトのブラウザの持つデザインではなくカスタマイズしようとした場合、HTMLソースコードを以下のように用意します。

ここでまず、ラジオボタンのINPUTタグとLabelタグを兄弟関係で持たせるということが重要になります。その後、CSSによって以下のように指定します。

これにより、丸ポチを100％透過してしまい見えないようにしてやります。
次にLabelタグを使い、好きなようにボタンのデザインを作成してやります。

こうすることでこのようなラジオボタンにカスタマイズすることができます。

custom-radio

このCSSで重要なのは　”input[type="radio"]+label:before”　としている点です。
つまり、+label とすることでinputタグの兄弟関係にある labelタグのデザインをカスタマイズしています。
なお、なぜこのような遠回りなことをしなければいけないかというと、input タグには「:before」が使えず、またinputタグ自体は非表示しなければならないため、labelを使ってこのような対応になってしまうわけです。

と、ここまではXPagesに全く関係のないHTMLとCSSのお話なので、ラジオボタンをカスタマイズしたい場合はググってみると色々なデザインを発見できると思います。
前置きがかなり長くなりましたが、XPagesで同等のことをしたい場合の説明をします。

XPagesのラジオボタン（ラジオボタングループ）はHTML構造が違う！？

同様のことをXPagesのラジオボタンで行いたい場合、まずXPagesが出力するHTMLソースコードをチェックします。ここではラジオボタングループを利用します。

すると出力されるコードは以下の通りです。（Domino 9.0.1)

見て頂いて分かるようにinputタグを子にもつようにlabelタグで括られています。これがXPagesでラジオボタンのデザインをカスタマイズすることを難しくしています。

ラジオボタンがチェックされたか、親のタグのLabelから分からない

上記CSSで、"input[type="radio"]:checked+label:before"というセレクターがありますが、「ラジオボタンがチェックされたとき、その兄弟のラベルのデザインを変更する」という箇所になります。CSSでは「XXXという子要素を持つ親の要素」という逆順のセレクターを指定することが出来ないため、XPagesの「INPUTタグ（ラジオボタン）を選択された時の親のLabelのデザインを変更する」ということが技術的に不可能になります。
（jQuery等を使いJavascriptで処理する場合は可能であったりします。。。）

それでもCSSだけを使って頑張って実装する！

上記CSSによるラジオボタンのデザイン変更が出来ないため、別の方法による実装をする必要があります。

「box-shadow」を駆使して実装する！

XPagesのラジオボタン用のCSSは以下のようになります。

こちらのCSSでは"label:before"でラジオボタンの外枠を描画、"label:after"で選択時の丸ポチを描画しています。キーはクリック時の丸ポチの表示・非表示を"box-shadow "でマスクすることで実装しています。
多少複雑ですが、こうすることでXPagesの出力するHTMLにCSSを被せるだけでデザインをカスタマイズすることができるようになりました。

なお、このCSSですが、IE8以前のブラウザでは残念ながら正しく動作しません。"box-shadow"がIE8ではまだサポートされていないためです。

おまけ

上記CSSの応用みたいなものですが、ラジオボタンに画像を使うなどアイデア次第でより大幅にデザインを変更することができるようになります。
以下のソースコードでは"box-shadow"を使い選択された値の画像を濃淡により表現しています。

こちらのコードを実行した場合のイメージがこちらです。アイコン画像をクリックすると選択状態を表すように色が濃くなります。

custom-radio-img

by ktatsuki

XPagesでフィールドに"年月日のみ"、"時刻のみ"の値を設定する方法

XPagesでの日付の保存では常に年月日、時刻の両方が保存される

"年月日のみ"もしくは、"時刻のみ"と設定されているフィールドを持つ文書をNotesクライアントで保存をした場合と、XPagesで保存をした場合で保持されるデータの持ち方が変わってくるということが今回のブログのトピックになります。

例を上げると、以下のようなフィールド、日付の表示（年月日のみ）

年月日のみをもつフィールド

もしくは、時刻の表示（時分）

時刻の表示のみをもつフィールド

といったケースです。

これを試しにNotesクライアント（Ver 9.0.1 FP3)で保存してたところ、以下が通常のNotesクライアントでのデータの保存結果になります。

Notesクライアントで日付フィールドを保存

Notesクライアントで日付フィールドを保存

Dateフィールドでは「2015/03/02」、Timeフィールドでは「14:35:00」というようにそれぞれ年月日、時刻のみが格納されます。

では、このフォームを元にXPagesから文書作成をした場合どうなるか、簡単なXPagesを作成して試してみました。

XPagesで日付フィールドの保存

DateフィールドとTimeフィールドのXPagesソースコードは以下のとおりです。

Dateフィールド

Timeフィールド

それぞれ、フィールドのTypeをdate, timeと指定しています。

このXPagesで保存した後、フィールドに格納されたデータを見てみると、

XPagesから保存された文書のDateフィールド

XPagesから保存された文書のTimeフィールド

両方が「yyyy/MM/dd hh:mm:dd ZZ」のフォーマットで保存されていることが確認できます。

なぜ"年月日のみ"、"時刻のみ"が必要か？

上記の比較からどちらのデータの持ち方が正しいということが今回の主旨ではありません。

実際には、Notesクライアントで使ってきたNSFをXPagesを使ってWEB化したい、というケースが多いと思います。そしてNotesクライアントとXPagesの両方でNSFを使い続けるといった場合、やはりXPagesがNotesクライアントの仕様に合わせる必要が出てきます。

前置きが長くなりましたが、今回はXPagesでも"年月日のみ"、”時刻のみ”のフィールドを設定する簡単な方法をご紹介します。

NotesDateTimeを使って整形しよう

やり方は幾つかあるとおもいますが、

SSJSのNotesDateTimeクラスを使って整形してやることが出来ます。

このコードではXPagesで一旦文書保存した後のPostSaveDocumentイベント内でNotesDateTimeクラスのsetAnyTime()、setAnyDate() を使うことで、思った通りのフォーマットに整形しています。

 

いかがでしたでしょうか？

今回は既存NSFをWEB化する際に躓きがちなDateTimeフィールドの情報でした。

by ktatsuki

リッチテキストエディタのカスタマイズ

XPagesリッチテキスト CKEditorツールバーをカスタマイズ

XPages リッチテキスト コントロール

XPagesのリッチテキストコントロールはDomino 8.5.2からCKEditorが採用されるようになりました。

デフォルトでのリッチテキスト コントロールは以下の様なレイアウトになります。

デフォルトのXPages リッチテキストコントロール

デフォルトでは文字の修飾など基本的なことしか出来ないようになっています。

今回はこのCKEditorをカスタマイズする方法をご紹介します。

toolbarTypeを指定してカスタマイズ

以下の用にDojo属性を追加し、名前を「toolbarType」にし値を指定します。

値には

  • Slim
  • Medium
  • Large

を指定することができます。

リッチテキスト コントロールのプロパティ
リッチテキスト コントロールのプロパティ

それぞれのレイアウト

XPages リッチテキストコントロール Slim
「Slim」を指定
XPages リッチテキストコントロールMedium
「Medium」を指定
XPages リッチテキストコントロール Large
「Large」を指定

Javascriptを使ってフルカスタマイズ

dojo属性に「toolbar」を作り、ツールバーの項目をJavascriptの配列で指定することでリッチテキストコントロールのツールバーをフルカスタマイズすることが可能になります。

XPages リッチテキストコントロールをtoolbar属性でカスタマイズ
リッチテキストコントロールのプロパティ

値の部分にサーバーサイドJavascriptでツールバーの項目を以下のようにセットします。

全てのツールバーの項目を表示させたい場合、

のようになります。

このように、フルカスタマイズすることで、今までになかったHTMLソースコードでの編集等も可能になります。

XPages リッチテキストコントロール ツールバーのフル機能を表示
XPages リッチテキストコントロール ツールバーのフル機能を表示

CKEditor 3.X Developer's Guide も参考にしてください。

 

by ktatsuki

【XPages】 xe:jsonRpcService の使い方と考察

xe:jsonRpcServiceってなにやつ？

今回はExtension Libraryに搭載されている xe:jsonRpcServiceに関して日本語で解説がほとんど見当たらなかったのでブログに書いてみます。

xe:jsonRpcServiceはDomino Designerの右コントロールの「データアクセス」 →「リモートサービス」をXPagesにドラッグしてやることで作成することが出来るコントロールです。

jsonRpcService

とても軽量、シンプルな通信プロトコル JSON-RPC

でも使い道がいまいちよく分からないDomino技術者の方も多いと思います。そしてよく分かっていない内の１人だった自分が今回、jsonRpcServiceについて調べてみました。

まず、jsonRpcServiceはRPCの名が入っている通り、クライアントとサーバー間でリモート処理を実行したりするんだろう、と推測できます（RPC=リモートプロシージャコールの略）。

そしてJSON-RPCはそれ自体が新しい規格であり、そのデータの受け渡しにJSONを利用したプロトコル（現行バージョンは２．０）ということです。

実際にはJSON-RPCでは以下の様なデータがやり取りされます。

とてもシンプルで軽量なプロトコルというのも納得ですね。

XPagesのjsonRpcServiceコントロールも同様に、できる限り軽量な構成になるようにデザインされており、クライアント・サーバー間で呼び出されたデータのみを送信し、返信されたデータのみを受信するといった軽量な処理が行えるコントロール、ということです。

ただ正直なところ、XPagesには部分更新イベントという便利な機能があるので、結果だけを見ると同等な実装が出来てしまうと思います。ではなぜjsonRpcServiceが必要になるのか？恐らくリモート処理がとても軽量に作られているということが一番の特徴だと思います。

例えば、株価の値を刻一刻と自動更新するようなアプリケーションを作りたいといった場合、XPagesの部分更新イベントを一分おきに発生させるというのはちょっと大掛かりな気がするのでもっと軽量な処理で実装したい、といったケースで役に立つのではないでしょうか。

 実際に使ってみた

jsonRpcService を使ったとってもシンプルなサンプルはこんな感じです。

６～１０行目でJSON-RPCの関数を定義しています。ここではgetUserName()。処理内容はサーバーサイドJavascriptで記述できます。
そして１３行目にボタンを配置してonclickイベントでクライアントJavascriptを書いていますが、service.getUserName();とすることでJSON-RPCのリモート関数を呼び出しを行っています。

このようにxe:jsonRpcServiceでリモート関数を定義すると自動でクライアントJavascipt関数が用意されているというところが肝ですね。

上記のサンプルでは関数の引数は使っていませんが、もちろん引数を持たせることも可能です。
引数を持たせて足し算の計算をさせたサンプルがこちらです。

ハイライトしている7,9,10,18行目を見て頂くとわかると思います。

 

どれだけ軽量なの？

それでは、実際にjsonRpcServiceがどれほど軽量か上記のコードをFirefox Firebugを使って確認してみます。jsonRPCService_add

上記のXPagesをFirefoxで読込み、Firebugを起動、「Net」のタブを開いておきます。そして「足し算」ボタンを押した時に追加される通信データを確認します。

 

 

 

以下の画像がその時のFirebugの表示結果です。

jsonRPCService Firebug

おぉ、データサイズわずか44バイト！！ 軽っ！

実際にどのようなデータがやりとりされたのかもFirebugで確認してみます。

まずはPostデータ

jsonRpcSercie Post Param

ふむふむ、「"jsonrpc": "2.0"」 というようなプロトコル情報も省略されており本当に必要な情報のみがPostされています。

つぎにResponseデータ。

jsonRcpSercie Resqonse Param

やはり必要な結果のみがResponseデータとして返ってきています。

ちなみに同等の処理をXPages 部分更新で行いましたが、Postデータ、Responseデータ共にこれほど軽量な処理をさせることは出来ませんでした。また、XPagesの部分更新では”計算結果フィールド”のみを部分更新させるといった場合でも<span>タグ付きで値が返ってきたりと、クライアント側でのデータ再加工を行いたいというような場合、値だけを返すjsonRpcServiceのほうがプログラミングが楽になりそうです。

 jsonRpcServiceを利用する時の注意点

以下のサンプルコードをみてください。

上記のコードはこちらのStackoverflow で質問と一緒に公開されたコードです。
ハイライトされた９，１０，２０行目を見て頂くと、このコードの作成者はjsonRpcServiceのリモート関数を使ってXPagesで読み込んでいる文書を保存、返り値にTrueを返す、という処理を行いたいのだろうと推測できます。

ただ、このコードは意図した動きをしません。

今回の記事をここまで呼んで頂いた方々にはすでに察しが付いていると思いますが、jsonRpcSerivceはあくまでJSONによってデータをやり取りしていますので、9行目のgetComponent("inputText1").getValue() というのは解決が出来ない情報になってしまいます。

同様にXPages上に存在するdocument1というデータソースも取り扱うことができません。引き渡したいデータがあれば、xe:remoteMethodArg 引数を使って明示的にJSONデータに含めないといけないということです。

このように、jsonRpcServiceはXPagesで読み込んでいるデータソース文書を保存したりする処理には向いていないように思います。（出来ないことはないはずです）

jsonRpcServiceはデータの読み出し専用が得策？

このstackoverflowの回答者も言っていることですが、上記の理由からjsonRpcServiceはデータの読み出し専用として利用することが最良であるかもしれません。

以下、jsonRpcServiceを利用したらいいかもしれないシチュエーションとして

  • 会社の株価を定期的に自動更新するようなプログラム
  • 新しいユーザーを登録する際にすでに同じユーザー名、Emailがないかどうかを問い合わせるプログラム
  • サーバーからのレスポンスデータをクライアントサイドJavascriptで操作、加工したい場合

などに適していると思われます。

いかがでしたでしょうか？

jsonRpcSerivceの特徴を把握してXPages開発の選択肢の1つとして覚えておいてもらえればと思います。

 

 

by ktatsuki

XPagesでIEの互換表示ではなくIE８に強制表示する方法

ie日頃から”IEはこの世界から消えてなくなれ” と考えている私ですが、仕事ではやはりIEでのサポートが必須である場合がほとんどで、時に開発者として「IEさえなければ、IEさえなければ・・・」などとブツクサいいながらIEの下位バーションでテストを行っていたりします。

そんなIEですが、IE8ぐらいになってくるとかなりJavascriptやCSSのサポートが幾分マシになってきます。 しかしIE8から次に厄介な問題としてIEの互換表示という機能があります。

IE8で動作するように開発したページなのに、クライアントから「なんかレイアウトが崩れているんですけど・・・」なんて電話が、、、よくよく調べてみるとIE8互換表示モード（IE７）でブラウジングしていたのが原因だった、なんてケースです。 （消えてなくなれIE! ）

IE8が出た当時は下位互換への救済措置だったりしたわけですが、IE11の今のご時世では混乱を招くもとになっているばかり。

前置きが長くなりましたが、今回の本題、

XPagesでIE８互換表示ではなくIE８に強制表示する方法

まず、状況の整理をすると、IE8で表示できるように開発したページであってもIE8互換表示で表示されることがあります。

[list_marked]

  • IISから指定されている
  • イントラのグループポリシーで設定されている

    • [/list_marked]

    というような場合です。 また嵌りやすいのがIE8はデフォルトで、”互換表示でイントラネットサイトを表示する”にチェックが入っているという点です。

     こういった場合、一般的にWEB開発者は

    [list_marked]

  • DOCTYPE宣言で指定
  • metaタグで指定
  • web.configなどのHTTPレスポンスヘッダーで指定

    • [/list_marked]

    という方法でIE８互換表示ではなくIE８に強制表示させるようです。

    ここではXPagesをつかってHTTPレスポンスヘッダ-を直接操作する方法を書いてみます。

    以下のコードをXPageのbeforeRenderResponse イベントに記載します。

    var exContext = facesContext.getExternalContext();
var resp = exContext.getResponse();
resp.setHeader("X-UA-Compatible", "IE=8");

    こうすることで描画をIE8で強制的に表示することが可能になります。

    xpagesのbeforeRenderResponse画面

    また、特定のIEのバージョンに限って制御を行いたい場合、以下のように context.getUserAgent() を使って制御文を書くことが出来ます。

    if (context.getUserAgent().isIE(8, 8)) {
  var exContext = facesContext.getExternalContext();
  var resp = exContext.getResponse();
  resp.setHeader("X-UA-Compatible", "IE=8");
}

    ここでは、「IE8の場合からなず互換表示ではないIE8で動作させる」としています。

    なお、IE8でどのモードで描画しているのか確かめるためにはF12を押して開発者ツールを立ち上げて確認できます。

    IE8互換モードの切り替え画面

    IE互換表示の対応で苦戦している人は是非上のコードを試してみてください。

    by ktatsuki

    XPagesでJSONをパースしよう、 fromJson関数の使い方

    今更聞けないJSONって何？

    JSON（ジェイソン、JavaScript Object Notation）は軽量なデータ記述言語の1つである。構文はJavaScriptにおけるオブジェクトの表記法をベースとしているが、JSONはJavaScript専用のデータ形式では決してなく、様々なソフトウェアやプログラミング言語間におけるデータの受け渡しに使えるよう設計されている。

    引用：Wikipedia

    論より証拠。 JSONってこんな形式です。

    [
    {
        "勇者": [
            "隼の剣",
            "光の鎧"
        ]
    },
    {
        "格闘家": [
            "鉄の爪"
        ]
    },
    {
        "魔法使い": [
            "いかづちの杖",
            "水の羽衣"
        ]
    }
]

     Javascriptのオブジェクトの表記法と配列を組み合わせてとってもシンプルにデータ格納してしまおうということですね。正直、開発者にとってはXMLよりJSONのほうが好きな人のほうがおおいんじゃないでしょうか。

    さて、ここから本題です。

    XPagesのサーバーサイドJavascriptでJSONをパースするには

    SSJSってサーバーで動くJavascriptだよね、だったらJSONもJavascriptのフォーマットだし扱い得意だよね、と当然思う方も多いと思います。

    実際、XPagesではJSONをパースさせるのに幾つか方法があるようです。

    1. eval() 関数を使う。 XPagesの標準関数であるeval()を使ってお手軽にパースすることができます。こちらの例ではビューのカラムに表示させるコンテンツを文書毎にもつJSONのフィールドから一度パースして表示させています。 中々軽量でいいと思います。
    2. XPagesに標準で実装されているランタイムライブラリ、com.ibm.commons.util.io.json を使う。これはほぼJavaよりのソリューションになりますが、JsonJavaFactory、JsonParser、Iterator 等を使いパースしていきます。 より高度なJSONデータを扱う必要がある場合には適していると思います。例はこちら
    3. fromJson() 関数を使う。なんとXPagesには標準でfromJson() 関数なるものが存在していました。 これを使えば簡単にSSJSでJSONをあつかえるようになります。

    今回は(3)のfromJson() 関数の扱い方について書いてみます。

    Domino Designerのヘルプに乗ってない ！？

    まずこの関数ですが、Domino Designer （バージョン9時点）のヘルプに載ってません。 もう一つJson形式のObjectを文字列に変えるtoJson() 関数も用意されていますが、どちらも載っていません。

    Domino DesignerのSSJSの補完機能を見る限り、

    fromJson(str:string) any

     となり、 strのパラメーターにJSONフォーマットに則した文字列を渡してやると、Javascript Object形式で値が帰ってきます。

    Objectから以下のように値を参照できます。

    var strJsonSimple:String = '{"name":"apple","color":"red","num":"10"}';
var jsonObjSimple = fromJson(strJsonSimple);
return jsonObjSimple.name;

    しかし、この場合（青文字の部分）はObjectに"name"という変数（属性？）があるということを前提にプログラミングされています。

    実際は、JSON文字列がObjectになった後、変数もその値もわからないこともあると思います。

    その場合、Javascriptでfor-in文による繰り返しで回してやれば値の取得が可能になります。

    例として、冒頭で上げたJSONをXPagesでパースして表示しているサンプルを掲載します。 Objectに配列を持つという組み合わされた構造のJSONを以下のようにパースしています。

    var strRet:String = "";
var strJson:String = '[{"勇者": ["隼の剣","光の鎧"]},{"格闘家": ["鉄の爪"]},{"魔法使い": ["いかづちの杖","水の羽衣"]}]';
var jsonObj = fromJson(strJson);

for(var char_num in jsonObj){

	var charEntry = jsonObj[char_num];
	for(var char_name in charEntry){
		strRet += "キャラクター"+char_num+": "+ char_name +"
";

	    var charEquipment = charEntry[char_name];
	    var equipments = @Explode(charEquipment, ",");
		for (var k = 0; k < equipments.length; k++){
			strRet += "  装備"+(k+1)+" = "+equipments[k]+"
";
		}

	}
}
return strRet;

    計算結果フィールドに入れた結果はこんな感じです。

     fromJson

    by ktatsuki

    [XPages] クライアントJavascriptにサーバー側の値を埋め込む方法

    前回の続き

    前回、Radio Button Groupコントロールで生成されるラジオボタンの値をクライアントJavascriptで取得する方法を説明しました。（記事はこちら） その時に、

    var chkRadioMember = dojo.query("input[name$='#{id:radioGroupMember}']");

     というように#{id:hogehoge} というクライアントJavascriptではなさそうなソースコードが出てきました。

    前回のブログでは、この#{id:hogehoge}というフォーマットで記述されたコードはHTMLがブラウザに表示される前にサーバー側で ’view:_id1:radioGroupMember‘ といった値に動的に変換されることになっています、と解説しました。

    今回は、この#{id:hogehoge} の意味を紐解くと共に、ちょっとディープに利用方法を探ってみようと思います。

     

    実は知らない間に使っていた #{} のフォーマット

    #{} の形を色々と探してみると、XPagesでは以下のようなパターンが他にも存在するのを確認できました。

    #{document1.Firstname}
#{view1}
#{javascript:sessionScope.myName}
#{id:firstname1}

    XPagesのソースを覗いた事がある方だったらどれも見た覚えがあるかと思います。

    それぞれ役割が違っていて、

    #{document1.Firstname}  ← Dominoドキュメントをバインドして、フィールドを表示させた時
#{view1} ← バインドさせたDominoビューを利用する
#{javascript:sessionScope.myName} ← SSJSで計算をさせたい時
#{id:firstname1} ← XPagesのIDからCSJS用のIDに変換した値を取り出したい時

    というような用途で使いわけていきます。

    もしかしたら、データソースをバインドするような形式はドキュメントやビュー以外にもあるかもしれません。自分の環境では以下のようなデータソースが選択できましたがDocumentとView以外は試していません（汗）
    data-source-binding

     

    CSJSで使える#{} のフォーマット

    #{} はなにかしらサーバーサイドで計算させたい時に利用するものだということは分かったと思います。

    ここでは、どれがCSJSのソースコード中に埋め込む形で使えて、どれが使えないか検証してみました。

    試したコードは以下の種類です。

     <xp:this.script>
  <![CDATA[
    alert("[SSJS]sessionScope.myName は #{javascript:sessionScope.myName}"); ← 動いた
    alert("[SSJS]document1.Firstname は #{javascript:document1.getItemValueString("Firstname")}"); ← 動いた
    alert("[CSJS]firstname1 は "+dojo.byId("#{id:firstname1}").value); ← 動いた
    alert("[SSJS]document1.Firstname は #{document1.Firstname}"); ← エラーになった
  ]]>
</xp:this.script>

    という具合で、#{document1.Firstname} というようなバインドしてあるDominoドキュメントのFirstnameのフィールドを取得する、という記述はCSJSで使えませんでした。

    しかし、#{javascript:document1.getItemValueString("Firstname")} を利用すると同じ値が取得できているのがわかると思います。

    結論として、CSJSでは

    #{id:hogehoge}

    #{javascript:hogehoge}

    の2つが使えるという結果になりました。

     

    実際、自分がXPagesを見てきて、CSJSに利用されているのは#{id:hogehoge} の記述ばかりです。

    #{javascript:hogehoge} もほとんど見ないです。（というか、実際この検証をするまで使えることを知りませんでした）

    使えるけど、ソースがグチャグチャになってしまうのでCSJSとSSJSを混ぜこぜで使うのは全くオススメできません。

    もしその必要性が出てきてしまったら設計から見なおしたほうがいいのかもしれませんね...

    by ktatsuki

    Notes Form内のComboboxでキーワード変更してもOnChangeイベントがトリガーされない

    表題の通りなのですが、Domino DesignerでForm内にComboboxフィールドを作成時にキーワード変更してもOnChangeイベントが思い通りにトリガーされない時の対処方法です。

    厳密には、キーワード変更後、マウスが別の場所にフォーカスしてから、OnChange（）やExiting() イベントが呼ばれるためイベント呼ばれるのが遅いと感じてしまいます。

    これに対応するには、フィールドプロパティのアドバンスド オプションタブの一番下、「Run Exiting/OnChange events after value change」というのを選択したらOK。

    onchangeイベントのトリガー変更
    onchangeイベントのトリガー変更

    Comboboxのキーワードを変更した直後に呼ばれるようになります。

    これだけ。

    「てか、この設定いるの？」と疑問（笑） OnChangeイベントが直後に呼ばれたら困る状況ってあるのかな？ 一応Domino 8.5までのAdvanced Application Developerだけど、こんな設定気づきもしなかったです(><)

    以下は、IBMのTechnote（英語）から

    WorkaroundTo configure the OnChange event to trigger when a new keyword is selected, you can select the option "Run Exiting/OnChange events after value change". This option is located on the Advanced Options tab Beanie tab of the field properties dialog box.

    引用元: IBM - OnChange event does not trigger on keyword change in combobox field.

    しかし、今回もネタが小さいｗ もっとトレンドのある記事が書けるように頑張ります。 xPagesか・・・

    by ktatsuki