当ブログに掲載しているサンプルは、すべて利用者の自己責任という形でお願いします。
ただし、明らかな不具合がある場合、ご連絡いただければ、訂正記事を出します。
また、こちらのサンプルは、別のサイト等への公開、転載は一切禁止しています。
どうしてもと言う場合は、筆者にあらかじめご連絡ください。

Translate

2014年7月27日日曜日

IBM Mail NextのWebCastを視聴しました

えー・・・有言実行をモットーとしている(いつ決めた?)私ですが、今回も自ら「ブログは日曜日に書いて公開するよ!」Masahiko MiyoのTwitterで宣言してしまった(させられた!?)以上、書かないわけにはいかないので、こうして公開いたします。

ただし、何度も言っているように、「英語はほぼ分かりません」(だから、自己学習中です)ので、内容に誤りがあるかもしれません。
必ず、Webcast replay: Moving Ahead with IBM Mail Nextを視聴して、再確認してください。


それでは、お読みください。


夜中の開催は辛い

まず、日本時間で2014年7月24日 0時30分(夜中です)にsocialbiz USER GROUP
が「Moving Ahead with IBM Mail Next」というタイトルでWebCastを実施しました。視聴者数はなんと(最大時で)500を超えていました 。全世界で視聴しているとはいえ、500名以上のユーザというのは多いのではないでしょうか。アメリカ時刻では真昼間ですからね。仕事しないのかな?(あれ、これは仕事の一環か?)

ちなみに日本からの視聴参加者は、日本IBMの方が十数名の他、IBM Championの海老原さんを確認することができました。こういうイベントには必ずと言っていいほど、参加されていた加藤さんのログインIDは「なぜか」確認できませんでした。いろいろとお忙しかったのでしょう???
また、残念ながら、他の日本人の方は見つけることはできませんでした。だから何だ?と言われれば、なんでもないのですが、やっぱり夜中&英語というのはきついのでしょうか?


スピーカーは早口
さて、スピーカーですが、下図にあるように3名でした。さらにMCの方を加えて、計4名でした。
WebCastタイトル画面

このMCの方がとても早口。MCなので、スピーカーの方の紹介等をしているだけなのですが、すでに聞いていて「だめだ・・・わからん」という状態になってしまい、後はひたすらスライドを見ながらなんとなく単語を拾うという作業になっていました(なお、視聴者数が多かったせいなのか、ノイズが時々入っていたということも言い訳の一つとさせていただきます)。

残りのスピーカさんも決して分かり易かったわけではないです(私にとって)。それほど早口ではなかったですが、癖のある喋り方でちょっと聞き取りにくかったです。


アジェンダ
気になるアジェンダですが、スライドには「Focus On Your Work, Not Your Inbox」というタイトルで紹介されてました。これはIBM Connect 2014で紹介されたIBM Mail Nextの画面ショットから想像できる内容ですね。
アジェンダ
先日発表があった「IBMとAppleの業務提携」の話やそれに伴い、「IBM Mobile First」の話につながり、そこから「iOS用のIBM SNS製品のリリースの話」になったりしました。
また、これも先日提供が開始されたIBM Connections 5.0とその他の製品との連携の話(例えば、NotesクライアントとConnectionsとの連携について)もありました。
そして、IBM Mail Nextへのつなぎの話として「IBM Cloud」の話も出ました。今となっては、クラウドサービスなしでIT化は進められないような状況になってきていますので、IBM CloudはIT化を進める上での助けになるでしょう。


いよいよIBM Mail Nextの話へと
そして、ついにIBM Mail Next絡みの話が出てきました。
下図をご覧ください。どうやらIBM Mail NextはSmartCloud Notes上での提供が最初になるようです。
そして、Notes Browser Plug-Inを使っている場合、2015年前半にIBM Mail Nextへのアクセス用アプリケーションとなるようです。Appleとの業務提携が影響してか(?)、Safariでの動作もサポートされるようになりそうです。(Google Chromeはどうなったんでしょうか・・・) 
次にわれらがNotesクライアントは・・・あれ?「iNotesにしてね。とかSmartCloudにしてね」とかいったような表現になっています。あれ???
IBM Mail Nextへのパス

次のスライドをご覧ください。構成例としてのIBM Dominoを取り巻く環境を表した図になっています。
Social,Mobile,Cloudの環境例


よく見ると、Notes Clientは今のNotes 9.0 SE Clientでのメール画面になっていて、iNotesは「IBM Mail Next」となっています!!!
これって・・・いくら例と言っても、ちょっと。という感じですね。


IBM Mail Nextの画面ショットが!
そうは言っても、もうIBM Mail Nextへの道は止められません。ついに新しい画面ショットが公開されました。
ダッシュボードはIBM Connect 2014で公開されたので、そちらを見てください。
下図は新しいメール画面です。
IBM Mail Nextの画面ショット(1)

受信ボックスとメールのプレビューが表示されている画面ですね。
画面の上部にはダッシュボード同様、頻繁にメールのやり取りをする人たちの顔写真アイコンが表示されます。ここにも仕掛けがあるのですが、それは後述します。
受信ボックスには送信者の氏名のほか、その人を示すアイコンが表示されています。
スマホやタブレットでGMailを開いたことがある方は分かるかと思いますが、送信者を特定するためのアイコンと同様のものです(下図はgmailの画面)
スマホで見たgmailの画面ショット

名前だけが表示されるよりも分かり易いですよね。
さらに、受信ボックスにはそのメールに対する簡易アクションアイコンも表示されています。
ここから、転送やタスクへの登録等ができるようです。
画面右側はメールのプレビューですが、シンプルになった感じですね。
また、画面下部にはダイナミックカレンダーと言われる1日分のカレンダーが表示されます。
その日の予定がメールを見ながら確認できるということですね。今までは、メールとカレンダーは別々の画面(サイドバーのカレンダーウィジェットを使えば1画面で表示は可能ですが)だったので、便利になりますね。


IBM Mail Nextの画面ショット(2)

そして、もう一つの画面ショットですが、画面上部の顔写真アイコンの部分に注目してください。
ここをクリックすると、その人へのアクションが表示されます。ダッシュボードでも同様のことはできましたが、やはりメールを開いた状態でもできるようです。親切設計ですね。
特定の人へのメール処理が終わった後、いちいちダッシュボードに戻る必要がないということです。(え?そんなこと言われなくても分かってるって?)


Traveler 9.0.1.1 for Androidがリリース中!
下図をご覧ください。
これは、Travelerの最新版の画面ショットです。
今までは、TravelerはTravelerサーバにアクセスしてそこからダウンロードしていましたが、Android版であれば、Google Playからダウンロードできるようになっています(Google Playで「IBM Notes Traveler」で検索しましょう!)。
受信ボックス上からメールの転送や電話を掛けるといったアクションができるようになっています。
すでにTravlerを使っているのであれば、是非バージョンアップしてみてください。
Traveler 9.0.1.1の画面ショット


アーキテクチャはこんな感じ
SmartCloudNotesにおけるIBM Mail Nextのアーキテクチャも図で示されました。
データの受け渡しはやはりREST APIで行われていました。
REST APIは軽量で使いやすいものです。Notes/Domino内だけでなく、他システムとの連携にも便利に使えるものですので、Notes技術者の方は是非覚えるようにしましょう。
また、見て分かるように、Mail Nextのクライアントはブラウザと表示されています。SmartCloudNotesなので当たり前と言えば当たり前ですが、ここは一つメールはブラウザで見るもの!と割り切ってしまうのも手でしょう。(他のグループウェア(っていうの?)はメールはブラウザベースのものが多いので、それを理由に「乗り換えようかなぁ」なんてことも言われなくなりますよ!)
IBM Mail Nextのアーキテクチャ

いつリリースされるの?
うん。新しい画面は分かったよ。・・・で、いつリリースされるの?いつになったら使えるの?という疑問を持たれている方も多いかと思います。
リリースまでのスケジュールが表示されましたので、それもアップしておきます。
IBM Mail Nextのリリースタイムライン
これによると、8月後半にスポンサーユーザープレビューがあり、デザインアドバイザリープレビューが今年の10月となっています。
そして、実際に利用可能な時期は今年の11月から来年の3月までの間となっています。
ということは、来年のIBM ConnectED 2015で大々的に発表するということも・・・
ですね。


今年の1月の発表時には???が並んだIBM Mail Nextですが、ようやく形が見えてきました。
まだ、動いた画面を見たわけではないので、これからも変わっていく可能性は十分にあります。
正式リリースまで目が離せないですね。



ということで、英語が分からないなりにWebCastを必死になってきいていた私が伝えられることは以上です。
最初に書いた通り、くれぐれもWebCastのreplayも見てくださいね。

では、この辺で・・・


2014年7月1日火曜日

XPagesを使って同じURLで別の内容を表示させてみる

こんにちは。気が付いたら、7月です。つまり、1年のうち、半分が過ぎてしまったという事になります。
1年の初めにたてた計画は順調に進んでいますでしょうか?
私?さぁ、どうなんでしょう。残り半年、悔いのないように過ごしましょう。

さて、今日も本題に入る前にボタンクリックよろしくです。
にほんブログ村 IT技術ブログへ


今日もXPagesネタです。
XPagesの画面は「XPage」と「カスタムコントロール」の2種類から成り立っていて、それぞれ「フォーム」と「サブフォーム」のような関係だよ。
という話は聞いたことがあるかと思います。
ですが、=(イコール)ではなく、≒(ほぼ等しい)なんですね。

そのため、「フォーム」と「サブフォーム」ではできていたのに、XPagesになったらできないよ!というものもあったりします。
例えば、「サブフォームの挿入」。通常は、指定したサブフォームをフォーム上に挿入するのですが、「式の定義によりサブフォームを挿入」を選択して[OK]をクリックすると(下図参照)、どのサブフォームを挿入するのかを決める式が記述できるようになります。
サブフォームの挿入
式はこんな感じに書きますね(あくまで一例)。ここで気を付けなければいけないのは、サブフォームの挿入は動的に行うことはできません。フォームを開いた時に決まります。
サブフォームの挿入式


こんな感じのことをXPagesでやってみよう!となるのですが・・・
さぁ、どうすれば良いでしょう?


XPageの中にカスタムコントロールを配置する?普通なら、そう考えますよね。
ところが、実は、これができないんですね。
カスタムコントロールは指定したものしか挿入できないのです。
計算式によって、挿入するものを変更できないんですね。

では、どうするのかというと・・・
「ページの組み込み」コントロールを使います。
コンテナコントロールの中に「ページの組み込み」があるので、それをXPage(もしくはカスタムコントロール)の中に ドラッグ&ドロップします。
ページの組み込みコントロールを使う

すると、どのページを挿入するのかを選択するダイアログが表示されるので、「ページの自動生成」を選択します(下図参照)。
ページの選択

ここで、ページ名を入力しても良いですが、それでは意味がないので、◇をクリックして、「値の計算」を選択します。
ここに式を記述することにより、任意のページを挿入することができます。

サンプルでは、「selectPage1」という名前のコンボボックスを作成しておき、データは「sessionScope.selectedPage」にバインドするようにしておきます。
また、その隣にボタンコントロールを配置しておきます。このボタンの「onClick」イベントに自ページを開くというアクションを設定しておきます。
自ページを開く

そして、「ページの組み込み」の自動生成式は以下のような式を記述します。(画面でごめんなさいね。書くのめんどくさいんだよ)
ページの自動生成式

当然、「sub0」「sub1」「sub2」というXPageは作成しておく必要があります(実行する前であれば、いつ作成しても良いです)。

そして出来上がったサンプルを実行したのがこちら。
video


今回は動画にしてみました。コンボボックスの値を変更して、ボタンをクリックすると、下のページが切り替わるのがわかっていただけたでしょうか?

こちらもサブフォームと同様に動的に画面を生成することはできないようで、画面更新ではページが切り替わりませんでした。そのため、自ページを表示しなおすという事をしています。


ともあれ、XPagesでもサブフォームを挿入するような方法があるということがわかっていただければ、幸いです。



では、今日はこの辺で。


Web化するならXPages!






【PR】ノーツ/ドミノに関するお問い合わせは下記まで【PR】
単純なDBのカスタマイズから他アプリケーションとの連携までご要望にお応えします!
Lotus Notes/Domino カスタマイズとセキュリティ強化 - 株式会社エフ



2014年6月16日月曜日

XPagesでコントロールに複数のスタイルシートを設定するには?

こんにちは。週末は晴れたので、外出された方も多いのではないでしょうか。
私も夏へ向けて、散髪してきました。すっきりして気持ちいいです。

さて、今月はなんか記事を書かないといけないような気がしてならないので、今日もひねり出します。
と言っても、大したことは書いてないですし、書けませんが・・・

さぁ、まずはこちらのボタンをクリックして先へと進みましょう。
にほんブログ村 IT技術ブログへ


今日もXPagesについてです。

XPagesでは各コントロールに修飾をすることができます。
ラベルコントロールに対して、フォントサイズを大きくしたり、色を変えたり。
表コントロールに対して、幅や高さを変えたり。

それには、いくつか設定方法があります。
直接、コントロールのプロパティに設定する方法やスタイルシートを定義して、それを当てはめる方法等です。

直接、コントロールのプロパティを設定する場合、各コントロールで自由に設定できる反面、同じ設定を何か所もしないといけないことがあります。
コントロールのプロパティ

コントロールの数が増えてくると、これはとても面倒ですよね。

そんな時は、スタイルシートを活用しましょう。
スタイルシートを作成しておけば、コントロール用に作成したスタイルをプロパティビューの「スタイル」タブで設定するだけで済みます(下図参照)。
スタイルのセット

では、別々のコントロールにスタイルを設定する場合を考えてみましょう。
それぞれのコントロール用にスタイルを設定してしまうと、同じスタイルが乱雑してしまうことが考えられます(たとえば、width:100%やfont-size:10ptなど)。
これでは、直接コントロールにスタイルを設定しているのと何ら変わりはありません。


そこで、スタイルシートで良く使うものは、独立して定義をしておきます。
そして、その独立したスタイルとそのコントロール用のスタイルをまとめて設定すると良いです。

これのやり方は、下図のようにスタイルのクラスを" "(空白)で区切って入力します。
一覧から選択する場合は、Ctrlキーを押しながら、マウスでクリックします。
複数のスタイルを設定する

簡単にできますね。
これで、同じスタイル定義をいくつも書かずに済みますね。



スタイルシートの設定もこのようにまとめていけば、可読性が少しは高くなるのではないでしょうか?
色々と試して、自分なりのまとめ方を模索してみてください。

では、今日はこの辺で・・・



Web化するならXPages!





【PR】ノーツ/ドミノに関するお問い合わせは下記まで【PR】
単純なDBのカスタマイズから他アプリケーションとの連携までご要望にお応えします!
Lotus Notes/Domino カスタマイズとセキュリティ強化 - 株式会社エフ




2014年6月9日月曜日

XPagesでグラフを描いてみよう

おはようございます。気が付いたら、関東地方も梅雨入りしたようです。
でも、気分までじめじめしないようにしたいですね。



では、今日の話題へと。
今までいくつかXPagesについて書いてきましたが、グラフ描画について触れていないことに気が付きました。
理由はいくつかあるのですが・・・

理由はさておき、今日はXPagesでグラフ描画をする方法についてのご紹介です。
グラフ描画の方法はいくらでもあるのですが、XPagesでということなので、
標準搭載されているDojoでの実現方法についてです。


内容に入る前に、今日も、こちらのボタンをクリックしてから読みましょう。
にほんブログ村 IT技術ブログへ


実は、XPagesそのものにはグラフ描画をするコントロールは用意されていません。
ですので、dojo toolkitを使って描画するということになります。
私の環境はIBM Notes/Domino 9.0.1ですので、dojoのバージョンは1.5.21.8(2014/06/20訂正)になります。
最新バージョンは1.9になっていますので、動きの違いや設定方法の違いがあるかもしれませんが、そこはご了承ください。


XPagesでDojo Toolkitを使ってグラフを描画するには、次の作業が必要です。

  1. グラフを描画するためのDojoモジュールを組み込む
  2. グラフを描画するための領域を作成する
  3. グラフを描画するためのデータを用意する 
  4. グラフを描画するためのJavaScriptを記述する

一つ一つ説明していきましょう。
まずは、1.のグラフ描画用Dojoモジュールの組み込みです。
こちらはXPage(もしくはカスタムコントロール)のリソースとして設定します。
下図は「カスタムコントロール」に円グラフの描画に必要なDojoモジュールを組み込んだところです。
円グラフ描画用のDojoモジュール
手順は次の通りです。
XPage(もしくはカスタムコントロール)を開いて、「プロパティ」ビューの「リソース」タブを開きます。
[追加][Dojoモジュール]ボタンをクリックします。
リソースの追加

すると、「Dojoモジュールをページへ追加」というダイアログが表示されるので、Dojoモジュール名を入力して[OK]をクリックします。
Dojoモジュールをページへ追加

この時、何を記述すればよいか、わからないですよね。
Dojoモジュールは、下記のディレクトリ配下にありますので(Notesクライアントの場合も同じ場所にあります)、ここをrootとして、モジュール名を記述します。ディレクトリは「.」(ピリオド)で表します。
Dominoデータディレクトリ\domino\js\dojo-1.5.2\
例えば、グラフそのものは「Dominoデータディレクトリ\domino\js\dojo-1.5.2\dojox\charting\Chart2D.js」というライブラリになるので、
dojox.charting.Chart2D
と記述します。
※どんなモジュールがあるのかについては、後述するDojo Toolkitのサイトを参照してください。
ここでは、上記の他、「dojox.charting.themes.Chris」というモジュールを追加してください。
(これは描画時の画面スタイルでテーマと呼びますが、たくさんの種類があります。種類はDojo ToolkitのDemosページの「Chart Plot Types」で確認してください)


では次に2.のグラフ描画領域を設定しましょう。
これは、単純に
があれば良いのですが、ここはXPagesでの設定方法を。
簡単なのは、パネルコントロールを配置することです。
その際、高さと幅を設定するのを忘れないようにしましょう。デフォルトだとAuto設定になるので、変な風に表示されてしまいます。
数値はお使いのPCの環境に合わせてください。また、コントロール名も設定することを忘れないでください。
私のPCでは、高さ360ピクセル、幅640ピクセル、コントロール名を「myChart」としました。
グラフ描画領域の設定(パネルコントロール)

3.のグラフ描画用のデータは当然必要になってきますね。
このデータは4.のJavaScriptを記述するときに必要になります。
注意しなくてはならないのは、このデータは配列(Array)形式で作成しなくてはならないという事です。
さらに、グラフの形式によって設定方法が若干異なるので、どんなグラフを作成するのかをあらかじめ決めておくと良いでしょう。
ここでは、円グラフを作成するので、ビューの文書数をカウントするような形にしたので、こんな感じです。
var dStore1 = '{y:' + cnt1 + ',' + 'text:"障害(解決済)"}';
これをArrayに格納するので、
chartArray.push( dStore1 );
としています。
このArrayをグラフのデータとして利用します。



最後に4.のグラフ出力用のJavaScriptの記述です。
えー・・・正直言うと、わかりませんでしたので、OpenNTFにあるCRM Applications for XPages in Japaneseを参考にさせていただきました。
うーん、OpenNTFは役に立ちますね。

実際には次の手法となります。
「出力スクリプト」コントロールを配置して、「すべてのプロパティ」のvalue項目に式を記述します。
なお、この「出力スクリプト」コントロールはデフォルトの状態ではコントロールビューには表示されないので、「その他」から選択する必要があります。
出力スクリプトコントロールを追加

また、式は「外部プロパティエディタ」を起動するというアイコンをクリックして記述します。
出力スクリプトのValue
こうすると、クライアントサイドJavaScriptが記述できます。「値の計算」を選択すると、サーバーサイドJavaScriptになってしまい、グラフ描画が行えませんので、注意してください。
出力スクリプトはこんな感じになります。
グラフ描画用スクリプト
コメントが付いているので、なんとなく理解していただけるのではないかと思いますが、念のため。

XSP.addOnLoad
というのは、グラフ用のページがロードされたときのイベントです。画面を開いた時にグラフを描画しますよ。ということですね。

var myChart = new dojox.charting.Chart2D( "#{id:myChart}" );
というのはグラフオブジェクトを定義しているところです。
1.で設定したDojoモジュールがここで使用されています。また、パネルコントロールの名前をmyChartにしたので、そこにグラフオブジェクトを関連付けしています。
"#{id:~}"というのは、XPagesのコントロール名をクライアントサイドのJavaScriptで指定する際の決め事と思ってください。

myChart.addPlot( "default", { type: "Pie" } );
というのでグラフの種類を設定しています。Pieが円グラフを表しています。
※画像ではmyChart.addPlot( "default", { type: Pie } );となっていますが、
Pieは"Pie"とするのが正しいです。

myChart.addSeries( "default", #{javascript:getChartData();}, {stroke: {color: "blue", width: 3}} );
でグラフのデータを設定しています。
{stroke: {color: "blue", width: 3}}はオプションですので、なくても構いません。
getChartData()は3.で説明したグラフ描画用のデータ取得関数です。Arrayが返ってくるようにしてあります。

myChart.setTheme( dojox.charting.themes.Chris );
でグラフの描画スタイル(テーマ)を決めて、

最後に
myChart.render();
でグラフを描画しています。

色々とオプションを設定していますが、こんな風に表示されます。
円グラフのサンプル

とりあえず、グラフの描画ができました。
グラフ描画には様々なオプションがあるのですが、多すぎて紹介しきれません(汗)。

Dojo Toolkitのサイトを見ると、サンプルコードが載っていたり、デモ画面も見られるのでぜひ参考にしてください。
Dojo Toolkitはこちらのサイトに情報があります。私も参考にしながら、この記事を書きました。
Unbeatable JavaScript Tools - The Dojo Toolkit
「Documentation」というタブの「Reference Guide」というリンクと「API Documentation」というリンクの内容が役に立ちます。






では、今日はこの辺で。


Web化するならXPages!






【PR】ノーツ/ドミノに関するお問い合わせは下記まで【PR】
単純なDBのカスタマイズから他アプリケーションとの連携までご要望にお応えします!
Lotus Notes/Domino カスタマイズとセキュリティ強化 - 株式会社エフ




2014年6月3日火曜日

XPagesでEnterキーを押したときに実行するようにしたい

今回で450本目の記事です。
ブログを始めて、6年と2か月なので、1か月あたり6本の執筆?です。
最近の頻度からすると、多めですね。始めた当初は、ほぼ毎日更新していたので、そのためにこんな数字になっているのでしょう。

閑話休題。今日も始まる前にボタンをクリックしましょう。
にほんブログ村 IT技術ブログへ


では、今日の話題です。
Webサイトで、入力ボックスだけあって、そこに値を入力して、Enterキーを押すと、内容に従って処理が実行されるものがあります。
検索なんかがそうですね。

あれをXPagesでも実装できたら格好いいですよね。
ということで、それをやってみましょう。


用意するコントロールは、編集ボックスとボタンです。

まずはボタンの説明をしましょう。
ボタンの名前は後で必要になるので、覚えておきます。
ここでは、btnSearch としておきます。
ボタンには、普通に処理させたい内容を記述します(onClick イベントに記述)。
そのボタンのスタイルを
display:none
とします。
これはUIでは設定することができないので、プロパティビューの「すべてのプロパティ」を開いて、
そこの「style」という項目に直接記述します。
非表示にするというスタイル指定ですが、「可視」のチェックを外すのとは意味が違い、「可視」のチェックを外してしまうと、動かなくなってしまうので、要注意です。
ボタンのスタイルを設定

次に編集ボックスの説明です。
こちらのクライアントサイドJavaScriptを記述することで実行できるようになります。
 イベントビューを開いて、イベント種類は「onkeypress」を選択して、クライアントサイドを選択します。
以下の内容を記述します。
----------------------------------
if ( thisEvent.keyCode == 13 ) {
    var element = document.getElementById( "#{id:btnSearch}" );
    element.click();
}
----------------------------------
ここで、重要なのは#{id:btnSearch}です。
このbtnSearchは最初に作成したボタンの名前です。

ちなみに、
thisEvent.keyCode == 13
というのがブラウザでのEnterキー を表します。

つまり、Enterキーが押されたら、btnSearch ボタンをクリックしてください。
という命令になります。
これで、btnSearch ボタンのonClickイベントが発動します。


出来上がりは下図のような形になります。

編集ボックスのイベント

実装はこれで終了です。

※onkeypressは、ブラウザごとに挙動が違うということらしく、このままでは動かない可能性もあります。
イベント挙動を考慮することについては、私の知り合いのめそ凹すね丸さん【JavaScript】クロスブラウザでEnterを検知するにはにて、解説を書いていただいていますので、そちらを読んでいただけると、より理解が深まると思います。(2014年6月5日追記)


いかがでしょうか?思ったよりも簡単でしょう?

これに、XPagesでplaceholderを実現してみる で説明したplaceholderを設定してみると、検索ボックスみたいで雰囲気が出るでしょう。


いざ動かしてみると、ちょっとした感動を味わえますよ(あくまで個人の感想です)。
簡単なので、試してみてください。


では、今日はこの辺で・・・



Web化するならXPages!










【PR】ノーツ/ドミノに関するお問い合わせは下記まで【PR】
単純なDBのカスタマイズから他アプリケーションとの連携までご要望にお応えします!
Lotus Notes/Domino カスタマイズとセキュリティ強化 - 株式会社エフ




2014年6月2日月曜日

XPagesで検索を行った結果をハイライト表示する

みなさん、こんにちは。

今日も頑張って更新しましょう。

相変わらず暑いので体調管理だけは気を付けて行うようにしましょう。
では、このボタンをクリックして先に進みましょう。
にほんブログ村 IT技術ブログへ




さて、今日はXPagesでの検索です。
某Q&Aサイトで質問が出ていたのですが、回答が付かないようなので気になって調べてみました。

DominoのWebアプリケーション(従来のWeb対応のノーツDB)は、全文索引を付けておけば、検索結果を強調表示してくれます。
ではXPagesでは、どうなんでしょうか?

XPagesでの全文検索の実装方法は、8. XPagesで全文検索機能を利用するには?に詳しく出ていますのでそちらを参照願います。

しかし、こちらのページを見ても、結果は強調表示されていませんね。
どうやら、XPagesでは検索結果の強調表示は標準では実装されていないようです。

となると、自分で作りこむしかないようです。

Webブラウザ上で強調表示を行うということなので、HTMLのタグを使うとよさそうです。
ということで調べてみると、<mark></mark>というタグがあるようです。
説明にも「検索結果の画面で文字をハイライトさせるのに利用します」といったことが書かれていますので、確かにこれで間違いなさそうです。

使い方は、<mark></mark>の「~」の部分がハイライト表示させたい文字列です。
今回の場合、検索文字列になります。
検索文字列をスコープ変数(ページを移動する場合は、sessionScope変数にしておく必要があります)に格納しておきます。

後は、検索結果を表示するページ内のデータの値を
検索文字列 → <mark>検索文字列</mark>
といった形で置換すれば良いのです。

この時、気を付ける点がいくつかあります。
  1. コントロールの「escape」プロパティはfalseにする
  2. escapeプロパティを持たないコントロール(複数行編集ボックス等)の場合、表示用の計算結果コントロールを作成して、そこでハイライト表示させるようにする
  3. ビューコントロールのビュー列の場合、コンテンツタイプをHTMLにする
  4. 検索結果ページから別のページに移動するときには、検索文字列のスコープ変数をクリアする
また、3.のビュー列の場合、データを「ビューの列」にしていると文字列の置換を行うことができないので、「計算結果の値」にして、
viewEntry.getColumnValue( "列名" );
という形で列の値を取得する必要があります。


ということで実装してみた結果が下図です。
検索結果をハイライトしてみた

文字列の置換方法は、Domino Designerのヘルプを見て探してみてください。
XPagesで使える@関数の中にありますよ。



今回の調査では、HTMLのmarkタグに行きつくかどうかがカギでした。
そこから先は、色々な方のHPを参照させていただき、文字列の置換という方法が現実的だということがわかりました。


このようにXPagesはHTML、CSS、JavaScriptの技術をふんだんに使っていますので、そういった技術情報の応用が可能なんですね。
XPagesを始められる方は、こういったページも調査対象にすると良いでしょう。


では、今日はこの辺で・・・


Web化するならXPages!



【PR】ノーツ/ドミノに関するお問い合わせは下記まで【PR】
単純なDBのカスタマイズから他アプリケーションとの連携までご要望にお応えします!
Lotus Notes/Domino カスタマイズとセキュリティ強化 - 株式会社エフ