Ecto でDBから値を返す時、nilの場合がある。
この場合に、nilをreplaceしたい場合がある。その記述方法
result = %{total: nil}
total = result |> Map.get("total") || 0
この記述で、nil の場合には、0が代入される。
Category: ‘Phoenix Framework’
nil の場合の値代入
Phoenix linkタグ
Railsで記述可能なことは、Phoenixでも可能だと信じて、やはり可能だった件。
linkタグの文字に、スタイルを適用したいという場合の対応。
<%= link "LOGO", to: page_path(@conn, :index), class: "logo" %>
<%= link to: page_path(@conn, :index), class: "logo" do %>
<span class="logo"><b>LOGO</b></span>
<% end %>
Phoenix で CKEDITOR is not definedエラー
環境
Elixir: 1.4.4
Phoenix: 1.2.2
とあるBootstrap のデザインテンプレートを利用しようとしたが、付属のJSとの相性が良くない。
最低限のJSをデプロイしていたが、下記のJavascriptエラーにハマる。
Uncaught ReferenceError: CKEDITOR is not defined
結論から言うと、Phoenixが使用している Brunch というJSのパッケージ管理が邪魔しているようだった。
特にJSのパッケージ管理に困っているわけでなく、むしろ最近のJS界隈の用語には付いて行けてないので、利用するJSは、直接手書きしても問題ない。
config/dev.exs
config :phoenix_sample, PhoenixSample.Endpoint,
http: [port: 4000],
debug_errors: true,
code_reloader: true,
check_origin: false
# コメントアウト
# watchers: [node: ["node_modules/brunch/bin/brunch", "watch", "--stdin",
# cd: Path.expand("../", __DIR__)]]
※但し、CSSもBrunch等で、一つのCSSにまとめている場合は、CSSとFONTのパスの問題を引き起こす可能性があるので注意。
priv/static/js に必要なJSファイルのみ配置する。 app.js / app.js.map への参照は削除
おそらくこれで、不要なJSを参照しなくなるので、Javascriptエラーは無くせるので、問題ないはず。
Brunchとか、JSのパッケージ管理の勉強は、困ったときにゆくゆくに。
Phoenix プロジェクト作成
// プロジェクト作成 $ mix phoenix.new PhoenixSample --database mysql --app phoenix_sample // サーバ起動 $ cd PhoenixSample $ mix phoenix.server
必要最低限の初期テンプレート
<!DOCTYPE html>
<html lang="ja">
<head>
<link rel="stylesheet" href="<%= static_path(@conn, "/css/app.css") %>">
</head>
<body>
<p class="alert alert-info" role="alert"><%= get_flash(@conn, :info) %></p>
<p class="alert alert-danger" role="alert"><%= get_flash(@conn, :error) %></p>
<%= render @view_module, @view_template, assigns %>
<script src="<%= static_path(@conn, "/js/app.js") %>"></script>
</body>
</html>
Phoenix新規ページの追加
プロジェクトが作成され、アプリケーション階層が生成された。
生成されたテンプレートを参考に、http://localhost:4000/hello で呼ぶページを作成してみた。
まずは、ルートファイルを編集してみる。
get “/hello”, HelloController, :index
を追記した。
web/router.ex
defmodule PhoenixSample.Router do
use PhoenixSample.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 "/", PhoenixSample 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", PhoenixSample do
# pipe_through :api
# end
end
次に、ルートファイルで指定した HelloController を作成してみる。
メソッドは index として、index.html を表示するようしていする。
web/controllers/hello_controller.ex
defmodule PhoenixSample.HelloController do
use PhoenixSample.Web, :controller
plug :action
def index(conn, _params) do
render conn, "index.html"
end
end
実際のコンテンツ部分。templatesディレクトリ内にコントローラ名に対応したディレクトリを作成して配置する。
web/templates/hello/index.html.eex
<div>こんにちは。たぢさん。</div>
view部分のファイルであるが、どのようなタスクを司っているのか不明。
そのうち調べてみる。
web/views/hello_view.ex
defmodule PhoenixSample.HelloView do use PhoenixSample.Web, :view end
以上、アプリの概要である。
Phoenix 初めてのプロジェクト作成
いきなりエラー。どうやら社内プロキシが邪魔して、社外のネットワークにつながらないらしい。
$ mix local.hex
** (Mix) Could not access url https://s3.amazonaws.com/s3.hex.pm/installs/list.csv,
error: {:failed_connect, [{:to_address, {'s3.amazonaws.com', 443}},
{:inet, [:inet], :econnrefused}]}
ネットワークが繋がる環境で、気を取り直してもう一度。
$ mix local.hex
すると、ホームディレクトリ下に .mix/archives/hex.ez というファイルがダウンロードされる。
$ mix archive.install https://github.com/phoenixframework/phoenix/releases/download/v0.13.1/phoenix_new-0.13.1.ez
すると、先程と同じディレクトリに .mix/archives/phoenix_new-0.13.1.ez というファイルがダウンロードされる。
そして、プロジェクトを作成。
$ mix phoenix.new hello_phoenix --database mysql
※ここでプロジェクト名を HelloPhoenix としたら怒られた。命名規則があるのか調査中。
$ mix phoenix.server [error] Could not start watcher "node", executable does not exist
nodeがないと怒られるので、nodejsのサイトでダウンロード。
再度実行。
$ mix phoenix.new hello_phoenix * creating hello_phoenix/config/config.exs * creating hello_phoenix/config/dev.exs * creating hello_phoenix/config/prod.exs * creating hello_phoenix/config/prod.secret.exs * creating hello_phoenix/config/test.exs * creating hello_phoenix/lib/hello_phoenix.ex * creating hello_phoenix/lib/hello_phoenix/endpoint.ex * creating hello_phoenix/priv/static/robots.txt * creating hello_phoenix/test/controllers/page_controller_test.exs * creating hello_phoenix/test/views/error_view_test.exs * creating hello_phoenix/test/views/page_view_test.exs * creating hello_phoenix/test/support/conn_case.ex * creating hello_phoenix/test/support/channel_case.ex * creating hello_phoenix/test/test_helper.exs * creating hello_phoenix/web/controllers/page_controller.ex * creating hello_phoenix/web/templates/layout/application.html.eex * creating hello_phoenix/web/templates/page/index.html.eex * creating hello_phoenix/web/views/error_view.ex * creating hello_phoenix/web/views/layout_view.ex * creating hello_phoenix/web/views/page_view.ex * creating hello_phoenix/web/router.ex * creating hello_phoenix/web/web.ex * creating hello_phoenix/mix.exs * creating hello_phoenix/README.md * creating hello_phoenix/lib/hello_phoenix/repo.ex * creating hello_phoenix/test/support/model_case.ex * creating hello_phoenix/.gitignore * creating hello_phoenix/brunch-config.js * creating hello_phoenix/package.json * creating hello_phoenix/web/static/css/app.scss * creating hello_phoenix/web/static/js/app.js * creating hello_phoenix/web/static/vendor/phoenix.js * creating hello_phoenix/priv/static/images/phoenix.png
Fetch and install dependencies? [Yn] Y
* running npm install
* running mix deps.get
We are all set! Run your Phoenix application:
$ cd hello_phoenix
$ mix phoenix.server
You can also run it inside IEx (Interactive Elixir) as:
$ iex -S mix phoenix.server
インストラクションに記述してあるように下記でサーバを起動する。
$ cd hello_phoenix $ mix phoenix.server
ブラウザを起動して、http://localhost:4000/ を開くと下記画面が表示される。
