Save 37% off PRO during our Black Friday Sale! »

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

7a45319e68efabaecb9ab6656dd44cae?s=47 unarist
March 03, 2018

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/

7a45319e68efabaecb9ab6656dd44cae?s=128

unarist

March 03, 2018
Tweet

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

  11. None
  12. ζ*'_')ζ「うなしのUserScript、投稿 欄への動線なくなってない…?」

  13. Issue • これまでは上のメニューか ら投稿欄へ移動できた • モバイル表示で投稿欄への 移動がフローティングボタ ンになったので、上のメ ニューから消えてしまった •

    新しい投稿ボタンは本来の モバイル判定でないと表示 されない
  14. Solution • 自分で要素を再現するしかない • 課題: 通常の <a href...> だけではページ全体の遷移が発 生してしまう

  15. Solution • 内部ではreact-routerのpush()を使っている c.f. window.history.pushState() • ただし外部には見えない • Reactが要素に生やす独自プロパティから内部オブジェ クトにアクセスし、historyオブジェクトを見つけて叩く

  16. None
  17. None
  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 の腕を磨く – 大抵の新作は旧作+ちょっとした工夫