ElixirからCowboy 1.0と2.0を使ってみる Part 4

# はじめに
ElixirにてCowboyを直接動かすための記事となります。
[前回](http://qiita.com/hayabusa333/items/db582cba560bd1fda927)の記事では、JSONを返すAPIの作成を行いました。
今回はリクエストの情報をHTMLに表示する内容を行っていきます。

[Cowboy1.0のサンプルコードはこちらになります](https://github.com/hayabusa333/elixir_cowboy_example/tree/dynamic_html_cowboy)

[Cowboy2.0のサンプルコードはこちらになります](https://github.com/hayabusa333/elixir_cowboy_example/tree/dynamic_html_cowboy_two_pre4)

# バージョン
使用した言語やライブラリのバージョンは下記となります。

## cowboy 1.0のバージョン
|  | Version |
|:-----------|--------:|
| Elixir | 1.3.2 |
| Erlang | 19.2 |
| Cowboy | 1.0.4 |

## cowboy 2.0のバージョン
|  | Version |
|:-----------|--------:|
| Elixir | 1.3.2 |
| Erlang | 19.2 |
| Cowboy | 2.0.0-pre4 |

# リクエスト情報からHTMLを作成

今回はリクエストで受け取った内容をHTML形式にてレスポンスとして返す内容となります。

## cowboy 1.0の場合

``` elixir:lib/elixir_cowboy_example/dynamic_page_handler.ex
defmodule ElixirCowboyExample.DynamicPageHandler do
  def init({:tcp, :http}, req, opts) do
    {:ok, req, opts}
  end

  def handle(req, state) do
    {method, req} = :cowboy_req.method(req)
    {param, req} = :cowboy_req.binding(:html, req)
    {:ok, req} = html_example(method, req)
    {:ok, req, state}
  end

  def html_example(method, req) do
    # url を取得する
    {url, req} = :cowboy_req.url(req)
    # 通信のバージョンを取得する
    {version, req} = :cowboy_req.version(req)
    headers = [{"content-type", "text/html"}]
    body = """
      <html>
        <head>
          <meta charset=\"utf-8\">
        	<title>Cowboy Hello!</title>
        </head>
        <body>
          <h1>Cowboy Hello!!</h1>
          <h2>url = #{url}</h2>
          <h2>method = #{method}</h2>
          <h2>version = #{version}</h2>
        </body>
      </html>
    """
    {:ok, resp} = :cowboy_req.reply(200, headers, body, req)
  end

  def terminate(_reason, _req, _state) do
    :ok
  end
end
```

``` elixir:lib/elixir_cowboy_example.ex
  def run do
    # http://localhost:4000/dynamic に新規のHandlerを追加
    routes = [
      {"/", ElixirCowboyExample.Handler, []},
      {"/dynamic", ElixirCowboyExample.DynamicPageHandler, []},
      {"/json", ElixirCowboyExample.JsonHandler, []},
      {"/:html", ElixirCowboyExample.Handler, []}
    ]

    dispatch = :cowboy_router.compile([{:_, routes}])

    opts = [port: 4000]
    env = [dispatch: dispatch]

    {:ok, _pid} = :cowboy.start_http(:http, 100, opts, [env: env])
  end
```

## cowboy 2.0の場合

``` elixir:lib/elixir_cowboy_example/dynamic_page_handler.ex
defmodule ElixirCowboyExample.DynamicPageHandler do
  def init(req, opts) do
    method = :cowboy_req.method(req)
    param = :cowboy_req.binding(:html, req)
    {:ok, resp} = html_example(method, req)
    {:ok, resp, opts}
  end

  def html_example(method, req) do
    headers = %{"content-type" => "text/html"}
    # cowboy2.0ではuriにてurlの情報をリストにて取得もできる
    IO.inspect :cowboy_req.uri(req)
    # 通信のバージョンを取得する
    version = :cowboy_req.version(req)
    # cowboy2.0では、urlメソッドのような１つのメソッドでurlを文字列形式で取得できるメソッドが内容なので、複数メソッドにて設定
    body = """
      <html>
        <head>
          <meta charset=\"utf-8\">
                <title>Cowboy Hello!</title>
        </head>
        <body>
          <h1>Cowboy Hello!!</h1>
          <h2>url = #{:cowboy_req.scheme(req)}//#{:cowboy_req.host(req)}:#{:cowboy_req.port(req)}#{:cowboy_req.path(req)}#{:cowboy_req.qs(req)}</h2>
          <h2>method = #{method}</h2>
          <h2>version = #{version}</h2>
        </body>
      </html>
    """
    {:ok, resp} = :cowboy_req.reply(200, headers, body, req)
  end
end
```

``` elixir:lib/elixir_cowboy_example.ex
  def run do
    # http://localhost:4000/dynamic に新規のHandlerを追加
    routes = [
      {"/", ElixirCowboyExample.Handler, []},
      {"/dynamic", ElixirCowboyExample.DynamicPageHandler, []},
      {"/json", ElixirCowboyExample.JsonHandler, []},
      {"/:html", ElixirCowboyExample.Handler, []}
    ]

    dispatch = :cowboy_router.compile([{:_, routes}])

    opts = [{:port, 4000}]
    env = %{dispatch: dispatch}

    {:ok, _pid} = :cowboy.start_clear(:http, 100, opts, %{env: env})
  end
```

# 記載したコードの実行
コードの記述が完了しましたので、それでは実行していきましょう。
いつも通り `iex -S mix` にて cowboy を実行していき、`http://localhost:4000/dynamic`にアクセスしてみましょう。
下記のようにブラウザの画面に表示されるはずです。

<img width="1176" alt="スクリーンショット 2017-01-09 16.14.17.png" src="https://qiita-image-store.s3.amazonaws.com/0/3014/057d2365-1a5d-3c1a-a81c-bf2fc59ccea5.png">


# 最後に
今回は受け取った内容にて画面表示の内容を変更するように実装してみました。
実際に使うためには、ファイルのHTMLファイルなどから取得した内容を書き換えるなどしないと使えないですが、いかがだったでしょうか？
それではまた次回

# 参考サイト
[Cowboy User Guide](https://ninenines.eu/docs/en/cowboy/1.0/guide/)
[Cowboy User Guide](https://ninenines.eu/docs/en/cowboy/2.0/guide/)