スポンサーリンク

2015年5月31日

Phoenixアプリケーションにページを追加してみる。(その2)

タイトル: Phoenixアプリケーションにページを追加してみる。(その2)

目的: Phoenixアプリケーションにページを追加する基本手順を習得する。

実施環境:
OS: Windows8.1
Erlang: Eshell V6.4
Elixir: v1.0.4
Phoenix Framework: v0.13.1
Node.js: v0.12.4

目次:

  1. 概要
  2. router.exに処理を追加する
  3. hello_controller.exにアクションを追加する
  4. 新規テンプレート(show)を作成する。
  5. 実行する

1.概要
Phoenixアプリケーションにページを追加してみる。に続く形でこの記事を記述します。
なので、まだ上記の記事内容を把握されていない方は見ておいて下さい。

1.1
なんか、ちょいちょい情報が分かったお!
とりあえず、分かったことを書いておく。

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
以下のように表示されれば問題ない。











以上!!

以下、参考とさせて頂いたサイト様

管理人の独り言~
何か・・・今日は・・・思考が重い・・・
昨日の深夜はテンションかなり高めだったんだけど・・・
とりあえず、今日はこれで投稿終わりにしよう・・・
続きをやる気力が出ない・・・

人気の投稿