はじめに

ElixirにてCowboyを直接動かすための記事となります。
前回の記事では、cssやJavaScriptなどのスタティックファイルをレスポンスで返すようにして、HTMLで読み込めるようにしました。
今回の記事では、画像ファイルをrouteから受け渡すように設定を行います。

Cowboy1.0のサンプルコードはこちらになります

Cowboy2.0のサンプルコードはこちらになります

バージョン

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

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を作成

今回はimage用のファイルをrouteに設定して、画像ファイルをHTMLに受け渡してみます。
:cowboy_static にて今回は画像ファイルを引き渡しますが、:cowboy_staticで引き渡す場合にはprivディレクトリ配下のディレクトリからスタティックファイルを受け渡すするようになっています。
routesに設定を行ったら、htmlにimageファイルの読み込みとimageファイルを所定のディレクトリに配置して完成です。

cowboy 1.0と2.0の場合

lib/elixir_cowboy_example.ex

  def run do
    routes = [
      {"/", ElixirCowboyExample.Handler, []},
      {"/dynamic", ElixirCowboyExample.DynamicPageHandler, []},
      {"/json", ElixirCowboyExample.JsonHandler, []},
      {"/:html", ElixirCowboyExample.Handler, []},
      {"/priv/static/js/:javascript", ElixirCowboyExample.JavascriptHandler, []},
      {"/priv/static/css/:css", ElixirCowboyExample.CssHandler, []},
      {"/priv/static/image/[...]", :cowboy_static, {:priv_dir, :elixir_cowboy_example, "static/image"}}
    ]

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

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

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

priv/static/html/index.html

<html>
  <head>
    <meta charset=\"utf-8\">
      <title>Cowboy Hello!</title>
    <script type="text/javascript" src="priv/static/js/main.js"></script>
    <link rel="stylesheet" type="text/css" href="priv/static/css/main.css">
  </head>
  <body>
    <h1>Cowboy Hello!!</h1>
    <h2>file load test<h2>
    <img src="priv/static/image/button.png" class="button" type='submit' value='test' onclick="func()">
  </body>
</html>

サンプル用の画像としては下記の画像を使用しております。

記載したコードの実行

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

最後に

前回と違って今回はHandlerを記載せずにスタティックファイルの受け渡しをおこなうことができました。
スタティックファイルの受け渡しだけならば、今回の方法で受け渡しができますので是非試してみてください。
それではまた次回

参考サイト

Cowboy User Guide
Cowboy User Guide
Cowboy Tutorial Part 2: Creating Flat File Blog