【Flutter/Dart開発】twitterのような#ハッシュタグ検索をしてみたい話(理屈編)
こんにちは、たちつてとです。
表題通りで、アプリの方には
実装してしまっているんですが、
まあまあ長くなりそうなので、今回は理屈だけ
書いてみようと思います。
暇な方は、twitter本体を見ながら
読まれるといいかもしれません。
暇じゃない方は、そもそも読まれない方が
いいかもしれません。
実装しようと思ったきっかけ
なんか今風で面白そうそうだったから。
なお、twitterはやりません。
アカウントがあるだけ。
前、課長さんに、
「twitterはやらんけど、参考のため見ることはある」
的なこと言われたんで、それも生きてますね。
タグ機能の観察
課長さんのいう通り、
まず観察するところから始めないといけません。
タグ入力の観察
twitter本体のツイート(?)作成字の表示を見ると、
#あいうえお
と入力すると、
#あいうえお
と水色になります。で、複数なら
#あいうえお #かきくけこ
など、スペースを入れればいいみたい。
暇ならやって見てください(2021/11/17時点)。
っつかいうまでもなく、ご存知の方のが多いんか。
で、なるほどと思う。
僕が一番気になったのは、
「タグ」というものを
どのような入力形式で実装してるかだったので...
そこわかったらあとは、どうとでもできます(強者の余裕)。
なお、パフォーマンス度外視。
タグ検索の観察
こちらはシンプル。
入力欄があって、完全一致したタグの
ツイート(?というんですかね)を検索。
違ってたらすいません。
予測変換で、完全一致の煩わしさをなくているものの
僕にはいらなかった機能。
僕がやって見たこと
というのも、テキスト入力して検索する機能は
すでにあるので、その方法で実装するのはつまらんです。
ヘッダーに、横スクロールできるバー？みたいなのを
作りたいなと思いまして。
もちろんこちらも完成してます。
実装してから気づいたんですが
youtubeのトップにまんまの機能がありました。
僕が取った作戦
まとめ？になります。
メモ記録アプリで実装しました。
- メモクラスに「タグ」プロパティ※
→何個も登録できるように、空白で分ける
というルールで登録。
例)
「しりとり」というメモのタグ
#りんご #ごりら #らっぱ
- 「タグ」ボタンをタップすると、
- 全データのタグを見に行く
- タグは(上述の通り)空白で分けられているので、splitで分解
- 完全一致(りんごタグをタップしたなら、具体例のしりとりメモは引っかかる等)で表示
補足
- 最初の「タグ」プロパティについて
これはtwitterの例では、不要のようにも思えました。
理由は、メモには「タイトル」・「内容」という
プロパティがありまして(これは自然なはず...)、
「内容」の中に
「#」(ハッシュタグ)を見つけることが
できれば良いからです。
詳細は知りませんが、
タグを作るときには、twitterではツイートの中に
#を埋め込んで...というのは最初に述べた通りです。
また、この
「「#」(ハッシュタグ)を見つけること」も
正規表現をうまく利用すれば、できそうな気がします。
じゃあなんでやらんかったんや
(アプリ側の処理が)めんどくさいからです。
僕がめんどくさかったわけではないです。
僕は、全データに対して検索かけるつもりだったので、
一つ一つのデータに、正規表現でチェックするのは
(アプリ側が)大変かと思ってやめました。
なお、実際のところは知りません。
やろうと思えば、「内容」の中に#を入れた時点で
青色の文字に変える、
とかも正規表現でできそうでしたが、
こちらは
明確にめんどくさいし、そんなんいらんわと思って
やりませんでした。
以上です。お疲れ様でした。
次回は実装したものについて、かければと思います。
