VSCodeでHTMLを書くその３

VSCodeでHTMLを書くその３

■　前提

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

■　今回のターゲット

　　①　ブラウザーから入力した文字列をターミナルにアウトプットする。
　　②　basic言語で簡易なhttpサーバをコードする。

■　Webアプリ仕様

　HTMLはテキストボックスとボタンを一つづ配置します。
　テキストボックスに入力後、ボタン押下で簡易httpサーバで受信を行い、ターミナルに受信した文字列をアウトプットします。
　　
■　入力用htmlの作成

　前準備としてHTML入力の拡張機能をインストールします。
　拡張機能ボタン押下→検索文字列「HTML Snippers」→インストール→再読込
![EX-47-20180305.jpg](https://qiita-image-store.s3.amazonaws.com/0/239597/4e13e582-5e3d-b40d-a384-108771c75414.jpeg)

　Ctrl+n 新規ファイル作成
　Ctl+s  ファイルの保存
　ファイル名「Input.html」で保存
![EX-48-20180305.jpg](https://qiita-image-store.s3.amazonaws.com/0/239597/d8437837-a81a-5972-5883-f12b1a7b81fe.jpeg)

　[エディター]!(ビックリーマーク）を入力
　[エディター]tabキーを押下
　HTMLの基本テンプレートが展開されます。
![EX-49-20180305.jpg](https://qiita-image-store.s3.amazonaws.com/0/239597/3eb86604-499a-813f-19e2-93d426e7959f.jpeg)

　[エディター] \<body>以下10行目でtabキー
　[エディター] formを入力すると表示されるリストのform:postを選択(Enter)
![EX-50-20180305.jpg](https://qiita-image-store.s3.amazonaws.com/0/239597/efbe333b-8a48-20ef-0306-8d281c09e1d9.jpeg)

　\<form action="" method="post">\</form>が展開されます。 
　action=""の中身はとりあえずブランクにしておきます。（後で入力します)
![EX-51-20180305.jpg](https://qiita-image-store.s3.amazonaws.com/0/239597/46b63e97-d18b-8fc9-2739-9e40f447ff39.jpeg)
　[エディター]\</form>の前にカーソルを合わせて、Enterキー(改行)
　次にFormの中に項目を入力します。
![EX-52-20180305.jpg](https://qiita-image-store.s3.amazonaws.com/0/239597/c499cd3c-f6ce-6218-002a-0fd3d6c3145b.jpeg)

　文字列入力のためにテキストボックスを準備します。
　\<form>タグの下の行に、
　[エディター]p>input:textを入力します。(リストから選択可能)
　[エディター]Enterキー
![EX-53-20180305.jpg](https://qiita-image-store.s3.amazonaws.com/0/239597/9c96d3d2-d850-b482-1d07-17fa49b74bfa.jpeg)
　\<p>\<input type="text" name="" id="">\</p>が展開されます。
![EX-54-20180305.jpg](https://qiita-image-store.s3.amazonaws.com/0/239597/44900e2e-2769-2a24-a3a3-5be6854be514.jpeg)
 name=""に"Msg"を入力します。
![EX-55-20180305.jpg](https://qiita-image-store.s3.amazonaws.com/0/239597/0635be89-5a3f-e3ce-19c4-a962c4060290.jpeg)
　id属性を使用しないので、削除します。
![EX-56-20180305.jpg](https://qiita-image-store.s3.amazonaws.com/0/239597/8d078640-7d87-7904-085f-efdda0cfaea2.jpeg)

![EX-57-20180305.jpg](https://qiita-image-store.s3.amazonaws.com/0/239597/742ac34d-15f3-888e-a8f6-ef9af3fe0aab.jpeg)

　入力ボタンを準備します。
　[エディター]\</p>の後ろでEnterキー(改行)
　一行空けます。
![EX-58-20180305.jpg](https://qiita-image-store.s3.amazonaws.com/0/239597/60a900c9-1ea3-1491-cda1-9fd6c21e77b6.jpeg)

　[エディター]p>input:submitを入力(リストから選択可能)してEnter
![EX-59-20180305.jpg](https://qiita-image-store.s3.amazonaws.com/0/239597/9f9d00d4-3ffa-881e-a0b3-2721ef667566.jpeg)

　\<p>\<input type="submit" value="">\</p>が入力されます。
![EX-60-20180305.jpg](https://qiita-image-store.s3.amazonaws.com/0/239597/816887b4-4011-0ca2-8db2-4fc7427f6e7f.jpeg)

　[エディター]Value=""に「送信」を入力します。
![EX-61-20180305.jpg](https://qiita-image-store.s3.amazonaws.com/0/239597/f21830f0-57ed-678c-86f3-d0b201c980d5.jpeg)

　エディターにカーソルのフォーカスがある状態で、Ctrl+F1キーでこのInput.htmlを表示してみます。
![EX-62-20180305.jpg](https://qiita-image-store.s3.amazonaws.com/0/239597/8428e828-6322-e552-937d-2aabf8815c4f.jpeg)
　入力用のテキストボックスと送信ボタンが表示されます。
　これで入力用の画面ができました。

■　Basicプログラム作成

　前回のhello Worldディレクトリを選択。
　Program.vbのファイル名を変更する→「Program.txt」(Hollo World!卒業かな)
![EX-63-20180305.jpg](https://qiita-image-store.s3.amazonaws.com/0/239597/5a5b3893-860b-e925-5a34-b9bf47035b76.jpeg)
　※1 参照することがあると思うので残しておいて問題なし。

　Ctrl+n 新規ファイル作成
　Ctl+s  ファイルの保存
　ファイル名「Program.vb」で保存
![EX-64-20180305.jpg](https://qiita-image-store.s3.amazonaws.com/0/239597/e6379c2e-fd6c-f092-1ae7-17f3b7912860.jpeg)

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

```vb
Imports System

Module Program

    Const port As Integer = 1000            ' 待機ポート番号
    Const ipString As String = "127.0.0.1"  ' URL
    Const InFile = "C:\Users\kousei00\basic\Hello World\Input.html"
    Dim Buf  As String ' html格納領域

    Sub Main()

        ' リスナー開始
        Dim ipAdd As System.Net.IPAddress = System.Net.IPAddress.Parse(ipString)    ' IPアドレスをパーズ
        Dim listener As New System.Net.Sockets.TcpListener(ipAdd,port)           ' リスナー
        listener.Start()

        While True
            ' クライアント接続
            Console.Write("接続中...")
            Dim client As System.Net.Sockets.TcpClient = listener.AcceptTcpClient()
            Console.WriteLine("接続完了.")
            Dim Clt As System.Net.Sockets.NetworkStream = client.GetStream()
            ' ブラウザーからの入力を読み取りターミナルへ出力
            Dim Recive(1024) As Byte
            Dim ReciveSize As Integer = Clt.Read(Recive, 0, Recive.Length)
            Console.WriteLine(System.Text.Encoding.Default.GetString(Recive, 0, ReciveSize))
            ' Htmlを読込みBufへバッファしブラウザーへ送信
            Call ReadHtml()
            Dim Send As Byte() = System.Text.Encoding.Default.GetBytes(Buf)
            Clt.Write(Send, 0, Send.Length)
            ' 後始末
            Clt.Close()
            client.Close()
        End While
        listener.Stop()
    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

End Module
```
↑---------------------------------------------------------------------------------------------------------------
この線より上を選択

　プログラムの説明は次回。
　とりあえず、buildしてrunしましょう。

　[ターミナル]dotnet build
![EX-65-20180305.jpg](https://qiita-image-store.s3.amazonaws.com/0/239597/fdf3216e-9158-cf4d-04b9-f6c2fce946e9.jpeg)

　[ターミナル]dotnet run
![EX-66-20180305.jpg](https://qiita-image-store.s3.amazonaws.com/0/239597/8858bedc-31d4-22cc-f9db-21fe40f29611.jpeg)
　「接続中...」がターミナルにアウトプットされます。

　次にブラウザーのURLに「http://127.0.0.1:1000/」を入力します。
![EX-67-20180305.jpg](https://qiita-image-store.s3.amazonaws.com/0/239597/78b31c0e-a728-9bce-2b3b-e8574f3d758a.jpeg)

サーバからのレスポンスでInput.htmlが表示されました。
![EX-68-20180305.jpg](https://qiita-image-store.s3.amazonaws.com/0/239597/18e191e1-8714-f86d-2e95-d8837bdc92e0.jpeg)

ターミナルに以下がアウトプットされます。
![EX-69-20180305.jpg](https://qiita-image-store.s3.amazonaws.com/0/239597/b71978f9-a4eb-6aeb-421c-e7cef0a30450.jpeg)

　ブラウザーのテキストボックスに「Hello World!」を入力して、送信ボタンを押下します。
![EX-70-20180305.jpg](https://qiita-image-store.s3.amazonaws.com/0/239597/54b7a4af-7e23-4bf3-37d0-f93d3b772b75.jpeg)

 ターミナルに以下がアウトプットされます。
![EX-71-20180305.jpg](https://qiita-image-store.s3.amazonaws.com/0/239597/7d039364-6490-612a-ce2e-773820f9b28b.jpeg)
　※2 プログラムの停止はターミナルでCtrl+cでキャンセルします。

［Msg=Hello+World%21］ブランクと!が置き換わっています。説明は次回します。

　これで、ブラウザーからの入力を読み取ることができました。

■　まとめ

　basicでhttpサーバをコードしました。基本の基本。
　けっこうやることがたくさんあったので、ここまでがんばった人は◎かな。
　色々いじくり回してみてください。
　今回はプログラムの説明を割愛したので、次回やります。

以上、おそまつ