楽々ラクラクウェブクライアント／SMSYS Ver 1.02新機能シンキノウの紹介ショウカイ

１．

グリッドシステム管理カンリ機能キノウの強化キョウカ

以前イゼンのバージョンまでは、ｱ) Ｗｅｂスタイルを「繰クり返カエし可能カノウな項目コウモク」で設定セッテイしたテーブルのカラム間カンでのグリッド指定シテイ（CARDタイプを指定シテイ）や、グループに

関連付けたコントロール（ラベル、エディット、ボタン、コンボボックス、チェックボックス、ラジオボタン）間でのグリッド指定に留まっていましたが、

今回のバージョンでは、テーブル、サブフォーム、グループ、タブ等のコントロール間でのグリッド指定ができるようになりました。

これにより、ページを構成コウセイするより大オオきな単位タンイでのレイアウトを管理カンリすることができるようになりました。

①以前イゼンのバージョンまでのグリッド定義テイギ機能キノウ

復習フクシュウがてら、以前イゼンのバージョンで利用リヨウできるグリッド定義機能テイギキノウの実際ジッサイ例レイを紹介ショウカイします。

１）テーブルのカラム間カンで幅ハバを決キめる

楽々ラクラクウェブクライアントでは、テーブルのカラムにグリッドシステムを適用テキヨウさせることが可能カノウです。

例タトえば、下図カズのようなテーブルを持モつプログラムを変換ヘンカンしてみます。

図ズ1 テーブルをもつプログラムのMAGICフォームエディタ画面ガメン

「No」「名称メイショウ」「更新日コウシンビ」「更新コウシン時刻ジコク」のカラムにそれぞれ、「col-1」「col」「col-2」「col-2」のクラスをセットすることにより「１：７：２：２」の比率ヒリツで表示ヒョウジします。

数字スウジのつかない「col」は等幅トウハバで、残ノコりのカラム（この場合バアイは１２－１－２－２＝７）を等分トウブンします。

◆テーブルカラム幅ハバのイメージ

楽々ラクラクウェブクライアントでデザインした結果ケッカは次ツギのようになります。

実際ジッサイにカラム幅ハバが指定シテイした配分ハイブンになっていることを確認カクニンすることができます。

図ズ2 楽々ラクラクウェブクライアントデザイン例レイ（テーブルのカラム）

２）ラベルやエディット等ナドのコントロールをグループでまとめ間隔カンカクを定義テイギ

次ツギに、テーブルを持モたないフォームの場合バアイです。

楽々ラクラクウェブクライアントでは複数のコントロールをグループコントロールで括ることにより、配置ハイチをコンロールすることが可能カノウです。

図ズ3 グループを利用リヨウしたプログラムのMAGICフォームエディタ画面ガメン

コントロール「COMBO1」「CHECK1」「RADIO1」「BUTTON1」にそれぞれ「col-3」のクラス属性ゾクセイをセットすることにより「１：１：１：１」の比率ヒリツで表示ヒョウジさせます。

コントロール「COMBO2」「CHECK2」「RADIO2」「BUTTON2」も同様ドウヨウに設定セッテイし均等キントウにコントロールを配置ハイチしてみます。

（全スベて同オナじ幅ハバであれば「col-3」ではなく「col」でもＯＫです）

◆コントロール配置ハイチレイアウトのイメージ

楽々ラクラクウェブクライアントでデザインした結果ケッカは次ツギのようになります。

実際ジッサイにコンロールの間隔カンカクが当トウ配分ハイブンになっていることを確認カクニンすることができます。

図ズ4 楽々ラクラクウェブクライアントデザイン例レイ（グループによる配置ハイチ）

②テーブルやサブフォーム間カンでのレイアウト機能キノウ

今回コンカイのバージョンでは、例タトえば、下図カズのように、テーブルの右ミギや下段ゲダンにサブフォームがあるようなケースでは、テーブルとサブフォーム、サブフォームと

サブフォームの画面表示割合を設定することができませんでした。

これを、コントロール属性ゾクセイで設定セッテイすることにより実現ジツゲンできるようになっています。

図ズ5 テーブルと幾イクつかのサブフォームが混在コンザイするプログラムのMAGICフォームエディタ画面ガメン

例タトえば、コントロール「Table1」「SF1」「SF2」「SF3」にそれぞれ「col-2」「col-10」「col-3」「col-9」のクラス属性ゾクセイをセットすることにより「１：１」「１：２」の比率ヒリツ

で表示ヒョウジさせることができます。

（実際は、マージン等を考慮するため、「col-10」「col-9」はそれぞれ「col-9」「col-8」で指定します）

◆コントロール配置ハイチレイアウトのイメージ

楽々ラクラクウェブクライアントでデザインした結果ケッカは次ツギのようになります。

テーブルと複数フクスウのサブフォーム間カンでレイアウトされていることを確認カクニンすることができます。

図ズ6 楽々ラクラクウェブクライアント／デザイン例レイ（テーブルと３つのサブフォームがあるプログラム）

bootstrapのグリッドシステムでは、画面ガメンサイズに応オウじてダイナミックに表示ヒョウジ幅ハバを指定シテイすることが可能カノウです。

例タトえば「PC等の画面ガメンサイズが広い場合は上記のようなレイアウトで構わないが、タブレットやスマートフォンの狭い環境ではコントロール別に縦タテに表示

させたい」というようなケースです。

また、PC用ヨウのサイトとスマートフォン用ヨウのサイトでは、表示ヒョウジさせる広告コウコクが異コトなるかもしれません。

従来ジュウライのバージョンでは、閾値シキイチの選択センタクはMedium（７６８ｐｘ～）のみでしたが、Small（５７６ｐｘ～）、Large（９９２ｐｘ～）、Extra large（１２００ｐｘ～）の値アタイも

指定できるようになりました。

また、これに加クワえ、ブロック（コントロール）の並ナラび順ジュンを変更ヘンコウする「order-N」の指定シテイができるようになっています。

◆コントロール配置ハイチレイアウトのイメージ（９９２ｐｘ以上イジョウ）

◆コントロール配置ハイチレイアウトのイメージ（９９２ｐｘ未満ミマン）

◆コントロール配置ハイチレイアウトのイメージ（９９２ｐｘ未満ミマン）

楽々ラクラクウェブクライアントでデザインした結果ケッカは次ツギのようになります。

テーブルと複数フクスウのサブフォーム間カンでレイアウトされていることを確認カクニンすることができます。

図ズ7 楽々ラクラクウェブクライアント／デザイン例レイ（画面ガメンサイズ992px未満ミマンで表示ヒョウジ）

楽々ラクラクウェブクライアントの実際ジッサイの設定セッテイ方法ホウホウについて説明セツメイします。

イ） テーブルもしくはタブの場合バアイ

従来ジュウライのバージョンでは、テーブルコントロールの属性ゾクセイを設定セッテイすることができませんでしたが、今回コンカイのバージョンでは下記カキのような画面ガメンを表示ヒョウジして行オコナうことが

できます。（タブの場合バアイも同様ドウヨウの画面ガメンを表示ヒョウジします）

下図カズ赤アカ枠ワクは、従来ジュウライの仕様シヨウと変カわった部分ブブンを補足ホソクしています。

図ズ8 テーブルコントロール属性ゾクセイ設定セッテイ画面ガメン

ロ） グループもしくはサブフォームの場合バアイ

グループやサブフォームの場合バアイは、初期ショキの画面ガメンでは以前イゼンのバージョンと変カわりありません。

が、「表示／非表示」ボタンを押したときの画面が拡張され、カラム幅や表示順の指定ができるようになりました。

図ズ9 サブフォームコントロールの楽々ラクラクウェブクライアント、属性ゾクセイ設定セッテイ画面ガメン

③サンプルプログラム「GridTest」

新アタラしい機能キノウをテストするためのプログラムとして「GridTest」をサンプルプロジェクト内ナイで提供テイキョウしています。

設定値セッテイチの詳細ショウサイは、オンラインヘルプや同梱ドウコンのＰＤＦに記載キサイしています。

イ） ＭＡＧＩＣのフォーム

フォームは下図カズのように、テーブルとサブフォームを左右サユウに並ナラべています。

テーブルに表示ヒョウジされるリポジトリのタイプによりサブフォームに表ヒョウジ示するプログラムをキ切りカ替えます。（クリックもしくはダブルクリックイベント）

図ズ10 サンプルプログラムのMAGICフォームエディタ画面ガメン

ロ） 楽々ラクラクウェブクライアントの設定セッテイ（コントロール属性ゾクセイ）

楽々ラクラクウェブクライアントの設定セッテイ例レイを見ミてみましょう。

図ズ11 サンプルプログラム／コントロール属性ゾクセイの設定セッテイ

ハ） 楽々ラクラクウェブクライアントの設定セッテイ（テンプレートの変換ヘンカン）

「変換ヘンカンルール」は新アタラしく追加ツイカされたルール「サンプル CARD変換(ｸﾞﾘｯﾄﾞ利用)」を選択センタクします。

図ズ12 サンプルプログラム／テンプレートの変換ヘンカン／変換ヘンカンルール選択センタク

変換ヘンカン結果ケッカは下図カズに示シメします。

クラス「row」のdiv要素ヨウソの配下ハイカに、テーブルとグループが配置ハイチされていることが分ワかります。（外側ソトガワの赤アカ枠ワク）

（途中トチュウ省略ショウリャク）

図ズ13 Visual Studio Codeによる結果ケッカ確認カクニン（GridTest.component.sm.html）

ニ） 実行ジッコウ結果ケッカ

画面ガメンサイズ 992px以上イジョウのときと、992px未満ミマンのときの実行結果をそれぞれ示シメします。

図ズ14 実行ジッコウ結果ケッカ（画面ガメンサイズ 992px以上イジョウ）

図ズ14 実行ジッコウ結果ケッカ（画面ガメンサイズ 992px未満ミマン）

２．

その他タの改善カイゼン事項ジコウ

①フォームイメージ表示用ヒョウジヨウフォントの指定シテイができるようになりました。

WebClientタスクでは、１番バンのフォントを使用シヨウして描画ビョウガを行オコナっていましたが、環境カンキョウ設定セッテイプログラムでフォント番号バンゴウを指定シテイできるようになりました。

図ズ15 環境カンキョウ設定セッテイ画面ガメンとフォームのイメージ表示ヒョウジ

②フォーム表示ヒョウジ画面ガメンの改善カイゼン

コントロール属性ゾクセイ呼出ヨビダし用ヨウのボタンにパーキングするようにし、キー入力ニュウリョクにより連続レンゾクして呼ヨび出ダせるようにしました。

図ズ16 フォーム表示ヒョウジ画面ガメンのコントロール属性ゾクセイ編集ヘンシュウボタン

③テンプレートの変換ヘンカンの改善カイゼン

選択センタクした変換ルールのヘッダ定義テイギの有無を取得し、ヘッダが無い場合は「ヘッダ非表示ヒヒョウジ」チェックボックスを無効に、またチェック済なら外すように

修正しました。

④定数テイスウ定義テイギファイル（ConstFile.xml）のチェック処理ショリ

定数ファイルのバージョンを起動キドウ時ジにチェックし、起動中キドウチュウのシステムの要求ヨウキュウするバージョンとミスマッチしている場合バアイは起動キドウ時ジに警告ケイコクメッセージを表示ヒョウジするように

しました。

表示ヒョウジメッセージ：

ConstFile.xml のバージョンが一致していません.

もし、上記ジョウキのメッセージが出デたときは、システムのアップデートに失敗シッパイしています。原因ゲンインとしては、キャビネットファイル（*.ECF）のみ更新した場合等が考えられ

ますので、再度サイド、セットアップ用ヨウプロジェクトによりシステムを更新コウシンして下クダさい。

⑤ナビゲーションバー／メニュー定義テイギ明細メイサイ編集ヘンシュウの改善カイゼン

メニューリストで行ギョウを追加ツイカしたときに、デフォルト値チとして「L=ﾘﾝｸ」をセットするようにしました。

項目コウモクの並ナラびを「名称メイショウ→アイコン→リンク」から「リンク→名称→アイコン」に変更ヘンコウしました。これは、「リンク」でズームしルートの一覧イチラン画面ガメンから選択センタクした時トキに、選択センタクした

ルート名を名称メイショウにセットしていますが（従来ジュウライからの機能キノウ）、この流ナガれで入力ニュウリョクをしやすくするためです。

ズームできる項目コウモクにはズームボタンを付加フカしました。

並ナラび順ジュン変更ヘンコウ用ヨウのボタン「↑」「↓」を押オしたときは、並ナラび順ジュンの表示ヒョウジを更新コウシンした後アト、押オしたボタンにカーソルを飛トぶようにしました。これにより、連続レンゾクして同オナじ行ギョウを移動イドウ

させることができるようにしました。