iOS: メンション入力/表示の実装手法(1)

p0dee
May 5, 2021

機会があり、チャットやりとりにメンションの入力と表示を行う実装を行った。

こんなやつ

ありふれた機能なので簡単に実現できるかと高を括っていたら、手をつけてみると思いの外考慮すべきことが多かったので、書き残しておこうと思った。

今回は導入として、メンション入力/表示機能においてよくある仕様パターンについて整理してみる。

メンション表示と、ひとことで言い表しても、サービス間で比較すると、その仕様は意外にさまざまであることが分かる。

Twitter
Slack
LINE

たとえば、代表的なものとして「@」表記にユーザーIDとプロフィール名のどちらを採用するか、という根本部分がある。
代表的な例としては、Twitterは@p0deeのようにユーザーIDを採用しているし、いっぽうでSlackやLINEではプロフィール名を採用している。

ふたつ目に挙げるのがカーソル移動や編集操作における挙動

  • メンション表示をカーソル操作上1文字として扱うのか
  • 削除1度でメンション表示をまるごと消す(一発削除)のか、通常テキストと同様に1文字ずつ消す(逐次削除)のか

これはサービスやアプリごとに微妙かつ複雑に挙動が異なる点である。

  • 削除操作において1文字扱いする事例は多い(LINE/Slack)。つまり、メンション直後にカーソルがあった場合、その状態でバックデリートすると、メンション表示を「一発削除」する。
  • カーソル操作上1文字扱いをする例は代表的なアプリには見当たらず。これはつまり、メンション表示内にカーソルを配置することが可能(下画像)
  • ↑のようにメンション表示内にカーソルが埋もれている場合、削除操作はアプリによって様々。カーソルが埋もれていても「一発削除」が発動するケースもある一方で、従来通り逐次的に削除するケースもある。

最後に、メンション表示がユーザーID/プロフィール名のユーザー変更に追従するか。
プロフィール名表示を採用するケースでは、ユーザー変更に追従することが一般的だと感じる。(LINE/Slack/Facebookなど)
いっぽうでユーザーID表示を採用する代表格のTwitterにおいてはそうはいかない。もしユーザーが途中でIDを変更すると、それ以前に存在したそのユーザーへのメンションツイートは、古いユーザーIDを含み続けるので、結果としてメンション先に飛べないという問題が発生する。

これは当初、ユーザーID表示特有の問題かと思っていたのだが、のちに解説する通り、メッセージ文字列のデータ仕様に根差した問題だ。

今回実装したメンション表示には、それぞれ以下の仕様を採用してみた。その理由は求められる要件を満たした上で、外部仕様のシンプル性を優先したためだ。

というわけで、メンション実装の実装事例として、今後これらの観点に分解して解説してみたい。

Sign up to discover human stories that deepen your understanding of the world.

Free

Distraction-free reading. No ads.

Organize your knowledge with lists and highlights.

Tell your story. Find your audience.

Membership

Read member-only stories

Support writers you read most

Earn money for your writing

Listen to audio narrations

Read offline with the Medium app

No responses yet

Write a response