Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
リバースエンジニアリングとGoでSlackの認知負荷を下げる / Reducing cogni...
Search
linyows
March 25, 2024
Programming
2
410
リバースエンジニアリングとGoでSlackの認知負荷を下げる / Reducing cognitive load in Slack with Reverse-engineering and Go
@2024-03-22 さくらインターネット 社内 Go Conference #1 での発表資料
linyows
March 25, 2024
Tweet
Share
More Decks by linyows
See All by linyows
研究開発と実装OSSと プロダクトの好循環 / A virtuous cycle of research and development implementation OSS and products
linyows
1
350
コードジェネレーターで 効率的な開発をする / Efficient development with code generators
linyows
0
300
研究を支える拡張性の高い ワークフローツールの提案 / Proposal of highly expandable workflow tools to support research
linyows
0
420
非コンテナ環境において宣言的Deploymentを手軽に実現する / Declarative deployment in non-container environments
linyows
0
210
メール送信サーバの集約における透過型SMTP プロキシの定量評価 / Quantitative Evaluation of Transparent SMTP Proxy in Email Sending Server Aggregation
linyows
0
940
透過型SMTPプロキシによる送信メールの可観測性向上: Update Edition / Improved observability of outgoing emails with transparent smtp proxy: Update edition
linyows
2
450
研究の再現性を高める 仕組みをGoでつくる / Creating a system to improve the reproducibility of research using go
linyows
1
230
奥が深いメールのシステム / The depth of Email system
linyows
4
600
IaCにおけるテスト考察 / Tests in IaC
linyows
2
710
Other Decks in Programming
See All in Programming
チームのテスト力を総合的に鍛えて品質、スピード、レジリエンスを共立させる/Testing approach that improves quality, speed, and resilience
goyoki
5
880
GitHub Copilot and GitHub Codespaces Hands-on
ymd65536
2
150
RailsGirls IZUMO スポンサーLT
16bitidol
0
190
MDN Web Docs に日本語翻訳でコントリビュートしたくなる
ohmori_yusuke
1
120
PostgreSQLのRow Level SecurityをPHPのORMで扱う Eloquent vs Doctrine #phpcon #track2
77web
2
530
10 Costly Database Performance Mistakes (And How To Fix Them)
andyatkinson
0
340
テストから始めるAgentic Coding 〜Claude Codeと共に行うTDD〜 / Agentic Coding starts with testing
rkaga
12
4.5k
Result型で“失敗”を型にするPHPコードの書き方
kajitack
5
660
明示と暗黙 ー PHPとGoの インターフェイスの違いを知る
shimabox
2
510
0626 Findy Product Manager LT Night_高田スライド_speaker deck用
mana_takada
0
170
AIともっと楽するE2Eテスト
myohei
6
2.6k
A2A プロトコルを試してみる
azukiazusa1
2
1.4k
Featured
See All Featured
Improving Core Web Vitals using Speculation Rules API
sergeychernyshev
18
970
YesSQL, Process and Tooling at Scale
rocio
173
14k
Typedesign – Prime Four
hannesfritz
42
2.7k
Evolution of real-time – Irina Nazarova, EuRuKo, 2024
irinanazarova
8
820
Build your cross-platform service in a week with App Engine
jlugia
231
18k
Java REST API Framework Comparison - PWX 2021
mraible
31
8.7k
Done Done
chrislema
184
16k
Cheating the UX When There Is Nothing More to Optimize - PixelPioneers
stephaniewalter
281
13k
XXLCSS - How to scale CSS and keep your sanity
sugarenia
248
1.3M
Optimising Largest Contentful Paint
csswizardry
37
3.3k
Distributed Sagas: A Protocol for Coordinating Microservices
caitiem20
331
22k
A designer walks into a library…
pauljervisheath
207
24k
Transcript
@2024-03-22 さくらインターネット 社内 Go Conference #1 リバースエンジニアリングとGoでSlackの 認知負荷を下げる
小 田 知央 / Tomohisa Oda @linyows • 福岡市在住 •
Fukuoka.go 主催 • 趣味は筋トレとテニス • OSS: Octopass, Dewy, Rotion, Warp… • https://tomohisaoda.com • https://twitter.com/linyows
Slackにおける認知負荷の課題
新 人 のお仕事の 一 つはまず仲間を覚えること • 昨年11 月入 社、さくらインターネット研究所 未踏プロダクトグループに配属
• フルリモートにおいてコミュニティは主にSlack • チームや同じ部署の仲間はVideo Chatなどを通じ、実在する 人 と名前、 Slackのアイコンと名前が 一 致し覚えやすい • 仕事の領域を拡 大 しようとすると他部署のチャンネルを 見 て情報収集すること になる Slackにおける認知負荷の課題
他部署のSlackアイコンと名前覚えにくい問題 • アイコンが動物や 車 やアニメで 自 由(良いこと) • 人 とBotとの区別が瞬時につきにくい
• 人 は物体より顔を認識し処理する能 力 が 高 く、顔の優越性効果と呼ばれる https://en.wikipedia.org/wiki/Face_superiority_effect • インターネット上のアイコンGithub、Twitterと同じであれば覚えやすい • しかし、統 一 されてないことが多い • リアルに集まる場合に顔と名前がまるで 一 致しない Slackにおける認知負荷の課題
ユーザのアイコンが顔以外の場合
VUBOBLBTBLVSB 0TIJSBTF UTBUPTBLVSB JTBUPTBLVSB ". ". ". 1. ϝϯςφϯεͷ࡞ۀྃ͠·͕ͨ͠ɺରԠ࿙Εͳ͍͔֬ೝ͓ئ͍͍ͨ͠Ͱ͢ʂ ຊͷϛʔςΟϯάͷϑΝγϦςʔγϣϯ!BZPTIJPLBͰ͢
"11 *EEDDFFͷσϓϩΠ͕ޭ͠·ͨ͠ɻݕূ࡞ۀΛ͓ئ͍͠·͢!EFWBUFBN 0TIJSBTF ". "11 ͖ͬ͞νϥݟ͚ͨ͠ͲΞϨ͕Γͯͳ͔ͬͨؾ͕͢ΔɻΞϨͬͯΞϨͩΑ ͓னௐୡ͖ͯ͠·͢ʂϚοΫʹ͠Α͏͔ͳʙ🍔
ユーザのアイコンが顔の場合
VUBOBLBTBLVSB 0TIJSBTF UTBUPTBLVSB JTBUPTBLVSB ". ". ". 1. ϝϯςφϯεͷ࡞ۀྃ͠·͕ͨ͠ɺରԠ࿙Εͳ͍͔֬ೝ͓ئ͍͍ͨ͠Ͱ͢ʂ ຊͷϛʔςΟϯάͷϑΝγϦςʔγϣϯ!BZPTIJPLBͰ͢
"11 *EEDDFFͷσϓϩΠ͕ޭ͠·ͨ͠ɻݕূ࡞ۀΛ͓ئ͍͠·͢!EFWBUFBN 0TIJSBTF ". "11 ͖ͬ͞νϥݟ͚ͨ͠ͲΞϨ͕Γͯͳ͔ͬͨؾ͕͢ΔɻΞϨͬͯΞϨͩΑ ͓னௐୡ͖ͯ͠·͢ʂϚοΫʹ͠Α͏͔ͳʙ🍔
当然、識別しやすかったのは顔でしたよね?
Slack上の認知負荷を下げたい!
リバースエンジニアリングを試みる
顔写真といえば社員証 • 社員証の顔写真はHR向けのSaaSの〇〇〇(以下H)にある • HはAPIを提供しているがAPIの利 用 権限がなさそう • とはいえブラウザでは 見
えているのでDevToolsのネットワークタブで通信を 眺める • 最近のWebサイトはClientサイドでレンダリングするアーキテクチャが多い ので 大 体内部APIをClientから叩いている • すると欲しい情報らしきendpointを 見 つけることができる リバースエンジニアリングを試みる
非 公開APIに必要な情報を探す • DevToolsを使ってendpointへのリクエストヘッダーやボディから通信に必要 な情報をまるっと抜き出す • POST methodであればボディは必須だろうし、ヘッダーはAuthorizationや Cookie、X-* みたいな拡張定義でCSRF
tokenなどが必須になる • 雑にCurlコマンドを使って検証してみて、可変になっているparamsがないか チェックする(リクエストごと可変だと 面 倒) • あとPaginationの実装 手 法の確認など リバースエンジニアリングを試みる
15 PoC 社内向けにつきモザイク
顔写真をより良くする
社員証は 大 体仏頂 面 なので笑わせたい • 自 分の社員証を気に 入 っている
人 ばかりではないだろう • 誰であるか認識可能でNotionのあれみたいにデフォルメされた ものはどうだろうか • 全社員のデータをアップロードするわけにはいかないが試しに Stable Diffusionっでいい感じのものができるのか • Stable DiffusionのAPIは少なくとも520px以上が必要で使える のは120pxのため、Upscale APIの後にPromptで画像 生 成する 顔写真をより良くする /PUJPOͷΠϯλϏϡʔهࣄͷ ͨΊʹɺ/PUJPOͷΠϥετϨ ʔλʔʹॻ͍ͯΒͬͨࢲͷ ΞΠίϯɻ
18 IUUQTQMBUGPSNTUBCJMJUZBJEPDTBQJSFGFSFODF API DocにGoのリクエスト例がある • Multipart form dataで画像をアップロードするだけ • 以下は簡略化のためにエラー処理を消している
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を 色 々 試す
Promptが微妙なのもあるが、まるで違う 人 になっ てしまっていた
諦めて、画像のトリミングだけを 行 う
22 画像を正 方 形に切り取る • 標準の画像ライブラリで 手 軽に加 工 できる
• 短い辺に合わせて両端を削除
そして、作った資産をもとにChrome Extensionを 実装(省略するが 一 番時間かかった)
成果物の紹介
デモンストレーション 成果物の紹介
まとめ • ClientサイドレンダリングのサイトはAPIが公開されていなくても内部APIを リバースエンジニアリングすることでなんとかできる • Goは標準ライブラリだけで 大 体なんとかなるため、個 人 的なポリシーとして
は特別の理由がない限りコミュニティライブラリは使わず後 方 互換性ができ るだけ担保しやすいようにする • 認知負荷の軽減としての取り掛かりはできたが、Thread展開 用 のアイコンや プロフィールの表 示 対応などやるべきことはまだある