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
420
リバースエンジニアリングと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
370
コードジェネレーターで 効率的な開発をする / Efficient development with code generators
linyows
0
320
研究を支える拡張性の高い ワークフローツールの提案 / Proposal of highly expandable workflow tools to support research
linyows
0
450
非コンテナ環境において宣言的Deploymentを手軽に実現する / Declarative deployment in non-container environments
linyows
0
230
メール送信サーバの集約における透過型SMTP プロキシの定量評価 / Quantitative Evaluation of Transparent SMTP Proxy in Email Sending Server Aggregation
linyows
0
970
透過型SMTPプロキシによる送信メールの可観測性向上: Update Edition / Improved observability of outgoing emails with transparent smtp proxy: Update edition
linyows
2
480
研究の再現性を高める 仕組みをGoでつくる / Creating a system to improve the reproducibility of research using go
linyows
1
250
奥が深いメールのシステム / The depth of Email system
linyows
4
610
IaCにおけるテスト考察 / Tests in IaC
linyows
2
740
Other Decks in Programming
See All in Programming
[DevinMeetupTokyo2025] コード書かせないDevinの使い方
takumiyoshikawa
2
260
PHPカンファレンス関西2025 基調講演
sugimotokei
6
1.1k
Amazon Q CLI開発で学んだAIコーディングツールの使い方
licux
3
170
抽象化という思考のツール - 理解と活用 - / Abstraction-as-a-Tool-for-Thinking
shin1x1
1
930
階層化自動テストで開発に機動力を
ickx
1
470
Claude Code と OpenAI o3 で メタデータ情報を作る
laket
0
110
ZeroETLで始めるDynamoDBとS3の連携
afooooil
0
150
実践!App Intents対応
yuukiw00w
0
120
管你要 trace 什麼、bpftrace 用下去就對了 — COSCUP 2025
shunghsiyu
0
170
副作用と戦う PHP リファクタリング ─ ドメインイベントでビジネスロジックを解きほぐす
kajitack
3
520
Streamlitで実現できるようになったこと、実現してくれたこと
ayumu_yamaguchi
2
270
DynamoDBは怖くない!〜テーブル設計の勘所とテスト戦略〜
hyamazaki
0
180
Featured
See All Featured
Product Roadmaps are Hard
iamctodd
PRO
54
11k
Visualization
eitanlees
146
16k
I Don’t Have Time: Getting Over the Fear to Launch Your Podcast
jcasabona
33
2.4k
Build The Right Thing And Hit Your Dates
maggiecrowley
37
2.8k
Practical Tips for Bootstrapping Information Extraction Pipelines
honnibal
PRO
21
1.4k
Refactoring Trust on Your Teams (GOTO; Chicago 2020)
rmw
34
3.1k
Site-Speed That Sticks
csswizardry
10
750
Rebuilding a faster, lazier Slack
samanthasiow
83
9.1k
Keith and Marios Guide to Fast Websites
keithpitt
411
22k
The Myth of the Modular Monolith - Day 2 Keynote - Rails World 2024
eileencodes
26
3k
Into the Great Unknown - MozCon
thekraken
40
2k
The Pragmatic Product Professional
lauravandoore
36
6.8k
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展開 用 のアイコンや プロフィールの表 示 対応などやるべきことはまだある