VSCodeでHTMLを書くその２

VSCodeでHTMLを書くその２

■　前提

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

■ 今回のターゲット

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

■　Webアプリ仕様

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

![EX-41-20180301.jpg](https://qiita-image-store.s3.amazonaws.com/0/239597/4931f868-3654-e794-f988-58f64f2309e5.jpeg)

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

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

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

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

■ Basicプログラム

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

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

```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の中で共通で参照する変数は、外側で定義します。          (グローバル変数)

```vb
　　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の中でのみ有効です。(ローカル変数)

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

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

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

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

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

```vb
　　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
![EX-42-20180301.jpg](https://qiita-image-store.s3.amazonaws.com/0/239597/0802cf90-1cc8-6a89-9bf2-44d4d99d1671.jpeg)

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

・プログラムの実行

[ターミナル] dotnet run
![EX-43-20180301.jpg](https://qiita-image-store.s3.amazonaws.com/0/239597/1006761e-24e6-0c02-e3a7-ed4e3d5d40a4.jpeg)

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

![EX-44-20180301.jpg](https://qiita-image-store.s3.amazonaws.com/0/239597/443c683a-b854-1542-a790-4a92c1d41e47.jpeg)
ターミナルの「置換後のメッセージ　？」に、New World!入力してEnter（置換後のメッセージ任意）

![EX-45-20180301.jpg](https://qiita-image-store.s3.amazonaws.com/0/239597/d5983a7f-1b3f-b1cd-ef83-5a57613aac23.jpeg)

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

![EX-46-20180301.jpg](https://qiita-image-store.s3.amazonaws.com/0/239597/1b2eb305-dc1f-3119-5f3d-7f9e4a05aa70.jpeg)

■　まとめ

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


以上、おそまつ