ホーム‎ > ‎Magic xpa‎ > ‎

Magic xpa 新連載概要


第154回 Magic xpa 4.6.1 + Xcode 11で iOS プロジェクトをビルドする

2021/01/05 0:05 に Masanobu Tanda が投稿   [ 2021/01/05 1:15 に更新しました ]

2020年12月31日

 Magic xpa 4.6から xpa 4.6.1へのバージョンアップは、Magic 本体にとってはマイナーバージョンアップのレベルでしたが、そこに添付された iOS プロジェクトに関しては、それまでの Xcode 10までの対応から Xcode 11への対応が正式に実現された大きな節目となりました。

 Xcode 11では、Apple 社による仕様変更により、モーダルウィンドウのデフォルト表示が従来のフルクリーン表示からモーダルビューの本来の表示形式であるカード型に変更されていたり、あるいは iPhone X から取り入れられたノッチデザインの影響などにより、画面表示周りにいくつかの仕様変更がなされています。

 したがって、Magic 4.6以前に同梱された iOS プロジェクトを Xcode 11でそのままビルドすると、フルスクリーンで表示されるべきウィンドウがモーダルビューとなり、それをフリックすることでアプリがフリーズしてしまったり、あるいは iPhone を横置きにするとテーブルコントロールのタイトル行が隠れてしまったりする等の不具合が生じていました

 これらの問題が、今回の xpa 4.6.1へのバージョンアップで正式に解消されたことになります。

 併せて、Xcode 11ではアプリアイコン名の登録方法や、アプリへの署名手順もこれまでの作法とは一部異なる点も生じてきましたので、今回の解説ではこれらも含めて順を追って解説してまいりたいと思います。

 また、本記事では USB ケーブル直結によるビルドと、インストーラ(ipa ファイル)経由のインストールの両方を解説してまいります。従いまして、Xcode 11のインストールに併せて、あらかじめ「Apple Configurator 2」のインストールも行っておいてください。これらはすべて Mac App Store からダウンロードが可能です。

 なお例により、本記事の内容を実行するには、あらかじめ Apple Developer Program への登録と、開発用証明書の取得、およびアカウントへの実行デバイス(ご自分の iPhone)の登録が必要となります。これらの手続きがまだお済みでない方は、下記の Apple 社のページを参照して手続きを完了させておいてください。 

Apple Developer Program

 ※これらの登録手順の詳細は、マジックソフトウェア社主催の「Magic xpa iOS 導入トレーニングコース(1日間)」でも解説しています。必要に応じてトレーニングにご参加ください。

マジックソフトウェア社・トレーニング

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

第153回(2020年12月31日号)目次

1 事前に必要となる準備事項
2 Magic に添付された iOS プロジェクトのコピー
3 xcodeproj から Xcode 11を起動
4 Xcode 11起動時の画面
5 MagicApp の General タブの表示
6 iPhone 実機でいきなり実行を試す
7 デバイスを選択してプロジェクトを実行
8 ビルド失敗の内容
9 ビルドエラーの詳細
10 自動署名への切り替え
11 自動署名への切り替えの確認
12 開発チーム(開発者)の選択
13 プロジェクトの再実行
14 通知の送信を許可
15 RIA アプリの稼働先を指定
16 RIA アプリの起動
17 アプリアイコンの確認
18 アプリアイコン名の変更
19 プロジェクトの上書き再実行
20 変更後のアプリ名の確認

第153回 さくらインターネット上に Windows インスタンスを作る(2)

2020/11/30 21:13 に Masanobu Tanda が投稿   [ 2020/11/30 21:28 に更新しました ]

2020年11月30日

 さくらインターネット VPS のサービスは、月額1,000円からの固定料金制で、初期費用も従量課金も一切無しという安心プランです。しかも、最初から固定のグローバル IP アドレスが割り振られていますので、RIA サーバとしても WebClient サーバとしてもすぐに稼働させることが可能です。

 本記事では、Magic xpa の開発版を稼働させるに足るパフォーマンスの、月額2,000円のコースをベースに解説していきます。月額2,000円とはいえ、CPU は仮想 3Core で、SSD 100GB を搭載したスペックとなっています。3Core ですので、CPU 使用率が2個までフル稼働に達しても、残りの1つで Magic サーバは稼働し続けます。

 さて、前号ではさくらインターネット VPS 上に Windows Server 2016をインストールし、VNC コンソールからその立ち上がり画面を表示させるところまでを解説しました。

 今回はその続きとして、この VNC コンソールから Windows Server 2016に初回のログオンを行い、さらにローカルの Windows 10からリモートデスクトップ接続を行うところまでを解説します。そして最後に、さくらインターネットの管理画面からサーバのステータスを見る方法も併せて解説します。

 ※初回のログオンは Windows 10のリモートデスクトップ接続でいきなり行ってもよいのですが、VNC コンソールからのログオンの仕方も確認しておくことで、後々のトラブル対処の一助ともなります。

 ではそのコンソールログオンを行ってみましょう(後略)。

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

第153回(2020年11月30日号)目次

1 Ctrl + Alt + Del の送信
2 Windows Server へのコンソールログオン
3 ネットワークの設定
4 サーバーマネージャーの終了
5 さくらインターネットからログアウト
6 リモートデスクトップからの接続
7 コンピュータ名とユーザ名の入力
8 パスワードの入力
9 セキュリティ証明書の確認
10 Windows デスクトップの表示
11 デスクトップが表示されない時の留意点
12 ファイルやフォルダの転送
13 さくらインターネットのサーバ管理画面
14 VNC コンソールの再表示

第152回 さくらインターネット上に Windows インスタンスを作る

2020/11/04 1:27 に Masanobu Tanda が投稿   [ 2020/11/04 1:29 に更新しました ]

2020年10月31日

本連載では、これまでに下記の通り、Amazon AWS、および富士通クラウド上で Magic を稼働させる手順について解説してきました。

Amazon AWS

第98回 AWS で Magic xpa を使用する (2016年4月30日)
第99回 AWS で Magic xpa を使用する(2) (2016年5月31日)
第100回 AWS で Magic xpa を使用する(3) (2016年6月30日)
第101回 AWS で Magic xpa を使用する(4) (2016年7月31日)
第102回 AWS で Magic xpa を使用する(5) (2016年8月31日)

富士通クラウド

第144回 富士通クラウド上に Windows インスタンスを作る(2020年2月29日)
第145回 富士通クラウド上に Windows インスタンスを作る(2)(2020年3月31日)
第146回 富士通クラウド上に Windows インスタンスを作る(3)(2020年4月30日)

これにより、多くの読者の方々が気軽にクラウド上に Magic の開発環境を構築したり、Magic のアプリケーションサーバを設置したりすることができるようになったことと思います。

そこで今回は、国産クラウド(システム自体もすべて国産)の代表選手とも言える「さくらインターネット」のクラウドに焦点を置いて解説していきたいと思います。

さくらインターネットは、2011年3月の東日本大震災時においても、まったく影響を受けることなく稼働し続け、国内のレンタルサーバー各社の中でも、ずば抜けた信頼性を証明するものであるとして、ニュースでも大きく取り上げられました。

この安定性の要因としては、さくらインターネット上で稼働しているシステムが、すべて自前で構築されて管理されている純国産システムであるという点にもあります。他社のクラウドのように海外システムを日本語化したものではなく、エラー発生時にも不可解な英語のメッセージが出たりすることもありません。日本人の文化にとっても、使いやすいインターフェースとなっています。

ただ、さくらインターネットはクラウド関連のサービスメニューが非常に多く、初心者にとってはどのサービスから着手したらよいのか分かりにくい点もありますので、ここでは入門者向けとして理解しやすく、また価格もお手頃な「さくらインターネット VPS」のサービスに的を絞って解説していきたいと思います。

お手頃価格であるとはいえ、さくらインターネット VPS は、Magic の開発環境を構築したり、完成したアプリケーションをクラサバ、RIA、WebClient にかかわらず、Magic サーバとして実行させたりするうえでは十分な機能を備えていますので、安心して利用することができます。ちなみに、利用料金は月額1,000円からの固定料金制で、従量課金は一切なしという安心プランとなっています。

※本記事では、Magic を稼働させるに十分なスペックを持つ月額2,000円の固定料金プランの利用について解説していきます。

それでは具体的な利用手順について解説してまいりましょう(後略)。

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

第152回(2020年10月31日号)目次

1 さくらインターネットの Web サイト
2 さくらインターネット VPS サービス
3 2週間無料でお試し
4 アカウントの確認
5 アカウントへのログイン
6 申し込みプランの選択
7 追加ソフトウェアの選択
8 ライセンス追加の申し込み
9 お支払い方法の選択
10 最終の確認画面
11 お知らせメールの配信先
12 ログイン情報の記載メール
13 お申し込み受付完了のお知らせ
14 仮登録完了のお知らせ
15 ログイン情報の確認
16 サーバ一覧の表示
17 サーバの起動
18 サーバの設定画面
19 VNC コンソールの起動
20 Windows Server のインストール
21 インストール中のモニタリング
22 Windows Server の立ち上がり

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

2020/10/05 1:20 に Masanobu Tanda が投稿   [ 2020/10/05 1:25 に更新しました ]

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 はわずか数行で、その場で暗記できる内容の記述ばかりです(後略)。

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

第151回(2020年9月30日号)目次

1 残り4項目の課題の修正
2 HTMLやTypeScript には手を触れない
3 前号の最終画面の確認
4 項目タイトルと項目データの段差の解除
5 項目タイトルの余白設定
6 項目タイトルの余白設定の変更確認
7 終了ボタンの配置の変更
8 ボタンの配置を司るスタイルを探す
9 モーダルウィンドウのスタイルまで遡る
10 ブロックレベル要素内の特定のスタイル
11 CSS セレクタの使用
12 終了ボタンの配置変更確認
13 「×」ボタンの配置の再考
14 オーバーレイの背景の透明度の変更
15 カラーパレットで試行錯誤して設定
16 スタイルが反映されないことへの対処

第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 オーバレイの正常表示の確認

第149回 WebClient でサブタスクを作成する

2020/08/03 21:02 に Masanobu Tanda が投稿   [ 2020/08/03 21:04 に更新しました ]

第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)

2020/07/05 20:44 に Masanobu Tanda が投稿   [ 2020/07/05 20:46 に更新しました ]

第148回 Angular プロジェクトを IIS にデプロイする(2)

さて、前回の解説にて Windows Chrome および iPhone と Android 上で WebClient タスクが正常に動作するところまでを解説したのですが、まだこのままでは問題が残ります。この状態ではまだ、Microsoft の Edge と IE とで正常に動作しないのです。

Edge や IE で実行させようとすると、画面1や画面2のようなエラーが出てしまいます。

実はこれには正当な理由があり、それなりの理由で動作しないように Angular 側で初期設定がなされているためです。

今回は、その設定を変更する方法を解説するとともに、このプロジェクトを正式に Windows Server 上にデプロイしたときに起こりうるトラブルの解消法について解説していきます(後略)。

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

第147回 Angular プロジェクトを IIS にデプロイする

2020/06/04 19:53 に Masanobu Tanda が投稿   [ 2020/06/04 19:54 に更新しました ]

第147回 Angular プロジェクトを IIS にデプロイする

本連載の第140回(2019年10月31日号)から第143回(2020年1月31日号)までの4回に渡り、下記の通り WebClient 関連の解説を行いました。

第140回 WebClient リリース前夜(2019年10月31日)
第141回 WebClient のインストール(2019年11月30日)
第142回 WebClient プログラムの作成と実行(2019年12月31日)
第143回 APG による WebClient プログラムの作成と実行(2020年1月31日)

上記の連載により、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)

2020/05/03 1:56 に Masanobu Tanda が投稿   [ 2020/06/04 19:54 に更新しました ]

第146回 富士通クラウド上に Windows インスタンスを作る(3)

すでに4月末となり、ゴールデンウィークを迎える季節になりましたが、新型コロナウイルスはまだその勢いを衰えさすことなく、私たちの生活に健康への不安と経済的な打撃をもたらしています。

IT 業界においては、ほとんどすべての企業がテレワークを併用した業務の遂行を余儀なくされている現状ですが、未来志向的な見方をすれば、こうしたシステムの在り方自体が働き方改革に貢献するチャンスでもあるといえます。

クラウドを活用した業務のあり方は、これを契機に世界的にも加速度的に発展するでしょうし、クラウド上で動作するアプリも、開発・実行の両面において急速な改革をもたらす可能性があります。

Magic + 富士通クラウドは、マジックソフトウェア・ジャパン社と富士通社が一丸となって推し進めているプロジェクトであり、時代の先端を担っているインフラでもありますので、ぜひともこの機会にその流れに乗じていただければと思います。

さて、前号までにおいて富士通クラウド上で稼働する Windows Server 2016へのログインを確認しましたが、Windows インスタンスの立ち上げは、まだこれで完了ではありません(後略)。

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

第145回 富士通クラウド上に Windows インスタンスを作る(2)

2020/04/05 7:43 に Masanobu Tanda が投稿   [ 2020/04/05 7:45 に更新しました ]

第145回 富士通クラウド上に Windows インスタンスを作る(2)

今現在、世界は新型コロナウイルスの影響で、地球上の誰しもが悲痛な思いに打ちひしがれています。それに伴って経済活動も停滞し、ビジネス交流やセミナー活動までが自粛を余儀なくされています。

幸いにも、IT 業界ではテレワークの活用が可能な分野が多く、多くの人が在宅での開発や事務処理に臨んでおられるものと思われます。

そこで弊社では、富士通クラウドに関する本連載を活用すべく、弊社主催のほとんどすべてのセミナーを、富士通クラウドを利用したテレセミナー(リモートセミナー)形式に置き換える作業に入りました。

これが実現すれば、セミナー受講者の方々が3蜜(密閉、密集、密接)による濃厚接触に陥ることもなく、自宅やオフィスに居ながらにして、安心して弊社のセミナーを受講していただくことが可能となります。

近々、その具体的な実施要項をご案内していきたいと思いますので、ご期待のうえ、今しばらくお待ちください。

それでは、本題のセキュリティグループの解説に入ります。

富士通クラウドにおけるセキュリティグループの設定とは、仮想サーバに対する外部からのインバウンドと、仮想サーバから外部に出るアウトバウンドのセキュリティ設定を意味します。市版のルータの定義を想像していただければ理解しやすいです。

前回の画面30にありましたように、富士通クラウドのデフォルトのセキュリティ設定は空白のままです。設定が何も無いということは、すべてのプロトコルが遮断され、インバウンドによるアクセスも、アウトバウンドによる操作も不可であるということになります。良い意味で言えばセキュリティが最強であることを表しますが、別の見方をすれば、まったく身動きの取れない状態にあるとも言えるわけです。

そこで、まず最初にセキュリティグループの設定を行い、業務に必要となる最小限のプロトコルを通すために、一部の制限を解除する(いわゆる一部のプロトコルを通すための穴を開ける)という作業を行うわけです。

ただし、セキュリティに穴を開けるという作業を行うわけですから、設定の仕方をまかり間違えると、外部からの不正な侵入を許すという結果にもなりかねますので、最新の注意を払いながらこの作業を行う必要があります。

では早速、セキュリティグループの作成に入ることにしましょう(後略)。

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

1-10 of 154