ホーム‎ > ‎Magic xpa‎ > ‎Magic xpa 新連載概要‎ > ‎

第150回 WebClient のオーバレイウィンドウをカスタマイズする

2020/08/30 21:21 に Masanobu Tanda が投稿   [ 2020/08/30 21:59 に更新しました ]
第150回 WebClient のオーバレイウィンドウをカスタマイズする

2020年8月31日

前号では、「第149回 WebClient でサブタスクを作る」と題して、階層構造のサブタスクをオーバレイウィンドウを用いて表示させるところまでを解説しました。その時の実行画面は次のようになりました(画面1)。

画面1 デフォルト表示のオーバレイ

ご覧になって分かりますように、このときの実行画面はこれまでの日本語アプリの環境からするとあまり馴染みのないレイアウトとなっており、各所に不満を感じる人も少なくないのではないかと思います。その主だったものは次のような点です。

 1. オーバレイの四隅が角ばっており、オーバレイらしくない。
 2. 見出しタイトル領域が狭く、コントロールのバランスが悪い。
 3. 項目タイトルと項目データに段差があり、見づらい。
 4. 項目タイトルの左側に余白がない。
 5. 終了ボタンが左寄せであり、左側に余白がない。
 6. 背景の色が濃すぎて、親タスクのデータがよく見えない。

そこで今回は、これらの問題点を修正し、見慣れたアプリのイメージに沿うように、簡単な CSS を用いてカスタマイズしていく手法を学びます。

ただしこの時、Magic が出力する Angular プロジェクトのソースコードをすべて解析しながら作業を行っていくのは得策ではありません。それには膨大なエネルギーと時間を要します。そこで今回は、最小のエネルギーと最短の時間でこれを実現する術(すべ)をご披露いたします。

修正作業に入る前に、完成図を先にお見せします。カスタマイズが完了すると、オーバレイウィンドウの表示は次のようになります(画面2)。

画面2 カスタマイズ完成後のオーバレイ

改良した内容は次の通りです。

 1. オーバレイウィンドウの四隅を角丸にし、オーバレイらしくした。
 2. タイトル部分の高さを調整し、ラベルやボタンの余白を調整した。ついでに罫線の色も変更した。
 3. 項目ラベルの左側に余白を設け、さらに項目データとの表示を1行にまとめた。
 4. 終了ボタンを右寄せにし、右側に余白を設けた。
 5. オーバレイウィンドウの背景を薄くし、透明度を上げた。
 
ただ、これでもまだ改良の余地は多々ありますが、今回は修正の仕方のコツを掴んで頂くことに重点を置いていますので、そのコツを習得したのちに、皆さんにご自由にカスタマイズしていただければと思います。

なお、今回の修正はカスタマイズの汎用性と可搬性を重んじて、Magic が吐き出す HTML には一切、手を加えません。したがって、後日 Magic 側にプログラムの修正が発生し、Angular 側のソースコードに上書き更新がなされたとしても、その影響を受けません。つまり、プログラムの修正のたびに、せっかくカスタマイズした内容が消えてしまうといった心配もないわけです。

では、具体的な方法を順を追って解説していきます(後略)

(以降、本編に続きます。本編ご購読のお申込みはこちらです)

第150回(2020年8月31日号)目次

1 デフォルト表示のオーバレイ
2 カスタマイズ後の完成図
3 HTML に手を触れずにカスタマイズ
4 外部開発者ツールの起動
5 ブロックレベル要素選択ボタン
6 検証対象ブロックの範囲選択
7 範囲の確定とフォーカスされたソース
8 Angular テーマのクラス名の確認
9 フォーカス領域の移動
10 ブロックレベル要素の確定
11 モーダルウインドウの前景
12 要素別配色の説明
13 オーバレイの四隅を角丸に
14 Visual Studio Code で編集
15 Angular プロジェクトの自動リビルド
16 ブラウザ実行画面の自動リロード
17 オーバレイウィンドウの確認
18 モーダルヘッダ領域の存在
19 入れ子となったブロックレベル要素
20 オーバレイウィンドウの再確認
21 タイトルの背景色と罫線の色の変更
22 Angular のテーマへのカスケード
23 優先カスケードオプションの適用
24 オーバレイの正常表示の確認