第150回 WebClient のオーバレイウィンドウをカスタマイズする 2020年8月31日 前号では、「第149回 WebClient でサブタスクを作る」と題して、階層構造のサブタスクをオーバレイウィンドウを用いて表示させるところまでを解説しました。その時の実行画面は次のようになりました（画面1）。  ご覧になって分かりますように、このときの実行画面はこれまでの日本語アプリの環境からするとあまり馴染みのないレイアウトとなっており、各所に不満を感じる人も少なくないのではないかと思います。その主だったものは次のような点です。 1. オーバレイの四隅が角ばっており、オーバレイらしくない。 2. 見出しタイトル領域が狭く、コントロールのバランスが悪い。 3. 項目タイトルと項目データに段差があり、見づらい。 4. 項目タイトルの左側に余白がない。 5. 終了ボタンが左寄せであり、左側に余白がない。 6. 背景の色が濃すぎて、親タスクのデータがよく見えない。 そこで今回は、これらの問題点を修正し、見慣れたアプリのイメージに沿うように、簡単な CSS を用いてカスタマイズしていく手法を学びます。 ただしこの時、Magic が出力する Angular プロジェクトのソースコードをすべて解析しながら作業を行っていくのは得策ではありません。それには膨大なエネルギーと時間を要します。そこで今回は、最小のエネルギーと最短の時間でこれを実現する術（すべ）をご披露いたします。 修正作業に入る前に、完成図を先にお見せします。カスタマイズが完了すると、オーバレイウィンドウの表示は次のようになります（画面2）。  改良した内容は次の通りです。 1. オーバレイウィンドウの四隅を角丸にし、オーバレイらしくした。 2. タイトル部分の高さを調整し、ラベルやボタンの余白を調整した。ついでに罫線の色も変更した。 3. 項目ラベルの左側に余白を設け、さらに項目データとの表示を1行にまとめた。 4. 終了ボタンを右寄せにし、右側に余白を設けた。 5. オーバレイウィンドウの背景を薄くし、透明度を上げた。 ただ、これでもまだ改良の余地は多々ありますが、今回は修正の仕方のコツを掴んで頂くことに重点を置いていますので、そのコツを習得したのちに、皆さんにご自由にカスタマイズしていただければと思います。 なお、今回の修正はカスタマイズの汎用性と可搬性を重んじて、Magic が吐き出す HTML には一切、手を加えません。したがって、後日 Magic 側にプログラムの修正が発生し、Angular 側のソースコードに上書き更新がなされたとしても、その影響を受けません。つまり、プログラムの修正のたびに、せっかくカスタマイズした内容が消えてしまうといった心配もないわけです。 では、具体的な方法を順を追って解説していきます（後略）。 |
 | |
|
|