# 背景

- このブログの管理画面で、投稿を更新したときに「更新しました」などのポップアップを出していた
- 実装当時はTurbo下でjsを使う方法がよく分かっておらず、CSSのアニメーションだけで表示/非表示させていた
- Turbo下でjsを書きたいときはStimulusを使えば良いと分かったのと、dialog要素を使ってみたかったので、ポップアップを置き換えることにした

# 目的

- ユーザーが自分のタイミングで消せて、一定時間たつと非表示になるポップアップの実装

# 変更前のコード

- `animate-slide-in-bottom` のアニメーションだけで、ポップアップをスライドインさせたり、visibilityをhiddenにしていた。

```
<% if notice %>
  <div class="absolute animate-slide-in-bottom">
    <div role="alert" class="alert alert-success">
      <span class="material-symbols-outlined">
        info
      </span>
      <span><%= notice %></span>
    </div>
  </div>
<% end %>

```

# 変更後のコード

## View

- はじめから開いた状態のdialog要素を置いて、StimulusのFlashControllerを接続した
- [methodがdialogであるformを設置して、jsなしでdialogを閉じられるようにした](https://developer.mozilla.org/ja/docs/Web/HTML/Element/dialog#html_%E3%81%AE%E3%81%BF%E3%81%AE%E3%83%80%E3%82%A4%E3%82%A2%E3%83%AD%E3%82%B0)
- `animate-slide-in-bottom` のアニメーションは要素をスライドインさせるだけにした

```
<% if notice %>
  <dialog class="bg-transparent animate-slide-in-bottom" open data-controller="flash">
    <div role="alert" class="w-64 max-w-full alert alert-success">
      <span class="material-symbols-outlined">
        info
      </span>
      <span><%= notice %></span>
      <form method="dialog">
        <button class="btn btn-xs">OK</button>
      </form>
    </div>
  </dialog>
<% end %>

```

## StimulusのController

- 10秒たったらdialogをcloseするようにした

```
import { Controller } from "@hotwired/stimulus";

export default class extends Controller {
  connect() {
    setTimeout(() => {
      this.element.close()
    }, 10000);
  }
}

```

diglog要素+Stimulusで作るポップアップ

https://biomejs.dev/guides/getting-started/

[wip]biome所感

* [Button](https://mui.com/material-ui/react-button/)のデフォルトがテキストで意外

[wip]Material UI所感

- Notionをタスク管理ツールとして使うことにおいて、一番微妙な点だと思う
- リレーションという考えに慣れている人はなんとなくで「最初のリンクされたページ」を作れるだろうけど、どう考えても直感的な操作ではない
    - 2021年ぐらいは、Notion側も結構UIをころころ変えていた気がする
    - 一般的なタスク管理ツールであれば「このイシューに紐付くタスクを登録する」ということが自然にできるUIになっていると思う

Notionのリレーションで「最初のリンクされたページ」を作りにくいことが解決できてない

# 基本方針

- Notionのデータベースを利用する
- データベース内のページでは、「何をできるようにするのか」など、目的を管理する
- データベース内のページの中でタスク管理する

# データベースのプロパティ

|プロパティ名|内容|
| --- | --- |
| タイトル | 目的を書く<br>例）○○できるようにする |
| ステータス | 基本的には、一般的な3ステータス（未着手、進行中、完了）を使う |
| 進捗日時 | 日報作成を自動化するために必要 |
| 進捗ボタン | 押すと、ステータスを進行中にする＆進捗日時を現在にする |
| 完了ボタン | 押すと、ステータスを完了にする＆進捗日時を現在にする |
| 締め切り | 一般的なもの |

# タスク登録の流れ

- データベースのページ内に、チェックボックスを使ってタスクを登録する
    - データベースのページでタスク管理をするよりも、下記のメリットがあると考えている
        - タスクの前後関係の管理が簡単
        - タスク粒度が柔軟

# タスク実施の流れ

- 進捗ボタンを押す
    - ステータスが進行中になる
    - 進捗日時が現在になる
- 登録したタスクを行い、チェックをつける
- すべてにチェックがついたら、完了ボタンを押す
    - ステータスが完了になる
    - 進捗日時が現在になる

# タスク振り返り

- 「進捗日時が今日のもの」でフィルタしたViewを作っておき、それを確認
    - これがそのまま日報になる
    - まわりに伝えるためというより、見積もり通りに1日を過ごせたかなど、セルフチェック的な役割

Notionを使ったタスク管理の現状

# 非同期コラボレーションの方法に気をつける理由

- フルタイム稼働ではない人と働くのが当たり前になってきた
    - 現在は自分もフルタイム稼働ではない
- フルタイム稼働ではない人との会話はタイムラグがあり、やり取りの回数が増えると1回の会話にとんでもなく時間がかかるので、なるべく1ラリーで終わるようにしたい

# 気をつけていること

## 回答方法を明確にする

- 回答主が回答方法を気にしなくてよくする
- 例えば実装した画面を見てほしいとき、「気になるところがあれば教えてください」と依頼するよりは「気になるところがあればこの表を埋めてください（画面名、想定していた挙動、実際の挙動の見出しのついたスプレッドシートを渡す）」などにする
    - 「書いてください」よりは「埋めてください」にする

## 論点を分かりやすくする

- 複数論点を効率的に議論できるようにする
- 例えば同じ投稿で複数の論点について相談したいとき、①②③など番号付きの箇条書きにする
- 例えば長文を添削してほしいとき、Slackにそのまま長文を貼らず、GoogleドキュメントやGoogleスライドなど、「特定の文章やページにコメントできるツール」を利用する

最近の投稿