Goal

実行したコントローラとアクションを表示する、デバッグ出力を実装する。

Dev-Environment

OS: Windows8.1
Erlang: Eshell V6.4, OTP-Version 17.5
Elixir: v1.0.5
Phoenix Framework: v1.0.0

Wait a minute

デバッグ出力を作成します。

私の環境で申し訳ないのですが、以下のような表示をできるようにします。(赤枠の部分)

コントローラ名とアクション名が出力されています。

Index

web.exでインポートする関数を追加

web.exのview/0でインポートする関数を追加します。
(action_name/1、controller_module/1の関数)

ファイル: web/web.ex

def view do
  quote do
    ...

    # Import convenience functions from controllers
    import Phoenix.Controller, only: [get_csrf_token: 0, get_flash: 2, view_module: 1,
                                      action_name: 1, controller_module: 1]

    ...
  end
end

レイアウトテンプレートを変更

レイアウトテンプレートへデバッグを表示するテンプレートを追加します。

ファイル: web/templates/layout/app.html.eex

<!DOCTYPE html>
<html lang="en">
  ...

  <body>
    ...

    <div class="container">
      <%= render "debug.html", conn: @conn %>
    </div>

    ...
  </body>
</html>

LayoutViewへ関数を追加

実行中のアクション名とコントローラ名を取得する関数を追加しています。

ファイル: web/views/layout_view.ex

defmodule SampleApp.LayoutView do
  use SampleApp.Web, :view

  def get_controller_name(conn), do: controller_module(conn)
  def get_action_name(conn), do: action_name(conn)
end

Debugテンプレートを作成

デバッグ内容を出力する新しいテンプレートを作成します。

ファイル: web/templates/layout/debug.html.eex

<div class="debug_dump">
  <p>Controller: <%= get_controller_name @conn %></p>
  <p>Action: <%= get_action_name @conn %></p>
</div>

おまけ

デバッグを出力するためのCSSを作成します。

ファイル: priv/static/css/custom.css

/* miscellaneous */
.debug_dump {
  clear: both;
  float: left;
  width: 100%;
  margin-top: 45px;
  color: inherit;
  background-color: #eee;
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
}

.debug_dump p {
  margin-bottom: 1px;
  font-size: 15px;
  font-weight: 200;
}

Speaking to oneself

ブログの方に掲載している、
Phoenix Tutorialの書き直しの過程で作成しましたので、記事にしました。

無くても何とでもなりますが、
あった方が便利、あれば使う程度の機能ですよね。

Bibliography

Phoenix-Framework - Guides - templates

[Elixir+Phoenix]実行したコントローラとアクションを表示する