Magic xpa 新連載概要
第151回 WebClient のオーバレイウィンドウをカスタマイズする（2）
2020年9月30日 前号では、オーバレイウインドウの四隅を角丸にし、タイトル部分のバランスと配色を調整するところまでを学習しました（画面1）。  画面1 前号までの途中完成図 ここまでで、下記の6項目の課題のうち、1番と2番が完成したことになります。 1. オーバレイの四隅が角ばっており、オーバレイらしくない。 2. 見出しタイトル領域が狭く、コントロールのバランスが悪い。 3. 項目タイトルと項目データに段差があり、見づらい。 4. 項目タイトルの左側に余白がない。 5. 終了ボタンが左寄せであり、左側に余白がない。 6. 背景の色が濃すぎて、親タスクのデータがよく見えない。 今回はその続きとして、3番から6番までの課題である、「項目データの表示バランス」と「終了ボタンの位置の調整」、および「背景の透明度を変更する方法」を学びます。 6項目の全ての課題の修正が完了すると、完成図は画面2のようになります。  画面2 6項目の課題の完成図 なお、ここで学ぶ修正手順は、ただ単にこの1画面を修正するだけの解説にとどまらず、汎用的な修正手順のコツをつかんでいただくことに重点を置いています。したがって、そのコツを習得された暁には、ほとんど自由自在にレイアウトを調整していく能力が身に付くことが期待できます。 もちろん今回の修正も前回と同様、ソースコードとなる HTML や TypeScript には一切の手を触れず、簡単な CSS の追記だけで作業を進めていきます。追加する CSS はわずか数行で、その場で暗記できる内容の記述ばかりです（後略）。 |
第150回 WebClient のオーバレイウィンドウをカスタマイズする
第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 側のソースコードに上書き更新がなされたとしても、その影響を受けません。つまり、プログラムの修正のたびに、せっかくカスタマイズした内容が消えてしまうといった心配もないわけです。 では、具体的な方法を順を追って解説していきます（後略）。 |
第149回 WebClient でサブタスクを作成する
 今回は、記事のタイトルが「WebClient でサブタスクを作成する」となっていますが、いきなり WebClient で階層構造のプログラムを作るより、既存のオンラインタスクをコンバートして WebClient タスクとして実行するという手順を検証してみたいと思います。それにより、従来のオンラインタスクに比べて、WebClient では何がどう異なるのかの理解が容易となります。 画面1は、典型的な階層構造のオンラインタスクです。ラインモードの親タスクから「編集」ボタンを押してそのレコードの明細を子タスクで開き、データを変更して「終了」ボタンを押すと、親タスクのラインモードのデータも更新されているというプログラムです。このオンラインプログラムのポイントは次の通りです。 1. 子タスクのトランザクションモードを「N=ネスト遅延」にし、変更されたデータを子タスクのレコード後の後でコミットして DB に保存する（画面2）。 2. 子タスクのタスク後で「ビュー再表示」を発行し、親タスクで表示しているキャッシュデータを DB から再読み込みして最新のデータに置き換える（画面3）。 ちなみに、親タスクで「編集」ボタンを押して子タスクを実行するイベント設定は画面4の通りです。また、画面4のユーザイベントの定義は画面5の通りです。 では早速、このプログラムを WebClient タスクにコンバートし、これらすべての設定がそのまま正しく動作するかどうかを確認していくことにしましょう。 コンバートの手順は、基本的にはタスク特性のタスクタイプを「O=オンライン」から「W=Web Client」に変更するだけです。ただし、それにともない付随する箇所をいくつか修正していく必要があります。今回はそれをひとつひとつ検証してまいります。それにより、ビュー再表示やトランザクションのネスト遅延の構造までが WebClient に引き継がれることを確認します。 なお、使用する Magic は Magic xpa 4.6の体験版ですので、どなたでもマジックソフトウェア社のホームページから無償でダウンロードして使用することができます（後略）。 |
第148回 Angular プロジェクトを IIS にデプロイする（2）
 さて、前回の解説にて Windows Chrome および iPhone と Android 上で WebClient タスクが正常に動作するところまでを解説したのですが、まだこのままでは問題が残ります。この状態ではまだ、Microsoft の Edge と IE とで正常に動作しないのです。 Edge や IE で実行させようとすると、画面1や画面2のようなエラーが出てしまいます。 実はこれには正当な理由があり、それなりの理由で動作しないように Angular 側で初期設定がなされているためです。 今回は、その設定を変更する方法を解説するとともに、このプロジェクトを正式に Windows Server 上にデプロイしたときに起こりうるトラブルの解消法について解説していきます（後略）。 |
第147回 Angular プロジェクトを IIS にデプロイする
 本連載の第140回（2019年10月31日号）から第143回（2020年1月31日号）までの4回に渡り、下記の通り WebClient 関連の解説を行いました。
上記の連載により、Magic の開発環境において WebClient タスクを Node.js の仮 Web サーバ上でデバッグ実行させるところまでを確認したわけですが、この状態ではまだ Windows Server の IIS 上で正式稼働させるところまでは至っておりません。 最終的な目標は、Magic で作成したアプリケーションを Windows Server の IIS 上にデプロイし、クライアントの各種 Web ブラウザ（Chrome、Edge、IE、Firefox、Safari 等）や、さらには Windows 以外の OS（iOS、Android 等）からもアクセスできるようにすることです。 そこで今回は、デバッグ環境にある Magic プロジェクトと Angular プロジェクトを Windows Server の実行環境にデプロイするまでの手順と、様々なクライアント環境からアプリケーションにアクセスさせる方法について学んでいきます。 これが正常に動作するようになると、下図（画面1～画面5）のように各種 Web ブラウザや各種 OS からもプログラムを実行することが可能となります。 なお、デプロイされた実行環境には、もはや Node.js も Angular も必要ありませんので、Windows Server の IIS 単体 + Magic xpa（開発版もしくはサーバ版）だけで動作するようになります。 では早速、これらの手順について解説してまいります。 なお、本年3月に Magic xpa の4.6がリリースされましたので、それに合わせて本連載も Magic xpa 4.5a から Magic xpa 4.6 による記述となります（後略）。 |
第146回 富士通クラウド上に Windows インスタンスを作る（3）
 すでに4月末となり、ゴールデンウィークを迎える季節になりましたが、新型コロナウイルスはまだその勢いを衰えさすことなく、私たちの生活に健康への不安と経済的な打撃をもたらしています。 IT 業界においては、ほとんどすべての企業がテレワークを併用した業務の遂行を余儀なくされている現状ですが、未来志向的な見方をすれば、こうしたシステムの在り方自体が働き方改革に貢献するチャンスでもあるといえます。 クラウドを活用した業務のあり方は、これを契機に世界的にも加速度的に発展するでしょうし、クラウド上で動作するアプリも、開発・実行の両面において急速な改革をもたらす可能性があります。 Magic + 富士通クラウドは、マジックソフトウェア・ジャパン社と富士通社が一丸となって推し進めているプロジェクトであり、時代の先端を担っているインフラでもありますので、ぜひともこの機会にその流れに乗じていただければと思います。 さて、前号までにおいて富士通クラウド上で稼働する Windows Server 2016へのログインを確認しましたが、Windows インスタンスの立ち上げは、まだこれで完了ではありません（後略）。 |
第145回 富士通クラウド上に Windows インスタンスを作る（2）
 今現在、世界は新型コロナウイルスの影響で、地球上の誰しもが悲痛な思いに打ちひしがれています。それに伴って経済活動も停滞し、ビジネス交流やセミナー活動までが自粛を余儀なくされています。 幸いにも、IT 業界ではテレワークの活用が可能な分野が多く、多くの人が在宅での開発や事務処理に臨んでおられるものと思われます。 そこで弊社では、富士通クラウドに関する本連載を活用すべく、弊社主催のほとんどすべてのセミナーを、富士通クラウドを利用したテレセミナー（リモートセミナー）形式に置き換える作業に入りました。 これが実現すれば、セミナー受講者の方々が3蜜（密閉、密集、密接）による濃厚接触に陥ることもなく、自宅やオフィスに居ながらにして、安心して弊社のセミナーを受講していただくことが可能となります。 近々、その具体的な実施要項をご案内していきたいと思いますので、ご期待のうえ、今しばらくお待ちください。 それでは、本題のセキュリティグループの解説に入ります。 富士通クラウドにおけるセキュリティグループの設定とは、仮想サーバに対する外部からのインバウンドと、仮想サーバから外部に出るアウトバウンドのセキュリティ設定を意味します。市版のルータの定義を想像していただければ理解しやすいです。 前回の画面30にありましたように、富士通クラウドのデフォルトのセキュリティ設定は空白のままです。設定が何も無いということは、すべてのプロトコルが遮断され、インバウンドによるアクセスも、アウトバウンドによる操作も不可であるということになります。良い意味で言えばセキュリティが最強であることを表しますが、別の見方をすれば、まったく身動きの取れない状態にあるとも言えるわけです。 そこで、まず最初にセキュリティグループの設定を行い、業務に必要となる最小限のプロトコルを通すために、一部の制限を解除する（いわゆる一部のプロトコルを通すための穴を開ける）という作業を行うわけです。 ただし、セキュリティに穴を開けるという作業を行うわけですから、設定の仕方をまかり間違えると、外部からの不正な侵入を許すという結果にもなりかねますので、最新の注意を払いながらこの作業を行う必要があります。 では早速、セキュリティグループの作成に入ることにしましょう（後略）。 |
第144回 富士通クラウド上に Windows インスタンスを作る
 この原稿を書いている途中で、折りしもマジックソフトウェア・ジャパン社が富士通株式会社から2019年度の「Fujitsu Tech Talk AWARD」という賞を受賞したというニュースが舞い込んできました。 まさに、この賞にもありますように、「Magic + 富士通クラウド」は Magic で作られたアプリケーションを最小限の手間と環境で動作させるうえで、最強のコンビであることが立証されたものであると言えます。 従来は、Magic で作成されたアプリケーションをネットワーク上で稼働させようとすると、サーバ用のハードウェアや OS を取りそろえ、それを自前で管理するために神経をすり減らしてメンテナンスを行うというのが常でした。 そのような状況下にあって近年、富士通クラウドのようなクラウドサービスを導入することにより、メンテナンスの手間やコストが大幅に削減されるとともに、多くのトラブルも回避できるというメリットが少しずつ理解されるようになってきました。 現在、すでに IT 企業をはじめとして大規模システムを抱えるような企業では、多くのシステムがクラウド上に移管されつつありますが、Magic アプリケーションを稼働させる企業ユーザ、とくに中小企業のエンドユーザにおいては、認知率がいまいちであるという現実があります。 そこで本連載では、Magic ユーザである読者の皆様向けに富士通クラウドの利用の仕方についての具体的な導入・操作手順を、数回にわたり詳細に解説してまいりたいと思います。 なお、今回の解説では、Windows インスタンス立ち上げまでの手順については Magic のクラサバ、RIA、マージ、WebClient のすべての形態において共通です。アプリケーションの規模もわずか2ユーザの小規模システムから、数多くのユーザを対象とした大規模システムにまで応用が可能です。ぜひともこの機会にクラウドの利便性をご体験いただければと思います（後略）。 |
第143回 APG による WebClient プログラムの作成と実行
 前号の手順にて、変数だけによる簡単な WebClient プログラムの作成と実行を学びました。今回は、実際のデータソースを使用した WebClient プログラムを、APG で作成して実行するというところまでを学びます。 変数だけのプログラムは、データベースにアクセスする処理がありませんので、ローカルの Web ブラウザ上だけで完結するプログラムです。ローカルだけで動作するプログラムは、一旦読み込んだあとは基本的にサーバとの通信が不要です。 これに対して、データソースを使用するプログラムは、レコードの読み込みや更新によるデータベースへのアクセスが伴いますので、通常は処理が大きく異なります。しかしながら、Magic の WebClient ではこの違いを意識することなく、Webブラウザ上で動作するプログラムを作成することができてしまいます。 では早速、実際のプログラムを作成してみることにしましょう。 まず、Magic の開発モード上でデータソースのデータを直接操作することができるように、動作環境の「実行モード」を「B=バックグラウンド」から「O=オンライン」に戻します（後略）。 |
第142回 WebClient プログラムの作成と実行
 さて、前号までの手順で、Magic xpa 4.5a にて WebClient プログラムを作成する環境が整いました。ここからは実際に、Magic のプログラムリポジトリ上に WebClient タスクを作成し、それをデバッグ実行するところまでの手順を解説していきます。 なお、この連載の第140回「WebClient リリース前夜」でも述べましたが、WebClient は Web マージと RIA の良いとこ取りをしたような構図となっています。とはいえ、最終的にはアプリケーションがインターネットリクエスタ（Mgrqispi.dll）とブローカ（MgBroker.exe）を経由して実行される点は3者ともに同じですので、それを念頭に置いて作業を進めていきます。 まずは簡単な WebClient プログラムを作成し、それをデバッグ環境にて実行させるところまでのプロセスを解説します。手順を誤ると、プログラムが正常に動作しない場合がありますので、慎重に操作してください。 ※アプリケーションが完成して実行環境にデプロイされた暁には、アプリケーションの実行においては Angular も Node.js も不要となります。この両者は、アプリケーションの開発時においてのみ必要とされます。詳細は追って解説していきます。 はじめに、テスト用のプロジェクトを新規に作成します。Magic xpa 4.5a 開発版を起動し、いつも通り、「新規作成」ボタンを押して、新規プロジェクトの作成ダイアログを開きます（後略）。 |
1-10 of 151