UserScriptを直した話 / tokaidolug-nagoya-201803

MastodonのWebUI向けのUserScriptがMastodonの更新で正常に動作しなくなっていたので直した話。Reactの_reactRootContainerを通して中で抱えてるprop/stateにアクセスしたり。

東海道らぐ 2018年3月オフな集まり in 名古屋

## 題材にしたUserScript

:don: - Add tablet layout https://gist.github.com/unarist/71067609416aed633cf74eddb6feb725
Mastodon - Mobile Composer https://gist.github.com/unarist/08f56c49986d3b1775fe88bc918cac50

他にも多数のUserScriptをGistに転がしてあります。

Twemoji graphics by Twitter, Inc are licensed under CC-BY 4.0
https://creativecommons.org/licenses/by/4.0/

Transcript

1. UserScriptを直した話 unarist 東海道らぐ 2018年3月オフな集まり in 名古屋
2. Mastodon • 日本でのブームからそのうち1年 • 皆様のお手元には今なにがありますか？
3. Mastodon • 日本でのブームからそのうち1年 • 皆様のお手元には今なにがありますか？ • 解答例 – ごちゃごちゃしてきた UserStyle – 山のような UserScript
4. • アイコンやテキストを小さく • プロフィール画面のアバター表示の調整 • 長文投稿対策 • サムネを短辺合わせから長辺合わせに • リモートアカウント宛の mention でドメイン の頭文字を表示する • ほかにもいっぱい
5. • 期限付きミュート • 自動 numeronym ※ internationalization → i18n みたいな変換を投稿内の全 英字列に適用する • スラングに <abbr> つける • ウィンドウの下に投稿欄を出すやつ • 2カラムレイアウトにするやつ • 色んなURLをWebUIで開くやつ • 開発補助系 • ほかにもいっぱい
6. • 期限付きミュート • 自動numeronym ※ internationalization → i18n みたいな変換を投稿内の全 英字列に適用する • スラングにabbrつける • ウィンドウの下に投稿欄を出すやつ • 2カラムレイアウトにするやつ • 色んなURLをWebUIで開くやつ • 開発補助系 • ほかにもいっぱい この辺の話をします
7. MobileComposer • モバイル表示になった時に、 簡易投稿欄を下に常時表示 する • TL見ながら投稿できる • 画像投稿は未対応 • 独立したクライアントを 埋めこんでいるだけ
8. Add tablet layout • 2カラム表示を実現 • これを使う際に投稿欄への 切り替えが面倒で MobileComposer を作った • window.innerWidth に介入 して、WebUI側での幅判定 をごまかす • いつも左にいる投稿欄は CSSで隠す
9. v2.3.0rc1
10. #6594 Move "compose" on mobile to floating action button
12. ζ*'_')ζ「うなしのUserScript、投稿 欄への動線なくなってない…？」
13. Issue • これまでは上のメニューか ら投稿欄へ移動できた • モバイル表示で投稿欄への 移動がフローティングボタ ンになったので、上のメ ニューから消えてしまった • 新しい投稿ボタンは本来の モバイル判定でないと表示 されない
14. Solution • 自分で要素を再現するしかない • 課題: 通常の <a href...> だけではページ全体の遷移が発 生してしまう
15. Solution • 内部ではreact-routerのpush()を使っている c.f. window.history.pushState() • ただし外部には見えない • Reactが要素に生やす独自プロパティから内部オブジェ クトにアクセスし、historyオブジェクトを見つけて叩く
18. Solution • 面白いがつらい
19. Issue • 本来モバイル表示になる幅 なら投稿ボタンが表示され るが… • MobileComposerと重なっ てしまう
20. Solution • 向こうがタイムラインに対する absolute とかで配置し てくれてればよかったが、現実は fixed = ウィンドウの 枠に対する位置指定 • どうしようもない • 自分の height を調べて、その分 margin-bottom で投稿 ボタンを上にずらす
21. ※ insertRule→CSSStyleRule取得→CSSStyleDeclaration取得 と段階を踏めば、style.marginBottom = "..." という書き方もできる
22. Known issues • 返信ボタンをクリックしても投稿カラムが表示されない • 内部にフラグがあり、既に投稿カラムが表示されていれ ば新たに切り替えないようになっている • Add tablet layout は表示上隠してるだけなので、内部フ ラグが true のままになっている。。
23. Known issues • 案 – onclick で遷移させる（mention ボタンの判定が難しい） – 内部のフラグを書き換える（今はいいけど…） – 返信イベントを拾って遷移（拾えるのかわからん） • どれも微妙 • とはいえ不便なのでそのうちなんかします
24. Conclusion • 本体の要素の再現はあまりやりたくない – 例えば今後ボタンの構造が変わったら、本体のバージョンに応 じて出しわける必要があるかも… – 部分的に再現するぐらいなら独立した実装を書いた方が安全 • 触りにくい内部状態の存在 • やっぱり本体を改造してしまった方が楽
25. Conclusion • それはそれとして、UserScript や UserStyle でどこまで できるかという挑戦は面白い • 最近の目玉: React の内部にアクセスできた – router の操作（ページ遷移） – store の参照（投稿やアカウントのキャッシュ参照） – React の出力をいじるのは厳しい • ほどよい規模の作品を量産して JS の腕を磨く – 大抵の新作は旧作+ちょっとした工夫