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

by https://speakerdeck.com/linyows

Slide 1

Slide 1 text

@2024-03-22 さくらインターネット社内 Go Conference #1 リバースエンジニアリングとGoでSlackの認知負荷を下げる

Slide 2

Slide 2 text

小田知央 / Tomohisa Oda @linyows • 福岡市在住 • Fukuoka.go 主催 • 趣味は筋トレとテニス • OSS: Octopass, Dewy, Rotion, Warp… • https://tomohisaoda.com • https://twitter.com/linyows

Slide 3

Slide 3 text

Slackにおける認知負荷の課題

Slide 4

Slide 4 text

新人のお仕事の一つはまず仲間を覚えること • 昨年11 月入社、さくらインターネット研究所未踏プロダクトグループに配属 • フルリモートにおいてコミュニティは主にSlack • チームや同じ部署の仲間はVideo Chatなどを通じ、実在する人と名前、 Slackのアイコンと名前が一致し覚えやすい • 仕事の領域を拡大しようとすると他部署のチャンネルを見て情報収集することになる Slackにおける認知負荷の課題

Slide 5

Slide 5 text

他部署のSlackアイコンと名前覚えにくい問題 • アイコンが動物や車やアニメで自由（良いこと） • 人とBotとの区別が瞬時につきにくい • 人は物体より顔を認識し処理する能力が高く、顔の優越性効果と呼ばれる https://en.wikipedia.org/wiki/Face_superiority_effect • インターネット上のアイコンGithub、Twitterと同じであれば覚えやすい • しかし、統一されてないことが多い • リアルに集まる場合に顔と名前がまるで一致しない Slackにおける認知負荷の課題

Slide 6

Slide 6 text

ユーザのアイコンが顔以外の場合

Slide 7

Slide 7 text

VUBOBLBTBLVSB 0TIJSBTF UTBUPTBLVSB JTBUPTBLVSB ". ". ". 1. ϝϯςφϯεͷ࡞ۀ׬ྃ͠·͕ͨ͠ɺରԠ࿙Εͳ͍͔֬ೝ͓ئ͍͍ͨ͠Ͱ͢ʂ ຊ೔ͷϛʔςΟϯάͷϑΝγϦςʔγϣϯ͸!BZPTIJPLBͰ͢ "11 *EEDDFFͷσϓϩΠ͕੒ޭ͠·ͨ͠ɻݕূ࡞ۀΛ͓ئ͍͠·͢!EFWBUFBN 0TIJSBTF ". "11 ͖ͬ͞νϥݟ͚ͨ͠ͲΞϨ͕଍Γͯͳ͔ͬͨؾ͕͢ΔɻΞϨͬͯΞϨͩΑ ͓னௐୡ͖ͯ͠·͢ʂϚοΫʹ͠Α͏͔ͳʙ🍔

Slide 8

Slide 8 text

ユーザのアイコンが顔の場合

Slide 9

Slide 9 text

Slide 10

Slide 10 text

当然、識別しやすかったのは顔でしたよね?

Slide 11

Slide 11 text

Slack上の認知負荷を下げたい！

Slide 12

Slide 12 text

リバースエンジニアリングを試みる

Slide 13

Slide 13 text

顔写真といえば社員証 • 社員証の顔写真はHR向けのSaaSの〇〇〇（以下H）にある • HはAPIを提供しているがAPIの利用権限がなさそう • とはいえブラウザでは見えているのでDevToolsのネットワークタブで通信を眺める • 最近のWebサイトはClientサイドでレンダリングするアーキテクチャが多いので大体内部APIをClientから叩いている • すると欲しい情報らしきendpointを見つけることができるリバースエンジニアリングを試みる

Slide 14

Slide 14 text

非公開APIに必要な情報を探す • DevToolsを使ってendpointへのリクエストヘッダーやボディから通信に必要な情報をまるっと抜き出す • POST methodであればボディは必須だろうし、ヘッダーはAuthorizationや Cookie、X-* みたいな拡張定義でCSRF tokenなどが必須になる • 雑にCurlコマンドを使って検証してみて、可変になっているparamsがないかチェックする（リクエストごと可変だと面倒） • あとPaginationの実装手法の確認などリバースエンジニアリングを試みる

Slide 15

Slide 15 text

15 PoC 社内向けにつきモザイク

Slide 16

Slide 16 text

顔写真をより良くする

Slide 17

Slide 17 text

社員証は大体仏頂面なので笑わせたい • 自分の社員証を気に入っている人ばかりではないだろう • 誰であるか認識可能でNotionのあれみたいにデフォルメされたものはどうだろうか • 全社員のデータをアップロードするわけにはいかないが試しに Stable Diffusionっでいい感じのものができるのか • Stable DiffusionのAPIは少なくとも520px以上が必要で使えるのは120pxのため、Upscale APIの後にPromptで画像生成する顔写真をより良くする /PUJPOͷΠϯλϏϡʔهࣄͷ ͨΊʹɺ/PUJPOͷΠϥετϨ ʔλʔʹॻ͍ͯ΋Βͬͨࢲͷ ΞΠίϯɻ

Slide 18

Slide 18 text

18 IUUQTQMBUGPSNTUBCJMJUZBJEPDTBQJSFGFSFODF API DocにGoのリクエスト例がある • Multipart form dataで画像をアップロードするだけ • 以下は簡略化のためにエラー処理を消している

Slide 19

Slide 19 text

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を色々試す

Slide 20

Slide 20 text

Promptが微妙なのもあるが、まるで違う人になってしまっていた

Slide 21

Slide 21 text

諦めて、画像のトリミングだけを行う

Slide 22

Slide 22 text

22 画像を正方形に切り取る • 標準の画像ライブラリで手軽に加工できる • 短い辺に合わせて両端を削除

Slide 23

Slide 23 text

そして、作った資産をもとにChrome Extensionを実装（省略するが一番時間かかった）

Slide 24

Slide 24 text

成果物の紹介

Slide 25

Slide 25 text

デモンストレーション成果物の紹介

Slide 26

Slide 26 text

まとめ • ClientサイドレンダリングのサイトはAPIが公開されていなくても内部APIをリバースエンジニアリングすることでなんとかできる • Goは標準ライブラリだけで大体なんとかなるため、個人的なポリシーとしては特別の理由がない限りコミュニティライブラリは使わず後方互換性ができるだけ担保しやすいようにする • 認知負荷の軽減としての取り掛かりはできたが、Thread展開用のアイコンやプロフィールの表示対応などやるべきことはまだある