GreasemonkeyでTweetDeckをスマホアプリ風に使えるようにする #TypeScript

Qiita初投稿です。よろしくお願いします。

作ったもの

MTDeck(MobileTweetDeck)

使い方はREADMEを参照。

追記

web-extを使用してWebExtensionに対応し、Chromeアドオンとしてもリリースしてみました。Kiwiブラウザーをインストールしてアドオンを追加して「ホーム画面に追加」をすると、PWAとしてアプリ化することが出来ます。

開発までの経緯

「TJDeck」というアプリをご存知でしょうか。

TJDeckはTweetDeckを拡張したAndroid向けアプリで、スマートフォンからの閲覧に適したデザインにするというものです。当時ツイッターのUser Streams終了を受けて話題になり、ITmediaで記事にもなりました。現在も野良アプリとしてapkファイルがダウンロード可能です。

現在ではTweetDeckのアップデートによってツイートできない不具合が発生するなど部分的に機能しなくなっています。リポジトリがアーカイブ化され更新も終了しており、今後もアップデートなどは行われないようです。

使えないなら自分で作ればいいじゃないか、ということで今回はTypeScript + Webpackを使って、アプリとしてではなくUserScriptとしてTJDeckもどきを作ってみました。

iOSでの動作確認報告お待ちしています(Android版Firefox + Tempermonkeyで動作確認済み)

Greasemonkeyにおける開発

さて、Greasemonkey向けUserScriptの開発についての知見をまとめておきます。

グローバル関数の使用

GreasemonkeyはAPIとしてグローバルな関数を提供します。ドキュメントはTempermonkeyのドキュメントにまとまっています。

例えばCSSの挿入にはGM_addStyleが利用できます(使用の際には後述の@grantでの宣言が必要です)。TypeScriptで使用する場合は型定義が必要です。

declare function GM_addStyle(css: string): void;

DefinitelyTypedリポジトリにもこれらの利用のための型定義ファイルがあるようです。

ヘッダ情報の記述(webpack-userscript)

Greasemonkey向けUserScriptではスクリプトファイルの先頭にコメントを書くことでバージョン情報などを記述します。

Webpackでは通常ビルドしたJavaScriptコードは一行にまとめられて出力されるためwebpack.BannerPluginなどを使ってコメントを残す必要があるのですが、探してみたところこれと同じようにファイルの先頭にGreasemonkey向けの書式で設定を出力できるwebpack-userscriptというライブラリがありました。

使用方法はREADMEにわかりやすくまとまっているので、実際に使用した時のコードを載せておきます。

const WebpackUserScript = require('webpack-userscript')

module.exports = {
  // ...
  plugins: [
    new WebpackUserScript({
      headers: (data) => {
        return {
          name: 'MTDeck',
          grant: 'GM_addStyle',
          match: 'https://tweetdeck.twitter.com'
        }
      },
      metajs: false
    })
  ]
}

headersのそれぞれの項目は前述のAPIドキュメントに記載されている@name、 @grant、 @matchに対応しています。

ちなみに@version, @descriptionなどのいくつかの設定は記述がなくてもpackage.jsonから自動で読み込んでくれるようです。

上記の設定で、以下のようにコードが出力されました。

mtdeck.user.js


// ==UserScript==
// @name        MTDeck
// @version     1.0.0
// @author      mkizka
// @description TweetDeckをモバイルで見やすくするUserScript
// @homepage    https://github.com/mkizka/mtdeck
// @match       https://tweetdeck.twitter.com
// @grant       GM_addStyle
// ==/UserScript==

// ...

スマホでのデバッグについて

Webpackでの開発の際、webpack-dev-serverなどを用いてブラウザでホットリロードを実現しますが、UserScriptの場合はすでにあるウェブサイト上で動作させることを目的としているため少々事情が異なります。

ホットリロードのやり方は分からなかったので、

webpackの--watchオプションで自動ビルド
python -m http.server 8000でスクリプトを配信
{配信する端末のアドレス}:8000/dist/mtdeck.user.jsにアクセスしてTempermonkey内のデータを適宜更新する

という形を取りました。

開発者ツールによるデバッグはChromeが優秀です。chrome://inspect/#devicesから接続しているモバイル端末内のChromeアプリをデバッグできます。

同じChromiumベースであれば対応しているようで、Kiwiブラウザなどもデバッグできました。

おわり

以上、Greasemonkey向けUserScriptの開発についてでした。よければMTDeckもぜひ使ってみてください。

TweetDeckは性能の低い端末だとまだまだ重いようなので、今後はその重さの原因になっているところを調査していきたいですね。