チェックインにつけられるタグ数に制限がない

[eai04191]

webhookを通じて200文字のタグを5000個つけられることを確認しました。このようなチェックインがお惣菜コーナーなどに出てくるとレイアウトが壊滅してしまうので、どこかで制限したほうがいい気がします。

対策

• つけられるタグ数を制限する
  • 現状、タグの文字数やノートの文字数なども制限があるのでつけられるタグ数に制限があるのも不自然ではなさそう
• つけられるタグ数は無制限で、表示時に省略する
  • 逆に不自然？

資料: 別サービスでは？

ユーザーが自由な文字列でタグをつけられるサービスでの最大タグ数と1タグの最大文字数

• ニコニコ動画: 11個（うち1個はカテゴリ）・全角20文字半角40文字
• pixiv: 10個・30文字
• nijie: 無制限?・無制限?（200文字のタグを100個まで確認）
• twitter: 可変・140文字（本文の文字数に収まるだけ）
• 小説家になろう: 15個・10文字
• deviant art: 30個・不明

[shibafu528]

これは考慮漏れです。タグ数は制限する方向で行きたいです。

Note

• CSVインポート時の最大タグ数: 32
• 現在最もタグが付けられているチェックインのタグ数: 36

[shibafu528]

タグ1つあたりの文字数に触れていなかったですが、こっちは現状のまま表示で切り落としてしまっても良いかなと思っています。

ちなみに本番のtagsテーブルの最長は70文字ですが、これはユーザー入力では無さそうです。

tissue=# select length(name) from tags order by 1 desc limit 10;
 length 
--------
     70
     70
     54
     51
     48
     42
     42
     40
     40
     39

[shibafu528]

折り返してみようかと思ったけど、なんかいまいち。間が変わってしまう。CSS分からない。

タグのbadgeにinline styleで text-align: left; max-width: 100%; white-space: normal; を書いた感じ。

[eai04191]

flex, gapなら思考放棄できる

    .バッジのコンテナ {
        display: flex;
        flex-wrap: wrap;
        gap: .5ch;
    }

    .badge {
        text-align: left;
        max-width: 100%;
        white-space: normal;
        word-break: break-all;
    }

.badgeは1行前提でline-heightが1なので、line-height設定ついでに余白を足してあげてもいいかもしれない（よく触るコンポーネントにしては小さい気がしてたので）

    .バッジのコンテナ {
        ...
        gap: .6ch;
    }
    .badge {
        ...
        line-height: 1.5;
        padding: .2em .6em;
    }

[eai04191]

badgeとして出している以外に長いタグがはいると壊れるところ一覧

検索結果と関連するタグ

よく使っているタグ

最も使用したタグ