メインコンテンツへスキップ
サインイン

VisualStudioCodeについての質問

AIS川島

皆さんこんにちはAIS@川島です。

　現在WEBクライアントを勉強中なのですが、ヤッっと簡単なプログラムをブラウザ上に起動することができました。

　VIsulStudioCodeのterminalで ng -serve で起動しているのですが作成されるURLが

　locahost:4200 

　と自動で生成されます。(IPアドレスでアクセスしてもエラーとなります。）

　この内容を　IPアドレスで生成する方法を教えてください。（他の端末からもアクセスを行いたいです）

　大変初歩的な質問で申し訳ありませんがご教授のほどよろしくお願いいたします。（一応ﾏｰｼﾞ型のWEBアプリケーションはわかります。）

　皆さんはWEBCLの勉強どうされておりますでしょうか？　何か何か教材があれば教えてください。

　よろしくお願いいたします。

 

　

コメント

11件のコメント

日付 投票
  • Hideki Miyamoto
    • 編集済み

    AIS@川島 様

    Web Clientは全く触れていない為、間違っていたらすみません。

    おそらくAngularのv13で動作していると思うので、公式ドキュメント(https://v13.angular.io/cli/serve) を参照しました。

    `--host` というオプションが使用できそうですので、Terminalで実行する際に

    `ng serve --host 0.0.0.0` のようにすると同一ネットワーク内の他PCからも接続できるのではないかと思います。

  • AIS川島

    AIS@川島

     早速の返信ありがとうございます。

    　--host で解決できました。

    　ありがとうございました。

    　

     

  • Hideki Miyamoto

    AIS@川島 様

    無事接続できたとのこと安心しました。

    もしMagic xpa 4Plusで学習中であればAngular v15で動作しているようでした。この場合は https://v15.angular.io/cli/serve を参照する方が好ましいと思いますので、参考にしていただければ幸いです。

  • AIS川島

    AIS@川島です。

    　androidのChromeからアクセスするとエラーになりますが何か設定がいるのでしょうか？

    　ちなみに同じURLで他のWINDOWS端末では表示できました。

    　初歩的な質問ですみません

     

  • Hideki Miyamoto

    AIS@川島 様

    Web Clientでの事例ではなく、他Webアプリケーション開発(Ruby on Rails)での事例で恐縮ですが、
    ・もしVSCodeでAngularを実行している開発PCについてIIS等のWebサーバがセットアップされていれば、一旦IISのデフォルトサイトがAndroidから参照できるか確認するのはいかがでしょうか。
    ・[AndroidからIISデフォルトサイトが確認できない場合]→Androidの接続しているネットワークが開発PCと異なる、もしWiFiでの接続であればWiFi APの設定で4200ポートが閉じられている等考えられませんでしょうか。USB-Hub等使用して有線Ethernet接続すると状況変わりますでしょうか。→その他、Android機からpingを打つアプリ等も存在するようですので、そのようなツールを使用した際に開発PCとのping疎通は取れますでしょうか。
    ・[AndroidからIISデフォルトサイトが確認できる場合]→おそらくAngular側で何か設定が必要なのだと思うので、ご経験ある方ご回答いただければ…(PC端末からのみ接続許可するような設定はあまり想像できませんが…)

    お力になれるかわかりませんが、ご確認いただければ幸いです。

  • AIS川島

    AIS@川島

    android端末よりサーバ側のデフォルトサイトは表示できております。

    　＞＞WiFiでの接続であればWiFi APの設定で4200ポートが閉じられている場合。

    　この場合、windows端末でもwifiであれば発生するのしょうか？

    　さらに調査いたします。ありがとうございました。

     

  • Hideki Miyamoto

    AIS@川島 様

    > この場合、windows端末でもwifiであれば発生するのしょうか？

    WiFi AP(アクセスポイント)の設定で4200ポートが閉じられているのであれば、Windows端末であろうとWiFi接続時に同じ問題が発生するかと思います。Windows端末がWiFi接続でもAngularWebアプリに接続できるのであれば、アクセスポイントのポート設定の話は原因ではないのかなと思います。

    下記参照する限り、最新2世代のブラウザバージョンにしか対応しないようなので、その辺りも何か関係があるかもしれません。(Angularの最新はv18なので、下記情報も古いかもしれません…)
    https://v15.angular.io/guide/browser-support

    お力になれず申し訳ありませんが、調査の進展を願っております。

  • Tanda

    AIS川島さん、

    > 皆さんはWEBCLの勉強どうされておりますでしょうか？

    このフォーラムに「Web Client Tips & Tricks」というコーナーがありますね。
    「基礎編」というコーナーもあるようです。

  • Tanda

    AIS川島さん、

    ちなみに、うち（タンダコンピュータ）の連載コーナーを読める環境がありましたら、過去に下記のような記事を書いて、詳しく解説しております。5年前〜4年前の記事になりますが。。。

    第140回 WebClient リリース前夜（2019年10月31日）
    第141回 WebClient のインストール（2019年11月30日）
    第142回 WebClient プログラムの作成と実行（2019年12月31日）
    第143回 APG による WebClient プログラムの作成と実行（2020年1月31日）
    第147回 Angular プロジェクトを IIS にデプロイする（2020年5月31日）
    第148回 Angular プロジェクトを IIS にデプロイする（2）（2020年6月30日）
    第149回 WebClient でサブタスクを作成する（2020年7月31日）
    第150回 WebClient のオーバレイウィンドウをカスタマイズする（2020年8月31日）
    第151回 WebClient のオーバレイウィンドウをカスタマイズする（2）（2020年9月30日）

    https://www.tandacomp.com/

  • Tanda

    AIS川島さん、

    ただし、上記の記事はSmartUXが登場する前の段階の記事ですので、フォーム作成あたりの手順はその後、もっと便利になっているかとは思いますが、基本的な流れは同じです。

  • MSJ Admin

    AIS川島さま

    SmartUXやデプロイの記事などを記述させていただいております。
    ご一読よろしくお願いいたします。

    https://smartux.magicsoftware.com/ja/

サインインしてコメントを残してください。

お探しのものを見つけられませんでしたか？

新規投稿