はじめに
- @Nemesis さんのJavaで湯婆婆を実装してみるを拝見しまして、私はElixirでやってみました
- さらに
湯婆婆に関する記事のリンク集を作りました - そうして今回はさらにPhoenixで作ってみたいとおもいます
0. 準備
- まずはElixirをインストールしましょう
- 手前味噌な記事ですがインストールなどをご参照ください
- さらにはPhoenix用の準備が必要です
- 公式ページのInstallationをご参照ください
- こちらが日本語訳です
- ここでインストールするものにElixir関係以外では、node.jsとPostgreSQLがあげられていますが、今回はPostgreSQLは使いません
1. プロジェクト作成
$ mix phx.new yubaba --live
$ cd yubaba
2. ソースコードを書く
-
assets/static/images/chihiro016.jpgとassets/static/images/chihiro017.jpgを置いておく
lib/yubaba/yubaba.ex
defmodule Yubaba.Yubaba do
def new_name(""), do: "千"
def new_name(name) do
if String.contains?(name, "千") do
"千"
else
String.codepoints(name) |> Enum.random()
end
end
end
- 何も入力されていない場合には"千"、入力文字列に"千"が含まれていれば"千"、それ以外はランダムに選ぶということにしました
lib/yubaba_web/live/yubaba_live.ex
defmodule YubabaWeb.YubabaLive do
use YubabaWeb, :live_view
def mount(_params, _session, socket) do
socket = assign(socket, name: "", submitted: false, new_name: "")
{:ok, socket}
end
def render(assigns) do
~L"""
<h1>湯婆婆</h1>
<%= if @submitted do %>
<img src="images/chihiro017.jpg">
<% else %>
<img src="images/chihiro016.jpg">
<% end %>
<form phx-submit="yubaba">
<input type="text" name="name" value="<%= @name %>"
placeholder="契約書だよ。そこに名前を書きな。"
autofocus autocomplete="off" />
<button type="submit">
回答
</button>
<%= if @submitted do %>
<a href="/yubaba">もう一度</a>
<% end %>
</form>
<%= if @submitted do %>
<pre>
フン。<%= @name %>というのかい。贅沢な名だねぇ。
今からお前の名前は<%= @new_name %>だ。いいかい、<%= @new_name %>だよ。分かったら返事をするんだ、<%= @new_name %>!!
</pre>
<% end %>
"""
end
def handle_event("yubaba", %{"name" => name}, socket) do
new_name = Yubaba.Yubaba.new_name(name)
socket =
assign(socket,
name: name,
new_name: new_name,
submitted: true
)
{:noreply, socket}
end
end
lib/yubaba_web/router.ex
@@ -18,6 +18,7 @@ defmodule YubabaWeb.Router do
pipe_through :browser
live "/", PageLive, :index
+ live "/yubaba", YubabaLive
end
- ↑↑↑ ここまででもOKです
おまけ
- ここからはおまけです
- 入力された値と変換後の値をPostgreSQLに保存してみます
$ mix phx.gen.live Accounts User users name new_name
- どどっとファイルができます
- まあ気にしないことにしましょう
-
lib/yubaba_web/router.exにパスを追加します
lib/yubaba_web/router.ex
@@ -19,6 +19,13 @@ defmodule YubabaWeb.Router do
live "/", PageLive, :index
live "/yubaba", YubabaLive
+
+ live "/users", UserLive.Index, :index
+ live "/users/new", UserLive.Index, :new
+ live "/users/:id/edit", UserLive.Index, :edit
+
+ live "/users/:id", UserLive.Show, :show
+ live "/users/:id/show/edit", UserLive.Show, :edit
end
- 入力値と変換後の値を保存するコードを足します
YubabaWeb.YubabaLive
def handle_event("yubaba", %{"name" => name}, socket) do
new_name = Yubaba.Yubaba.new_name(name)
+ {:ok, %Yubaba.Accounts.User{}} =
+ Yubaba.Accounts.create_user(%{name: name, new_name: new_name})
+
socket =
assign(socket,
name: name,
- あとはLiveViewでinfinite scroll (Elixir/Phoenix)なんてのをやるとおもしろいかもしれません
- 本題とははずれるので紹介のみにしておきます
- その他、ここで書いていない細かな修正などあるのですが、細かいですし、そろそろ面倒になってきたのでソースコードを公開しておきます
- TORIFUKUKaiou/yubaba
3. 実行
$ mix phx.server
Visit: http://localhost:4000/yubaba
- 最初にこの画像を表示して
- 名前を入力して「回答」ボタンを押したら、1文字選んでこの画像を表示するようにしました
- 常識の範囲1内かどうかはわからないので、湯婆婆を使った画像はここには載せないことにします
Wrapping Up 
-
@momeemtさんの記事にある通り、入力を受け取ってそれを変換して出力するというのは、プログラミングの基本ーー大きく言うと、つまり
湯婆婆はこれからの"Hello, World"における例題の一つのような気がしています- 将棋の原田泰夫九段が提唱された三手の読み（こうやる、こう来る、そこでこう指す）に通じるものがあるような気がします
- 令和のHello World!との呼び声も！(@everylittle さん)
- Enjoy Elixir !!!
-
http://www.ghibli.jp/info/013344/?s=03 には、「常識の範囲でご自由にお使いください」と書いてあります ↩