2019年3月17日日曜日

表の境界線をイメージに置き換えてみた

前回のエントリでは、表のプロパティで境界線を"イメージ"にすると、画像がどのように境界線として表示されるのかを見てきました。

今回は、ずっと前から気になっていたアプリケーションライブラリ(dblib4.ntf)におけるデータベース名の表示の不具合(下図)を改善してみたいと思います。


「不具合」とはデータベースのタイトルが長い場合、タイトルの右側が本の外側にはみ出てしまうことです。

フォームの設計を見てみます。下図はフォームの一部です。

固定幅で1行1列(セルが1つだけ)の表に、セルのイメージとして本の画像 dblib.gif を指定しています。これではウィンドウサイズにあわせて本が縦や横に伸びたり縮んだりすることはありませんね。

これを表の境界線として指定し、かつ固定幅ではなくウィンドウの幅に合わせて表の幅も変わるようにしたいと思います。

このブログでは dblib.ntf を直接修正することはせずに(一時的に作成する)別のデータベースで検証していきます。

まずは、dblib4.ntf イメージリソースに登録されている dblib.gif を Export して画像を確認してみたいと思います。
Export したファイルをペイントアプリで開いてみると、画像のサイズは 436 x 49 px でした。

これを前回と同様に、縦と横に3等分して9つの枠に分けてみました。

この図を表の境界線として表示する場合、表が縦方向に膨らむと「左」と「右」が縦方向に繰り返し表示されます。「左」を拡大してみると、線に段差があることがわかります(下図)。

この画像をそのまま使う場合「左」が縦方向に繰り返し表示されると縦線に凸凹が生まれて見た目がよろしくありません。

そこで、3等分したときに段差がなくなるように高さを調節します。画像の縦のサイズを 11 増やして 60px に変更しました。そして画像の下半分をコピーして最下部に合うようにペーストした画像がこちらです。元の画像よりも本の厚みが若干増しました。

三等分してみると「左」の縦線にあった段差が無くなっています。

この画像をイメージリソースに Import して、表のプロパティから表の境界線のイメージとして画像を設定します。そして表の外側に表示する画像の厚みを「厚さ」から調整します(下図)。

このままでは表の内側が白抜きとなってしまいますので、表の内側を埋めるドットだけの画像を作成してイメージリソースに Import したものをセルのイメージとしてタイル状に繰り返し表示するよう設定します(下図)。

こうして表の中にある文字がいくら長くなっても本の外側にはみ出すことなく折り返して表示されるようになります。
ウィンドウの幅が広い場合

ウィンドウの幅が狭い場合
いかがでしたでしょうか。

境界線として使えそうな画像を「枠」や「フレーム」などでググると素材を扱うWebサイトがいくつかヒットしました。フォームのデザインに合う境界線があるといいですね。

表の角を丸くする仕組み

前回の「のの会」でのお話です。
Domino Domain Monitoring (DDM) についてアクセルの岡本さんがお話されている時、DDM.nsf 内にあるイベント文書を開き「この角が丸い枠はどうやってんねやろ?」みたいなことをおっしゃってました。

下図は ddm.nsf のイベント文書を開いた画面の一部です。色のついた四角の角が丸くみえます(追加した2つの赤い矢印で示しました)。

言われてみればどう実現しているのか説明できないぞ?!ということで、その場で設計を覗いてみました。

すると表の周りを角の丸い四角でふちどっているような感じでしたので、表に何らかの仕掛けがあるのかと考え「表のプロパティ」をチェックしてみました。すると「境界線のスタイル」に"イメージ"が選択され、さらに「イメージ」として "TableBorderRed.gif" が指定されていることがわかりました。(下図)


そしてのの会の翌日、ddm.nsf 内の「イメージリソース」にある TableBorderRed.gif をエクスポートしてペイントで開いてみると、サイズが横193px 縦146px、薄い赤色で角の丸い四角形が描かれていました。


なるほど。表の外側を特定の画像(の縁)で縁取ることができるようです。

しかし、Notesの表というのは表全体の幅がウィンドウやフレームの幅にあわせて変化したり、表の中に表示するものによっては縦に伸びたりする場合があります。
TableBorderRed.gif の縦横のサイズは、フォーム上に表示されれている表とは全く異なりなりますが、違和感なく表のまわりに表示されています。

この仕組みをみていきたいと思います。

下図の画像(以降「元画像」と呼びます)を用意してみました。これをイメージリソースへ登録します。


そして表のプロパティで境界線の「イメージ」に指定したものがこちらです。
左上を拡大すると次のように見えます。どうやら「伸びている」のではなく「繰り返している」ようですね。

では、元画像のどの部分を繰り返しているのでしょうか。

元画像のサイズは 24 x 24 の正方形です。下のように縦横三等分して9つの枠で示すことができます。この9つの枠それぞれに「左上」「中」といったように名前をつけてみました。

これを先の拡大図にあてはめてみると、次のようになります。
左上隅に、元画像の「左上」が表示されました。
左上の下側には、元画像の「左」が縦方向に繰り返し表示されます。
また「左上」の右側には、元画像の「上」が右方向に繰り返し表示され、「左」の右側と「上」の下側には「中」が繰り返し表示されました。

さて、縦横三等分した「左」と「上」と「中」が繰り返されていることがなんとなくわかったので、表の右側も見ていきます。下は表の右上を拡大したものです。
最上段では「上」が右方向に繰り返し表示され、最後に「右上」が表示するのですが、表のサイズは元画像の倍数とは限りませんので、余りが生じる場合があります。その余りとして「上」が部分的に表示されました。
「右上」の下側にある「右」の左に接するものも同様に「中」が部分的に表示されました。

続いて表の左下です。
 表の左側では「左」を縦方向に繰り返し表示して、最下段に「左下」を表示しますが「左」と「左下」の間には余りとして「左」が部分的に表示されました。
「左下」の右側は「下」が繰り返し表示されますが、その「下」の上に接する「中」も余りとして部分的に表示されました。

そして最後は表の右下の拡大図です。
表の右下の隅には元画像の「右下」が表示され、それに接する「中」「右」「下」が部分的に表示されました。

表の伸縮へは、元画像の「上」「右」「下」「左」「中」の繰り返しと、幅と高さの余りの調整にそれらを部分的に表示することで対応していることがわかりました。


ところで、皆さんは「データベースライブラリ」というデータベースをご存知でしょうか。Dominoサーバーやローカルにあるデータベースを登録することができるデータベースです。バージョン 10.0.1では、テンプレート "Application Library (8)" dblib4.ntf を使って作成できます。

「データベースライブラリ」にデータベースを登録し、登録した文書を開いたものが下図になります。

本を横にしたような画像があり、その背表紙には登録したデータベースのタイトル(図では ”HTTPRequest” )が表示されます。

ここへ登録したデータベースのタイトルが長い場合、下図のように本の中に納まってくれません。これが個人的にはすごーーく気になっていたのです。

この不具合は表の境界線で”イメージ”を活用することで改善できそうです。
次回はこれを改善してみようと思います。

2019年3月8日金曜日

変数の型とパフォーマンス

昨日は会社帰り「のの会」に参加しました。


ところで Notes の設計をちょっといじっただけで見違えるほど体感速度がかわることってありませんか?

例えば「ビューのカテゴリを閉じた状態で開く」とか。

今回はそんな「ちょっとしたこと」を LotusScript の処理のパフォーマンスと絡めてご紹介しました。

下のスライドで共有いたします。



のの会では、発表中の発言は自由ですので「1億回ループの処理時間をどうやって計ったの?」「ダイナミックって言うけどいつ割り当てるの?」等、やさしい質問から厳しいツッコミまでいただきました。いちユーザーの立場では製品の内部仕様まで存じ上げないこともあり、これまでの経験から「あーじゃない?こーかも?たぶんそう!」程度の受け答えしかできないこともありますがそこはご容赦ください(汗)

スライドのコードはわかりやすくする目的でシンプルにしましたが、もっと現実味のあるコード(?)のほうがののさん向けだったかも、と反省してます。