右下うにぐり

[TBSten]

機能の説明

（今の所は）トップ画面の右下でうにぐりくんが喋る機能。 うにぐりくんが喋るセリフと画像は運営メンバーが誰でも追加できるようにし、登録されているセリフの中からランダムで毎回出すようにする。 補足 ・トップ以外の画面で表示しない意図は、カードやデッキなどの情報を見るページが多いので邪魔になりそうなので表示しない方がいいだろうと言う判断です。 ・キャラはうにぐりくんじゃなくてもいいです。 ・将来的には以下の機能にも対応したいなと思ってます。

• リンクの挿入や太字・斜体などの文字装飾
• 予約投稿
• 表示期間の設定
  • 開始・終了ともにnullの場合は条件を付与しない

実装内容

• [x] 設計: 機能設計
• [x] 設計: 画面設計
  • [x] PC版
  • [x] スマホ版
• [x] 設計: firestoreのスキーマ設計
• [x] 設計: cloud storageの設計
• [x] 実装: セリフ設定
• [x] 実装: 画像選択・追加
• [x] 実装: セリフ表示
• [ ] (option) 表示期間の設定

参考文献

-

[TBSten]

スキーマ設計

UniguriComment

interface UniguriComment {
  message: string
  imageUrl: string
  authorId: string
  enable: boolean
  startAt: Timestamp  // 予約投稿機能
  endAt: Timestamp    // 予約投稿機能
  random: number      // ランダム取得
}

• bodyの文字数制限は画面設計時に決定。
  • 48文字

[TBSten]

機能設計

セリフのランダム表示 (/)

• トップページ右下にうにぐりくん画像、セリフの吹き出しを表示する。どのセリフを表示するかは毎回ランダムで選ぶ。
• 閉じるボタンを押すと消える。

セリフの管理 (/admin/uniguri-balloon)

• セリフ入力画面 (/new)
  • 管理者がタイトルを入力、画像を選択してセリフを登録できる。画像はなければ新規追加もできる。
  • プレビューを表示して確認できる。
  • できればリアルタイムだといい。
  • 追加ボタン押下でセリフが追加される。
• セリフ一覧画面 (/)
  • 登録されているセリフとその作成者の一覧を表示する。
  • 編集・削除・有効無効の切り替えができる
  • 削除時は確認のダイアログを出す。
• セリフ編集画面 (/[id]/edit)
  • セリフを編集できる。保存ボタンを押すと保存される。
  • 追加画面のUIを使いまわせそう。

[TBSten]

画面設計

ちょー簡単にだけど

https://www.figma.com/file/Kz4CQqTAyqUnUqAHDT8KFW/ZutomayoCardWiki?type=design&node-id=123-127&mode=design&t=05UVL23Vkj68vmxy-4

[TBSten]

✅ cloud storageのセキュリティルール変更しないとー

[TBSten]

ボタンもつけたい