Petshopの実行（Web Client）
Web Client の Petshopを開発版で実験（実行）する場合
１．開発版でプロジェクトの実行
２．ＶＳＣで開く
３．ＶＳＣでng serve --open
の３ステップが必ず必要でしょうか？
-
VSCは必須ではないです。
Windowsのコマンドプロンプトでもいいし、PowerShellでもいいですよ。
-
あと、もう一点ですが、「--open」はブラウザで勝手に開くというオプションですから、無くてもいいですし、あるいは他のオプションでもいいです。
連載でもいろいろと解説していますので、機会があればご参照ください。
-
ISHIJIMAさん、
VSCの中で使用しているPowerShellも、設定でコマンドプロンプトに変更することができますよ。
要は、WindowsのDOSコマンドが打てる環境であれば、何でもいいっていうことになります。
-
ありがとうございます。
今、パソコンを起動して、Petshopのプロジェクトを起動。
Ctrl+F7
Visual Studio Code で開く。（Visual Studio Code では何もせず放置。）ブラウザに Localhost:4200 Enter → 何も動かない。
なので、Visual Studio Code でng serve --openを毎回実行しないといけないのでしょうね。 -
上にも書きましたように、VSCの起動は必須ではないですが、「ng serve」コマンドの実行は必須です。
「ng serve」コマンドの実行はVSCからでなくても、PowerShellからの実行でも、コマンドプロンプトからの実行でも構いません。
このコマンドは、Angularプロジェクトを仮ビルドして、Magicが吐き出したTypeScriptをJavaScriptに変換してプロジェクトを仮実行させるというコマンドです。
ちなみに、VSCを使用すると何が便利かというと、Magicのメニューの中からVSCを起動すると、フォルダを毎回探さなくても、自動的に該当するフォルダを開いてくれたりします。よく似たフォルダがある環境ではたいへん重宝します。
あと、PowerShellでビルドすると、ブラウザに毎回アドレスを入力しなくても、マウスでクリックできるリンクを画面に自動的に表示してくれたりするので便利です。
-
ちなみに、上で私は「仮ビルド」、「仮ビルド」と書いていますが、正式ビルドしたあかつきには、もうAngularのインストールもVSCのインストールも不要です。JavaScriptとMagicだけで動く、普通のWebアプリになります。
これがWebClientのすごいところですね。
機会があれば、連載のほうもよろしくご購読ください。
-
ISHIJIMAさん、
マニュアル通りにやれば、問題は発生しないと思いますよ。(^^)
-
WebClientの基本は、まずはAPGが確実に動作するところまでをやってみるという点ですね。APGさえ動作するようになれば、あとは普通のMagicのタスクですから、似て食おうが焼いて食おうが、マジッシャンな人であれば、お手の物だと思います。
APGによる動作検証は、すべてにおいて最優先ですね。
-
nkmtさん、
最初のご質問がひょっとして、「タスクを修正するたびに。。」という意味でしたら、答えは「No」です。Magic側から修正のあった分だけをWeb出力してやれば、Angularが差分だけを自動リコンパイルしてくれます。ビルドを最初から実行し直す必要はないです。
-
追伸です。
その後、基本的にはブラウザのリロードも必要となるのですが、ブラウザが勝手にリロードしてくれる場合もありますね。Angularやブラウザの挙動をみていると面白いですよ。(^^)
-
＞＞Web Client の Petshopを開発版で実験（実行）する場合
＞＞１．開発版でプロジェクトの実行
＞＞２．ＶＳＣで開く
＞＞３．ＶＳＣでng serve --open
＞＞の３ステップが必ず必要でしょうか？
ご質問ありがとうございます。
１．は必須です。
２．と３．については、皆様が書いてくださったように
必ずVSCではなくても、コマンドラインからで大丈夫です。
コマンドラインから「ng serve –open」と入力し、
Angularが持つ内部Webサーバーを使って、アプリケーションを
実行させる必要がございます。オプションの「--open」は任意で
このオプションにより、ブラウザが自動で起動し、アプリケーションが動作します。
ただし、経験からの私の感想としては、Magic xpaスタジオ上にはVSCへのリンクが
ついていますし、VSCのプラグインをチョイスすることで、使い勝手も
良いです。それで私自身はVSCは好んで利用しております。
また、もう１つよく頂戴するご質問ですが、Web Clientで開発したアプリケーションが
ブラウザ上で実行している時に、HTMLやCSSなどのAngular側のファイルを修正した時は、
「ng serve --open」をもう一度やり直す必要はなく、ブラウザのURLを再度「htttp://localhost:4200」に
戻して実行させるだけで大丈夫です。
-
tanda様、櫻井様、ISHIJIMA様 いつもお世話になっております。
まだまだ勉強不足でついていけない所もありますが、ありがとうございます。
クラサバ、RIA、モバイルRIA、Web Client、マージなど
適材適所で提供していけるようになれればと思っております。
MagicからＶＳＣを開いて、ng serve --open してChromeにPetshopが表示されるのが1分位でした。ちょっと改造する度に1分待たされるのか、そこも全然わかっておらず。
-
tandaさま、準備中です。
nkmtさま、おっしゃるとおるアプリケーションを初回起動時は
SPAのアプリケーションですので、1分ぐらいかかる場合がございます。
ただし、ロードされた後、例えば、HTMLやCSSを修正した場合には、
私の環境だと数秒と待たずに画面が表示されます。
ちょっと改造の程度にもよるのかもしれませんね。
-
nkmtさん、
上にも書きましたように、そのときは「ng serve」する必要はないですよ。修正したタスクをWeb出力するだけで、Angularが差分を自動でリコンパイルしてくれます。リコンパイルはほとんど一瞬で終わりますので、待たされているという実感はないです。
-
櫻井様、tanda様 ありがとうございます。
（私が勉強不足で申し訳ないですが）
HTMLやCSSを修正した場合
Magicのタスクの計算式などロジックをいじった場合などと
以下の関連をわかっておりません。Webアプリケーションの作成
Webアプリケーションの設定
Web環境の確認
Visual Studio Codeで開く（また勉強します。頂いた資料なども拝見します。）
-
nkmtさん、
HTMLやCSSを修正しただけの場合は、Web出力を再度する必要はありません。
タスクのロジックを修正した場合は、そのタスクだけを再度Web出力する必要があります。
両者のいずれの場合も、Angularが修正を自動認識してリコンパイルしてくれますので、ng serveをやり直す必要はありません。
-
nkmtさん、
もし何かトラブっているとしたら、どういうエラーメッセージが出ているかをアップしていただければ、お手伝いできるかもしれませんよ。
-
tandaさん こんにちは。お世話になっております。
ご心配頂きありがとうございます。
今の所、困っているという事はありません。日曜日の晩、Petshop.ZIPを解凍して
・SQL Serverはインストール済なのでパス
・Magic Web Clientもインストール済なのでパスし
・D:\Petshopというフォルダ構成にしてPetshop WCがすんなり動いてしまい自分でも驚いてしまいました。
お陰様で一昨日のWC道場シーズン２ 第4回
も晴れ晴れしく参加出来ました。
※まだ動かす事が出来ただけで、
改造も何もやってなくてWCは全く詳しくないです。
※HTMLは4止まりで、HTML5もCSSもBootstrapも知らない者ですが
来年度は私としても技術進歩の年になれたらいいのですが・・・。
今後もどうぞよろしくお願いいたします。 -
nkmtさん、
問題なく動いていて安心しました。WebClientはタスクの改造も、これまでのクラサバやRIAと全く同じですので、Magicのロジックさえ理解していれば全然問題ないと思います。頑張ってください。
-
ちなみに、フォームだけはHTMLやCSSを用いて改造してやるケースがあるかと思いますが、これは従来のWebマージやブラウザクライアントでも同じですので、コツは一緒ですね。
サインインしてコメントを残してください。
コメント
20件のコメント