[連載] サイボウズLiveを作るの投稿 - Crieit

サイボウズ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

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

次

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

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

サイボウズ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対応。
体裁とか未完成の部分はぐちゃぐちゃ。