みなさん。Web Client = Angular とおもっていませんか？
Angular → コミットなどのタイミング → サーバーにJSONを送る
「とにかくAngularで作ってMagicに投げるんでしょ？Angularむずい；」と考えがち。
それだったらAngular+EnterpriseServerで作ったらよいよね？Web Clientはいらない。
安心してください。Web Clientはもうちょい進化しています。
Angular側にもMagicのコンポーネントが仕込まれるので「クリックなどのイベント」「項目後処理」「文字を入力したら」とMagicのイベントと密接に連携しています。
もちろんレコード後処理のタイミングもとれるこの「Magicのコンポーネント」が重要な役割を行っています。
例えば明細。
行の修正をおこなって次の行へ移動する。HTMLなんかだと「行」の概念がないのでイベントは取りにくい。
LostForcus処理をおこなってごにょごにょ書くしかないのです。
Web Clientだと行の移動時に「レコード後処理」のイベントがとれちゃう。これすごい。
伝票だと行の確定時に明細の合計を簡単にとれちゃうんです。
言語系の人の考え方
Angular(React) + EnterpriseServer(PHP･Python･Go･NodeJS･)
コントローラー Anguler
ビュー Angular
モデル EnterpriseServer
実はすっきりわかりやすいので言語系の人から次の会話が出てくることがあります。
「Magicってフロント作ってくれるの？でサーバーはNodeJSでつくるの？」
とか
「Magicってバックエンドやってくれるの？でフロントはReact？Ruby？」
Magicianの考え方
え？全部Magicでおわらないの！？っておもっていませんか？
コントローラー Anguler+Magicモジュール
ビュー Angular+Magicモジュール
モデル Web Clientサーバー
このようにすべてにMagicが染み込んでいるためMagicとの親和性がとてもよくなっています。
で、Magicianにとっての最難関「ビュー」
このビューはHTMLやCSSの部分なのですが「デザイン」となるとHTMLやCSSを書くことは避けて通れません。
「Magicで全てデザインできないの！？」は次のバージョンまでお待ちください；
固定デザインやレスポンシブデザインなどイロイロ対応って難しいのです；
でも私は現行バージョンが好きです。理由はデザインとロジックが疎結合だからです。
デザインとMagicが疎結合であることでチーム分担がしやすくお互いが干渉しなくてもスムーズに仕事が進みます。
とはいえ「うちはデザイナーがいないし」「一人で全部やってる!!」というMagicianとも多いのとおもわれます。
そこで誕生したのが「エトピリカテンプレート」なんです。
素のままだとMagicはフォーム構築後Angularソースを吐き出しますがデザイン的には質素なものです。
あまりにも質素なのでデザイナーと協力して、CSSフレームワークの一つであるBootstrap5に対応したHTMLを出力することにしました。
これにより、特に意識せずともレスポンシブデザインや入力する枠のデザイン、ボタンのデザインなどの変更も行われています。
もちろんすべての連携ができているわけではありませんので調整が必要です。
そして、Angularのここが面倒
挫折ポイント２。いきなりAngularのファイルがたくさんあるのでここが挫折ポイントです。
なので簡単に説明いたします。
angular.json
Angular内から呼ぶためのCSSやjavascriptの場所を設定します。
ここでBootstrapやfontawesomeを読んでいます。
コンパイル時にこれ以上サイズが超えたらエラーだしたりストップするよ！のパラメータが最初少ないので大きめにしておきます。
“budgets”: [ { “type”: “initial”, “maximumWarning”: “5mb”, “maximumError”: “10mb”
このangular.jsonのパラメーターを変えても即反映されません。
Expressをリロードする必要があります。
package.json
Bootstrapパッケージなどを導入すると記述されます。
自分で記述することは滅多にありません。
tsconfig.json
typescript設定ファイルです。
エトピリカテンプレートを使用する場合は
“strictNullChecks”: false, /* 厳密なヌルチェックを有効にします。 */ “noImplicitAny”: false, /* 暗黙の ‘any’型で式と宣言のエラーを発生させます。 */ “noImplicitThis”:false, /* 暗黙の ‘this’使用で式と宣言のエラーを発生させます。 */
の3行をcompilerOptionsグループ内に追加いたします。
.gitignore
gitHubと連携しないファイルなどの一覧を追加します。
下記のserver-config.jsonなんかも含めておきましょう。
src\index.html
まずは<html lang=”ja”>としましょう
src\assets\server-config.json
端末からWeb Clientのサーバーをどう見るかです。
“protocol”: “http”, 開発時ならhttpで納品の場合SSLを使っていたらhttpsになります。
“server”: “localhost”, 開発時はlocalhostや自分のPC名、IPアドレスで納品時はドメイン名になると思います。
src\assetsフォルダ
このフォルダはコンパイルしてもそのままアップされます。
CSSやjavascrit、Imageファイルを置いています。
相対パスでassets/***/***と指定することでアクセスできます。
distフォルダ
コンパイルされたファイルができあがる
src\app\app.routes.ts
ルーティングとコールの違いなんかは次回やりますがルーティングが設定されています。
src\app\magic
ここにMagicのプログラムやフォルダがくる
それぞれのタスクは3つのファイルで構成されています。
htmlファイル
ビューの部分。ngIfとかも書く。
ここだけで1章かける。
tsファイル
CallJSで呼べるところ
ここだけで1章かける。
そのほか
magic-metadata：一時的なファイル消してもOK
.angular：起動を早くするためのキャッシュ。消してもOK
node_modules：インストールされたモジュール。実は設定ファイルがあり復活可能。
人にファイルを渡す場合はAngularのルートとsrcフォルダの中身を圧縮して送りましょう。
node_modulesなんかはいりません。
もらったほうはnode_modulesを復活させなきゃなりませんので
npm install
とコマンドを入力すると「package.json」を元にnode_modulesをインターネットより再インストールされます。
エトピリカテンプレートを使用している場合はその後に@magic-xpaを入れ替えてください。
次回は「ここがすごい②」ルーティングとかBootstrapについて書きます。
