kondoumh のブログ

- とあるソフトウェアエンジニアのめったに更新されないブログ -

Electron 版 Twitter クライアントを急造 - macOS PWA 版までのつなぎ

2月に macOS の公式 Twitter クライアントはディスコンになりました。

iphone-mania.jp

僕のマシンでは最後の方は接続エラーが出まくるようになっていたので、使わなくなっていました。代替として推奨されている TweetDeck をインストールしたのですが、Web 版やスマートフォンアプリとの UI の違いが大きくて馴染めずに起動することもなくなっていました。

最近はずっと Chrome で Twitter やってましたがブラウザの1タブなので閉じてしまうことも多く、タイムラインが常駐している感じがなくなりました。

2月に Microsoft は Web フロントエンドディベロッパーの取り込みを狙って Windows 10 における PWA (Progressive Web Apps) サポートを発表しました。

blogs.windows.com

Windows 10 UWP 版 Twitter アプリが先日 PWA 対応の一環でリニューアルされました。

japanese.engadget.com

www.microsoft.com

Twitter のタイムラインでは使いにくいみたいな声が目につきましたが、ライトユーザーである (と思っている) 自分にはスマホと同じ UI で馴染みやすい感じでした。

VMware Fusion の Windows 10 で、新 Twitter アプリと Edge *1を並べて使うと macOS 本体側と Twitter & ネット記事閲覧環境が分離できていい感じになりました。

f:id:kondoumh:20180504201302p:plain

ボーっとタイムライン眺めてる時間と作業用スペースがスワイプで切り替えられるのでコンテキストの切り替えが楽になる気がします。

Edge なので Twitter で出会った記事をストックするために Pocket 拡張を入れました*2。でも Tumblr に Quote 流したいなあと思うとブックマークレット必要ですが Edge でブックマークレットを使うのはとてつもなく面倒そうに見えました。英語のページだったら翻訳して読んだりしたいし・・・ここで、仮想マシンに Chrome を入れたら負けです。

macOS でも PWA 対応は進められているようで、もう数ヶ月したら、Windows 10 と同様の PWA 版 の公式 Twitter アプリが AppStore に登場しそうな気がします。

www.publickey1.jp

それをちょっと先に体験したくて Electron で Mobile 版 Twitter サイトをデスクトップアプリ化するの試してみました。

Electron は数年前に少し触ったきりだったので、ローカルの NPM パッケージが壊れてたりしました。公式サイトから Quick Start プロジェクトをダウンロードしてきて改造。起動時に外部リンクを開くための EventListener を追加したり、ウィンドウいっぱいに WebView 描画するようにした程度。

Mobile Twitter のシンプルな画面 はデスクトップでも邪魔にならないし、作業用とは別のデスクトップに 閲覧専用 Chrome のウィンドウを置いて、その隣に置くと 仮想マシンの Edge と Twitter アプリは不要になりました。

1日使ってみて、Mobile 版 Twitter をデスクトップで使うとスマホの引っ張って更新 (Pull to Reflesh) が使えないので、無意味に下にスクロールしたり、画面内リンク踏んだりしなければいけないところが微妙に感じました。PC 版サイトだと、未読ツイートが溜まってくるとツイートの一番上に 「新しいツイート n 件を見る」というリンクが勝手に出てくれるので楽です。

ということで、デフォルトは Mobile 版ですが、PC サイト版 Twitter に切り替えられるようにしてみました。PC 版だとユーザーアイコンにマウスオーバーするとユーザー情報をポップアップしてくれたり細かいところで使い勝手もよいですし。

これでかなり快適なタイムライン閲覧環境になりました。

f:id:kondoumh:20180504204157p:plain

自分用に作ったため特に配布予定はないですが、GitHub にソースコードは置いておきました。

github.com

PS. 作った後でこれ思い出した。

jackhanford.com

*1:仮想マシンには Chrome 入れないポリシー

*2:Edge の拡張機能もストア経由でインストールします。