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
450
リバースエンジニアリングと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
Protocol Buffersの型を超えて拡張性を得る / Beyond Protocol Buffers Types Achieving Extensibility
linyows
0
120
研究開発と実装OSSと プロダクトの好循環 / A virtuous cycle of research and development implementation OSS and products
linyows
1
580
コードジェネレーターで 効率的な開発をする / Efficient development with code generators
linyows
0
350
研究を支える拡張性の高い ワークフローツールの提案 / Proposal of highly expandable workflow tools to support research
linyows
0
490
非コンテナ環境において宣言的Deploymentを手軽に実現する / Declarative deployment in non-container environments
linyows
0
290
メール送信サーバの集約における透過型SMTP プロキシの定量評価 / Quantitative Evaluation of Transparent SMTP Proxy in Email Sending Server Aggregation
linyows
0
1k
透過型SMTPプロキシによる送信メールの可観測性向上: Update Edition / Improved observability of outgoing emails with transparent smtp proxy: Update edition
linyows
2
530
研究の再現性を高める 仕組みをGoでつくる / Creating a system to improve the reproducibility of research using go
linyows
1
280
奥が深いメールのシステム / The depth of Email system
linyows
4
640
Other Decks in Programming
See All in Programming
Range on Rails ―「多重範囲型」という新たな選択肢が、複雑ロジックを劇的にシンプルにしたワケ
rizap_tech
0
6.7k
あなたとKaigi on Rails / Kaigi on Rails + You
shimoju
0
170
bootcamp2025_バックエンド研修_WebAPIサーバ作成.pdf
geniee_inc
0
120
コードとあなたと私の距離 / The Distance Between Code, You, and I
hiro_y
0
180
monorepo の Go テストをはやくした〜い!~最小の依存解決への道のり~ / faster-testing-of-monorepos
convto
2
500
他言語経験者が Golangci-lint を最初のコーディングメンターにした話 / How Golangci-lint Became My First Coding Mentor: A Story from a Polyglot Programmer
uma31
0
290
iOSエンジニア向けの英語学習アプリを作る!
yukawashouhei
0
200
AIと人間の共創開発!OSSで試行錯誤した開発スタイル
mae616
2
720
AI駆動で0→1をやって見えた光と伸びしろ
passion0102
1
510
All About Angular's New Signal Forms
manfredsteyer
PRO
0
190
登壇は dynamic! な営みである / speech is dynamic
da1chi
0
350
Devvox Belgium - Agentic AI Patterns
kdubois
1
130
Featured
See All Featured
The Illustrated Children's Guide to Kubernetes
chrisshort
49
51k
Product Roadmaps are Hard
iamctodd
PRO
54
11k
Building Adaptive Systems
keathley
44
2.8k
Facilitating Awesome Meetings
lara
56
6.6k
Design and Strategy: How to Deal with People Who Don’t "Get" Design
morganepeng
132
19k
How STYLIGHT went responsive
nonsquared
100
5.8k
Statistics for Hackers
jakevdp
799
220k
Put a Button on it: Removing Barriers to Going Fast.
kastner
60
4k
Java REST API Framework Comparison - PWX 2021
mraible
34
8.9k
The Straight Up "How To Draw Better" Workshop
denniskardys
238
140k
[RailsConf 2023 Opening Keynote] The Magic of Rails
eileencodes
31
9.7k
A designer walks into a library…
pauljervisheath
209
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展開 用 のアイコンや プロフィールの表 示 対応などやるべきことはまだある