Tweet
Tweet

Slide 1

Slide 1 text

UserScriptを直した話 unarist 東海道らぐ 2018年3月オフな集まり in 名古屋

Slide 2

Slide 2 text

Mastodon • 日本でのブームからそのうち1年 • 皆様のお手元には今なにがありますか？

Slide 3

Slide 3 text

Mastodon • 日本でのブームからそのうち1年 • 皆様のお手元には今なにがありますか？ • 解答例 – ごちゃごちゃしてきた UserStyle – 山のような UserScript

Slide 4

Slide 4 text

• アイコンやテキストを小さく • プロフィール画面のアバター表示の調整 • 長文投稿対策 • サムネを短辺合わせから長辺合わせに • リモートアカウント宛の mention でドメイン の頭文字を表示する • ほかにもいっぱい

Slide 5

Slide 5 text

• 期限付きミュート • 自動 numeronym ※ internationalization → i18n みたいな変換を投稿内の全 英字列に適用する • スラングに つける • ウィンドウの下に投稿欄を出すやつ • 2カラムレイアウトにするやつ • 色んなURLをWebUIで開くやつ • 開発補助系 • ほかにもいっぱい

Slide 6

Slide 6 text

• 期限付きミュート • 自動numeronym ※ internationalization → i18n みたいな変換を投稿内の全 英字列に適用する • スラングにabbrつける • ウィンドウの下に投稿欄を出すやつ • 2カラムレイアウトにするやつ • 色んなURLをWebUIで開くやつ • 開発補助系 • ほかにもいっぱい この辺の話をします

Slide 7

Slide 7 text

MobileComposer • モバイル表示になった時に、 簡易投稿欄を下に常時表示 する • TL見ながら投稿できる • 画像投稿は未対応 • 独立したクライアントを 埋めこんでいるだけ

Slide 8

Slide 8 text

Add tablet layout • 2カラム表示を実現 • これを使う際に投稿欄への 切り替えが面倒で MobileComposer を作った • window.innerWidth に介入 して、WebUI側での幅判定 をごまかす • いつも左にいる投稿欄は CSSで隠す

Slide 9

Slide 9 text

v2.3.0rc1

Slide 10

Slide 10 text

#6594 Move "compose" on mobile to floating action button

Slide 11

Slide 11 text

No content

Slide 12

Slide 12 text

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

Slide 13

Slide 13 text

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

Slide 14

Slide 14 text

Solution • 自分で要素を再現するしかない • 課題: 通常の だけではページ全体の遷移が発 生してしまう

Slide 15

Slide 15 text

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

Slide 16

Slide 16 text

No content

Slide 17

Slide 17 text

No content

Slide 18

Slide 18 text

Solution • 面白いがつらい

Slide 19

Slide 19 text

Issue • 本来モバイル表示になる幅 なら投稿ボタンが表示され るが… • MobileComposerと重なっ てしまう

Slide 20

Slide 20 text

Solution • 向こうがタイムラインに対する absolute とかで配置し てくれてればよかったが、現実は fixed = ウィンドウの 枠に対する位置指定 • どうしようもない • 自分の height を調べて、その分 margin-bottom で投稿 ボタンを上にずらす

Slide 21

Slide 21 text

※ insertRule→CSSStyleRule取得→CSSStyleDeclaration取得 と段階を踏めば、style.marginBottom = "..." という書き方もできる

Slide 22

Slide 22 text

Known issues • 返信ボタンをクリックしても投稿カラムが表示されない • 内部にフラグがあり、既に投稿カラムが表示されていれ ば新たに切り替えないようになっている • Add tablet layout は表示上隠してるだけなので、内部フ ラグが true のままになっている。。

Slide 23

Slide 23 text

Known issues • 案 – onclick で遷移させる（mention ボタンの判定が難しい） – 内部のフラグを書き換える（今はいいけど…） – 返信イベントを拾って遷移（拾えるのかわからん） • どれも微妙 • とはいえ不便なのでそのうちなんかします

Slide 24

Slide 24 text

Conclusion • 本体の要素の再現はあまりやりたくない – 例えば今後ボタンの構造が変わったら、本体のバージョンに応 じて出しわける必要があるかも… – 部分的に再現するぐらいなら独立した実装を書いた方が安全 • 触りにくい内部状態の存在 • やっぱり本体を改造してしまった方が楽

Slide 25

Slide 25 text

Conclusion • それはそれとして、UserScript や UserStyle でどこまで できるかという挑戦は面白い • 最近の目玉: React の内部にアクセスできた – router の操作（ページ遷移） – store の参照（投稿やアカウントのキャッシュ参照） – React の出力をいじるのは厳しい • ほどよい規模の作品を量産して JS の腕を磨く – 大抵の新作は旧作+ちょっとした工夫