フレームセットでプレビューを実現する

皆さん、こんにちは。

たまにはブログでも書いてみようかと思います。
 （決して暇ではありません。ちょっとやけ気味なだけですw）

さて、今日はフレームセットについてです。

先日（と言っても、もう数ヶ月前ですが）、Domino Mobile Appsがリリースされました。
さらに、次期バージョンではiPhoneで動作するようになるよ。
という話も出ています。
その中で重要になってくるのは「フレームセット」という設計要素になるそうです。

フレームセットはNotes R5で実装された機能で、当時のWebサイトはフレームに区切って表示するというのが流行っていて、それを踏襲しますよ。という形での実装だった記憶があります。
NotesクライアントやクラシックWebでも利用できると言うことで、便利に使っていました。

と思っていたのですが・・・
お客様のNotes DBをいくつか拝見したところ、あまり使われていないことが分かりました。
まだまだ「ナビゲーター」を多用されているようです。ビューの数が多いDBになると、ナビゲーターすら使っていないというのもありました（ビューの数が多かったら、ナビゲーターでボタンを配置するのも大変ですからね）。

と言いつつ、DMAで利用する場合には、フレームセットがあった方がいいかな？
さて、そんなフレームセットですが、そのままだと文書のプレビューができません。

今回は、フレームセットでのプレビューを実現する方法について説明します。

フレームセットでのプレビューは、メールDBで実装されているので、まずはそちらを参照してみましょう。

最下部にプレビューのバーがある

メールDBを開くと、最下部に細長いバーが表示されています。
ここをクリックすると・・・

プレビューが表示される

はい。選択したメール文書がプレビューとして表示されました。
これを通常のNotes DBで実装してみます。

まずは、Designerでフレームセットを作成します。
フレームは最低2つに分割します。
分割方法は好きに選んでください。今回はメールDBと同じように、画面下部に表示させるので、上下の2分割にしました。

フレームは2つのみとした

上のフレームにはビューを表示するようにします。

上のフレームにはビューを設定

このとき、「フレーム内のリンクのデフォルト対象」には"NotesPreview"と入力してください。この値は、決まり事です。
詳しい理由については、 プリビューペインは名前をこうするとこうなるの
を見てください。

また、左から2番目のタブで幅や高さを設定できますので、「高さ」は"1"の"比率"にしてください。
さらに、スクロールとサイズ変更可は"デフォルト"、"はい"にしておいてください。

フレームの高さは比率1にしておく

次にプレビューを表示するための下のフレームの設定です。
名前は"NotesPreview"とします。

プレビューの名前はNotesPreview

このフレームは最初は表示しなくても良いので、高さを0パーセントにします。

高さは0パーセントにしておく

さらに、真ん中のタブでプレビュー用のバーに表示する文字列を設定します。

ここで大事なのは「表示」の選択肢です。デフォルトでは"なし"になっており、バーが表示されません。"両方"にすると、その上で設定した「表題の式」の内容と矢印が表示されるようになり、利用者に優しい設計になります。
そして、「開く」も設定を変更します。デフォルトでは"0ピクセル"なので、プレビューをクリックしても、文書のプレビューが行われないという悲しい事態になってしまいます。
今回は、"40パーセント"としました。

これで設定は完了です。
実際に動くところを見てみましょう。

先に、Notes DBを開いたときに作成したフレームセットが表示されるように設定します。

起動タブで指定したフレームセットを開くにする

ではNotes DBを開いてみます。

画面最下部にプレビューのバーがある

なにやら画面の最下部に「プレビュー」と書かれたバーが表示されています。
ここをクリックすると・・・

プレビューが表示された

はい。見事に文書のプレビューが表示されました。
DMAではメニューがないので、これを設定しておくと便利でしょう。

※@Command([ShowHidePreviewPane])もありですが、ボタンが増えてしまうので、すでにボタンがたくさんある場合は躊躇するかと思います。


フレームセットを使うと、見た目を調えることもできますので、使ってないとかナビゲーターにしているという場合には、せっかくなので、置き換えてみることを検討してみてください。






それでは今日はこの辺で...





Notes/Dominoで困ったことがあれば、弊社にお問い合わせください。
IBM Championの私が承ります！
お問い合わせはこちらから→

チェックボックスグループ/ラジオボタングループのレイアウトをカスタマイズしてみよう

皆さん、こんにちは。
IBM Notes/Domino 10.0.1の日本語化パックも利用できるようになりましたね。
そろそろ、試して使っている方も増えてきているのではないでしょうか。
かく言う私もダウンロードしてテスト用の環境を構築しています。
ブログ記事として公開すべく、色々と調査を行っております。
もうしばらくお待ちください。

ということで、本日はv10ではなく、XPagesの話題です。

1．チェックボックスとチェックボックスグループ

今回もチェックボックス、ラジオボタンの話題です。
XPagesには「チェックボックス」「ラジオボタン」と「チェックボックスグループ」「ラジオボタングループ」というものがあります。
前者は選択肢が一つしかない場合で（ラジオボタンの場合、グループ名をセットすることで単一選択を可能にします）、後者は選択肢を複数設定できるものになります。

前者の場合、選択肢が一つしか設定できないので、自由にレイアウトをすることができます。極端な話、ページの最上部と最下部においても良いです。ですので、表組みなどをして、その中で整列させて表示させることが可能になります。
一方、後者の場合、選択肢が複数設定されているため、レイアウトの設定は限定的になります。

今回は、チェックボックスグループおよびラジオボタングループのレイアウトをカスタマイズするという話にします。

2．チェックボックスグループの標準出力

どういうことを言っているのか、まずは標準でできる方法を見てみましょう。
チェックボックスもラジオボタンも内容については同じですので、この後は、チェックボックスを使った例で見ていきます。

チェックボックスグループの並び方デフォルト

このように、チェックボックスグループのレイアウトは横並びもしくは縦並びを選択することができます。

チェックボックスグループのレイアウト選択肢

チェックボックスグループのプロパティを見ても、「水平」と「垂直」しか選べないのがわかります。

そして、並びもあまりきれいではありませんよね。垂直の場合は、きれいに並んでいますが、単純に場所の無駄遣いが目立ちますし、水平の場合、どこにチェックボックスがあって、どこまでが選択肢なのか全くわかりません。
これでは利用者は使いにくくて困ってしまうでしょう。

3． レイアウトを確認してみる

今回は、決められた範囲内でチェックボックスが折り返して表示されるようにしてみます。
そのために、まずXPagesではチェックボックスグループがどのようにHTML出力されているのかを確認してみます。
ブラウザで[F12]キーをクリックすると、HTMLのソースが表示されますので、その状態でチェックボックスグループのHTMLソースを見てみましょう。

チェックボックスグループのHTMLソース

赤枠で囲んだ部分がチェックボックスグループのHTMLソースを表します（実際にはもっと下までですが）。
これを見ると、
<fieldset>タグでチェックボックスの項目をグループ化して、さらに<table>タグで表組みしていることがわかります。

ここで、チェックボックスグループに"w500"というCSSクラスを割り当ててみます。
これは"width:500px "としてあり、チェックボックスグループの横幅を500pxにするというものです。

チェックボックスグループにCSSクラスをセット

この状態でHTMLソースを見るとどうなるでしょう？

実行結果

画面上部のチェックボックスグループを見ると横幅が500pxになりましたが、やはり1行のままで格好が悪いです。
そしてHTMLソースをみると、
<fieldset>と<table>タグにそれぞれスタイルクラスが設定されているのがわかります。
その下の<tr><td><label><input>にはセットされていません。


ここまでわかれば、後はこの要素に従ってCSSを色々と試していけばなんとかなりそうです。

4．CSSでレイアウトを修正してみる

まず、考えるのは、<table>タグの中の<tr><td>タグのレイアウトが変わればよいだろう。ということです。
ただ、XPagesのソースではチェックボックスグループの中に<table>タグも<tr><td>タグも出現しません。
かろうじて<table>タグはそのままスタイルシートが適用されると言うことです。
とは言っても、<table>タグの上には<fieldset>タグがあるので、やはりそのまま指定するわけにはいきません。
ここで、CSSの設定方法について確認してみます。
CSSにはセレクタという考えがあり、それらには
セレクタの種類
のようなものがあります。
今回の場合、「classセレクタ」を利用すると、他の部分に影響を与えずに、スタイルを設定できそうです。

ということで、以下のようなスタイルを設定してみました。

table.inline_disp {
    display: inline-block;
}
table.inline_disp td {
    margin-right: 0.5em;
    float: left;
}

そして、チェックボックスグループのスタイルクラスには次のように設定しました。

スタイルクラスを割り当て直し

w700はチェックボックスグループの幅を700pxにするというものです。
※500pxだと幅が狭すぎて、今回の効果がわかりにくかったので700pxに広げました。


また、今までの状態だと選択肢がほぼ同じ長さ（最後だけ～10で1バイトだけ違う）だったので、本当に正しく設定されたのかわからないので、nnの値が偶数か奇数かで選択肢を変えるようにしてみました。
それを反映した最終的な結果はこのようになりました。

チェックボックスグループを整列させてみた

いかがでしょう？

これでもまだ、行ごとに項目の頭位置が異なっていたりするので、改善の余地はあるかと思いますが、 きれいに配置されていますよね。

XPagesの画面だけ見ていたのではなかなか気がつきにくいですが、ブラウザの機能やHTML/CSSの機能を確認することで、解決できるようになります。

5．参考文献

今回の問題の解決には、IBM Championの田付さんに手伝っていただきました。ありがとうございました。
その田付さんはご自身のブログで、ラジオボタンの見た目をカスタマイズするという内容でブログを書いています。こちら→XPagesのラジオボタンをカッコいいデザインに変える方法に詳しく出ています。
この開発日記はXpages関連のテクニックがたくさん、それも詳しく解説されていますので、ご存じない方は是非ブックマークしておくことをお勧めします。

また、HTMLやCSSの説明には
HTMLクイックリファレンス
を参考にさせていただきました。

6．まとめ

XPagesでページを作成したけど、きれいにできない。とか思ったように表示されない・・・という場合には今回のようなアプローチで行くと、スムーズに解決できるのではないかと思います。
皆さんも、是非開発時の手段として組み込んでみてはいかがでしょうか。
きっとXPagesがまたきれいに表示されるようになるでしょう。





それでは今日はこの辺で...





Notes/Dominoで困ったことがあれば、弊社にお問い合わせください。
IBM Championの私が承ります！
お問い合わせはこちらから→

Domino Configuration Tunerを使ってみた

皆さん、こんにちは。
役3ヶ月ぶりのブログ投稿です。そして、2019年初のブログです。

今日は、Domino Configuration Tunerというツールについて見ていきます。

1．なぜDomino Configuration Tuner？

まず、なぜこのツールについての話なのか？ですが、今年IBM Champions for ICSに新しく任命された「ファイヤー！チャンプ」こと中野さん（ノーツってヤッぁ..二児の父の苦悩つのブログでおなじみですね）が、
コミュニティの中で、こんな発言をしました。

知らないから教えてくれw

普段なら、気にもとめないのですが、次のこの発言で、「お！？気になるな」となり、私も調べてみようということになったのでした。

Domino Configuration Tuner?

中野さん、面白いネタをご提供いただき、ありがとうございます、ファイヤー！


さて、調べた後でわかったのですが、運用管理者の方々にとっては周知の事実かも知れません。その場合は、このまま読まずに終わってもらって構いません・・・

2．ググってみた

知らない単語は、まずググる！
ということで「Domino Configuration Tuner」で検索してみました。
すると、Domino Configuration Tuner を使用してサーバー設定を評価する
というDomino管理ヘルプの文書が見つかるじゃないですか。

どうやら、Notes 8.0以降で、管理クライアントをインストールすればそこにDCT.NTFというテンプレートが一緒にコピーされるようです。
Dominoサーバーにはないようなので、注意が必要です（これは気がつかないよね・・・）

そして、このツールを使うと、「Domino サーバー文書、NOTES.INI ファイル、データベースの詳細なプロパティの設定を検査します。」ということです。
これは、現在稼働中のサーバーの健康診断やバージョンアップ時の参考にもなると思いますので、是非使ってみましょう。

3．使ってみよう

では、実際に使ってみましょう。
Notes/DominoはV10でやってみるのが良さそうですが、それだとそんな環境はまだもってないよ！という方が多そうなので、まずは9.0.1の環境で試してみましょう。

まずは、本当にNotesクライアントに「DCT.NTF」があるのかどうか？です。
Notesクライアントで、「DCT.NTF」を開いてワークスペースに追加してみました。
当たり前ではありますが、見事にありましたね。

DCT.NTFがあった

次に、Notes DBを作成しましょう。
作る場所はローカルでもサーバー上も構いません。管理者が1名しかいないのであれば、ローカルでも良いでしょう。
ですが、複数人でDominoサーバーを管理している場合は結果を共有できた方が良いでしょうから、そういったときはサーバー上に作りましょう。
今回は、Dominoサーバー上に作成してみます。

テンプレートからNotes DBを作成する

Notes DBを作成する際、テンプレートを選択しますが、「詳細テンプレートの表示」にチェックをつけないと選択肢に表示されないので注意しましょう。

Notes DBを作成すると、画面が開きます。
初回起動時は「アプリケーションについて」画面も一緒に表示されますが、不要なので閉じましょう。

実際の起動画面はこちらです。

起動時の画面

英語の画面になりますが、[ヘルプ]アイコンをクリックすれば、このDBの説明が読めます。
また、Domino Configuration Tuner (DCT)にも詳しい説明が出ていますので、一度読んでおくことをお勧めします。

ここでいきなり[Run New Scan]アイコンをクリックしても良いのですが、その前に[Check for Updates]アイコンをクリックします。
クリックした画面がこちら。

アップデート確認画面

どうやら、アップデートするものがあるようです。
日付からすると1日程度しか差がないのというが気になりますがw、ここはおとなしく受け入れておきましょう。[Accept License and Download]ボタンをクリックします。
すると、インターネット上から最新版のテンプレートがダウンロードされて、自動で設計置換もしてくれます。

ダウンロード＆設計置換成功！

※ここで、ダウンロードに失敗する場合は、ネットワークやACL、サーバー上の権限等を確認してください。
ネットワークの問題を改善してもダメな場合は、ローカルにNotes DBを作成してやり直してみましょう。

ダウンロード＆設計置換に成功したら、「Important」にも書いてあるように、Notes DBを一度閉じて、開き直しましょう。設計置換されているので、それを反映させるためですね。

開き直したら、[Run New Scan]アイコンをクリックします。
すると、下図のようにサーバーのリストを作成するための最初のサーバーは何か？と選択してください。というダイアログが表示されます。
通常はシステム管理サーバーを選択するのが良いでしょう。

サーバーリストはどこで作成するの？

今回は、Dominoサーバーは1台しかない環境なので、そのまま[Initialize Server List Now]ボタンをクリックします。

すると、サーバーのリストが表示されますので、検査したいDominoサーバーにチェックをつけて、[Run Scan]をクリックします。

どのサーバーの調査を行うの？

すると、バックグラウンドでDominoサーバーの調査が開始されます。
しばらくすると、ステータスバーに「DCT Scan Completed. Please 'View Results'.」と表示されます。

実行完了！

では、[View Results]アイコンをクリックしてみましょう。

あれ？

・・・あれ？何か変？
どうやら、Exception（例外）エラーが発生した模様・・・
再度Scanしても同じ結果だったので、別のサーバーで実行した結果を見てみましょう。
（2019/02/13 追記）何度やってもエラーになる場合、DCT.NSFを別の場所（Dominoサーバー上でエラーならNotesクライアント上に、Notesクライアント上でエラーなら、Dominoサーバー上に）配置して再実行してみてください。

別のサーバーで実行した結果

右側を見ると、色分けの説明とそれぞれの数および割合が出ています。
オレンジ色が「Critical」で、致命的なので、是非修正してください。
黄色が「Warning(High)」で、高レベルの警告、できれば修正して欲しい。
緑色は「Warning(Low)」で、低レベルの警告、修正していても良いかな？
青色は「Exception」で、例外エラーを指しています。

左側の一行一行が対象の結果ですが、それらを選択すると右側がその説明に切り替わります。
例えば、下図は「notes.ini CONSOLE_LOG_ENABLED causes the Domino Server to write console data to console.log in the IBM_TECHNICAL_SUPPORT directory」の行を選択したものです。
どうやら、サーバーのnotes.iniに「CONSOLE_LOG_ENABLED」というパラメータを設定していないから設定してください！というもののようです。

CONSOLE_LOG_ENABLEDを設定してないでしょ！

実際に、サーバーコンソールから確認したところ、確かに設定されていませんでした。
そこで、 設定した後、再度[Run New Scan]を実行してみました。
このとき、もう一つのCriticalで指摘された「CONSOLE_LOG_MAX_KBYTES=204800」も同時に設定しておきました。

結果が下図です。
確かにCriticalの項目が0になっているのがわかります。

指摘事項を直したよ

これで指摘事項を修正しておけば、Dominoサーバーがある程度適正化された状態で動作できるようになりますね。

他にもPreferenceの機能など、できることは色々あるようですので、詳しく知りたい方は上記で示したリンク先の文書を読んで試してみてください。

こういったツールは他にも色々とありますが、まずはNotesに標準で組み込まれているツールから利用していくというのが簡単で良いかと思います。
是非挑戦してください。


2019/02/19 追記
Domino Configuration Tuner によるスキャンが日本語版 Lotus Domino サーバーに対して実行できないという案内が出ています。2009年の記事なので、現在は変わっているかもしれませんが、動かなくて変だな？と思った方は、こちらに該当していないかどうかも確認してみてください。





それでは今日はこの辺で...





Notes/Dominoで困ったことがあれば、弊社にお問い合わせください。
IBM Championの私が承ります！
お問い合わせはこちらから→