この記事では、Live Serverの動作や基本的な使い方について簡単にまとめます。 1. Live Serverとは？ VSCodeの「Live Server」は、ローカル環境でHTMLファイルをリアルタイムにプレビューするための拡張機能です。 簡単に言うと、あなたのコンピュータ内で ローカルウェブサーバー を立ち上げ、ウェブページをブラウザで表示できるようにします。 例えば、Live Serverを使うと、ブラウザのURLが次のようになります。 このURLが何を意味しているのか、具体的に見ていきましょう。 これは「ローカルホスト（localhost）」を指すIPアドレスです。 …

このチュートリアルでは、Visual Studio Code を使用して Java Web アプリケーションを作成する方法を示します。 Java Web アプリケーションを Azure App Service の Linux Tomcat サーバーにデプロイする方法を学びます。 シンプルな Hello World Web アプリ。 このサンプルを実行およびデプロイする前に、ローカル開発環境に Java SE Development Kit (JDK) と Apache Maven ビルドツールがインストールされている必要があります。 インストールされていない場合は、インストールしてください。 …

手っ取り早くWebアプリを開発するときに，動作確認のためにサーバーをいちいち用意するのは面倒くさい．そこで今回はVSCodeの拡張機能である「Live Server」や「PHP Server」を用いて，ローカルサーバーで簡単に動作確認できるようにする． 今回は.htmlファイルと.phpファイルをローカルサーバーで実行することを目的としている．そのためまずは実行したい.htmlファイルや.phpファイルを準備する．次にVSCodeを開いて，左上部のメニューから「ファイル」> 「フォルダーを開く」を選択して.htmlや.phpがあるフォルダを選択する．これをしないと正常に動作しない． …

ここでは、デスクトップにLiveTestフォルダを作成して、そこにtest.htmlを作成していく。 ブラウザが開いて表示される。 URLを見るとWebServer上で配信されていることがわかる たったこれだけのステップでフロント開発環境が整ってしまった。 「別にファイルをブラウザで開けば同じなんじゃないか？ と感じた人もいると思うが、これが結構違う。 まず、ファイル名の大文字、小文字問題がある。 fileドロップでは大文字・小文字は区別しないので問題なく表示されるが、一般的なWebServerはこれを区別する。 …

EclipseではなくVSCodeで作業しつつTomcatサーバーを立ち上げたく、設定してみたのですがそのうち忘れそうなので備忘録として書きます。 私の場合以下の環境であったり前提条件のもとで設定しているので、参考にされる場合は自身の環境や状況によしなに合わせてください。 作業PCにTomcatがインストールされている。 タイトルにVSCodeとあるが、私の使用しているエディタはVSCodeをフォークしたCursolというものなので若干見た目が異なるかもしれない。 今回スクショで出てくるTomcatのバージョンが古いです。 …

.zshrcは隠しファイルなので，finderでShift + cmd + . で表示させることができます。 Finderでファイルを右クリックしてoptキーを押すと，Pathがコピーできます。 Windowsの場合は https://www.javadrive.jp/start/install/index4.html などを参考に実施してください。 PATHが通っているか，以下のコマンドで確認することができます。 2. VSCodeの拡張機能のインストール VSCodeに拡張機能をインストールして，種々の設定を行ってください。 …