Nao000のぶろぐ

蝶を追っている少年になりたい

2019-11-02 10:50:00
【Elixir Phoenix】別のテンプレートLayoutとLayoutViewを指定するサンプル

目次

  1. 用途
  2. バージョン情報
  3. サンプル
  4. 各コントローラーで指定する方法
  5. 参考サイト

用途

ユーザー側の画面と管理側の画面で分ける場合など、画面構成がレイアウト単位で変わる場合で使用可能です。

バージョン情報

Elixir: 1.8.1

Phoenix: 1.4.2

サンプル

"/kanrisample/" にアクセスしたときに新規のレイアウトを使用したページを表示するサンプルです。1からなのでControllerと対応するViewの追加も含んでいます。

今回は編集1ファイル、新規5ファイルを使います。

用意するファイル

編集する1ファイル

  • lib/nao000dotcom_web/router.ex

新規追加の5ファイル

  • lib/nao000dotcom_web/controllers/kanrisample/index_controller.ex
  • lib/nao000dotcom_web/templates/kanrisample/index/index.html.eex
  • lib/nao000dotcom_web/templates/kanrisample/layout/kanrisample.html.eex
  • lib/nao000dotcom_web/views/kanrisample/index_view.ex
  • lib/nao000dotcom_web/views/kanrisample/layout_view.ex

テンプレートLayoutとLayoutViewを作成する場所は関係しているので注意が必要です。

設定

編集 lib/nao000dotcom_web/router.ex

アクセスできるようにルーティングに追加します。

ここで使用するテンプレートLayoutとLayoutViewを指定します。各コントローラーでも指定できますが、ユーザー画面・管理画面のような分け方でテンプレートを分ける場合は面倒なのでルーティングに記載します。

各コントローラーでテンプレートLayoutと対応するLayoutviewを指定する方法は各コントローラーで指定する方法に記載します。

    pipeline :kanrisample_page do
      plug :put_layout, {Nao000dotcomWeb.Kanrisample.LayoutView, "kanrisample.html"}
    end

    scope "/kanrisample", Nao000dotcomWeb do
      pipe_through :browser
      pipe_through :api
      pipe_through :kanrisample_page

      get "/", Kanrisample.IndexController, :index
    end
新規追加 lib/nao000dotcom_web/controllers/kanrisample/index_controller.ex

Controllerです。管理サンプル画面のIndexです。

    defmodule Nao000dotcomWeb.Kanrisample.IndexController do
      use Nao000dotcomWeb, :controller

      def index(conn, _params) do
        render(conn, "index.html")
      end
    end
新規追加 lib/nao000dotcom_web/views/kanrisample/index_view.ex

IndexControllerに対応するViewです。

    defmodule Nao000dotcomWeb.Kanrisample.IndexView do
      use Nao000dotcomWeb, :view
    end
新規追加 lib/nao000dotcom_web/templates/kanrisample/index/index.html.eex

IndexControllerに対応するhtmlです。文字列表示のみです。

サンプルの管理画面です。
新規追加 lib/nao000dotcom_web/templates/kanrisample/layout/kanrisample.html.eex

新規追加するテンプレートLayoutです。デフォルトで用意されているテンプレートLayoutとほぼ同じです。

    <!DOCTYPE html>
    <html>
      <head>
        <meta charset="utf-8"/>
        <meta http-equiv="X-UA-Compatible" content="IE=edge"/>
        <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
        <title>管理サンプル画面</title>
        <link rel="stylesheet" href="<%= Routes.static_path(@conn, "/css/app.css") %>"/>
      </head>
      <body>
        <header class="blogInfo">
          <h2 class="summary">管理サンプル画面</h2>
        </header>
        <main role="main" class="mainContainer">
          <%= render @view_module, @view_template, assigns %>
        </main>
        <script type="text/javascript" src="<%= Routes.static_path(@conn, "/js/app.js") %>"></script>
      </body>
    </html>
新規追加 lib/nao000dotcom_web/views/kanrisample/layout_view.ex

新規追加するテンプレートLayoutに対応するViewです。

    defmodule Nao000dotcomWeb.Kanrisample.LayoutView do
      use Nao000dotcomWeb, :view
    end

各コントローラーで指定する方法

put_layout関数を使います。put_layoutという名前ですがViewも指定します。引数がconn変数も含めて2つなので混乱しましたが、第2引数はタプルで指定可能です。

    defmodule Nao000dotcomWeb.Kanrisample.IndexController do
      use Nao000dotcomWeb, :controller

      def index(conn, _params) do
        conn |> put_layout({Nao000dotcomWeb.Kanrisample.LayoutView, "kanrisample.html"})
        |> render("index.html")
      end
    end

参考サイト