スポンサーリンク

2016年11月6日

Dark-Elixir = NeoVim |> dein.vim(Dark power) |> Mix |> Elixir

Get Dark-Elixir

期待した人には申し訳ないですが、掲題で書いているほどちゃんとした内容ではありません。
簡単に説明しますと、NeoVim+dein.vim+elixirの開発環境がほしいなーって思ったので、環境構築するだけの記事です。
それと最初に言っておきます。
Vim初心者なので、間違っている部分もあると思いますので、あらかじめご了承ください。
またその場合は優しく全力でマサカリを振ってください。(混乱)

Goal

  • ダークパワーを手に入れる
  • エリクサーにダークパワーを注入してダークエリクサーにする

Translate

  • NeoVimでdein.vimを使う
  • パッケージ管理(dein.vim)を使って、Elixirの開発環境を整える

As a prerequisite for

下記のツール・アプリケーションがインストール済みであること。
  • Erlang/OTP
  • Elixir
  • Git

Dev-Env

  • MacOS: v10.11.6
  • Git: v2.7.4
  • Erlang/OTP: v19.1
  • Elixir: v1.3.3
  • NeoVim: v0.1.6
    • dein.vim: v0.5(?)
  • Python: v3.5 and v2.7

プラグイン一覧 (Plugin list)

導入予定のプラグイン一覧。
  • dein.toml
    • Shougo/dein.vim
    • Shougo/vimproc.vim
    • Shougo/vimshell.vim
    • Shougo/context_filetype.vim
    • hail2u/vim-css3-syntax
    • thinca/vim-ref
    • elixir-lang/vim-elixir
    • slashmili/alchemist.vim
    • cespare/vim-toml
    • elzr/vim-json
    • rcmdnk/vim-markdown
    • vim-ruby/vim-ruby
    • jelera/vim-javascript-syntax
  • dein_lazy.toml
    • Shougo/neomru.vim
    • Shougo/unite.vim
    • Shougo/neoyank.vim
  • dein_neo.toml
    • Shougo/deoplete.nvim

NeoVimをインストールする (in HomeBrew)

まずはNeoVimのインストールからです。特にビルドとかはしたりしないです。
めんどくさがりなのでHomeBrewを使ってインストールします。

NeoVim

Example:

$ brew install neovim/neovim/neovim
はい終わり。

Python3

deoplete.nvimというダークパワーを高める素晴らしいプラグインを使うので、Python3を入れます。

Example:

$ brew install python
$ pip install neovim
         or
$ pip install --upgrade neovim

$ brew install python3
$ pip3 install neovim
         or
$ pip3 install --upgrade neovim
Pythonがインストールされたか確認してみましょう。
Requireに示されているのはpython3でしたが、
CheckHealthしたときにエラー出てたので一応、pythonの方も入れておきます。
インストールを確認します。

Example:

$ nvim
コマンドモードで下記のコマンドを実行し、1が戻ってくれば問題ありません。

Example:

:echo has('python')
1
:echo has('python3')
1

Note: vimならインストール時のオプションでluaをonにできるけど、nvimでのluaの入れ方がわからない。公式ドキュメントとかもまだ全然読めてないので、後に確認します。

Env (環境変数)

環境変数:XDG_CONFIG_HOME を設定します。(多分ないと動かないはず・・・)
下記の内容を追加してください。

File: .bash_profile or .zshrc

export XDG_CONFIG_HOME=$HOME/.config

Example:

source ~/.bash_profile or ~/.zshrc
NeoVimでは、$XDG_CONFIG_HOME/nvim/init.vimという形で設定ファイルを置くとのこと。
現在は作成されていませんので、ディレクトリとファイルを作成します。

Example:

$ cd $XDG_CONFIG_HOME
$ mkdir nvim
$ cd nvim
$ touch init.vim
$ ls

闇の力を手に入れる

それでは闇の力を手に入れましょう。
生贄を捧げるのです・・・。(何を捧げればいいんでしょうか?人間性???人生か!?)
生贄は後で捧げればいいでしょう。dein.vimを手に入れてから考えます。

Example:

$ cd ~/.cache
$ mkdir -p dein/repos/github.com/Shougo/
$ cd ~/dein/.cache/dein/repos/github.com/Shougo
$ git clone https://github.com/Shougo/dein.vim.git
init.vimに下記を記載します。

Example:

$ cd $XDG_CONFIG_HOME/nvim
$ nvim init.vim

File: $XDG_CONFIG_HOME/nvim/init.vim

" dein.vim関係のパス
let s:dein_cache_dir = expand('~/.cache/dein')
let s:dein_config_dir = expand('~/.config/nvim/dein')
let s:dein_dir = s:dein_cache_dir . '/repos/github.com/Shougo/dein.vim'

" vi互換を無効にする
if &compatible
  set nocompatible
endif
" ランタイムパスにdein.vimを追加する
execute 'set runtimepath^=' . s:dein_dir

" dein.vimの設定
call dein#begin(s:dein_cache_dir)

call dein#add('Shougo/dein.vim')

call dein#end()

" 必須設定
syntax enable
filetype plugin indent on
コマンドモードで下記を実行する。

Example:

:call dein#install()
nvimでinit.vimを開き直して、エラーを示すメッセージ表示されていなければ大丈夫だと思います。
これで闇の力を手に入れることができました。

闇の力を高める

闇の力をさらに求めます。
生贄もさらに多く必要になるので気をつけて下さい。
ここで行うのは、pluginsの設定をtomlファイルで管理できるようにすることです。
私の場合ですが、$XDG_CONFIG_HOME/nvimの配下にdeinディレクトリを置いて管理しています。
何が良いやり方なのか、よくわかっていないところがありますので、ご自身の環境に合わせてしまって構いません。
(多分、Shougo氏が公開しているリポジトリを参考にするのが一番いいんだと思います)
一応、参考までに・・・

Example:

$ cd $XDG_CONFIG_HOME/nvim
$ mkdir dein
$ cd ./dein
$ touch .dein.toml
$ touch .dein_lazy.toml
$ touch .dein_neo.toml
init.vimの内容を下記のように修正してください。

File: $XDG_CONFIG_HOME/nvim/init.vim

let s:dein_cache_dir = expand('~/.cache/dein')
let s:dein_config_dir = expand('~/.config/nvim/dein')
let s:dein_dir = s:dein_cache_dir . '/repos/github.com/Shougo/dein.vim'

if &compatible
  set nocompatible
endif
execute 'set runtimepath^=' . s:dein_dir

if dein#load_state(s:dein_cache_dir)
  call dein#begin(s:dein_cache_dir)

  let s:toml      = s:dein_config_dir . '/.dein.toml'
  let s:lazy_toml = s:dein_config_dir . '/.dein_lazy.toml'
  let s:neo_toml  = s:dein_config_dir . '/.dein_neo.toml' 

  " プラグインの読み込み
  call dein#load_toml(s:toml, {'lazy': 0})
  if has('nvim')
    call dein#load_toml(s:neo_toml, {})
  endif
  call dein#load_toml(s:lazy_toml, {'lazy': 1})

  call dein#end()
  call dein#save_state()
endif

" hook_sourceに設定している内容を展開する
call dein#call_hook('source')

syntax enable
filetype plugin indent on

" プラグインのインストールチェック
if dein#check_install(['vimproc'])
  call dein#install(['vimproc'])
endif

if dein#check_install()
  call dein#install()
endif
.dein.tomlの内容は下記の通りです。

File: $XDG_CONFIG_HOME/nvim/dein/.dein.toml

[[plugins]]
repo = 'Shougo/dein.vim'

[[plugins]]
repo = 'Shougo/vimproc.vim'
build = 'make'

[[plugins]]
repo = 'cespare/vim-toml'
on_ft = ['toml']
一度修正して、.dein.tomlを開き直してください。
反映されない場合は、コマンドモードで下記のコマンドを実行してみてください。

Example:

:call dein#clear_state()
:call dein#update()
tomlファイルにシンタックスハイライトが付いていれば大丈夫です。

闇の力をもっと高める

さらなる闇の力を求めて・・・
他のプラグインを導入し、闇の力をもっと高めていきましょう。
生贄?知らない子です!そんなことよりダークパワーの高まりを感じましょう!
自分の環境に必要のないプラグインがあれば削除してしまってください。
(私が必要なプラグインを入れています。)

File: $XDG_CONFIG_HOME/nvim/dein/.dein_lazy.toml

[[plugins]]
repo = 'Shougo/dein.vim'

[[plugins]]
repo = 'Shougo/vimproc.vim'
build = 'make'

[[plugins]]
repo = 'Shougo/vimshell.vim'

[[plugins]]
repo = 'Shougo/context_filetype.vim'

[[plugins]]
repo = 'hail2u/vim-css3-syntax'

[[plugins]]
repo = 'thinca/vim-ref'

[[plugins]]
repo = 'cespare/vim-toml'
on_ft = ['toml']

[[plugins]]
repo = 'elzr/vim-json'
on_ft = 'json'

[[plugins]]
repo = 'rcmdnk/vim-markdown'
on_ft = ['markdown', 'mkd']

[[plugins]]
repo = 'vim-ruby/vim-ruby'
on_map = '<Plug>'
on_ft = 'ruby'

[[plugins]]
repo = 'jelera/vim-javascript-syntax'
on_ft = 'javascript'

File: $XDG_CONFIG_HOME/nvim/dein/.dein_lazy.toml

[[plugins]]
repo = 'Shougo/neomru.vim'
on_path = '.*'

[[plugins]]
repo = 'Shougo/unite.vim'
depends = 'neomru.vim'

[[plugins]]
repo = 'Shougo/neoyank.vim'
deopleteの設定を記述するためのファイルを用意します。
ことのついでにプラグイン固有の設定を管理するディレクトリも用意してしまいます。

Example:

$ cd $XDG_CONFIG_HOME/nvim/dein
$ mkdir plugins
$ touch deoplete.vim

File: $XDG_CONFIG_HOME/nvim/dein/plugins/deoplete.vim

let g:deoplete#file#enable_buffer_path = 1
let g:deoplete#enable_smart_case = 1

File: $XDG_CONFIG_HOME/nvim/dein/.dein_neo.toml

[[plugins]]
repo = 'Shougo/deoplete.nvim'
depends = 'context_filetype.vim'
if = "has('nvim')"
hook_source = '''
  let g:deoplete#enable_at_startup = 1
  source ~/.config/nvim/dein/plugins/deoplete.vim
'''

Note: もしinit.vimに”set paste”が記述してある方がいたらコメントアウトしてください。補完が効かなくなります(作者様より仕様と伺っています)

これで(私に)必要なプラグインはだいだい用意できました。
しかし、まだ残っています。そう!Elixirの環境です。
この次でやっていきます。

ダークエリクサーの実験

やっとここまできました。いよいよ念願のダークエリクサーまで手が届きます。
具体的には、Elixirのソースコードでハイライトと補完、ドキュメント参照ができることです。
.dein.tomlにプラグインを追加します。

File: $XDG_CONFIG_HOME/nvim/dein/.dein.toml

...

[[plugins]]
repo = 'elixir-lang/vim-elixir'
on_ft = ['elixir']

[[plugins]]
repo = 'slashmili/alchemist.vim'
depends = 'vim-elixir'
on_ft = ['elixir']
deopleteの設定にも下記を追記してください。

File: $XDG_CONFIG_HOME/nvim/dein/plugins/deoplete.vim

...

let g:deoplete#sources = {}
let g:deoplete#sources._ = ['buffer', 'tag']
let g:deoplete#sources.elixir = ['alchemist']

インデントと補完

インデントと補完の確認をしてみましょう。
vim-elixir、alchemist.vim、deoplete.nvimが正常に機能していれば下記のようなになります。



deopleteが自動補完してくれていますが、一応コマンドも知っておいた方がいいでしょう。
デフォルトでは、<Ctrl-x><Ctrl-o>を連続入力が手動補完のコマンドになります。

あぁ素晴らしきかなdeoplete.nvim!(ダークパワー万歳!)

### ドキュメントの参照

関数の引数や使い方を忘れてしまった・・・そんなことはありませんか?
私の場合はたびたびあり、そのたびにドキュメントを見にいきます。
そんなときに使える機能だと思います。

インサートモードで、モジュールもしくは関数にカーソルを合わせてK(Shift+k)を入力してください。
下図のように、別画面でドキュメントが出て来れば大丈夫です。


おわりに

一人でdeopleteが動かせなかった弱小プログラマです。(全ては私の力不足ゆえ)
作者様からご助言をいただき、なんとかここまでできました。
このような場ですが、感謝の意を示させていただきます。本当にありがとうございます。
またお恥ずかしながら、今に至るまでVimもNeoVimもプラグインを入れる機会がなかったもので、知識や知見が致命的に足りません。(FATAL状態ですよ!)
なので、おすすめのプラグインなどがあれば教えていただけますと幸いです。
おめーの入れ方間違ってるからとか、その設定の書き方はちょっと・・・というようなメッセージでも構いません。
全ては不勉強なわたしがいけないのです。
習熟度が低いのでまだまだ快適とは言えないのですが、少しずつ慣れていけばいいでしょう。
目指すはnvimでの快適Elixirライフ!!

参考

2016年11月2日

[Elixir]Proxy環境下でElixirを無理やり動かす!

Proxy環境下でElixirを動かすまでにやったこと

社内の環境だとProxyがあるためうまく動かないことはわかっていた。
時間ができたので、突貫でElixirの仮環境を作成しました。
突貫で作業したので、内容に不備があるかもしれません。
もし問題が発生しましたら、お手数ですが、ご連絡していただけると助かります。
また、私の環境で行ったことなので、環境の差異によって何か起こるかもしれませんのであらかじめご了承ください

前提条件

以下のものがインストール済みであること。
  • Git
  • Erlang
  • Elixir

環境

  • Windows7 (32bit)
  • Git 2.?
  • Erlang/OTP 19
  • Elixir v1.3.4

Gitのproxyを設定する

proxy環境下なので、proxyの設定がないとcloneさえできない!(残当)
そういうことで、まずはGitを使えるようにするためにgitの設定にproxyを追加します。
(Git Bashで実行しました)

Example:

$ git config --global http.proxy http://proxy.example.com:[port番号]
$ git config --global https.proxy http://proxy.example.com:[port番号]
$ git config --list
...
http.proxy=http://proxy.example.com:[port番号]
https.proxy=http://proxy.example.com:[port番号]
参考になるかわかりませんが、proxyについてはIEの設定から引っこ抜きました。

Elixir(mix)にlocal.hexをインストールする

私の環境だとどうにも”mix local.hex”を実行しても外へ接続ができませんでした。
仕方がないので、Githubからソースを取得してそれをアーカイブに固めました。

Example:

$ cd path/to/clone/directory
$ git clone git@github.com:hexpm/hex.git
$ cd hex
$ mix archive.build
これでhexをアーカイブに固めたファイルができています。
ファイル名を忘れてしまったのですが、.ezで作成されているはずです。
そのファイルを”mix archive.install”で指定してあげればいいんです。

Note: hexのカスタムタスクは使えるようになったが、結局local.hexは使えなかった。

Example:

$ mix archive.install [hex archive].ez
$ mix archive
hexの設定にproxyを追加します。

Example:

$ mix hex.config http_proxy http://proxy.example.com:[port番号]
$ mix hex.config https_proxy http://proxy.example.com:[port番号]
$ mix hex.config

Note: とりあえず設定していますが、httpsの方は意味があるのかはわかりません。(変な設定入れさせるな!って人ははずして進めてください)

Elixir(mix)にlocal.rebarをインストールする

これが意外と面倒でした。
Erlangのソースですからmix archive.buildで.ezファイルの作成ができなかったので・・・
しかし、すでに固めてあることを見つけたので最終的には簡単な手順でした。
下記のURL先からrebarをダウンロードしてきます。(2016/11/1確認)
(ダウンロードしたファイルは参照しやすいところに設置しておく、この後指定します)
なぜかよくわからないんですが、wikiからダウンロードできるみたいで・・・

Example:

$ mix local.rebar rebar [path/to/rebar]
rebar3を使う場合。
公式サイトでもGithubからでもrebar3はダウンロードできます。

Example:

$ mix local.rebar rebar3 [path/to/rebar3]
今は、rebar3が出ているのでちょい古い?ですね。

Note: local.hexと同じく、local.rebarは使えないままでした。

Elixirアプリケーションの実行確認

Elixirのアプリケーションを作成して実行確認をとりましょう。

Example:

$ cd path/to/app/create/directory
$ mix new example
$ cd ./example
特に使うわけじゃないですが、deps.getの確認をしたいのでパッケージを適当にしてする。(ここではPlugとCowboyを取得します)

File: mix.exs

defmodule Example.Mixfile do

  ...

  defp deps do
    [{:cowboy, "~> 1.0", optional: true},
     {:plug, "~> 1.1"}]
  end
end
適当にモジュールを作成しましょう。

File: lib/example.ex

defmodule Example do
  def test do
    IO.inspect "hogehoge"
  end
end
パッケージの取得、コンパイル、iexからモジュールの実行までできれば問題はないでしょう。

Example:

$ mix deps.get
$ mix compile
$ iex -S mix

iex> Example.test
"hogehoge"
"hogehoge"

おまけ

Phoenixフレームワークを使うのであれば、Node.jsで使われているnpmのproxy設定もあった方がよいです。

Example:

$ npm -g config set proxy http://proxy.example.com:[port番号]
$ npm -g config set https-proxy http://proxy.example.com:[port番号]
$ npm config list
上記でつながらない場合、下記も設定してみると動いてくれるかもしれません。
$ npm -g config set registry http://registry.npmjs.org/

おわりに

こんな感じでかなり無理くり環境構築もできるみたいです。
まぁおすすめはしません。
ではノシ

2016年10月19日

[Phoenix Tutorial v1.2]What is Phoenix Framework?

ゴール

この章で学べること…
  • Phoenixフレームワークの基礎知識を身につける
  • Phoenixフレームワークをインストールする
  • ディレクトリ構成について把握する
  • プロジェクトの作り方、サーバの実行方法を実践する

コンテキスト

この章では、Phoenixフレームワークの概要と構成について学んでいきます。

Phoenix is 何?

Phoenixフレームワークとは何なのか・・・何なんでしょうね?
それを把握するために、Phoenixフレームワークの概要や特徴、構成要素について見ていきましょう。

概要

Phoenixフレームワークについて説明をする前にElixir言語について説明をしなければいけないでしょう。
Elixir言語は、ErlangVM上で動作する関数型言語です。
ErlangVMを利用しているため、Erlang/OTPを利用することができます。
そして、Rubyライクに記述することができる言語です。
つまり、ErlangとRubyの良いとこ取りをした言語です。

Note: Erlang/OTPはエリクソンで開発された関数型プログラミング言語です。

PhoenixフレームワークはElixir言語で実装されたWebフレームワークです。
サーバをMVCパターンに沿って構築していくことができます。
その構成要素や概念の多くは、Ruby on RailsやDjangoのような他のWebフレームワークに影響を受けています。
それらのフレームワーク経験があれば、使うのにさほど苦労をすることはないと思います。
高い生産性とアプリケーションパフォーマンスの両方の長所を提供しているお得なフレームワークです。
また、リアルタイム性を提供する機能がデフォルトの構成に入っています。
もちろん、その機能を利用しないで一般的なWebサイトを構築することもできます。
これは個人的な所見になりますが、フロントエンドというよりはバックエンドでの動作を期待します。

特徴

  • RoRライク
  • MVCモデル
  • ジェネレータ(Mix Tasks)
  • ルーティング
  • テンプレート
  • Ecto(データベース用ドメイン固有言語)
  • WebSocket

構成要素

  • Endpoint
  • Router
  • Controllers
  • Views
  • Templates
  • Channels(WebSocket)
  • PubSub
構成要素の名前だけを提示されてもわかりませんね。
いつかどこかで役に立つかもしれませんので、Phoenixの構造や作りを見てみましょう。
Phoenixのサーバサイドにおけるリクエストのライフサイクルを意識しなくても実装をしていくことができますが、この情報が頭の中にあることは有益です。少なくとも害になることはないでしょう。
  • 概略図



Note: CowboyはErlang/OTPで実装されているHTTPサーバです。

Note: PlugはElixirで実装されたWebサーバのためのアダプタを提供しています。

Note: EctoはElixirで実装されたデータベースラッパでDSLです。

  • リクエストのライフサイクル



Phoenixの構造や作りは、なんとなく分かりましたか?
実際に実装をするようになったら意識してみてください。
(なお、Channelに関しては本チュートリアルでは扱っていませんのでご注意を)

Info: 導入実績

インストール

Phoenixフレームワークをインストールし、プロジェクトの生成まで行っていきます。

アーカイブ・インストール

Phoenixのインストールはmixコマンドから行うことができます。
下記を実行してください。

Example:

$ mix archive.install https://github.com/phoenixframework/archives/raw/master/phoenix_new.ez
簡単ですね。こんな簡単にインストールできてしまいます。

プロジェクトの生成

オプションの指定はなしで、一番シンプルなプロジェクトを作ってみましょう。
さきほどのインストールでmixコマンドへPhoenixのプロジェクトを生成するコマンドが追加されています。
まずはそのコマンドを確認します。

Example:

$ mix help | grep phoenix
mix local.phoenix     # Updates Phoenix locally
mix phoenix.new       # Creates a new Phoenix v1.2.1 application
二つコマンドが表示されています。
ひとつめは、Phoenixフレームワークをアップデートするときに使います。
新しいバージョンが出たら、このコマンド使ってアップデートしましょう。
ふたつめが目的のものです。こちらのコマンドを使ってプロジェクトの生成ができます。
さっそく、プロジェクトを作ってみましょう。

Example:

$ mix phoenix.new demo_app
...

Fetch and install dependencies? [Yn] y
* running mix deps.get
* running npm install && node node_modules/brunch/bin/brunch build

We are all set! Run your Phoenix application:

    $ cd demo_app
    $ mix phoenix.server

You can also run your app inside IEx (Interactive Elixir) as:

    $ iex -S mix phoenix.server

Before moving on, configure your database in config/dev.exs and run:

    $ mix ecto.create
プロジェクトを生成すると、軽く怯むくらいディレクトリやファイルが作られています。
全てを把握するのは大変ですが、次の項目で詳しく見ていきましょう。

ディレクトリ構成

プロジェクトを生成したときに作られている、各階層のディレクトリやファイルについて詳しく見ていきましょう。

各階層のディクレトリやファイル

Phoenixでプロジェクトを生成したときのディレクトリ構成は以下になります。
使っているうちに頭に入っているでしょうから、覚える必要はありません。
ここでは、こんな構成で作られているとかというのが把握できれば大丈夫です。

Example:

説明
.gitignore GitへCommitしないファイル&ディレクトリを記述するファイル
README.md 説明書
_build/ ビルドされたファイルが格納されるディレクトリ
brunch-config.js ブランチの構成、静的資産を管理するための設定用JavaScript
config/ アプリケーションの設定ファイルが格納されているディレクトリ
config.exs “共通の設定を記述するファイル
下記の設定ファイルを環境変数により
動的に呼び出し各環境に合わせた設定を持たせることができる”
dev.exs 開発版の設定を記述するファイル
prod.exs 製品版の設定を記述するファイル
prod.secret.exs 製品版で公開しない設定を記述するファイル
test.exs テストで使う設定を記述するファイル
deps/ mixの依存関係(ライブラリ)が格納されるディレクトリ
lib/ アプリケーション内で共有する機能を格納するディレクトリ
[Application name]/endpoint.ex “PhoenixにおけるWebアプリケーションへの
すべての要求を開始する境界となるファイル”
[Application name]/repo.ex データベース操作用のモジュール(実体はEcto)
[Application name].ex アプリケーションのスーパーバイザ
mix.exs アプリケーションで利用するmixの設定を記述するファイル
mix.lock 取得した依存関係のバージョンをロックするためのファイル
node_modules/ npmで取得したパッケージを格納しているディレクトリ
package.json npmの依存関係を記述するファイル
priv/ “静的資産を格納するディレクトリ
web/static配下からコピーされる
公開したくない静的資産を格納する場合、
web/staticではなくこちらを利用するとよい”
gettext/en/LC_MESSAGES/errors.po 英語用のpoファイル
gettext/errors.pot Gettextの元となるファイル
repo/ データベース用のディレクトリ
repo/migrations マイグレーションファイル格納ディレクトリ
repo/seeds.exs DBへテストデータを作成するためのファイル
static/ “静的資産を格納するディレクトリ
priv/static配下へコピーされる”
static/css cssファイルを格納するディレクトリ
static/css/app.css アプリケーションのスタイルシート
static/css/app.css.map app.cssのソースマップ
static/favicon.ico Phoenixのシンボルマーク・イメージ
static/images 画像を格納するディレクトリ
static/images/phoenix.png Phoenixのロゴ
static/js JavaScriptファイルを格納するディレクトリ
static/js/app.js アプリケーションのJavaScript
static/js/app.js.map app.jsのソースマップ
static/robots.txt ロボットファイル
test/ アプリケーションのテストに使うファイルを格納するディレクトリ
channels/ チャネルのテストファイルを格納するディレクトリ
controllers/ コントローラのテストファイルを格納するディレクトリ
madels/ モデルのテストファイルを格納するディレクトリ
support/ テストのサポートファイルを格納するディレクトリ
support/channel_case.ex チャネルを使ったテストをするときのサポートファイル
support/conn_case.ex Plug.Connを利用するときのサポートファイル
support/model_case.ex モデルを使ったテストをするときのサポートファイル
views/ ビューのテストファイルを格納するディレクトリ
test_helper.exs テストのヘルパー
web/ “アプリケーションを格納するディレクトリ
主要なプログラムはこの配下に格納”
channels/ チャネルのファイルを格納するディレクトリ
channels/user_socket.ex デフォルトで生成されているソケットハンドラ
controllers/ コントローラのファイルを格納するディレクトリ
controllers/page_controller.ex デフォルトで生成されているWelcomeページ用のコントローラモジュール
models/ モデルのファイルを格納するディレクトリ
static/ 静的ファイルを格納するディレクトリ
static/assets 静的資産を格納するディレクトリ
static/assets/favicon.ico Phoenixのシンボルマーク・イメージ
static/assets/images 画像を格納するディレクトリ
static/assets/images/phoenix.png Phoenixのロゴ
static/assets/robots.txt ロボットファイル
static/css CSSを格納するディレクトリ
static/css/app.css アプリケーションのスタイルシートを記述するファイル
static/css/phoenix.css Phoenoxがデフォルトで用意しているスタイルシート(Bootstrap v3.3.5)
static/js JavaScriptを格納するディレクトリ
static/js/app.js アプリケーションのJavaScriptを記述するファイル
static/js/socket.js WebSocket用の内容が記述されたJavaScript
static/vendor ベンダーのライブラリなどを格納するディレクトリ
templates/ テンプレートファイルを格納するディレクトリ
templates/layout アプリケーションのレイアウトを格納するディレクトリ
templates/layout/app.html.eex アプリケーションのレイアウトを記述するファイル
templates/page Welcomeページ用のテンプレートが格納されているディレクトリ
templates/page/index.html.eex Welcomeページ用のテンプレート
views/ ビューのファイルを格納するディレクトリ
views/error_helpers.ex Web画面表示の際、エラーが発生したときのヘルパー
views/error_view.ex Web画面表示の際、エラーが発生したときに使われるエラービュー
views/layout_view.ex アプリケーションレイアウトのビュー
views/page_view.ex Welcomeページ用のビュー
gettext.ex 他言語対応用のGettextファイル
router.ex ルーティングを記述するファイル
web.ex 各機能に展開する定義が記述されたファイル

Note: 静的資産についてはbrunch-config.jsの設定が必要になることが多いので注意が必要。

ファイル名の規約

Phoenixのコマンド(Mix Tasks)を使ってい生成されているファイル名について確認してみましょう。
大体の場合は、以下の規約に沿ってファイルやモジュールを作れば問題ないと思います。
何のファイルなのか分かりやすい状態にしておくと、後々幸せになれるかもしれません。
少なくとも不幸になることはないでしょう。
ディレクトリ ファイル モジュール useモジュール
web/contorollers/ xxx_contoroller.ex XxxController use [Application Name].Web, :controller
web/models/ xxx.ex Xxx use [Application Name].Web, :model
web/views/ xxx_view.ex XxxView use [Application Name].Web, :view
web/templates/xxx/ yyy.html.eex なし なし
web/channels/ zzz_channel.ex ZzzChannel use [Application Name].Web, :channel
priv/repo/migrations/ [timestamp]_create_mmm.exs CreateXxx use Ecto.Migration
test/controllers/ xxx_controller_test.ex XxxControllerTest use [Application Name].ConnCase
test/models/ xxx_test.ex XxxTest use [Application Name].ModelCase
test/views/ xxx_view_test.ex XxxViewTest use Practice.ConnCase, async: true
test/channels/ zzz_channel_test.ex ZzzChannelTest use [Application Name].ChannelCase
test/support/ なし なし なし
xxx = コントローラ名、モデル名
yyy = アクション名
zzz = チャネル名
mmm = マイグレーション名
DBテーブル名 = xxxs (モデル名の複数系)

Note: マイグレーションファイルは操作名+テーブル名などにすると分かりやすい。

ようこそPhoenixへ!

最後にPhoenixのWelcomeページを確認して、この章は終わりにしたいと思います。

Example:

>mix phoenix.server

# "Ctrl+C"で終了できます。
以下のアドレスへアクセスしてみましょう。

URL: http://localhost:4000/

ようこそPhoenixへ!!

Note: Phoenixフレームワークのデフォルトポート番号は4000です。

おわりに

次の項目では実際にPhoenixフレームワークでデモ用のアプリケーションを作成していきます。

人気の投稿