目的： Phoenixアプリケーションにページを追加する基本手順を習得する。
実施環境：
OS： Windows8.1
Erlang： Eshell V6.4
Elixir： v1.0.4
Phoenix Framework： v0.13.1
Node.js： v0.12.4
目次：
- 概要
- router.exに処理を追加する
- hello_controller.exにアクションを追加する
- 新規テンプレート(show)を作成する。
- 実行する
1.1
なんか、ちょいちょい情報が分かったお！
とりあえず、分かったことを書いておく。
Phoenixはリロードをしてくれる。
web/templates/layout/application.html.eexを開くと<％ = @inner ％ >の記述がある。
ここに先ほどのindex.html.eexがレンダリングされている。
1.2
今回やること。
URLの一部に"messenger"と言うラベルを付け、Hello～できるようにする。
HelloControllerを再利用して、showアクションを追加する。
なんか、ちょいちょい情報が分かったお！
とりあえず、分かったことを書いておく。
Phoenixはリロードをしてくれる。
web/templates/layout/application.html.eexを開くと<％ = @inner ％ >の記述がある。
ここに先ほどのindex.html.eexがレンダリングされている。
1.2
今回やること。
URLの一部に"messenger"と言うラベルを付け、Hello～できるようにする。
HelloControllerを再利用して、showアクションを追加する。
2.router.exに処理を追加
2.1
以下のディレクトリを開く。
ディレクトリ： C:/作業パス/test_app/hello_phoenix/web
2.2
以下のファイルを開く。
ファイル： router.ex
2.3
scopeの部分に以下の内容を追記する。
get "/hello/:messenger", HelloController, :show
scope "/", HelloPhoenix do
pipe_through :browser # Use the default browser stack
get "/", PageController, :index
get "/hello", HelloController, :index
get "/hello/:messenger", HelloController, :show
end
例えば、
http://localhost:4000/hello/Frankと言うURLが来た場合、:messenger = Frankの値になる。
2.4
ソースコードは以下の通り作成した。
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| defmodule HelloPhoenix.Router do | |
| use HelloPhoenix.Web, :router | |
| pipeline :browser do | |
| plug :accepts, ["html"] | |
| plug :fetch_session | |
| plug :fetch_flash | |
| plug :protect_from_forgery | |
| end | |
| pipeline :api do | |
| plug :accepts, ["json"] | |
| end | |
| scope "/", HelloPhoenix do | |
| pipe_through :browser # Use the default browser stack | |
| get "/", PageController, :index | |
| get "/hello", HelloController, :index | |
| get "/hello/:messenger", HelloController, :show | |
| end | |
| # Other scopes may use custom stacks. | |
| # scope "/api", HelloPhoenix do | |
| # pipe_through :api | |
| # end | |
| end |
3.hello_controller.exにアクションを追加
3.1
以下のディレクトリを開く。
ディレクトリ： C:/作業パス/test_app/hello_phoenix/web/controllers
3.2
以下のファイルを開く。
ファイル： hello_controller.ex
3.3
以下のアクションを追加する。
def show(conn, %{"messenger" => messenger}) do
render conn, "show.html", messenger: messenger
end
ここら辺の公式ガイドにある説明をGoogle翻訳に掛けると、
「paramsを維持する必要がある。」
「だから、コントローラにshowアクションを追加する。」
「http://localhost:4000/hello/Frankが来た時、paramsのMessenger変数はFrankにバインドされる。」
「キーと値の第三引数。Messengerがキー、Messenger変数が値。キーは常に文字列。」
とかって翻訳されて、ここら辺よく分からん・・・
3.4
ソースコードは以下の通り作成した。
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| defmodule HelloPhoenix.HelloController do | |
| use HelloPhoenix.Web, :controller | |
| plug :action | |
| def index(conn, _params) do | |
| render conn, "index.html" | |
| end | |
| def show(conn, %{"messenger" => messenger}) do | |
| render conn, "show.html", messenger: messenger | |
| end | |
| end |
4.新規テンプレート(show)を作成
4.1
以下のディレクトリを開く。
ディレクトリ： C:/作業パス/test_app/hello_phoenix/web/templates/hello
4.2
新規に以下のファイルを作成する。
作成ファイル： show.html.eex
4.3
show.html.eexを開き以下の内容を記述する。
<div class="jumbotron">
<h2>Hello World, from <%= @messenger %>!</h2>
</div>
ここで分かったこと。
Elixir式を実行できるEEXタグ、"<%= %>"を利用している。
@messengerのようにメタプログラミングできる。
4.4
ソースコードは以下の通り作成した。
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <div class="jumbotron"> | |
| <h2>Hello World, from <%= @messenger %>!</h2> | |
| </div> |
5.実行する
5.1
コマンドプロンプトを開き、以下のディレクトリへ移動する。
移動先： C:/作業パス/test_app/hello_phoenix
5.2
以下のコマンドを実行する。
コマンド： mix phoenix.server
5.3
以下のアドレスにアクセスする。(ポート番号変えた方は適宜対応する)
アドレス： http://localhost:4000/hello/Frank
私は、http://localhost:4000/hello/daruiとした。
皆さんも自分の名前でもいいと思います。
5.4
以下のように表示されれば問題ない。
以上！！
以下、参考とさせて頂いたサイト様
管理人の独り言～
何か・・・今日は・・・思考が重い・・・
昨日の深夜はテンションかなり高めだったんだけど・・・
とりあえず、今日はこれで投稿終わりにしよう・・・
続きをやる気力が出ない・・・
