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の私が承ります！
お問い合わせはこちらから→
