「Elixir」の記事 - Crieit

Elixir学習日記3: Elixir、最初の一歩

2021-05-15T10:54:38+09:00

学んだこと

iexでElixirのREPL(Read-Eval Print Loop)に入れる。

Elixirにおいて変数に代入するというのは、名前に一時的に値を縛りつけること。（Binding）
Cのような手続き型の言語においては、変数に実体的な値が代入されている。これを破壊的代入という。
Elixirにおいてはそのような形ではなく、名前に値を参照させている。上の例では、nに1を参照させている。のであって、この場合、nに1が入っているという箱のイメージは実態とずれていることになるのかな？
「Elixirでは値はイミュータブル」という宣言があったけれど（書籍中）、これは値の再代入が不可能であるという意味ではないようす。上の例（画像）ではnに1を代入したあと2を代入してもエラーになっていない。
これこそは、上の、「変数に実質的な値を代入しているのではなく、参照先を指定しているだけ」ということの現れではないかな。と思った。
しかしその場合、データの2はどこに存在し続けているのだろう???????
2が空中にぽっかり浮いていて、その2を名前が随時参照する...ということかしら????? それはおかしい...気がする。....

関数、モジュール

引用。

コンピュータプログラミングにおいて、プログラムの断片をひとつのまとまりとしてとらえたものを一般に「サブルーチン」と呼びます。このサブルーチンを具体的にどう呼ぶかは言語によって異なります。RubyやJavaのようなオブジェクト指向言語ではメソッド（method）と呼ばれることが多いのですが（例外もあります）、Erlang、Haskell、Elixirのような関数型言語では関数（function）と呼ばれます。PHPのように関数とメソッドを使い分ける言語もあります。また、プロシージャ（procedure）という用語を用いる言語もあります（Pascalなど）。

Tsutomu Kuroda. Elixir/Phoenix Primer Volume 1 Third Edition: The first step (OIAX BOOKS) (Japanese Edition) (Kindle の位置No.723-727). Coregenik. Kindle 版.

気になったこと

JavaScriptはどこにはいるの???
サブルーチンっていう言葉の意味を初めて知った（ちゃんと見た）気がして嬉しい。
Rubyでも、Pythonでも「関数」っていう呼び名はある気がするけど、それは便宜上みたいなこと？
実際にはRubyでは全てがオブジェクトっていうのは見たことあって、それは例えば、 putsをいきなり書いたとしても、

puts('hello!')

これは実は何かしらのグローバルオブジェクトにメッセージを送っているという意味になるのだよ、ということをどこかで見た気がする。
実行時にその見えないグローバルオブジェクトに渡されているのだよ、と。
これはやっぱり、object orientedな言語においては、何らかのオブジェクトが常にいて、そいつにメッセージを送っているというのに対し、関数型言語ではそうではないということなのかしら。
methodという言葉は、「a particular form of procedure for accomplishing or approaching something, especially a systematic or established one」（New Oxford American Dictionary）なので、establised、つまりもともとすでに出来上がっているもの（オブジェクトに対し設定されているもの）という意味が強いと理解している。functionはそれではないので...ということか。
A function, or a method? That is the question...な感じ

Elixirのモジュールは名前空間です

引用2。

IOはモジュール(module)の名前です。Elixirのモジュールは関数の入れ物（名前空間）です。

Tsutomu Kuroda. Elixir/Phoenix Primer Volume 1 Third Edition: The first step (OIAX BOOKS) (Japanese Edition) (Kindle の位置No.729-730). Coregenik. Kindle 版.

名前空間ってそういう意味だったのかあ〜〜〜〜〜〜〜〜〜〜。

次のように関数の引数は括弧で囲まなくても構いません。

IO.puts n

しかし、原則として関数の引数は括弧で囲むことが推奨されています。
Tsutomu Kuroda. Elixir/Phoenix Primer Volume 1 Third Edition: The first step (OIAX BOOKS) (Japanese Edition) (Kindle の位置No.732-735). Coregenik. Kindle 版.

Rubyライクに括弧を省略していいことになっているけど、マナー的には囲うのが一般的だよ。と。

その他学んだこと

コメントは#で。(octothorpe, またのなを pound, hash, mesh, とも。）
行全体をコメントに。後ろにつければ行末のコメントはできるけど、複数行に跨がるコメントのシステムはElixirには存在しないとのこと。これも驚いた。
文末のセミコロンはつけてもいいけど、普通は付けずに1行1センテンスで書くよ、とのこと。

次回は4章、基本データ型。

だんだんプログラミングっぽくなってきて嬉しいじゃないの。

使っている本：Elixir/Phoenix 初級① 第3版: はじめの一歩 (OIAX BOOKS) 黒田努

Elixir学習日記3: OTPって何？

2021-05-14T11:54:29+09:00

Elixirについての学習日記です。今回はOTPという用語について整理してみたいと思います。

学んだこと

OTPって何？ということを理解するには、正しい文脈のなかに置くのがよさそう。言葉を単独で理解するより、それを適切な文脈のなかに置くことで、理解が進むということが多いと思います。

とはいえ、まずは著者の引用をみてみましょう。

OTPは“OpenTelecomPlatform”の略です。かつては電信電話サービスと関係があったので“telecom”という単語が含まれています。ひとことで言えば、OTPとはErlangの標準のツール類とライブラリ群の集合体です。Erlang業界の用語法では、Erlangは言語仕様そのものであり、OTPがなければ何もできません。OTPにはErlangのコンパイラやインタプリタも含まれます。

Tsutomu Kuroda. Elixir/Phoenix Primer Volume 1 Third Edition: The first step (OIAX BOOKS) (Japanese Edition) (Kindle の位置No.362-365). Coregenik. Kindle 版.

Open Telecom Platform (OTP) とは、Erlangの標準のツール群とライブラリ群の集合体、とありますね。

「OTPには、Erlangのコンパイラやインタプリタも含まれる」と書いてあるので、確かにそれがなければ何もできなさそうです。

ErlangとOTPの関係は、言語仕様と、それが動くための仕組み、と覚えておくといいのかもしれないですね。

Elixir学習日記2: ElixirとErlang

2021-05-13T12:14:26+09:00

Elixirの勉強を進めている。

学んだこと

Elixirのファイルの拡張子は.exs。
Atomなどのエディタで普通に書いて、ターミナルから実行できる。ただし、実行環境にはDockerが必要(?)
実行環境は、Dockerという仮想環境構築ソフトで用意する。
- Dockerというのは、仮想環境を用意してくれるアプリケーション。けっこう容量が大きい。
- たとえば、Macで開発しているのに、Windows上で動くか？とかいうのを試すことができる。
- JavaがJava Virtual Machineという仮想マシン上で動くように、Elixirは—内部的には—BEAMという仮想マシンの上で実行される。
  - 現代的なプログラム言語は、実はそれぞれに専用の仮想マシンを持っていることが多い。
  - 例えば、Rubyもそれ専用のバーチャルマシン（YARVという）の上で解釈され、実行されている。
- BEAMは、もともとはErlangというプログラミング言語のために開発された実行環境。
- ErlangとElixirは違う言語だけれど、ElixirのプログラムもBEAM上で実行可能。
- 似たような関係に、JavaとKotlinがある。言語は違うが、同じ環境の上で実行可能。
- .exsファイルを実行すると、BEAM上で実行できるバイトコードに変換され、BEAMが解釈することでプログラムが実行可能になる。
- このように、ElixirはErlangと深い関係にある。
- ElixirのコンパイラがErlangで開発されている。など。

Erlangについて

Erlangの発表は1986年（Java、Rubyは1995年）。
Erlangの名前の由来はスウェーデンの数学者Agner Erlangに由来。
最近では任天堂のゲーム開発にも導入されている様子。

Elixirを実行してみる

所感

elixir hello.excを実行してから'hello, world!'が表示されるまで、結構時間がかかる（1秒未満だけど0.7秒くらい？）ので、仮想マシンで実行しているのだな〜、コンパイルしているのだな〜という感じがする。

Elixir+PhoenixのサービスをHeroku+Dockerで動かす

2019-09-25T09:50:26+09:00

Elixir & PhoenixのサービスをDockerイメージでHerokuにデプロイした時の備忘録です。

背景として、元々GCE上で動作させていましたが、GCEのIPが有料になるかもという情報があったのでHerokuに移行することにしました。ただ、無料枠で運用している限りだとIPも有料にはならないかもということなので意味はなかったかもしれません。

ただ、もう誰も使っていないサービスでデータも少ないですし、ElixirとかNodeのようなビルドがある言語のサービスは本番サーバーでビルドするとサーバーが止まってしまうため本来行うべきではないため、気分転換にDockerでのリリース形式への変更を試してみるのには良かったかなと思いました。

ちなみにHerokuではよく使われているElixir用のBuildpackがあるため、本来はそちらを利用したほうが簡単だと思います。しかし、今回のサービスは結構バージョンが古く、ちらっと試したところ動かないようでした。何か設定がおかしかったのかもしれませんが、とにかく試行錯誤するよりは元々Linuxサーバー上で動いているものなのでDocker化してデプロイするようにした方が早くて確実そうだったのでそちらの形にしました。

環境

Elixir 1.6.0
Phoenix 1.3.0

Dockerfileをつくる

できたのがこんな感じです。

FROM elixir:1.6.0-slim

RUN apt-get update && \
    apt-get install -y dbus git curl
RUN curl -sL https://deb.nodesource.com/setup_9.x | bash -
RUN apt-get install -y nodejs inotify-tools
RUN apt-get install -y --reinstall build-essential
RUN apt-get clean && \
    rm -rf /var/lib/apt/lists/*

ENV MIX_HOME=/root/.mix MIX_ENV=prod

COPY . /app
WORKDIR /app

RUN mix local.hex --force && \
    mix local.rebar --force && \
    mix deps.get && \
    mix compile

EXPOSE 4000

CMD mix phx.server

開発もDockerで行っており、本番もLinuxでデプロイ方法はメモしていたのでここは特に問題ありませんでした（余分な処理は混じっているかもしれませんが）。JavaScriptのビルドもありますがこれはローカルでビルドしてそのまま使っています。今回はもう更新しないサービスのDocker化のため処理を入れていませんが、必要であればここでビルドもしておくと良いかもしれません。

細かい部分をメモがてら解説しておきます。

MIX_HOMEを指定

環境変数としてMIX_HOMEを指定しています。

ENV MIX_HOME=/root/.mix MIX_ENV=prod

HerokuのDockerデプロイではrootユーザーではなく、その場で適当なユーザーが作られそちらで起動などのコマンドが実行されます。そのため、Dockerイメージビルド時にhexやrebarを追加した時にrootのディレクトリにインストールされたものが認識されず、サーバー起動コマンド実行時にまたインストール＆ビルドが行われてしまいます。すると時間が経ちすぎてデプロイに失敗します。そのためイメージビルド時に処理したものを正常に認識させるため、MIX_HOMEを指定しています。

dockerfile内でユーザーの作成＆指定も可能ですが、これは無効となります。

EXPOSEは不要

EXPOSE 4000を書いていますがこれは不要です。後述しますが、デプロイ時にPORTの環境変数が渡されるため、そちらでサーバーを起動するようにPhoenix側で設定する必要があります。

Phoenixの設定

config/prod.exsを設定します。元々のサーバーの設定から変えたところはとりあえずこんな感じになりました。

config :profile, ProfileWeb.Endpoint,
  load_from_system_env: false,
  url: [host: System.get_env("APP_HOST"), scheme: "https", port: 443],
  http: [port: System.get_env("PORT")],
  cache_static_manifest: "priv/static/cache_manifest.json"

config :profile, Profile.Repo,
  adapter: Ecto.Adapters.MySQL,
  username: System.get_env("DB_USERNAME"),
  password: System.get_env("DB_PASSWORD"),
  database: System.get_env("DB_DATABASE"),
  hostname: System.get_env("DB_HOST"),
  charset: "utf8mb4",
  ssl: true,
  pool_size: 5

環境変数を使う形にする

下記のように、可能な限り環境変数を使う形にします。

  username: System.get_env("DB_USERNAME"),
  password: System.get_env("DB_PASSWORD"),
  database: System.get_env("DB_DATABASE"),
  hostname: System.get_env("DB_HOST"),

今はどうか知りませんが、Phoenixのプロジェクトを初期化するとprod.secret.exsを作ってそれがprod.exsから読み込まれることで本番の設定をする、という形になっていましたのでついついその形でやってしまいがちかもしれませんが、Herokuなどで利用することを考えると全部環境変数を利用する形にしておく必要がありますし、そもそも設定も環境毎で別にする必要もなくなるため環境変数を利用する方がシンプルだと思います。

DBのpool_sizeを減らす

  pool_size: 5

Herokuの無料DBはいくつか種類があります。今回はJawsDBを使っていますが、どれにしろ最大接続数が決まっていますので、それより低くpool_sizeを設定しておかないと接続エラーで起動できなくなります。各DBの仕様を見て最大数よりもちょっと少なめにしておきましょう。

ポートの設定

前述したとおり、ポート番号は環境変数で指定されるため、それでListenする必要があります。そのため下記のように指定します。

  http: [port: System.get_env("PORT")],

URLの設定

通常は不要かもしれませんがURLの設定もしています。

  url: [host: System.get_env("APP_HOST"), scheme: "https", port: 443],

OGPを利用しているため、Routerのヘルパーで正しい完全なURLをテンプレート上に出力する必要がありました。正しく設定をしないとhttp://localhost:11242みたいなURLが出力されてしまうため、上記のような設定を追加しています。port: 443は不要かなと思いましたが、設定しておくとURLのポート表記を消すことができます。

デプロイ

諸々の設定ができたらデプロイします。これはHerokuのダッシュボードのDeployページで全部確認できますので細かくは書きませんが、とりあえず

heroku container:push web

で手元のDockerfileのイメージがビルド＆pushされ、

heroku container:release web

でpushしたイメージでリリースされます。あとはheroku runでマイグレーションを行ったり、heroku logsでログを確認しておかしなところを解決すれば動くと思います。下記は実際に動いているものです。（絵文字が文字化けしていますが他のところでは正常に表示されているので単にここの不具合のようです。もう修正はしませんが…）

https://torima.appllis.net/users/dala00

独自ドメイン

独自ドメインは解約したかったのでついでに適当なサブドメインにURLを変更しました。ただどちらにしろ独自ドメインの設定をHeroku側で行わなければなりません。ただ、どうもHerokuでの独自ドメインは有料プランでないとできないようでした。

しかし、Cloudflare経由にして無理やりSSLにすることもできるようですので、今回はそのようにしました。～～.herokuapp.comをCNAMEとしてDNSレコードを追加すればよいようです。Herokuの画面で一緒にDNS Targetというものも表示されますが、これはCloudflare経由の場合は関係ないようです。

まとめ

Buildpackがあればそれを使えば楽ですが、Dockerを使えば特殊なパッケージをインストールしたサービスも動かす事ができますので、必要に応じてHerokuのDockerデプロイを使ってみると良さそうです。CI上でビルド&pushすればGitHubにpushするだけでも可能そうです。

容量が少ないですが言語問わず無料でRDBが使えて簡単にデプロイできるのはHerokuだけだと思いますので、ユーザーやアクセスの少ない初期のサービスなどはやっぱりここが良さげだなと感じました。

ElixirのExTwitterでツイートする

2018-09-21T20:04:31+09:00

ElixirにはExTwitterというTwitter用のライブラリがある。
それでツイートしてみた。

設定

ExTwitterの説明通り。access_tokenとaccess_token_secretはユーザーのものを使うので空にしている。

  def tweet(token, secret, body) do
    ex_twitter_configure(token, secret)
    ExTwitter.API.Tweets.update(body)
  end

  defp ex_twitter_configure(token, secret) do
    conf = [
      consumer_key: Application.get_env(:extwitter, :oauth)[:consumer_key],
      consumer_secret: Application.get_env(:extwitter, :oauth)[:consumer_secret],
      access_token: token,
      access_token_secret: secret
    ]

    ExTwitter.configure(:process, conf)
  end

ログイン中のユーザーのアクセストークンを使うために、API実行前に設定をしている。

Phoenix1.3でex_adminを使う

2018-04-03T04:36:07+09:00

Phoenixではex_adminという管理画面作成パッケージを導入することで簡単に管理画面が作成できる。

smpallen99/ex_admin: ExAdmin is an auto administration package for Elixir and the Phoenix Framework

しかし依存関係やフォルダ構成の違いの問題で最新のPhoenixではうまく動かない。ただ、よくよく調べてみると下記のphx-1.3ブランチを使えばできるっぽいので試してみた。

https://github.com/smpallen99/ex_admin/tree/phx-1.3(https://github.com/smpallen99/ex_admin/tree/phx-1.3)

導入方法

phx-1.3ブランチを指定して入れる。ビルドに失敗するのでgettextのバージョンも上げる。

mix.exs

defp deps do
  ...
  {:gettext, "~> 0.13.1"},
  {:ex_admin, github: "smpallen99/ex_admin", branch: "phx-1.3"},
  ...
end

configを追加。

config.exs

config :ex_admin,
  repo: MyProject.Repo,
  module: MyProjectWeb,
  modules: [
    MyProject.ExAdmin.Dashboard,
  ]

後は通常通りのインストールと同じ。

brunch-configの修正

そのままだとex_adminのcssとかが混ざってしまう。brunch-config.jsに修正方法が追記されているので、そのとおりに修正。

またその際、node_modules内のcssをインポートしている場合はcssの設定だけ下記に修正が必要。

        "css/app.css": /^(css|node_modules)/,

モデル追加

mix admin.gen.resource User

これは特に変わりはない。ただ、1.3だとphx.gen.htmlを使っている場合、context module以下にモデルを入れていると思う。例えばAccounts.User等。

なので生成されたadmin/user.ex内のモデルの指定だけ修正しておく。

admin/user.ex(before)

  register_resource MyProject.User do

admin/user.ex(after)

  register_resource MyProject.Accounts.User do

これで動作した。

WerckerでPhoenixアプリケーションのCI

2017-12-26T06:09:15+09:00

※1.6.0にしてフォーマットを追記

WerckerにてPhoenixアプリケーションのCIをするためのwercker.yml。
DBもservicesで追加できるので専用のコンテナを準備する必要がない。

box: shufo/phoenix:1.6.0

services:
  - id: mariadb
    name: mysql
    username: root
    password: ""
    tag: latest
    env:
      MYSQL_ALLOW_EMPTY_PASSWORD: "true"

build:
  steps:
    - script:
        name: mix format --check-formatted
        code: mix format --check-formatted

    - script:
        name: mix deps.get
        code: mix deps.get

    - script:
        name: mix test
        code: mix test

ほんとはbrunchのビルドもしたかったのだがこのboxだとnpmコマンドが見つからない。
自分で作っているboxを使えば良いのだが、面倒だったのでとりあえずelixir側だけにした。

サイボウズLiveを作る-第6回-イベント作成

2017-12-21T06:19:58+09:00

あと一つ大きなメイン機能であるイベント機能が残っていたのでそちらを作成した。

色々見てみた結果、とりあえず全部FullCalendarに置き換えればいいだろうと言う結論に至った。

FullCalendar - JavaScript Event Calendar

期間や範囲切り替えもあるし、これだけで一通りまかなえる気がする。

イベント予定メニューマスタ

本家にはない(?)が、予定メニューにも色を付けられるようにした。

一覧もvuedraggableを使ってドラッグ＆ドロップで簡単に並び替えできるようにした。

面倒かと思ったが、元々のテンプレートをとりあえずコピーから始められるのでそれほどでもなかった。

	予定メニュー名
		編集削除

保存側。

  def update_schedule_categories_order(group_id, ids) do
    Enum.with_index(ids)
    |> Enum.each(fn{id, index} ->
      schedule_category = get_schedule_category!(id, group_id)
      update_schedule_category(schedule_category, %{"display_order" => index + 1})
    end)
  end

カレンダー

こちらも面倒かと思ったが、データの取得はコールバックに作ればいいだけだったので非常に楽だった。

取得側。
こういう重そうな範囲検索は、大規模サービスだとどう実装してるのか気になる。
日毎にデータを分けてるのかな。（日を子データにしてるとか）大変そう。

  def list_schedules_for_range(group_id, start_date, end_date) do
    query = from s in Schedule,
      where: s.group_id == ^group_id
        and (
          (s.start_date < ^start_date and ^end_date < s.end_date)
          or (^start_date <= s.start_date and s.start_date <= ^end_date)
          or (^start_date <= s.end_date and s.end_date <= ^end_date)
        )
        and is_nil(s.deleted_at)
    Repo.all(query)
    |> Repo.preload(:schedule_category)
  end

不足点

リピートの予定とか放置してる。

あと、設備とかどこで使ってるんだろうと思ったら、アクセスの方法によって登録できたりするっぽい。
完全に抜けてる。

わかりづらいなここは。急にグループ関係なしの画面になるし意味が分からない。

次

テスト放置なので整備しようかと思う。
そっちの方が面白くて書くこと多かったりするかもしれない。
ソース書いてるのVueばっかりだし。

Copying live

Systemdを使ったPhoenixの本番デプロイ詳細例

2017-12-19T06:24:49+09:00

Elixir Advent Calendar 2017 - Qiita

19日目。

サーバーを準備し、コンテナを使わずに運用できるところまでの準備まで一通りまとめてみた。
Systemdで動作させる。

（以前残したログをまとめているだけなので正確でない可能性あり）

前提

Elixir1.5
Phoenix1.3
Debian

初期設定

最初だけ本番で調整したものをコミットしたりもするのでgitもちょっと設定。

sudo apt-get update
sudo apt-get install -y git dbus
sudo timedatectl set-timezone Asia/Tokyo
git config --global user.name "name"
git config --global user.email "email"

Elixir & Phoneix & Node.js

curl -sL https://deb.nodesource.com/setup_8.x | sudo -E bash -
wget https://packages.erlang-solutions.com/erlang-solutions_1.0_all.deb && sudo dpkg -i erlang-solutions_1.0_all.deb
sudo apt-get update
sudo apt-get install -y nodejs inotify-tools esl-erlang elixir
mix local.hex --force
mix local.rebar --force
mix archive.install https://github.com/phoenixframework/archives/raw/master/phx_new.ez --force
sudo apt-get install --reinstall build-essential

DB

MySQLとかPostgreSQLとか。
普通は別サーバーだろうし省略。

ビルド

ssh-keygenかtokenかでcloneできるように準備。
適当なので環境変数とかユーザーは適宜いい感じにしてもらった方が良いかもしれない。

git clone ********.git
cd appdir
mix deps.get --only prod
sudo MIX_ENV=prod mix compile
cd assets
npm install
sudo npm install -g brunch
brunch build --production
cd ..
sudo MIX_ENV=prod mix phx.digest
sudo MIX_ENV=prod mix ecto.migrate
sudo MIX_ENV=prod mix phx.server

とりあえずここまでで動くか確認する。

Let's Encrypt

省略。下記の記事に一応詳細は書いてある。

PhoenixでLet's EncryptによるSSL - アルファブレンドプログラミングチップス

Systemd

sudo vi /etc/systemd/system/myapp.service

[Unit]
Description=My app

[Service]
WorkingDirectory=/home/username/appdir

Restart=always
Environment=MIX_ENV=prod HOME=/root
ExecStart=/usr/local/bin/mix phx.server

[Install]
WantedBy=multi-user.target

sudo systemctl enable cybozulive
sudo systemctl start cybozulive

運用

pull, compile, brunch build, digest, migrate, restart

サイボウズLiveを作る-第5回-グループへ参加

2017-12-06T06:25:29+09:00

とりあえず一旦グループにメンバーを追加する機能を進めてみた。

メールアドレスは今のところ登録してほしくないし、とりあえずそれ無しでできる部分だけ進めた。

具体的には本家と同じで、招待URLを使ってそこからアクセスしてログインすればグループ申請となる形。

というか、本当にほとんどそれくらいなので何も書くことがない。
とりあえず、ただそのまま処理を書いてるだけなので何の役にも立たないがソースでも貼っておく。


  def join_request(conn, %{"id" => id, "invitation_hash" => invitation_hash}) do
    user = Auth.get_user(conn)
    group = Groups.get_group!(id)
    cond do
      invitation_hash != Group.invitation_hash(group) ->
        redirect(conn, to: "/")
      user ->
        Groups.create_invitation(user, group)
        redirect(conn, to: group_path(conn, :index))
      true ->
        conn
        |> put_layout(false)
        |> render("join_request.html", group: group, invitation_hash: invitation_hash)
    end
  end

ログインしていたらそのままメッセージもなく申請データが登録されて自分のページに戻るので、
非常にわかりづらい。さすがに直した方がいいかもしれない。

承認。

  def approve(conn, %{"group_id" => group_id, "id" => id}) do
    user = Auth.get_user(conn)
    group = Groups.get_group!(group_id)
    invitation = Groups.get_invitation!(id, group_id)
    invitation_params = %{"closed_at" => Timex.now}

    result = Repo.transaction(fn ->
      Groups.update_invitation!(invitation, invitation_params)
      Groups.create_group_user!(invitation.user, group)
    end)

    case result do
      {:ok, _changes} ->
        conn
        |> put_flash(:info, "承認しました。")
        |> redirect(to: invitation_path(conn, :requests, group_id))
      {:error, _any} ->
        conn
        |> put_flash(:error, "エラーが発生しました。")
        |> redirect(to: invitation_path(conn, :requests, group_id))
    end
  end

あとはページ上に表示されているユーザーのリンクは単純なusersのshowだったが、
関係ないグループのユーザーも表示できてしまうので全てGroupUserのリンクに変更し、
同じグループのユーザーしかアクセスできないものにした。
自分の編集画面などはid等のパラメータなどもなしのURLに変更。

考察

自分の知っている人を新たなグループに招待する機能もサイボウズLiveにはあり、
それは便利なので必要かなと思う。
今回は申請、許可的な機能だがそちらは招待なので参加する側が許可すれば参加できる、
今回とは逆の機能となる。
招待テーブルを作るのか、フラグで分けるのか、また気が向いた時に本家の画面を見て決めたりなどが必要。

次

次はイベント機能を進めようかと思う。
それが終わったら今テストを全く触っておらず、自動生成されたままのためエラー出まくりなので、
そっちを一旦整備もしたい。修正したり要らないものを捨てて絞ったり。
（なんとなくそっちの方が書くことがあるような気がする）

あとはイベント機能に伴い、今まで放置してたタイムゾーン問題も少し時間をかけて調べる時間を取ろうと思う。

個人開発のだいたいの流れの例

2017-12-05T07:03:13+09:00

個人開発 Advent Calendar 2017 - Qiita

の5日目。

概要

普段から時間があればプログラミングで遊びつつ何か作成している。
せっかくなので誰も使わなくてもリリースしたりしていて、
それらは特に仕事でやっているのとかけ離れているものではないので、
適当に箇条書き程度で紹介。

今作っているもの

ちょっと前にサイボウズLiveが終了すると発表された。
自分も丁度お客さんが使っていてそこでやり取りをしていた。
丁度Elixir & Phoenixを使って色々遊んでいたところに飛び込んできたニュースで、
丁度別のアプリケーションをキリのいいところまで作り終えたところだったので、
サイボウズLiveをコピーして作ってみようと思い作成中。

成果物は下記。

Copying live

ちなみに当ブログで連載中。

サイボウズLiveを作るカテゴリーの記事一覧 - アルファブレンドプログラミングチップス

進め方

とりあえずどんどん出来ていくのが楽しいので、細かいところは無視してどんどん自分のやりたいところを先に進める。
細かいところは後回し。
今もデータ登録が中心で削除等の細かい機能は放置している。

デザイン

デザイナーじゃないのでやっぱりBootstrap。
特に

Bootstrap

がおしゃれで何にでも使えるので良いと思う。
JavaScriptのフレームワーク毎にMaterial Desginのライブラリがあったりもするのでそういうのでもいい。

とりあえずの画面

掲示板

Todo

エディタ

Visual Studio Code

今のところ知っている中では軽量＆高機能＆設定手軽なものでベストだと思う。

開発環境

docker-composeを使う。Linux Mintなのでただインストールして使うだけ。

Elixir & Phoenixだと下記のような感じ。
見てのとおりだがPhoenix & MySQL & phpMyAdmin。
Phoenixのイメージは誰かがどこかで公開していたのを参考にしただけのもの。

version: '2'
volumes:
  mysql_data:
    driver: 'local'
services:
  mysql:
    image: mysql:8.0
    volumes:
      - mysql_data:/var/lib/mysql
    ports:
      - "3310:3306"
    environment:
      MYSQL_ALLOW_EMPTY_PASSWORD: "true"

  phpmyadmin:
    image: phpmyadmin/phpmyadmin
    environment:
      - PMA_ARBITRARY=1
      - PMA_HOST=mysql
      - PMA_USER=root
      - PMA_PASSWORD=
    ports:
      - 8100:80

  cybozulive:
    image: dala00/phoenix:1.3.0
    env_file: .docker-env
    volumes:
      - .:/var/opt/app
    ports:
      - "4000:4000"
    tty: true
    stdin_open: true

ソース管理

自分の場合、ソースを公開していいならGitHubに置くし、
多少大きくてあまり公開したくないものはBitbucketに置いている。
(Bitbucket最近重い気がするけど)

フロント

Vueを使っている。
Phoenixは最初からbrunchが入っているのでVueを入れたらそのまま使える。
Phoenixの開発サーバーに元々ウォッチ機能がついていて、htmlもcssもJavaScriptも全部保存時に勝手に画面を更新してくれるので何も考える必要がない。
そのためjQueryを使う意味すら無いしもう全員Vueで良いと思う。
なにより簡単に適当に一部のみコンポーネント化できるのが最高。

PHPならLaravelも最初からVueが使える。
もしフレームワークに何もついてなくてもwebpack導入してwatchするだけなのでとりあえずもうVueを使っておけばいいと思う。

公開

せっかく作ったならぐちゃぐちゃでも公開していったらいいと思う。

僕の場合、PHPならさくらのスタンダードを１つ借りてるのでそちらにアップして公開する。
（バージョン上げると動かなくなるものも入っているのでもうひとつ借りたくなるところ…）

それ以外の場合、VPSとかでも１アプリケーションごとに500円とか千円とかかかってしまい、
積み重なっていくとモチベーションに影響してしまうので、最近だと全部GCEの無料のプラン。
Herokuでも良いかもしれないがどうもDBの接続が安定しないようなのでちょっと不安。

Phoenixのデプロイ方法はAdvent Calendarの別の記事で紹介する予定。

あとSSLは例えしょうもないアプリでももう必須だと思う。
焦らずにリリース前の、失敗してサーバーをぐちゃぐちゃにしても問題ないタイミングでちゃんと設定しておきたい。

サイボウズLiveを作る-第4回-Todoをざっと

2017-11-28T07:21:48+09:00

掲示板をざっと作成後、次は次に簡単そうなToDoを作成することにした。
とりあえずざっと下記を作成した。

ToDoの新規登録、編集、コメント追加

特に目新しいこともなく、コメントなどはほとんど掲示板と同じ。
黙々とシンプルに作成したので、特筆することはなかった。

担当者選択UI

本家だとselectのマルチセレクトで複数の担当者を選択できるように実装されている。
昔は良く使われていた気がする。ちゃちゃっとjavascriptで作成できる。

ただ、今の時代はそういったUIはnpmでインストールするだけ。
丁度良さそうなものを見つけたので導入した。

GitHub - SortableJS/Vue.Draggable: Vue component allowing drag-and-drop sorting in sync with View-Model. Based on Sortable.js

READMEを見ると分かるように、ドラッグで並び替えも、左右のボックスで入れ替えもできる。
Vueのコンポーネントを作成してhiddenタグを自動的に更新するだけで実装できる。

コンポーネントの実装も非常にシンプル。

呼び出しも簡単。

]">

締め切り日時選択

これもよくあるのはinputタグをクリックすると日付選択UIが現れるもの。
ただ、inputタグを使って直接入力させる必要性も感じなかったので完全にDatepickerとTimepickerで選択させるようにした。

Datepicker。左下のリンクをクリックで表示される。ゴミ箱クリックでnullとなる。

Timepicker。

実装も特筆することはなくシンプル。Timepickerもほとんど同じ。

マークダウン

次

次はスケジュールを作成、としたいところだが、グループウェアなのにユーザーが自分しかいないのが意味不明なので、
とりあえず招待とかを作ろうかと思う。
本当はメールアドレスのような個人情報は登録したくはないのだが…非ユーザーを招待するならそれしかなさそう。
（なんかあるのかな）

Copying live

サイボウズLiveを作る-第3回-トピック登録まで

2017-11-21T06:49:27+09:00

グループは作成できたので次は実際のコンテンツを作成していく。
とりあえず仕様的にシンプルそうな掲示板を作ってみることにした。
（もしかすると細かい機能が多くあるのかもしれないが）

処理的に特筆するところは特に何もなかったが、
投稿に関してはwysiwygエディタを入れた。

最終的に画像のアップロードも必要だと思うので有料になるCKEditorは無し。
最近のスタンダードがよく分からなかったのでStarやForkが非常に多い下記を入れてみた。

GitHub - quilljs/quill: Quill is a modern WYSIWYG editor built for compatibility and extensibility.

昔のwysiwygエディタといえば、textareaをターゲットにして起動すれば勝手にぜんぶやってくれたが、
これは多分SPA等も考慮されていると思うので勝手にPOSTまで出来るようにはなっていない。
そのため自前でハンドリングしてhiddenタグに入れる。

import Quill from 'quill';

$(function() {
  $('div.richtext').each(function() {
    const $this = $(this);
    const quill = new Quill(this, {
      theme: 'snow',
    })
    $this.data('quill', quill);
    quill.on('text-change', function(delta, oldDelta, source) {
      const html = $this.find('.ql-editor').html();
      this.next('input[type=hidden]').val(html);
    }.bind($this))
})

  
    <%= label f, :body, "本文", class: "control-label" %>
    
      <%= raw(Ecto.Changeset.get_field(@changeset, :body)) %>
    
    
    <%= error_tag f, :body %>

上記は元々jQueryで書いていたが下記はVueで書きなおしたもの。

呼び出しも下記で良いので非常に簡単。新しい時代が来てるなぁという感じ。

htmlを取る方法も特に無いようなので、
issueを探ってみたら.ql-editor内をそのまま使えばいいとの事だったのでそのようにした。

現在までの完成分はこちら。
とりあえずコメント投稿まで。カテゴリも設定、絞り込みできるようにした。
その他の処理はほぼエラー。
あとはタイムゾーンの設定をしていないので時刻がおかしい。

Copying live

サイボウズLiveを作る-第2回-グループ登録まで

2017-11-14T07:04:08+09:00

アイコンは出来たので引き続きグループの作成機能。

本家だととりあえず一番簡単なパターンでは、グループ名だけ入力すれば登録できる。
とりあえずそこまでを作った。
アイコンも選択できるようにしている。

実装は非常にシンプルで、まずモデルに所属メンバー用のアソシエーションを設定。マイグレーションなどもマニュアル通り。

  many_to_many :users, Cybozulive.User, join_through: "groups_users"

登録処理もシンプル。

  def create(conn, %{"group" => group_params}) do
    user = Auth.get_user(conn)
    changeset = Ecto.build_assoc(user, :groups)
    |> Group.changeset(group_params)
    |> Ecto.Changeset.put_assoc(:users, [user])

    case Repo.insert(changeset) do
      {:ok, group} ->
        conn
        |> put_flash(:info, "グループを作成しました。")
        |> redirect(to: group_path(conn, :show, group))
      {:error, changeset} ->
        icons = IconRepo.get_select_icons(user.id)
        render(conn, "new.html", changeset: changeset, icons: icons, show_group: false)
    end
  end

とりあえずここまでを公開した。

Copying live

https://live.alphabrend.com

GCEのf1-micro、1台にDBまで全部詰め込み。
Let's EncryptでSSL対応。
体裁とか未完成の部分はぐちゃぐちゃ。

arc_ectoでDBにファイル名を直接保存したい時

2017-11-10T07:06:16+09:00

GitHub - stavro/arc_ecto: An integration with Arc and Ecto.

を使うと、postされた画像を簡単に登録することができる。

ただ、そのためにはmodelの型も専用のものに変えなければいけないので、
string型でなくなってしまう関係で直接ファイル名を保存することが出来ない。

とりあえず下記のようにすると保存することが出来た。

  %Icon{id: current_id, icon: %{
    file_name: filename,
    updated_at: nil
  }}
  |> Repo.insert!

updated_atはパターンマッチの関係でエラーになるので入れている。

PhoenixのTaskでDBにアクセスする

2017-11-08T06:42:30+09:00

PhoenixでTaskを試した。

実際にはPhoenixではなくmix自体のtaskを作成して実行するだけ。

ただ、単にtask内でRepoを使ってDBアクセスしようとすると下記のようなエラーが出る。

repo App.Repo is not started, please ensure it is part of your supervision tree

どうもRepoはちゃんとスタートさせなければならないらしい。

最終的に下記の様にRepoの初期化を入れることで動いた。

defmodule Mix.Tasks.Aiue.Oooo do
  use Mix.Task

  alias App.Repo
  alias App.User

  import Mix.Ecto

  @shortdoc "aiueo"

  @moduledoc """
    This is aiuoe
  """

  def run(args) do
    Mix.shell.info "=== Active user ==="

    ensure_repo(Repo, args)
    ensure_started(Repo, [])
    user = Repo.one!(User)

    changeset = User.changeset(user, %{email: "[email protected]"})
    Repo.update!(changeset)

    IO.inspect(user)
  end
end

サイボウズLiveを作る-第1回-アイコン登録まで

2017-11-07T06:28:04+09:00

概要

サイボウズLiveが終了するとのこと。

無料グループウェア「サイボウズLive」サービス終了のお知らせ | サイボウズ株式会社

丁度他のアプリケーション作成が一区切りついたところだったので、今度はサイボウズLiveのコピーを作ってみようと思う。
ざっと見てみたらそんなにページ数も多くなさそうな気もするし。

一通り作ってはみようと思うが特に代替、移行先として呼びこむつもりはない。
そんなアクセスが来たら止まるだろうし。

仕様

Elixir1.5
Phoenix1.3
Bootstrap Material Design

JavaScriptはAngularかVueを使おうかと思ったが、面倒だったことを思い出すと嫌になったのでやめた。
ソロだし付属のbrunchでES6を使ってjQueryで綺麗に書けば十分。

※PhoenixでVueも簡単に使えるようなので置き換え中。

とりあえず作ったところ

認証

とりあえずTwitterでログインできるようにした。

GitHub - ueberauth/ueberauth_twitter: Twitter Strategy for Überauth

ユーザー作成やログイン部分は自分で勝手にやりたかったので、
ログインURLの発行とcallbackのパラメータ構築だけ任せ、
取得したパラメータであれこれやっている。

defmodule Cybozulive.AuthController do
  use Cybozulive.Web, :controller

  alias Cybozulive.UserRepo

  plug Ueberauth

  def request(conn, _params) do
    Ueberauth.Strategy.Helpers.callback_url(conn)
  end

  def callback(%{assigns: %{ueberauth_failure: _fails}} = conn, _params) do
    conn
    |> put_flash(:error, "Failed to authenticate.")
    |> redirect(to: "/")
  end

  def callback(%{assigns: %{ueberauth_auth: auth}} = conn, _params) do
    user = UserRepo.find_or_create!(auth)
    conn
    |> Cybozulive.Auth.set_user(user)
    |> redirect(to: "/")
  end
end

アイコンの登録

とりあえず掲示板とか作りたいところだが、

掲示板作るにはグループが要る
グループ作るにはアイコンが要る

ということで面倒だがとりあえずアイコンを登録できる機能を作った。

phoenix.gen.htmlとarc_ectoでちゃちゃっと作れた。
そのままだと画像は公開されないので、

Elixir / Phoenix — Uploading images locally (With ARC)

にあるとおり、Plug.Staticの設定で公開できる。

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

（公開側はBootstrap Material Designだが、管理画面は面倒だし本当は作りたくなかったのでPhoenixデフォルトのBootstrap）

全部これで登録はやってられないのでスクリプトで一括登録で作成予定。

Phoenixで作った請求書作成システムをリリース

2017-10-26T06:27:36+09:00

Elixir & Phonenixで作った請求書作成システムをリリースした。

元々Misocaを使っていたが、弥生の傘下に入ってからフリープランでは５通までしか作成できなくなってしまった。

別に良いかと思っていたが、ちっちゃい請求が続いたりするとどうも超えてしまうのではないかと怖くなることが多くなった。
そのため、ちょうどElixir & Phoenixで遊んでいたので自分で作ったら良いんじゃないかと思い作成してみたところうまくいった。

請求書作成サービス

Bill Builder

基本的には自分で使う用なので質素でシンプル。
別に使いたい人がいたら使ってもらっていいと思う。
まだステージングサーバーもなくDBバックアップもしてないけど、
自分で使っているのでそのうちする予定。

安定するかは不明だけど、自分で使わないといけないから使える程度にはメンテナンス＆拡張する予定。

本番環境

Elixir 1.5
Phoenix 1.3
MySQL 5.7
Google Compute Engine f1-micro
Systemctlによるサービス実行
SendGrid
Let's Encrypt
bootstrap material design

開発環境

docker-composeに下記のようなサービスを入れている。

Phoenix
MySQL
phpMyAdmin
PDF作成

Elixir & Phoenixで開発してみた感想

非常に良い。とにかくphoenix.gen.htmlでモデル、コントローラ、テンプレートまでざっと作成してくれるのが良い。
それだけで参考になるしちょっといじれば動くのでとてもスムーズに色々進む。
テンプレートがデフォルトでbootstrapなのもいい。
phpだとCakePHP3も同様に最高だった。Laravelはコントローラのメソッドが空なのでやる気をなくす。

Elixir自体が今まで使っていた言語とちょっと違うので癖があり躓いたりしたが、
慣れたら本当に気持ちよく迅速に開発できそう。

デプロイ

色々Elixirのデプロイ方法もあるみたいだが、とりあえず今は手動。
頻繁なリリースもないし、今のところ誰も使ってないのでとめちゃいけないということもないし。

とはいえ、手動でもデプロイは非常に簡単。

gitでpull
compile
cssやjsいじってればそちらもビルド
マイグレーション追加してたらmigrate
準備出来たらsystemctlでrestart

多分restartの瞬間くらいしかダウンタイムも無いと思うのでのんびりできる。
Elixir自体が自分でサービス稼働させているからこその利点。

PhoenixでLet's EncryptによるSSL

2017-10-11T06:42:22+09:00

前提

PhoenixでLet's Encryptにより無料でSSL対応を行う。

Elixir 1.5.2
Phoenix 1.3.0

手順

基本的には

Phoenix/Elixir App Secured with Let’s Encrypt – Andrew Forward – Medium

で書かれている通り。

とりあえずサーバー起動。

MIX_ENV=prod mix phx.server

サーバーを起動したまま.well-knownフォルダを更新しなければならないのでそのための設定を行う。

まず.well-knownフォルダ以下をそのままアクセスできるようにするための設定。

lib/プロジェクト名/web/endpoint.ex
にてPlug.Staticの設定に.well-knownを追加する。

plug Plug.Static,
 at: "/", from: :yourproject, gzip: false,
 only: ~w(css fonts images js favicon.ico robots.txt .well-known)

これで
_build/prod/lib/プロジェクト名/priv/static/.well-known
以下がそのまま公開され、
http://yourdomain.com/.well-known/****.html
のような感じでアクセスできるようになる。

ちなみに、設定を変更したらアプリケーションを再起動する必要があると思う。
また、再起動すると作っていた.well-knownは消えるので混乱しないよう注意。

うまくいったらあとはcertbotで証明書を発行する。

そして設定を更新。

config :yourproject, Yourproject.Web.Endpoint,
  http: [port: 80],
  https: [port: 443,
    url: [host: "yourdomain.com", port: 443],
    keyfile: "/etc/letsencrypt/live/yourdomain.com/privkey.pem",
    cacertfile: "/etc/letsencrypt/live/yourdomain.com/chain.pem",  
    certfile: "/etc/letsencrypt/live/yourdomain.com/cert.pem"],
  force_ssl: [hsts: true]

これで完了。更新などもそのまま普通にできるようになる。

Now your site is being served up only through SSL directly through Phoenix (no Nginx required).

と書かれているので別のWEBサーバーを使う冗長な方法もあったのだろうか。
とはいえ_build以下を使う方法なので今後のバージョンによってはできなくなる可能性などもあるのかもしれない。

Phoenixで他のフォルダの共通テンプレートをrenderする

2017-10-03T06:19:23+09:00

自動生成されたedit.html.eexのformテンプレート読み込み部分を見ると、下記のようになっている。

<%= render "form.html", changeset: @changeset,
                        action: post_path(@conn, :update, @post) %>

ファイル名しか指定されていないので他の共通フォルダなどに入れている場合は指定が出来そうもない。

共通フォルダなどのファイルを指定したい場合どうすればよいかというと、
よくよく調べるとrender関数は第１引数にViewを指定することもできる。

また、自動生成されたプロジェクトのViewを見てみると、LayoutView等、コントローラに連動していないView等もある。

つまり、まず勝手に使用したいフォルダのViewを作成し、

defmodule App.CommonView do
  use App.Web, :view
end

それを使ってrenderを呼べばいい。これでtemplates/common/test.html.eexが表示される。

<%= render App.CommonView, "test.html" %>