a Lotus Notes 開発者ブログ -4ページ目

ビューでのツールチップ

ノーツのWEBビューの列幅問題への対応として、前回、src要素のtitle属性を使いましたが、もっと、単純にすると、列の値の式は、次になります。

×　"[" + @Left(fieldname;n) + "]"

○　"[" + @Left(fieldname;n) + "]"　20090121 訂正

　　（spanタグでなく、それらしく　abbrタグを使うこともできます）

マウスを対象の上に乗せると、ブラウザのウィンドウをはみ出しても、確実にtitle属性に指定している値を表示してくれるのですが、文字が小さく、数秒で消えてしまうという問題があります。

これについて、Googleで「hｔml　ツールチップ」を条件に検索すると、JａｖａSｃｒｉｐtを使った対応など多数ヒットしました。dojoを含め、いくつかのJａｖａSｃｒｉｐtライブラリにも、tooltipsのモジュールがあるようです。

ただ、社内環境で多数のノーツWEBビューで使用するという条件で考えると、簡単に実現・保守できる必要があります。文字を大きくして、マウスを置いている間、表示を持続させるという機能要件は、JａｖａSｃｒｉｐtを使わず、CSSとノーツ列へのHTML追加だけを使っても可能でした。

PHPSPOT開発日誌に紹介されているCSSをviewTemplateのフォーム・ページに追加し、ビューの列の値を、次のようにします。

"[<a href=\"#\" class=\"tooltip\">" + @Left(fieldName;n) + "" + fieldName + "</a>]"

これなら、実現も簡単です。ただ、ツールチップ内での改行がやはり安定しません（テストデータが悪すぎる？）。　ブラウザウィンドウを狭くすると対応できません。また、簡単な動作確認をしただけですが、Fireｆox3.0.15、ブラウザウィンドウの最下行で、他の列のNewマークがブリンクしているという条件が重なったケースでは、このツールチップのポップアップも一部しか見られませんでした。

確認画面

比べると、IQJam のツールチップ表示は確かによくできています。このノーツDBのNTFがダウンロードできます。稼働条件がDomino8.5.1とありますが、XPages環境でなくてもこのツールチップ表示が機能するか試してみたいです。

ノーツWEBビューで困ったこと

ノーツビューは、ノーツDBにある文書のリストを表示します。

ビューはアプリケーションの使い勝手を大きく左右します。

Notes4.5のときだったか、ノーツクライアント向けに作成されているだけのノーツDBをブラウザから初めて開いた時、いきなり、ビュー一覧が表示され、ビューで列内容を見られ、ビューから文書を開くことができて、これは便利だと思ったものです。

それから１０年以上たって、ブラウザで参照するノーツDBを作成する機会が出てきたのですが、WEBビューに困りました。列に表示する内容が長短ばらばらで、その上、ビュに多数の列を表示する要望があったためです。

担当のプログラマー曰く、ノーツクライアントと違い、WEBでは

・タイトルの列幅は指定できません。

・列幅をユーザがマウスを使って変更することもできません。

・長い内容を折り返して列内に表示することもできません。

列幅、列内容表示問題への対応策は、(a)　列への表示内容を指定の文字長に限定するか、(b)内容に合わせて長い列幅にするかのどちらかです。

(a)　の場合、重要な列内容をビューで確認できない、

(b)　の場合、長い列より右の列内容を見るには、横スクロールしなければならない、

どちらもちょっと受け入れにくいものです。

簡単に作れるというメリットは確かに大きいのですが、ノーツWEBビューにも、もっと見やすさ、機能性が求められると思います。

Notes8.5で新機能のXpagesが出てきています。

IBMの新しいサイト（http://iqjam.net/iqjam/iqjam.nsf/home.xsp ）で

見た目と機能性にすぐれたビューを見ることができます。

でも、すぐ、そこにジャンプできません。

例えば、Domino7でも実現できるノーツWEBビューを考えていきたいと思います。

＜ビュー設計へのHTMLの追加＞

ドミノサーバはビューを、列タイトル、列値からなる<table>としてブラウザに送ります。HTMLのtableにスタイル・イベントをそれに追加すれば、望む形・動きをさせることができます。

ノーツのビュー設計で、列タイトル、列値にパススルーできるようにHTMLを追加します。そのHTMLは、ブラウザ上で解釈されます。

いろんなHTMLの追加があると思いますが、

下では、ビューの列に表示する文字数を限定した上で、「.．．．」部（画像）にマウスオーバーすると、その列の内容をポップアップ表示するようにしています。

ビューの水平スクルールを少なくして、文書を開かなくても長い列の情報を確認することができます。

もっと機能的にするには、個々にHTMLを追加するのでなく、HTMLのtableモジュール、ウィジットを使う方法もありそうです。次は、ウィジットの例を見ていきます。

Ajaxでない普通のNamePicker

Lotus Sandboxに、 Web Single Name Picker
がありました。

2002年の作ですが、なかなかNotesらしくて面白いので試してみました。

文書ライブラリDBにこの仕組みをいれて、URLエンコードを追加し、レビュー担当者に入力された名前の一部を使って、

最初から検索して候補を表示するようにしてみたのがこれです。

レビュー担当者フィールドに名前の一部を入れて「選択」をクリックすると、それにマッチした候補リストが別ウィンドウに表示されます。

そこでさらにLstNameｍFirstNameをいれて再検索することもできます。

そのひとつを選択すると、もとのフォームのフィールドに値がセットされます。

仕組みは、

(1)元ウィンドウの「選択」クリックで、別ウィンドウ（検索用フォーム（上図左）を開き、

(2)キーワードをいれてSearchクリック

(3)submit実行（ただしsaveoptions=0なので何もおこらない）。

(4)submit実行後の$$Returnの実行

　$$Returnには、同じフォームをパラメータ付きで開く指定（readform&パラメータ名=値）がされています。また、フォームのwebQueryOpenには、パラメータ値を使って検索を実行し、結果を一緒にかえすエージェントが指定されている。

　このため、ブラウザからreadform&パラメータ名=値が要求されると、webQueryOpenのタイミングでパラメータ値を使ったdb.searchが行われ、resultフィールドに候補リストがセットされます。

(5)表示された候補リストから選択してクリック

　　それぞれ、onclickで、もとフォームのフィールドに名前をセットして別ウィンドウを閉じる処理が追加されており、候補リストの名前をクリックすると、もとウィンドウのレビュー担当者に名前がセットされます。

公開アドレス帳の名前検索に限らず、いろいろ応用のできるやり方だと思います。

大量のマスタからの選択入力が少ない操作で実行できます。JavaScriptも基本だけで実装可能です。

また、別ウィンドウなのでiFrame　Simに悩まされることもなく、「URL参照を許可しない」方針に困ることもなく、大量のライブラリのダウンロードを待つこともありません。

これはTypeAhedではありませんが、結果が多すぎたら別ウィンドウで続けて条件を追加すれば絞り込めます。

キーワードが単一なら、サーバエージェントのdb.searchを他のメソッドに変えるのがよいと思います。

submitの空振りは、別ウィンドウの中でXMLHttpRequestでエージェントを起動すれば、なくせます。