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

タイトル： Phoenixアプリケーションにページを追加してみる。

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

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

目次：

1. 概要
2. ルータに処理を追加する
3. 新規コントローラーを作成する
4. 新規ビューを作成する
5. 新規テンプレートを作成する。
6. 実行する

1.概要

1.1

とりあえず、Phoenix公式ガイドにあるAdding Pagesが半分終わった。

基本的な手順のおさらいのため記事を書く。

残り半分を実施後、再び記事を書く。

英語さっぱり分からん。でもコードは読める。なら、ある程度までは何とかなる！

英語に関しては、Google翻訳使ってなんとなくニュアンスを掴んでいるだけ。

Google翻訳様様ですほんと・・・

実際の手順の前にディレクトリの説明があったが、

翻訳なんてできないので説明を割愛する。

なので、実際に行った作業のみ記述します。

そんなわけで、この記事における知識は間違っている可能性がある点留意下さい。

当然ですが、英語読める方は公式サイトを見た方が情報として確実性が高いです。

1.2

以下、私が行ったアプリケーションの作成。

C:/作業パス/test_app> mix phoenix.new hello_phoenix (選択肢はyes)

Phoenixアプリケーションの設定は特に変更はしていないため全てデフォルトである。

Phoenixのインストールとアプリケーションの作成に関して知りたい方。
以下を参考までに貼っておく。

ElixirにmixでPhoenixを混ぜ混ぜしてやる！！
Phoenixが欲しいって言うからNode.jsをインスコするよ！！

2.ルータに処理を追加する

2.1

以下のディレクトリを開く。

作業ディレクトリ： C:/作業パス/test_app/hello_phoenix/web/

2.2
以下のファイルを開く
ファイル名： web/router.ex

2.3
router.exへ記述を追加する。

追加する内容。
get "/hello", HelloController, :index

追加する部分をソースコードより抜粋
scope "/", HelloPhoenix do
  pipe_through :browser # Use the default browser stack

  get "/", PageController, :index
  get "/hello", HelloController, :index # 追加行
end

記述した内容を見てみると、
HTTPメソッド、パス、コントローラー名、テンプレート名(?)アクション名のような構成となっているのが分かる。

2.4
ソースコード全体は以下のようになる。
(といっても一行追加しただけで大げさだが・・・)

	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
	end
	# Other scopes may use custom stacks.
	# scope "/api", HelloPhoenix do
	# pipe_through :api
	# end
	end

view raw router.ex hosted with ❤ by GitHub

3.新規コントローラーを作成する

3.1
以下のディレクトリを開く
作業ディレクトリ： C:/作業パス/test_app/hello_phoenix/web/controllers

3.2
新規に以下の名前でファイルを作成する。
作成ファイル： hello_controller.ex

※名前は重要とのこと、コントローラの先頭名とビューの先頭名は同じでないといけない。

3.3
ソースコードは以下の通り作成した。

	defmodule HelloPhoenix.HelloController do
	use HelloPhoenix.Web, :controller
	plug :action
	def index(conn, _params) do
	render conn, "index.html"
	end
	end

view raw hello_controller.ex hosted with ❤ by GitHub

ソースコードの細かい部分は知らない。

4.新規ビューを作成する

4.1
以下のディレクトリを開く
作業ディレクトリ： C:/作業パス/test_app/hello_phoenix/web/views

4.2
新規に以下の名前でファイルを作成する。
作成ファイル：hello_view.ex

4.3
ソースコードは以下の通り作成した。

	defmodule HelloPhoenix.HelloView do
	use HelloPhoenix.Web, :view
	end

view raw hello_view.ex hosted with ❤ by GitHub

こちらも同じくソースコードの細かい部分は知らない。

5.新規テンプレートを作成する

5.1

以下のディレクトリを開く
作業ディレクトリ： C:/作業パス/test_app/hello_phoenix/web/templates

5.2
新規に以下の名前でディレクトリを作成する。
作成ディレクトリ： hello

※名前は重要とのこと、コントローラの先頭名と同じディレクトリ名にしないといけない。

5.3
作成したディレクトリ内に以下の名前のファイルを作成する。
作成ファイル： index.html.eex

5.4
ソースコードは以下の通り作成した。

	<div class="jumbotron">
	<h2>Hello World, from Phoenix!</h2>
	</div>

view raw index.html.eex hosted with ❤ by GitHub

6.実行する

6.1
コマンドプロンプトを起動する。

6.2
以下のディレクトリへ移動する。
移動先ディレクトリ： C:/作業パス/test_app/hello_phoenix

6.3
以下のコマンドを実行する。
コマンド： mix phoenix.server

6.4
以下のURLへブラウザからアクセスする。
アクセスURL： http://localhost:4000/hello

実行結果は、Phoenix - Guides Adding Pagesにある実行画像と同じ内容が表示されれば問題ない。

とりあえず、以上！！

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

Phoenix - Guides Adding Pages

管理人の独り言～

祝1000PV！！皆様のおかげでPVが1000を超えました。

見て下さった方々ありがとうございます。

これからも精進します！！