VSCodeでHTMLを書くその２

VSCodeでHTMLを書くその２

■　前提

　VSCodeでHTMLを書くその１を完了していること。

■ 今回のターゲット

　Basic言語で編集したHTMLをブラウザーへアウトプットする方法を学習。
　いきなりプログラミングになりますが、とりあえず雰囲気を感じ取ってください。

■　Webアプリ仕様

　Webアプリとは？
　ブラウザーからサーバへリクエストを行い、サーバからのレスポンスをブラウザーにアウトプットすること。
　※1 色々な意見はあると思いますが・・・

サーバからのレスポンスはブラウザーで表示可能なフォーマットでなければなりません。(htmlとか)
前回作成した「HelloWorld.html」を流用して、Basicで「HelloWorld.html」を書き換えるプログラムを作成します。

以下の機能を実装します。

①　HelloWorld.htmlを読込みターミナルにアウトプット。
②　HelloWorld.htmlの変更前と後の文字列をターミナルからインプット。
③　HelloWorld.htmlを書き換える。

　　①～③までの実行後、書き換えたHelloWorld.htmlをブラウザーに表示させます。
　　各機能が上記図のリソースとどう対応しているかイメージしてください。

■ Basicプログラム

　VSCodeでファイル→ディレクトリを開く→Hello Worldディレクトリを開きます。
　エクスプローラーでProgram.vbを選択。
　Ctrl+aでProgram.vbのプログラムを全選択します。

　この線以下を選択して、Ctrl+cでコピー、VSCodeのウィンドウを選択、Ctrl+vでProgram.vbに貼り付けます。
↓---------------------------------------------------------------------------------------------------------------

  Imports System

Module Program
    
    Dim Buf  As String ' html格納領域
    Dim Msg1 As String ' 置換前のメッセージ
    Dim Msg2 As String ' 置換後のメッセージ
    ' 書き換えるhtml
    Const InFile="C:\Users\kousei00\basic\Hello World\HelloWorld.html"
    ' InterNet Explorerをフルパスで定義
    Const IE="C:\Program Files\Internet Explorer\iexplore.exe"
    ' Main
    Sub Main(args As String())
        'Dim Message As String
        'Message="All You Need Is Love"
        'Console.WriteLine("Hello World!")
        'Console.WriteLine(Message)
        'Debug.Print("Debug.Print")
        Call ReadHtml()   ' htmlバッファリング
        Call InputMsg()   ' メッセージ置換文字を入力
        Call UpdateHtml() ' Html書き換え
        ' IEでhtmlを表示
        System.Diagnostics.Process.Start(IE,InFile)
    End Sub

    ' Htmlを読込みBufへバッファする
    Sub ReadHtml()
        Dim sr As New System.IO.StreamReader(InFile)
        Dim s As String =  sr.ReadToEnd() 
        ' バッファにhtmlを設定
        Buf = s 
        sr.Close()
        Console.WriteLine(s)
    end Sub

    ' htmlの変更するメッセージ前と後の入力
    Sub InputMsg()
        Console.WriteLine("")
        Console.WriteLine("---------------------------------------------------")
        Console.WriteLine("置換前のメッセージ ?")
        Msg1 = Console.ReadLine()
        Console.WriteLine("置換前のメッセージ = " & Msg1)
        Console.WriteLine("---------------------------------------------------")

        Console.WriteLine("置換後のメッセージ ?")
        Msg2 = Console.ReadLine()
        Console.WriteLine("置換後のメッセージ = " & Msg2)
        Console.WriteLine("---------------------------------------------------")
    End Sub

    ' Htmlのメッセージを置換する
    Sub UpdateHtml()
        ' 指定したhtmlを書き込みモードでオープン
        Dim sw As New System.IO.StreamWriter(InFile)
        ' メッセージの書き換え
        Dim w As string = Buf.Replace(Msg1,Msg2)
        sw.Write(w)
        sw.Close()
    end Sub
    
End Module

↑---------------------------------------------------------------------------------------------------------------
この線より上を選択
　
■ Basicプログラムの説明

　① Sub Main ～ End Sub

　　プログラムのエントリー関数、プログラムの開始プログラムになります。
　　・Mainの中で共通で参照する変数は、外側で定義します。 (グローバル変数)

　　Dim Buf  As String ' html格納領域
　　Dim Msg1 As String ' 置換前のメッセージ
　　Dim Msg2 As String ' 置換後のメッセージ

　　・HelloWorld.htmlとInterNet Explorerのプログラムなどのパス定数を指定します。

　　' 書き換えるhtml
　　Const InFile="C:\Users\kousei00\basic\Hello World\HelloWorld.html"
　　※2 HelloWorld.htmlのディレクトリは任意のディレクトリ
　　' InterNet Explorerをフルパスで定義
　　Const IE="C:\Program Files\Internet Explorer\iexplore.exe"

　　※3 Sub～End Subの中で定義した変数はSub～End Subの中でのみ有効です。(ローカル変数)

　　・前回のコードはコメントします。(シングルコーテーション)

　　'Dim Message As String
　　'Message="All You Need Is Love"
　　'Console.WriteLine("Hello World!")
　　'Console.WriteLine(Message)
　　'Debug.Print("Debug.Print")

　　・Mainで実行する機能を呼び出します。
　　Call で呼び出すSub関数もコーディングします。

　　Call ReadHtml()   ' htmlバッファリング
　　Call InputMsg()   ' メッセージ置換文字を入力
　　Call UpdateHtml() ' Html書き換え

　　・HelloWorl.htmlを書き換え完了後、IEでHelloWorld.htmlを表示します。

　　System.Diagnostics.Process.Start(IE,InFile)

　② Sub ReadHtml ～ End Sub
　　・HelloWorld.htmlをBufに格納を行い、ターミナルにHelloWorld.htmlをアウトプットします。
　③ Sub InputMsg ～ End Sub
　　・ターミナルから変更前のメッセージと変更後のメッセージをインプットします。
　④ Sub UpdateHtml ～ End Sub
　　・インプットされたメッセージでHelloWorld.htmlを書き換えます。

■ Basicプログラムの実行

　・プログラムのビルド

　ターミナルにdotnet runでも動作しますが、プロフラムにエラーがないか確認のためビルドします。
[ターミナル] dotnet build

「ビルドに成功しました。」と出力されればOKです。

・プログラムの実行

[ターミナル] dotnet run

ReadHtml Sub関数でターミナルに出力された「Hello World!」を選択して、Ctrl+cでコピーします。
ターミナルの「置換前のメッセージ　？」に、Hello World!を直接入力するか、またはCtrl+vで貼り付けEnter。

ターミナルの「置換後のメッセージ　？」に、New World!入力してEnter（置換後のメッセージ任意）

これでHtmlが置換されます。
そしてブラウザーが起動し、「New World!」が表示されていればOKです

■　まとめ

　　Basicでhtmlファイルを書き換えるプログラムを作成しました。
　　細かくは説明しません、各自このプログラムを色々いじくり回してください。きっと何か見えてきます。
　　このプログラムの作りで、ブラウザーに出力するWebアプリはできちゃいます。
　　次回はブラウザーから入力した値を取得するプログラムを作成します。

以上、おそまつ