Skip to content

Instantly share code, notes, and snippets.

@eitoball

eitoball/phoenix_app.md

Last active May 26, 2017 10:41
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save eitoball/6c5b8304c0fab4d51e9b9553b6e42862 to your computer and use it in GitHub Desktop.
Save eitoball/6c5b8304c0fab4d51e9b9553b6e42862 to your computer and use it in GitHub Desktop.
Download ZIP
Raw
phoenix_app.md

Phoenix Human アプリ・チュートリアル

ツールを知る

  • テキストエディタ
  • ターミナル
  • Webブラウザ

1. アプリケーションを作る

phoenixhuman という名前のPhoenixアプリを作っていきます。

まず、Terminalを開いて下さい。

そして、Terminal上で次のコマンドを入力します。

$ mkdir projects
$ cd projects
$ mix phoenix.new phoenixhuman
$ cd phoenixhuman
$ mix ecto.create
$ iex -S mix phoenix.server

自分のパソコン上のブラウザで http://localhost:4000 にアクセスして下さい。

"Welcome to Phoenix!" という画面が表示されれば、さきほど作ったアプリが正しく動作しています。

Terminal 上で、CTRL-C を2回実行してサーバーを終了します。

2. Idea の scaffold をする

Phoenix の Generator タスクを使って、 list、add、remove、edit、view を生成します。これが、Phoenix アプリの最初の一歩です。個々では、 ideas と言う名前で作ります。

mix phoenix.gen.html Idea ideas name:string description:text picture:string

テキストエディタで web/router.ex を開いて、19行目に resources "/ideas", IdeaController を挿入して下さい。

scope "/", PhoenixHuman do
  pipe_through :browser # Use the default browser stack

  resources "/ideas", IdeaController
  get "/", PageController, :index
end

mix ecto.migrate
iex -S mix phoenix.server

ブラウザで、 http://localhost:4000/ideas にアクセスして下さい。

いろいろクリックしてみたりしたら、CTRL-C を2回押して、サーバーを終了します。

3. デザインする

そのままのデザインはイケていないので、何かやってみましょう。Twitter Bootstrapフレームワークを使うと、ホント簡単に、いい感じのスタイルに変えられます。

$ npm install -save bootstrap

テキストエディタで brunch-config.js を開いて、68行目からの次のような行があります。

npm: {
  enabled: true
}

69行目から、次のように追記して下さい。

npm: {
  enabled: true,
  styles: {
    bootstrap: ['dist/css/bootstrap.min.css']
  },
  static: [
    'dist/js/bootstrap.min.js'
  ]
}


$ rm web/static/css/phoenix.css

テキストエディタで、 web/templates/layout/app.html.eex と開いて、まず、 <body> タグ内を次のように変更します。

<body>
  <div class="container">
    <%= render @view_module, @view_template, assigns %>
   </div>
</body>

次に、ナビゲーションバーとフッターをレイアウトに追加してみましょう。同じファイルの<body>の直後に以下を追加してください。

<nav class="navbar navbar-default navbar-fixed-top" role="navigation">
  <div class="container">
    <div class="navbar-header">
      <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
        <span class="sr-only">Toggle navigation</span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
      </button>
      <a class="navbar-brand" href="/">The Idea app</a>
    </div>
    <div class="collapse navbar-collapse">
      <ul class="nav navbar-nav">
        <li class="active"><a href="/ideas">Ideas</a></li>
      </ul>
    </div>
  </div>
</nav>

さらに、</body> の直前に以下を追加してください。

<footer>
  <div class="container">
    Phoenix Human 2017
  </div>
</footer>

ここで、ideasの表のスタイルも変更してみましょう。web/statics/css/app.css を開いて、コードの一番下に次のcssを追加しましょう。

body { padding-top: 100px; }
footer { margin-top: 100px; }
table, td, th { vertical-align: middle; border: none; }
th { border-bottom: 1px solid #DDD; }

ファイルがきちんと保存されたことを確認して、何が変わったのかを見てみましょう。 さらに、HTMLとCSSに変更を加えることもできます。

4. 写真アップロード機能を追加する

TODO: brew install imagemagick

Phoenix にファイルをアップロードする機能を追加するには、ライブラリを追加する必要があります。

プロジェクトディレクトリ内の mix.exs を開いて、defp deps に次のように {:arc_ecto, "~> 0.5.0"} を追加します。

defp deps do
  [{:phoenix, "~> 1.2.1"},
   {:phoenix_pubsub, "~> 1.0"},
   {:phoenix_ecto, "~> 3.0"},
   {:postgrex, ">= 0.0.0"},
   {:phoenix_html, "~> 2.6"},
   {:phoenix_live_reload, "~> 1.0", only: :dev},
   {:gettext, "~> 0.11"},
   {:cowboy, "~> 1.0"},
   {:arc_ecto, "~> 0.5.0"}]
end

サーバーを終了するためには、CTRL-Cを2回押します。

Terminalで、次のコマンドを実行して下さい。

$ mix deps.get

そうすると次のコマンドでアップロードを実行するコードを生成できます。

$ mix arc.g picture

テキストエディタで web/uploaders/picture.ex を開いて、次のように変更します。

  • 5行目の行頭の#を削除します。
  • 10行目の行頭の#を削除します。
  • 18から20行目の行頭の#を削除します。
  • 28から30行目の行頭の#を削除して、メソッド内を"uploads/pictures"とします。
defmodule Phoenixhuman.Picture do
  use Arc.Definition

  # Include ecto support (requires package arc_ecto installed):
  use Arc.Ecto.Definition

  @versions [:original]

  # To add a thumbnail version:
  @versions [:original, :thumb]

  # Whitelist file extensions:
  # def validate({file, _}) do
  #   ~w(.jpg .jpeg .gif .png) |> Enum.member?(Path.extname(file.file_name))
  # end

  # Define a thumbnail transformation:
  def transform(:thumb, _) do
    {:convert, "-strip -thumbnail 250x250^ -gravity center -extent 250x250 -format png", :png}
  end

  # Override the persisted filenames:
  # def filename(version, _) do
  #   version
  # end

  # Override the storage directory:
  def storage_dir(version, {file, scope}) do
    "uploads/pictures"
  end

  # Provide a default URL if there hasn't been a file uploaded
  # def default_url(version, scope) do
  #   "/images/avatars/default_#{version}.png"
  # end

  # Specify custom headers for s3 objects
  # Available options are [:cache_control, :content_disposition,
  #    :content_encoding, :content_length, :content_type,
  #    :expect, :expires, :storage_class, :website_redirect_location]
  #
  # def s3_object_headers(version, {file, scope}) do
  #   [content_type: Plug.MIME.path(file.file_name)]
  # end
end

テキストエディタで、ファイルと開いて、行を追加・編集をしていきます。

config/config.exs を開いて、import_config "#{Mix.env}.exs" の上に次の行を追加します。

config :arc,
  storage: Arc.Storage.Local

lib/phoenixhuman/endpoint.ex を開いて、14行目辺りから、次の行を追加します。

plug Plug.Static,
  at: "/uploads", from: Path.expand("./uploads"), gzip: false

web/models/idea.ex を開いて、次のように変更します。

  • 3行目に use Arc.Etco.Schema を追加します。
  • 8行目を :string から Phoenixhuman.Picture.Type に変更します。
  • 19行目に |> cast_attachments(params, [:picture], []) を追加します。
defmodule Phoenixhuman.Idea do
  use Phoenixhuman.Web, :model
  use Arc.Ecto.Schema

  schema "ideas" do
    field :name, :string
    field :description, :string
    field :picture, Phoenixhuman.Picture.Type

    timestamps()
  end

  @doc """
  Builds a changeset based on the `struct` and `params`.
  """
  def changeset(struct, params \\ %{}) do
    struct
    |> cast(params, [:name, :description, :picture])
    |> cast_attachments(params, [:picture], [])
    |> validate_required([:name, :description, :picture])
  end
end

web/templates/idea/index.html.eex を開いて、<td><%= idea.picture %></td> を <td></td> に変更します。

web/templates/idea/form.html.eex を開いて、

<%= form_for @changeset, @action, fn f -> %>

を

<%= form_for @changeset, @action, [multipart: true], fn f -> %>

に

<%= text_input f, :picture, class: "form-control" %>

の text_input を file_input に変更します。

web/templates/idea/show.html.eex を開いて、

<%= @idea.picture %> を <img src="<%= Phoenixhuman.Picture.url({@idea.picture, @idea}) %>" /> を変更します。

5. routes を調整する

http://localhost:4000 を開いてみてください。まだデフォルトページが見えると思います。ideas ページにリダイレクトするようにしましょう。

web/router.ex を開いて、20行目あたりの

get "/", PageController, :index

を

get "/", IdeaController, :index

に変更して下さい。

ルートパス(http://localhost:4000/)をブラウザで表示して変更点を確認しましょう。

アプリにページを追加する

アプリに開発者(あなたです！)の情報を表示できるようにページを追加してみましょう。

web/router.ex

get "/pages/info", PageController, :info

web/controllers/page_controller.ex

def info(conn, _params) do
  render conn, "info.html"
end

$ mv web/templates/page/index.html.eex web/templates/page/info.html.eex

それでは、プロジェクトの web/templates/page/info.html.erb をテキストエディタで開いてあなたの情報を HTML で追記しましょう。その後はブラウザで http://localhost:4000/pages/info を開いて作成したページを確認してみましょう。

次は？

  • HTML や CSS を使ってデザインを追加しましょう。
  • アイデアの素晴らしさ評価値の項目を追加しましょう。
  • JavaScript を使って動きをつけてみましょう。
  • 写真のロードを早くするために、適切な写真のリサイズ機能を追加しましょう。
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment