リバースエンジニアリングとGoでSlackの認知負荷を下げる / Reducing cognitive load in Slack with Reverse-engineering and Go

@2024-03-22 さくらインターネット 社内 Go Conference #1 での発表資料

Transcript

1. @2024-03-22 さくらインターネット 社内 Go Conference #1 リバースエンジニアリングとGoでSlackの 認知負荷を下げる
2. 小 田 知央 / Tomohisa Oda @linyows • 福岡市在住 • Fukuoka.go 主催 • 趣味は筋トレとテニス • OSS: Octopass, Dewy, Rotion, Warp… • https://tomohisaoda.com • https://twitter.com/linyows
3. Slackにおける認知負荷の課題
4. 新 人 のお仕事の 一 つはまず仲間を覚えること • 昨年11 月入 社、さくらインターネット研究所 未踏プロダクトグループに配属 • フルリモートにおいてコミュニティは主にSlack • チームや同じ部署の仲間はVideo Chatなどを通じ、実在する 人 と名前、 Slackのアイコンと名前が 一 致し覚えやすい • 仕事の領域を拡 大 しようとすると他部署のチャンネルを 見 て情報収集すること になる Slackにおける認知負荷の課題
5. 他部署のSlackアイコンと名前覚えにくい問題 • アイコンが動物や 車 やアニメで 自 由（良いこと） • 人 とBotとの区別が瞬時につきにくい • 人 は物体より顔を認識し処理する能 力 が 高 く、顔の優越性効果と呼ばれる https://en.wikipedia.org/wiki/Face_superiority_effect • インターネット上のアイコンGithub、Twitterと同じであれば覚えやすい • しかし、統 一 されてないことが多い • リアルに集まる場合に顔と名前がまるで 一 致しない Slackにおける認知負荷の課題
6. ユーザのアイコンが顔以外の場合
7. VUBOBLBTBLVSB 0TIJSBTF UTBUPTBLVSB JTBUPTBLVSB 
   ". 
   ". 
   ". 
   1. ϝϯςφϯεͷ࡞ۀ׬ྃ͠·͕ͨ͠ɺରԠ࿙Εͳ͍͔֬ೝ͓ئ͍͍ͨ͠Ͱ͢ʂ ຊ೔ͷϛʔςΟϯάͷϑΝγϦςʔγϣϯ͸
   !BZPTIJPLB
   Ͱ͢ "11 *E
   EDDFF
   ͷσϓϩΠ͕੒ޭ͠·ͨ͠ɻݕূ࡞ۀΛ͓ئ͍͠·͢
   !EFWBUFBN 0TIJSBTF 
   ". "11 ͖ͬ͞νϥݟ͚ͨ͠ͲΞϨ͕଍Γͯͳ͔ͬͨؾ͕͢ΔɻΞϨͬͯΞϨͩΑ ͓னௐୡ͖ͯ͠·͢ʂϚοΫʹ͠Α͏͔ͳʙ
   🍔
8. ユーザのアイコンが顔の場合
9. VUBOBLBTBLVSB 0TIJSBTF UTBUPTBLVSB JTBUPTBLVSB 
   ". 
   ". 
   ". 
   1. ϝϯςφϯεͷ࡞ۀ׬ྃ͠·͕ͨ͠ɺରԠ࿙Εͳ͍͔֬ೝ͓ئ͍͍ͨ͠Ͱ͢ʂ ຊ೔ͷϛʔςΟϯάͷϑΝγϦςʔγϣϯ͸
   !BZPTIJPLB
   Ͱ͢ "11 *E
   EDDFF
   ͷσϓϩΠ͕੒ޭ͠·ͨ͠ɻݕূ࡞ۀΛ͓ئ͍͠·͢
   !EFWBUFBN 0TIJSBTF 
   ". "11 ͖ͬ͞νϥݟ͚ͨ͠ͲΞϨ͕଍Γͯͳ͔ͬͨؾ͕͢ΔɻΞϨͬͯΞϨͩΑ ͓னௐୡ͖ͯ͠·͢ʂϚοΫʹ͠Α͏͔ͳʙ
   🍔
10. 当然、識別しやすかったのは顔でしたよね?
11. Slack上の認知負荷を下げたい！
12. リバースエンジニアリングを試みる
13. 顔写真といえば社員証 • 社員証の顔写真はHR向けのSaaSの〇〇〇（以下H）にある • HはAPIを提供しているがAPIの利 用 権限がなさそう • とはいえブラウザでは 見 えているのでDevToolsのネットワークタブで通信を 眺める • 最近のWebサイトはClientサイドでレンダリングするアーキテクチャが多い ので 大 体内部APIをClientから叩いている • すると欲しい情報らしきendpointを 見 つけることができる リバースエンジニアリングを試みる
14. 非 公開APIに必要な情報を探す • DevToolsを使ってendpointへのリクエストヘッダーやボディから通信に必要 な情報をまるっと抜き出す • POST methodであればボディは必須だろうし、ヘッダーはAuthorizationや Cookie、X-* みたいな拡張定義でCSRF tokenなどが必須になる • 雑にCurlコマンドを使って検証してみて、可変になっているparamsがないか チェックする（リクエストごと可変だと 面 倒） • あとPaginationの実装 手 法の確認など リバースエンジニアリングを試みる
15. 15 PoC 社内向けにつきモザイク
16. 顔写真をより良くする
17. 社員証は 大 体仏頂 面 なので笑わせたい • 自 分の社員証を気に 入 っている 人 ばかりではないだろう • 誰であるか認識可能でNotionのあれみたいにデフォルメされた ものはどうだろうか • 全社員のデータをアップロードするわけにはいかないが試しに Stable Diffusionっでいい感じのものができるのか • Stable DiffusionのAPIは少なくとも520px以上が必要で使える のは120pxのため、Upscale APIの後にPromptで画像 生 成する 顔写真をより良くする /PUJPOͷΠϯλϏϡʔهࣄͷ ͨΊʹɺ/PUJPOͷΠϥετϨ ʔλʔʹॻ͍ͯ΋Βͬͨࢲͷ ΞΠίϯɻ
18. 18 IUUQTQMBUGPSNTUBCJMJUZBJEPDTBQJSFGFSFODF API DocにGoのリクエスト例がある • Multipart form dataで画像をアップロードするだけ • 以下は簡略化のためにエラー処理を消している
19. 19 Original 3d-model, analog- fi lm, anime, cinematic, comic-book, digital-art, enhance, fantasy- art, isometric, line-art, low- poly, modeling-compound, neon-punk, origami, photographic, pixel-art and tile-texture Style Presetを 色 々 試す
20. Promptが微妙なのもあるが、まるで違う 人 になっ てしまっていた
21. 諦めて、画像のトリミングだけを 行 う
22. 22 画像を正 方 形に切り取る • 標準の画像ライブラリで 手 軽に加 工 できる • 短い辺に合わせて両端を削除
23. そして、作った資産をもとにChrome Extensionを 実装（省略するが 一 番時間かかった）
24. 成果物の紹介
25. デモンストレーション 成果物の紹介
26. まとめ • ClientサイドレンダリングのサイトはAPIが公開されていなくても内部APIを リバースエンジニアリングすることでなんとかできる • Goは標準ライブラリだけで 大 体なんとかなるため、個 人 的なポリシーとして は特別の理由がない限りコミュニティライブラリは使わず後 方 互換性ができ るだけ担保しやすいようにする • 認知負荷の軽減としての取り掛かりはできたが、Thread展開 用 のアイコンや プロフィールの表 示 対応などやるべきことはまだある