WebClientの子タスクのフォームレイアウト
WebClientで子タスクを作ると、デフォルトで表示されるフォームのレイアウトは次の通りです。
このフォームを少しだけカスタマイズすると、次のようになります。
これが私の連載の今月号のテーマです。
第150回 オーバレイウィンドウをカスタマイズする（2020年8月31日号）
-
ちなみに、このカスタマイズはHTMLファイルには一切、手を触れません。したがって、Magic側のプログラムリポジトリと、Angular側のHTMLやTypeScriptのコードが、ソースの二重管理になることもありません。
-
たまたまですが、このレイアウトはGoogleカレンダーの表示イメージとそっくりですね。やっぱり、いつも見慣れているデザインが頭にこびりついているんですね。笑
↓Googleカレンダーの表示レイアウト
-
連載の2020年8月31日号の予告です。
第150回 オーバレイウィンドウをカスタマイズする（2020年8月31日号）
前号では、「第149回 WebClientでサブタスクを作る」と題して、階層構造のサブタスクをオーバレイウィンドウを用いて表示させるところまでを解説しました。その時の実行画面は次のようになりました（画面1）。
画面1
ご覧になって分かりますように、このときの実行画面はこれまでの日本語アプリの環境からするとあまり馴染みのないレイアウトとなっており、各所に不満を感じる人も少なくないのではないかと思います。その主だったものは次のような点です。
1. オーバレイの四隅が角ばっており、オーバレイらしくない。
2. 見出しタイトル領域が狭く、コントロールのバランスが悪い。
3. 項目タイトルと項目データに段差があり、見づらい。
4. 項目タイトルの左側に余白がない。
5. 終了ボタンが左寄せであり、左側に余白がない。
6. 背景の色が濃すぎて、親タスクのデータがよく見えない。
そこで今回は、これらの問題点を修正し、見慣れたアプリのイメージに沿うように、簡単なCSSを用いてカスタマイズしていく手法を学びます。
ただしこの時、Magicが出力するAngularプロジェクトのソースコードをすべて解析しながら作業を行っていくのは得策ではありません。それには膨大なエネルギーと時間を要します。そこで今回は、最小のエネルギーと最短の時間でこれを実現する術（すべ）をご披露いたします。
修正作業に入る前に、完成図を先にお見せします。カスタマイズが完了すると、オーバレイウィンドウの表示は次のようになります（画面2）。
画面2
改良した内容は次の通りです。
1. オーバレイウィンドウの四隅を角丸にし、オーバレイらしくした。
2. タイトル部分の高さを調整し、ラベルやボタンの余白を調整した。ついでに罫線の色も変更した。
3. 項目ラベルの左側に余白を設け、さらに項目データとの表示を1行にまとめた。
4. 2つのボタンを右寄せにし、右側に余白を設けた。
5. オーバレイウィンドウの背景を薄くし、透明度を上げた。
ただ、これでもまだ改良の余地は多々ありますが、今回は修正の仕方のコツを掴んで頂くことに重点を置いていますので、そのコツを習得したのちに、皆さんがご自由にカスタマイズしていただければと思います。
なお、今回の修正はカスタマイズの汎用性と可搬性を重んじて、Magicが吐き出すHTMLには一切、手を加えません。したがって、後日Magic側にプログラムの修正が発生し、Angular側のソースコードに上書き更新がなされたとしても、その影響を受けません。つまり、プログラムの修正のたびに、せっかくカスタマイズした内容が消えてしまうといった心配もないわけです。
では、具体的な方法を順を追って解説していきます。
（以降、本編に続く） -
ISHIJIMAさん、いつもご購読をありがとうございます。
記事のほうはもうほとんどできておりまして、あとは日本語の手におはを修正しているだけですので、もうしばらくお待ちください。
よろしくお願いします。
-
手におは→てにをは
-
ちなみに、これらの設定は下の画面のように子タスクのフォームサイズが変更になったような場合でも、自動的に継承されますので、プログラムの修正のたびに悩むことがなくなります。やってて本当に楽しいですよ。
-
ISHIJIMAさんはタンダコンピュータにとってはすべての面で大のお得意様ですから、リクエストがあればどんどん出してください。ただし、MSEが対応してくれないとタンダコンピュータだけでは何ともできないこともありますので、その点だけはご容赦ください。笑
-
ちなみに、タンダコンピュータのセミナーは今はすべて「リモート形式」になりましたので、わざわざ名古屋までお越しいただく手間が省けます。日本全国からだけでなく、海外からの参加でもOKです！
また、1人ごとの生徒様に対して1インスタンス毎のクラウドWindowsをご用意して待機していますので、対面式セミナーより豪華な環境でセミナーをやっております。
-
「第150回 WebClient のオーバレイウィンドウをカスタマイズする」の目次が出来上がりました。記事は明日（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 オーバレイの正常表示の確認 -
ISHIJIMAさん、早々に記事を読んでいただきまして恐縮です。
MagicではまだWebClientが始まったばかりですが、世の中のWebアプリの世界は我々の想像以上に進化しているようですので、うかうかしていられないところです。
Magicは常に時代の先端テクノロジーを取り入れて走ってくれていますので、安心して付いていくことができます。嬉しいですね。
-
WebClient、徐々にやる人が増えてきているみたいでうれしいですね。
まずは、クラサバの資産をWebClientに変換するところから始めるのが取っ付きやすくていいですね。基本的にはタスク特性でクラサバの「O=オンライン」を「W=Web Client」に変更するだけです。あとはF8キーでチェックして、エラーがあればそこを修正です。
-
WebClientのすごいところは、既存のクラサバのオンラインタスクであっても、単にコンバートしてF8エラーの部分だけ修正してやれば、それまでWindowsでしか動かなかったプログラムが、iOS上でもAndroid上でも、あるいはどんなOS上でもブラウザさえHTML5に対応していさえすれば、動いてしまうというところですね。
タスクのロジックはそのまま互換性がありますから、こんなすごいツールは見たことないです。WebClientは新しいプログラムを作っても、その価値が分かりにくいですから、ぜひクラサバの資産を変換してそのすごさを試してみられることをお勧めします。
サインインしてコメントを残してください。
コメント
12件のコメント