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
400
リバースエンジニアリングと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
340
コードジェネレーターで 効率的な開発をする / 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
200
メール送信サーバの集約における透過型SMTP プロキシの定量評価 / Quantitative Evaluation of Transparent SMTP Proxy in Email Sending Server Aggregation
linyows
0
930
透過型SMTPプロキシによる送信メールの可観測性向上: Update Edition / Improved observability of outgoing emails with transparent smtp proxy: Update edition
linyows
2
440
研究の再現性を高める 仕組みをGoでつくる / Creating a system to improve the reproducibility of research using go
linyows
1
230
奥が深いメールのシステム / The depth of Email system
linyows
4
590
IaCにおけるテスト考察 / Tests in IaC
linyows
2
700
Other Decks in Programming
See All in Programming
Node-RED を(HTTP で)つなげる MCP サーバーを作ってみた
highu
0
110
Google Agent Development Kit でLINE Botを作ってみた
ymd65536
2
210
GraphRAGの仕組みまるわかり
tosuri13
8
500
WebViewの現在地 - SwiftUI時代のWebKit - / The Current State Of WebView
marcy731
0
100
PicoRuby on Rails
makicamel
2
110
PostgreSQLのRow Level SecurityをPHPのORMで扱う Eloquent vs Doctrine #phpcon #track2
77web
2
410
エラーって何種類あるの?
kajitack
5
320
なんとなくわかった気になるブロックテーマ入門/contents.nagoya 2025 6.28
chiilog
1
240
Team topologies and the microservice architecture: a synergistic relationship
cer
PRO
0
1.1k
CursorはMCPを使った方が良いぞ
taigakono
1
200
Flutterで備える!Accessibility Nutrition Labels完全ガイド
yuukiw00w
0
120
A2A プロトコルを試してみる
azukiazusa1
2
1.3k
Featured
See All Featured
How to train your dragon (web standard)
notwaldorf
94
6.1k
Building Flexible Design Systems
yeseniaperezcruz
328
39k
The Language of Interfaces
destraynor
158
25k
Principles of Awesome APIs and How to Build Them.
keavy
126
17k
Helping Users Find Their Own Way: Creating Modern Search Experiences
danielanewman
29
2.7k
What’s in a name? Adding method to the madness
productmarketing
PRO
23
3.5k
Keith and Marios Guide to Fast Websites
keithpitt
411
22k
A Tale of Four Properties
chriscoyier
160
23k
Designing Dashboards & Data Visualisations in Web Apps
destraynor
231
53k
Building an army of robots
kneath
306
45k
Code Reviewing Like a Champion
maltzj
524
40k
CSS Pre-Processors: Stylus, Less & Sass
bermonpainter
357
30k
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展開 用 のアイコンや プロフィールの表 示 対応などやるべきことはまだある