２．２　サンプルプロジェクトによる環境カンキョウ構築コウチク
サンプルプロジェクトを使用シヨウし、環境カンキョウを構築コウチクするまでの手順テジュンを示シメします。
２．２．０　MAGIC xpa stdioによるWebclient環境カンキョウの構築コウチク
前提ゼンテイとして、WebClient環境カンキョウの構築コウチクが条件ジョウケンです。
予アラカジめ簡単カンタンなプログラム等ナドで WebClient が動作ドウサすることを確認カクニンしておきます。
　インストール
①Node.jsをインストール
②Angular cliをバージョン指定でインストール（npm install -g @angular/cli@8.3.25）
③VisualStdio Codeをインストール
④Chromブラウザをインストール
⑤Magic xpa4.Xをインストール
　MAGICの環境カンキョウ設定セッテイ
①アプリケーションサーバーとして動作ドウサ
②実行ジッコウモードを「B=バックグランド」に設定セッテイ
２．２．１　サンプルプロジェクトのコピー
インストールしたフォルダ「PROJ」の下シタにある「SMWC」を適当テキトウなフォルダにコピーします。
以下イカは「C:\DEMO」にコピーしたという前提ゼンテイで説明セツメイを進ススめます。
２．２．２　プロジェクトを開発版で開く
「Webアプリケーションの設定セッテイ」を確認カクニンします。
図ズ2.2.2-1 Webアプリケーションの設定セッテイ画面ガメン
２．２．３　Webアプリケーションの作成
「Webアプリケーションの作成」を起動キドウします。
ルーティングマップを生成セイセイをチェックします。
「プログラム」を「All - 全スベて」に設定セッテイし、「生成セイセイ」ボタンを押オします。
図ズ2.2.3-1 Webアプリケーションの作成サクセイダイアログ
図ズ2.2.3-2 Webアプリケーションの作成サクセイの進捗シンチョク状況ジョウキョウ
２．２．４　プロジェクトの実行による動作ドウサ確認カクニン
「プロジェクトの実行ジッコウ」から実行ジッコウエンジンを起動キドウしておきます。
「Visual Studio Codeで開ヒラく」を実行ジッコウし、作成サクセイしたAngularプロジェクトを開ヒラきます。
ターミナルからサーバーを起動キドウします。
図ズ2.2.4-1 Visual Studio Codeを起動キドウし、ターミナルからサーバーを起動キドウ
ブラウザでプログラムを起動し表示されることを確認します。
図ズ2.2.4-2 Webブラウザでの動作ドウサ確認カクニン
２．２．５　楽々ウェブクライアントの起動と初期設定
起動キドウした実行ジッコウエンジンは一旦イッタン停止テイシしておきます。
登録トウロクしたツールメニュー、もしくはツールバーのアイコンから「楽々ラクラクウェブクライアント」を起動キドウします。
起動キドウ直後チョクゴ、下記カキの画面ガメンになります。
図ズ2.2.5-1 楽々ラクラクウェブクライアント起動キドウ時ジに表示ヒョウジされた初期ショキ設定セッテイアシスタント
イ）初期ショキ設定セッテイアシスタント
楽々ラクラクウェブクライアントの実行ジッコウ環境カンキョウセットアップのためのメニューを表示ヒョウジします。
図ズ2.2.5-2 初期設定ショキセッテイアシスタント
ＤＢ設定ウィザード
ソース解析カイセキ結果ケッカとデザイン情報ジョウホウを格納カクノウするデータベースを設定セッテイします。
必カナラずプロジェクト単位に１データベースを設定セッテイするようにしてください。他タのプロジェクトと一緒イッショに共有キョウユウすることはできません。
サポートしているRDBMSは Microsoft SQL Server （2016以上イジョウのバージョン）です。
プログラム一括読み込み
WebClientタスクを持モつプログラムソースを解析カイセキし、RDBSMに格納カクノウします。
Bootstrap設定セッテイウィザード
BootstrapをAngular環境カンキョウにインストールします。
予アラカジめ用意ヨウイしてあるテンプレートを利用リヨウしてスタートアッププログラムで表示ヒョウジするナビゲーションバーを作成サクセイすることも可能カノウです。
その他タの設定セッテイ
その他タ、動作ドウサ環境カンキョウに関連カンレンするオプション条件ジョウケンを設定セッテイします。
ロ）「ＤＢ設定セッテイウィザード」の起動キドウ
ａ）データベース・ゲートウェイの選択センタク
図ズ2.2.5-3 ＤＢ設定セッテイウィザード／データベース・ゲートウェイの選択センタク画面ガメン
ｂ）サーバーの選択センタク
図ズ2.2.5-4 ＤＢ設定セッテイウィザード／サーバーの選択センタク画面ガメン
ｃ）データベースの選択センタク
図ズ2.2.5-5 ＤＢ設定セッテイウィザード／データベースの指定シテイ画面ガメン
ｄ）最終サイシュウ処理ショリ確認カクニン
図ズ2.2.5-6 ＤＢ設定セッテイウィザード／最終サイシュウ処理ショリ確認カクニン画面ガメン
データベースの設定セッテイ処理ショリが実行ジッコウされ、終了シュウリョウすると下記カキのダイアログを表示ヒョウジします。
「OK」ボタンを押オすと再起動サイキドウします。
図ズ2.2.5-7 ＤＢ設定セッテイウィザード／処理ショリ実行ジッコウ後ゴのダイアログ画面ガメン
ハ）プログラム一括イッカツ読ヨみ込コみ
再起動サイキドウ後ゴ、再フタタび初期設定ショキセッテイアシスタントが起動キドウします。
図ズ2.2.5-8 再起動サイキドウ後ゴの初期設定ショキセッテイアシスタント
「プログラム一括イッカツ読ヨ込コ」ボタンを押オしてプログラムを起動キドウします。
図ズ2.2.5-9 プログラム一括イッカツ読込ヨミコミによるプログラムの解析カイセキ
ニ）Bootstrap設定セッテイウィザード
処理ショリが終了シュウリョウすると再フタタび初期設定ショキセッテイアシスタントに戻モドります。
「Bootstrap設定セッテイウィザード」を起動キドウします。
図ズ2.2.5-10 プログラム一括読込イッカツヨミコミ終了シュウリョウ後ゴの初期設定ショキセッテイアシスタント
ａ）Bootstrapバージョンの選択センタク
図ズ2.2.5-12 Bootstrap導入ドウニュウ済ズみの場合バアイの画面ガメン
図ズ2.2.5-11 Bootstrap設定セッテイウィザード／Bootstrapバージョンの選択センタク
ｂ）テンプレートの選択センタク
サンプル１／normal ナビゲーションバーを固定しません
サンプル２／fixed-top ナビゲーションバーを画面上部に固定します
サンプル３／fixed-bottom ナビゲーションバーを画面下部に固定します
サンプル４／sticky-top スクロールしたときナビゲーションバーを画面上部に固定します
図ズ2.2.5-13 Bootstrap設定セッテイウィザード／テンプレートの選択センタク
ｃ）モジュールの確認カクニン
図ズ2.2.5-14 Bootstrap設定セッテイウィザード／モジュールの確認カクニン
ｄ）ナビゲーションバーの設定セッテイ
図ズ2.2.5-15 Bootstrap設定セッテイウィザード／ナビゲーションバーの設定セッテイ
d-1)　メニュー定義テイギ画面ガメンについて
図ズ2.2.5-16 Bootstrap設定セッテイウィザード／ナビゲーションバーの設定セッテイ／メニュー定義テイギプログラム（初期ショキ状態ジョウタイ）
■メニュー定義テイギプログラムの設定セッテイ項目コウモク
項コウ　　　　　　目メ 説セツ　　　　　　　　　　　　　　　　　　　　　　　明アキラ
ブランド情報ジョウホウ ナビゲーションバーの情報ジョウホウを設定セッテイします。 　 　 　 　 　 　 　 　 　 　 　 　 　 　 　 　 　 　 　
　 名称メイショウ ナビゲーションバーの左端サタンに表示ヒョウジするテキストを入力ニュウリョクします。 　 　 　 　 　 　 　 　 　 　 　 　
　 アイコン fontawesomeのアイコン名メイを選択センタクします。 　 　 　 　 　 　 　 　 　 　 　 　 　 　 　 　 　 　 　
　 「Ｆ５：ズーム」キーで一覧イチラン表示ヒョウジら選択センタクすることができます。 　 　 　 　 　 　 　 　 　 　 　 　 　
　 リンク先サキ プログラムのルート名メイを入力ニュウリョクします。 　
　 「リンク先サキがありません。」と表示ヒョウジされている場合バアイは、正タダしいルート名メイではありません。 　
　 「Ｆ５：ズーム」キーで一覧から選択センタクします。 　 　 　 　 　 　 　 　 　 　 　 　 　 　 　 　 　 　
　 ジャンボトロン ページの上部ジョウブに配置ハイチする画像ガゾウファイルに関カンする情報ジョウホウを設定セッテイします。 　 　 　 　 　 　 　 　 　 　 　
　 　 有効ユウコウ チェックすると有効ユウコウに、チェックを外ハズした状態ジョウタイでは非表示ヒヒョウジにします。 　 　 　 　 　 　 　 　 　 　 　
　 　 タイトル サイトのタイトルを入力ニュウリョクします。 　 　 　 　 　 　 　 　 　 　 　 　 　 　 　 　 　 　 　 　 　 　
　 　 説明セツメイ 説明文セツメイブンを入力ニュウリョクします。 　 　 　 　 　 　 　 　 　 　 　 　 　 　 　 　 　 　 　 　 　 　 　 　 　
　 　 背景ハイケイ画像ガゾウ 表示ヒョウジする画像ガゾウファイルを入力ニュウリョクします。 　 　 　 　 　 　 　 　 　 　 　 　 　 　 　 　 　 　 　 　
　 　 予アラカジめ、表示ヒョウジする画像ガゾウファイルを「src\assets」配下ハイカにコピーしておいて下クダさい。 　
　 　 「Ｆ５：ズーム」キーでフォルダのファイル一覧から選択します。 　 　 　 　 　 　 　 　 　 　 　 　
ブレークポイント ブラウザの表示ヒョウジ幅ハバによって見栄ミバえを変更ヘンコウさせるための閾値シキイチ（しきいち）を指定シテイします。 　 　 　 　 　
フッタ情報 フッタに出力シュツリョクする会社名カイシャメイや、表示ヒョウジさせるリンク（メニューリストで設定セッテイ済ズみから選択センタク）を設定セッテイ 　 　 　 　
　 　 　 　 　 　 　 　 　 　 　 　 　 　 　 　 　 　 　 　 　 　 　 　 　 　 　 　 　 　 　 　
可視カシ条件ジョウケン ジャンボトロンの表示ヒョウジ条件ジョウケンを設定セッテイします。 　
カスタムプロパティが設定セッテイされていない場合バアイは無効ムコウ状態ジョウタイになります。 　 　 　 　 　 　 　 　 　 　
メニューリスト ナビゲーションバーに設定セッテイするメニューを定義テイギします。 　 　 　 　 　 　 　 　 　 　 　 　 　 　 　
「ルート情報取得」ボタンで選択することも可能です。 　
　 # 表示ヒョウジ順ジュンを表アラワします。 　 　 　 　 　 　 　 　 　 　 　 　 　 　 　 　 　 　 　 　 　 　 　 　 　
　 行追加した直後は挿入位置に表示されます。 　
　 （必要に応じてカラムをクリックし再整列させて下さい） 　
　 タイプ コンボボックスから下記カキの選択センタクを行オコナいます。 　 　 　 　 　 　 　 　 　 　 　 　 　 　 　 　 　 　
　 S=サブメニュー 　 サブメニューを設定セッテイする場合バアイに選択センタクします。 　 　 　 　 　 　 　 　 　 　 　
　 　 　 （設定セッテイできるのは最上位サイジョウイの階層カイソウのみです） 　
　 L=リンク 　 　 　 ルートで設定セッテイしたプログラムをメニューにします。 　 　 　 　 　 　 　 　 　
　 D=区切クギり 　 　 　 区切クギりを挿入ソウニュウ。最上位サイジョウイの階層カイソウの場合バアイは挿入ソウニュウ位置イチで左右サユウに分離ブンリします。 　 　
　 リンク プログラムのルート名メイを入力ニュウリョクします。 　 　 　 　 　 　 　 　 　 　 　 　 　 　 　 　 　 　 　 　
　 「Ｆ５：ズーム」キーで一覧から選択センタクします。 　 　 　 　 　 　 　 　 　 　 　 　 　 　 　 　 　 　
　 名称メイショウ メニューに表示ヒョウジさせるテキストを設定セッテイします。 　
　 アイコン アイコン名メイを入力ニュウリョクします。 　 　 　 　 　 　 　 　 　 　 　 　 　 　 　 　 　 　 　 　 　 　 　 　
　 「Ｆ５：ズーム」キーで一覧イチラン表示ヒョウジら選択センタクすることができます。 　 　 　 　 　 　 　 　 　 　 　 　 　
　 サブ タイプで「S=サブメニュー」を選択センタクしたときは「編集ヘンシュウ」ボタンを表示ヒョウジします。 　
　 表示条件 メニューの表示条件を指定することが可能です。 　 　 　 　 　 　 　 　 　 　 　 　 　 　 　 　
　 「Ｆ５：ズーム」キーで一覧から選択します。 　 　 　 　 　 　 　 　 　 　 　 　 　 　 　 　 　 　
　 ↑↓ ボタンを押オすことにより表示ヒョウジ順ジュンを変更ヘンコウします。 　
　 　 　 　 　 　 　 　 　 　 　 　 　 　 　 　 　 　 　 　 　 　 　 　 　 　 　 　 　 　 　 　 　
以下イカ、基本的キホンテキなナビゲーションバーを作成サクセイする手順テジュンを示シメします。
d-2)　ブランド情報ジョウホウ
図ズ2.2.5-17 Bootstrap設定セッテイウィザード／ナビゲーションバーの設定セッテイ／メニュー定義テイギプログラム／ブランド情報ジョウホウ
d-３)　メニューリスト
図ズ2.2.5-18 Bootstrap設定セッテイウィザード／ナビゲーションバーの設定セッテイ／メニュー定義テイギプログラム／メニューリスト(1)
d-４)　サブメニューの編集ヘンシュウ
図ズ2.2.5-19 Bootstrap設定セッテイウィザード／ナビゲーションバーの設定セッテイ／メニュー定義テイギプログラム／サブメニュー編集ヘンシュウ(1)
図ズ2.2.5-20 Bootstrap設定セッテイウィザード／ナビゲーションバーの設定セッテイ／メニュー定義テイギプログラム／サブメニュー編集ヘンシュウ(2)
d-５) 区切クギり、ログインログオフ用ヨウコールの追加ツイカ
図ズ2.2.5-21 Bootstrap設定セッテイウィザード／ナビゲーションバーの設定セッテイ／メニュー定義テイギプログラム／メニューリスト(2)
d-６) 表示ヒョウジ条件ジョウケンの設定セッテイ
図ズ2.2.5-22 Bootstrap設定セッテイウィザード／ナビゲーションバーの設定セッテイ／メニュー定義テイギプログラム／メニューリスト(3)
d-７) メニュー定義テイギを完了カンリョウして戻モドる
編集ヘンシュウが終オわったら「戻モドる」ボタンでウィザードに戻モドります。
図ズ2.2.5-23 Bootstrap設定セッテイウィザード／ナビゲーションバーの設定セッテイ／メニュー定義テイギプログラム（完了カンリョウ）
図ズ2.2.5-24 Bootstrap設定セッテイウィザード／ナビゲーションバーの設定セッテイ（完了カンリョウ）
ｅ）最終サイシュウ処理ショリ確認カクニン
◇処理ショリ内容ナイヨウ
Bootstrapのインストール有無ウム 　 　 　 　 　 　 　 　
モジュールの明細メイサイとインストール有無ウム 　 　 　 　 　 　
設定セッテイファイルの更新コウシン 　 　 　 　 　 　 　 　 　 　 　
　 angular.json 　 　 　 　 　 　 　 　 　 　 　 　 　
　 index.html 　 　 　 　 　 　 　 　 　 　 　 　 　
　 その他タ 　 　 　 　 　 　 　 　 　 　 　 　 　 　
テンプレートの適用テキヨウ 　 　 　 　 　 　 　 　 　 　 　
メニューアイテムの適用テキヨウ 　 　 　 　 　 　 　 　 　 　
作成サクセイファイル 　 　 　 　 　 　 　 　 　 　 　 　 　
更新コウシンファイル 　 　 　 　 　 　 　 　 　 　 　 　 　
図ズ2.2.5-25 Bootstrap設定セッテイウィザード／最終処理確認サイシュウショリカクニン
実行ジッコウ後ゴ、下記カキのダイアログを表示ヒョウジします。
図ズ2.2.5-26 処理ショリ正常セイジョウ終了時シュウリョウジのメッセージ
ｆ）動作ドウサ確認カクニン
ｆ－１） ブラウザ表示ヒョウジ
MAGICの実行ジッコウエンジンを起動キドウ（「デバッグ」→「プロジェクトの実行」）します。
Angularのサーバーが実行中ジッコウチュウであれば再起動サイキドウします。
ブラウザを起動キドウします。
正常セイジョウに動作ドウサした場合バアイは、下記カキのような画面ガメンを表示ヒョウジします。
図ズ2.2.5-27 作成サクセイされたスタートアッププログラム（ナビゲーションバー）
ｆ－２） Visual Source Codeでファイルを確認カクニン
Visual Source Codeで「SMWC\src\app\magic\StartupProgram\StartupProgram.component.sm.html」を開ヒラきます。
図2.2.5-28 Angularプロジェクトに作成サクセイされるファイルの確認カクニン
■フォルダ内ナイのファイル
ファイル名メイ 説セツ　　　　　　　　　　　　　　　　　　　　　　　明アキラ
*.component.html MAGICが生成セイセイしたTemplateファイル 　 　 　 　 　 　 　 　 　 　 　 　 　 　 　 　 　 　 　 　
*.component.sm.html 楽々ラクラクウェブクライアントが追加ツイカしたTemplateファイル 　 　 　 　 　 　 　 　 　 　 　 　 　 　 　 　
*.component.ts 楽々ラクラクウェブクライアントが更新コウシンしたTSファイル 　 　 　 　 　 　 　 　 　 　 　 　 　 　 　 　 　 　
*.component.ts.sav 楽々ラクラクウェブクライアントが更新コウシンしたTSファイルのバックアップファイル 　 　 　 　 　 　 　 　 　 　 　
*.component.controls.g.ts MAGICが生成したcontrols..tsファイル 　 　 　 　 　 　 　 　 　 　 　 　 　 　 　 　 　 　 　 　
補足ホソク１）　ナビゲーションバー／サンプルテンプレートについて
テンプレートを利用リヨウしナビゲーションバーのスタイルを変更ヘンコウすることができます。
サンプル１／normal ナビゲーションバーを固定しません
サンプル２／fixed-top ナビゲーションバーを画面上部に固定します
サンプル３／fixed-bottom ナビゲーションバーを画面下部に固定します
サンプル４／sticky-top スクロールしたときナビゲーションバーを画面上部に固定します
図2.2.5-29 「サンプル１／normal」 図2.2.5-30 「サンプル２／fixed-top」
図2.2.5-31 「サンプル３／fixed-bottom」 図2.2.5-32 「サンプル４／sticky-top」
補足ホソク２）　ナビゲーションバー／ブレークポイントの設定セッテイについて
「ブレークポイント」ボタンでナビゲーションバーを簡易カンイ表示ヒョウジさせる閾値シキイチ（しきいち）を指定シテイすることが可能カノウです。
図ズ2.2.5-32 ブレークポイント設定セッテイ
図ズ2.2.5-33 ウインドウの幅ハバが閾値シキイチより大オオきい場合バアイ 図ズ2.2.5-34 ウインドウの幅ハバが閾値シキイチより小チイさい場合バアイ
補足ホソク３）　ナビゲーションバー／フッタの設定セッテイについて
メニュー定義テイギ画面ガメンの「ﾌｯﾀｰ情報ジョウホウ」ボタンからフッタの設定セッテイが可能カノウです。
図ズ2.2.5-35 フッター情報ジョウホウ
設定セッテイ例レイ）
図ズ2.2.5-36 フッター情報ジョウホウの設定セッテイ例レイ
補足ホソク４）　ナビゲーションバー／ジャンボトロン
ジャンボトロンを設定セッテイすると、画面ガメン上部ジョウブに画像ガゾウを表示ヒョウジします。
図ズ2.2.5-37 ジャンボトロンの設定セッテイ例レイ
ホ）その他タの設定セッテイ
図ズ2.2.5-32 Bootstrap設定セッテイウィザード終了シュウリョウ後ゴの初期設定ショキセッテイアシスタント
「その他タの設定セッテイ」を起動キドウします。
楽々ラクラクウェブクライアントに関連カンレンする設定セッテイ箇所カショを下図カズに赤アカ枠ワクで囲カコって表示ヒョウジします。
特トクに付加フカ識別シキベツ文字モジと拡張子カクチョウシの設定セッテイは、全ゼンプロジェクト共通キョウツウなので、注意チュウイして設定セッテイして下クダさい。（途中トチュウで変更ヘンコウすることはあまり推奨スイショウされません）
図ズ2.2.5-33 環境カンキョウ設定セッテイ画面ガメン
■動作ドウサ条件ジョウケン／設定セッテイ項目コウモク
項目コウモク 説セツ　　　　　　　　　　　　　　　　　　　　　　　明アキラ
テンプレート付加フカ識別シキベツ文字モジを指定シテイする テンプレートの変換ヘンカンプログラムで作成サクセイするファイルを「(フォーム名メイ).component.sm.html」の様ヨウに 　 　
「.sm」を挿入して作成します。その識別シキベツ文字モジ「sm」を変更ヘンコウすることが可能カノウです。 　 　 　 　 　 　 　
TS退避タイヒファイル付加フカ拡張子カクチョウシを指定シテイする テンプレートの変換プログラムで書カき変カえたTSファイルの退避タイヒファイルを 　 　 　 　 　 　 　 　 　
「(フォーム名).component.ts.sav」の様に「.sav」を拡張子カクチョウシとして作成します。その拡張子カクチョウシ「sav」を 　
変更することが可能です。 　 　 　 　 　 　 　 　 　 　 　 　 　 　 　 　 　 　 　 　 　 　 　
フォーム表示ヒョウジをMDI調整チョウセイで開ヒラく テンプレートの変換プログラムから「ﾌｫｰﾑ確認カクニン」ボタンでコントロールの一覧イチランを表示ヒョウジしたとき、 　
画面ガメンをＭＤＩ全体ゼンタイに表示ヒョウジするかどうかを指定シテイします。 　 　 　 　 　 　 　 　 　 　 　 　 　 　 　 　
「ソースファイルの更新コウシンを監視カンシ」について
楽々ラクラクウェブクライアントはMAGIC xpa Ver4.xの開発カイハツ環境カンキョウと並行ヘイコウしての運用ウンヨウを前提ゼンテイとしています。
プログラム単位タンイでの更新コウシン時刻ジコクの変更ヘンコウを検知ケンチした場合バアイは、それをもってアラートする仕組シクみを持モっています（SMSYSの基本キホン機能キノウ）。
図ズ2.2.5-34 プログラム一覧イチラン画面ガメンによる更新コウシン監視カンシ結果ケッカの表示ヒョウジ
楽々ラクラクウェブクライアントではAngularソースの更新コウシンにあたってはMAGICのソース変更ヘンコウを都度ツドチェックしていますので、必カナラずしも上記ジョウキの設定セッテイが必須ヒッスという
わけではありません。
MAGICのソース変更ヘンコウを検知ケンチした場合バアイは「テンプレートの変換ヘンカン」プログラム起動キドウ時ジに自動的ジドウテキに再取得サイシュトクします。