目的： 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
ソースコードは以下の通り作成した。
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
ソースコードは以下の通り作成した。
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
ソースコードは以下の通り作成した。
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
以下のように表示されれば問題ない。
以上！！
以下、参考とさせて頂いたサイト様
管理人の独り言～
何か・・・今日は・・・思考が重い・・・
昨日の深夜はテンションかなり高めだったんだけど・・・
とりあえず、今日はこれで投稿終わりにしよう・・・
続きをやる気力が出ない・・・