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

テクてく Lotus 技術者 Slack に参加しよう!

2019年2月17日日曜日

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

皆さん、こんにちは。
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の私が承ります!
お問い合わせはこちらから→Lotus Notes/Domino カスタマイズとセキュリティ強化 - 株式会社エフ

2019年2月10日日曜日

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に標準で組み込まれているツールから利用していくというのが簡単で良いかと思います。
是非挑戦してください。








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





Notes/Dominoで困ったことがあれば、弊社にお問い合わせください。
IBM Championの私が承ります!
お問い合わせはこちらから→Lotus Notes/Domino カスタマイズとセキュリティ強化 - 株式会社エフ

2018年11月17日土曜日

NotesDBとGitHubの連携方法

皆さん、こんにちは。

今日はNotes DBを開発する際の手法の一つについてご紹介します。

Notes/Dominoの8.5.2からソース管理ができるようになっています。
以前は、Domino Designer用にフリーのプラグインが用意されていましたが、 現在は利用できなくなっています。

今回は、GitHubのレポジトリとNotes DBを連携させてソース管理を行う方法を紹介します。
ソース管理は、Notes DBをオンディスクプロジェクトに変換して、その内容とGitHubのプロジェクトを同期させるようにして行います。
では、見ていきましょう。


なお、あらかじめThe world’s leading software development platform · GitHubサイトでアカウントを作成しておいてください。


1.GitHub Desktopをインストールする

GitHub Desktop | Simple collaboration from your desktopからツールがダウンロードできるのでダウンロードしてインストールします。
インストールはすぐに終わり、次の画面が表示されます。
GitHub Desktop初期画面

[File][Options]メニューをクリックします。
オプション画面が設定されるので、「GitHub.com」のところにある[Sign in]をクリックします(すでにログインされている場合は不要です)。
オプション画面
サインインに成功すると、初期画面に戻ります。
再度、[File][Options]メニューをクリックしてサインインできていることを確認します。
サインインできている




2.既存レポジトリの検索とクローンの作成

今回は、すでにプロジェクトが作成されているものとして話を進めます。
[File][Clone repository...]メニューをクリックします。
すると、自分のレポジトリの一覧(自分が作成したプロジェクト、参加しているプロジェクト内のレポジトリ)が表示されます。
自分が保有しているレポジトリの一覧

ローカルPCにコピーしたいレポジトリを選択したら、
レポジトリ情報をどこに格納するかを設定するLocal pathを確認して、[Clone]ボタンをクリックします。
すると、レポジトリをローカルPCにクローンし始めます。
クローン作成中...

レポジトリの大きさにもよりますがしばらくすると終わり、画面に戻ります。
画面は作成したクローンのローカルレポジトリ画面になります。
ローカルレポジトリ画面

レポジトリを追加したい場合は、さきほどの手順を繰り返します。
以下の図は、複数のレポジトリのクローンを作成した状態のものです。
ローカルレポジトリの一覧


3.レポジトリをインポートする

まず、Domino Designerを起動します。
[ウィンドウ][Eclipseビューの表示][パッケージエクスプローラー]でパッケージエクスプローラーのビューを表示します。
Domino Designerのパッケージエクスプローラービュー

そこで、マウスを右クリックするとメニューが表示されるので、[インポート]をクリックします。
インポートメニューをクリック

インポートダイアログが表示されるので、「既存プロジェクトをワークスペースへ」を選択して[次へ]をクリックします。
インポートダイアログ

「プロジェクトのインポート」ダイアログが表示されるので、「ルートディレクトリの選択」の横にある[参照]をクリックします。
プロジェクトのインポート

フォルダの参照画面が表示されるので、さきほど作成したクローンのフォルダにあるレポジトリフォルダを選択します。
※上位のフォルダを選択すると、レポジトリがすべて読み込まれて一度に複数のレポジトリをインポートできます。

すると、プロジェクトの部分にレポジトリの内容が表示されます。
※1つのプロジェクト内に複数のレポジトリが存在する場合もあります。
プロジェクトが追加された

Domino Designerに追加したいレポジトリにチェックをつけて(デフォルトではチェックがついています)、[終了]をクリックします。
すると、パッケージエクスプローラービューにインポートしたレポジトリ(Domino上ではオンディスクプロジェクトと呼びます)が表示されるようになります。
パッケージエクスプローラービューに表示された


4.Notes DBと関連付ける

インポートされたオンディスクプロジェクトを選択して、マウスで右クリックします。
メニューが表示されるので、[チーム開発][新規NSFに関連付ける]をクリックします。
新規NSFに関連付ける

新規アプリケーションダイアログが表示されるので、Notes DBのファイル名を入力して[終了]をクリックします。
※ローカルでもサーバーでも構いませんが、XPages等サーバー環境がないと動作確認が難しいものはDominoサーバー上に置くとよいでしょう。
新規アプリケーション

すると、Notes DBが新規に作成されてオンディスクプロジェクトの内容が反映されます。
Notes DBの作成が完了すると、パッケージエクスプローラービューにNotes DBが表示されます。また、オンディスクプロジェクトに「****.nsfと関連付けられている」という表示が追加されます。
Notes DBが関連付けられた


5.Notes DBの修正を反映する

Notes DBの修正は通常通りに行ってください。
デフォルトでは自動でオンディスクプロジェクトに反映されます。
それが嫌な場合は、Domino Designerのプリファレンス画面([ファイル][プリファレンス]メニューで開きます)で設定を変更できます。

プリファレンス画面で[Domino Designer][ソース制御]タブを開きます。
ソース制御画面

「変更時の設計要素の自動エクスポートを(NSFからディスクへ)有効にする」と「変更時の設計要素の自動インポートを(ディスクからNSFへ)有効にする」のチェックを外せばOKです。

この設定を行った場合、自動で反映されなくなるので、反映する場合は次の操作を行います。
Notes DBを選択して、マウスで右クリックします。
メニューから[チーム開発][オンディスクプロジェクトとの同期]をクリックします。
オンディスクプロジェクトとの同期

これでオンディスクプロジェクトにNotes DBの修正が反映されました。


6.ローカルレポジトリの修正をプッシュ(アップロード)する

GitHub Desktopの画面を見てみましょう。
Notes DBの修正が反映されているので、「Change」タブに修正内容が表示されています。
修正内容が問題ないのであればコミットしてGitHubにプッシュします。
ただし、このままではプッシュできません。

まず、この修正内容についての概要を入力します。
画面左下にある「Summary」に修正内容の概要を入力します。
修正内容についてコメントを入力する

そうしたら、[Commit to master]ボタンをクリックします。
※修正内容を取り消す場合は、修正箇所を右クリックして、[Discard changes...]をクリックします。

Commitが完了すると、 画面左下にコミットされた内容が表示されてサーバーにプッシュする準備ができます。
[Push origin]をクリックして、サーバーにプッシュします。
サーバーにプッシュする

しばらくすると、プッシュが終了して「Fetch origin」の表記に変わります。Change画面には何も表示されてないのがわかります。
プッシュ終了

GitHubのサイトを開いてプロジェクトを確認するとプッシュされたのがわかります。
プッシュされている


いかがでしょうか?
駆け足で説明してきましたが、なんとなく動きがつかめたでしょうか?
ツールがバージョンアップすれば、操作方法は多少変わるかもしれませんが、何をやったのかを理解しながら進めていけば大丈夫だと思います(実際に何度かGitHub Desktopはインターフェースが変更されましたが、ちゃんとできました)。


オンディスクプロジェクトはやり方によっては便利に使えます。
オープンなプロジェクトなどでは活躍する機会が増えると思いますので、是非覚えておきましょう。

企業内でのみソース制御(バージョン管理等)を行うのであれば、チームスタジオ製品のCiao! を使うと良いでしょう。






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







Notes/Dominoで困ったことがあれば、弊社にお問い合わせください。
IBM Championの私が承ります!
お問い合わせはこちらから→Lotus Notes/Domino カスタマイズとセキュリティ強化 - 株式会社エフ

2018年11月16日金曜日

ラジオボタンの値をクリアする

皆さん、こんばんは。
今日もXPagesについてです。

昨日はチェックボックスの値のクリア方法について触れたので、今日はラジオボタンの値のクリア方法について見ていきましょう。

今回はXPagesでこんな画面を作成しました。
設計画面

ラジオボタンの値をクリアする方法をSSJS及びCSJSで確認するためのものですが、せっかくなので値をセットする方法と値を取得する方法も検証しようとしています(これらは後日記事にします)。


まずは、SSJSでの場合。チェックボックスと比べて簡単にできました。テキストフィールドをクリアするのとほぼ同じでした。





続いてCSJS。チェックボックスと同様のやり方でないとクリアできないので、こちらの方がちょっとだけ難しいです(笑)。



チェックボックスのクリアとの違いは、一つしか選択できないので、そこをクリア(falseをセット)したら、処理を終わらせて良いというところです。



ラジオボタンは一度選択してしまうと外すことができないというのが欠点です。
通常は入力必須項目としておくものですが、そうでない場合は、このようにクリアする方法を用意しておくといいでしょう。

是非覚えておいてください。





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



Notes/Dominoで困ったことがあれば、弊社にお問い合わせください。
IBM Championの私が承ります!
お問い合わせはこちらから→Lotus Notes/Domino カスタマイズとセキュリティ強化 - 株式会社エフ

2018年11月14日水曜日

チェックボックスの値をクリアする

皆さんこんにちは。
今日はXPagesについてです。

なぜかこんなことに半日近く費やしてしまったので、備忘録として記事にしておきます。

設計画面

チェックボックスグループを使用した画面を作成していました。
この中でチェックボックスの値をクリアするということをしたかったのです。
CSJSであれば、別件でやっていたので、ささっとできました(笑)

ちなみにこんなコードです。



ところが、チェックボックスの値をクリアする際に別の処理も行う必要があり、SSJSで実行する必要が出てきました。
編集ボックスであれば、
getComponent( "inputText1" ).setValue( "" );

でできるのは分かっていました。
同じようにできるかな?と思ってやったところ、見事にエラーになりました(笑)
クリアエラー!


どうやればいいのかいろいろ悩んで数時間。ググっても出てきません。
ということで悩んだ結果できあがったコードがこちらです。



これで動きました。setSelectedValuesという関数を使う際にセットする値を[]にするのがポイントでした。


ちなみに今回のコードは
XSnippets 日本語版
というサイトに載せています。
このサイトはどなたでも参照できますし、自分のコードを投稿して、世界中の人と共有することができます。
是非、自分が持っているコードを投稿してみてください。



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



Notes/Dominoで困ったことがあれば、弊社にお問い合わせください。
IBM Championの私が承ります!
お問い合わせはこちらから→Lotus Notes/Domino カスタマイズとセキュリティ強化 - 株式会社エフ