ChromeでTwitterサイトをアプリっぽくする

Twitter for Macの提供終了が発表されました。

Mac版公式Twitterアプリ、突然の提供終了 - ITmedia NEWS

iMacでTwitter for Macを立ち上げて、画面の左側に幅を最小にしていつもTLを楽しんでいる私としてはとても困りました。
なのでChromeでTwitterサイトをアプリ風にすることにしました。

1. Twitterサイトを小窓でオープンする
このためには、ブックマークレットを使います。具体的には以下のURLのブックマークを作ってください。

javascript:(function(){const win=window.open('https://twitter.com/','twitter','left=0,top=0');win.resizeTo(446,screen.availHeight);}())

446というのはTwitterサイトのレイアウトに合わせたマジックナンバーです。

これだけでは表示がずれてイケていないので、今度はTwitterサイトのレイアウトを変えます。このためにはChrome拡張を使います。

2. Twitterサイトのレイアウトを変える
フォルダを作って、以下のファイルを用意してください。

manifest.json

{
  "name": "Twitter",
  "version": "1",
  "manifest_version": 2,
  "description": "App-like Twitter",
  "content_scripts": [{
    "matches": ["https://twitter.com/*"],
    "css": ["mystyle.css"]
  }]
}

このマニフェストで、Twitterサイトにアクセスした時に、Chromeがmystyle.cssを流し込んでくれます。

mystyle.css

@media screen and (max-width: 446px) {
    /* トップ */
    .dashboard {
        display: none !important;
    }
    .global-nav .container {
        min-width: 100% !important;
    }
    .Icon--bird {
        display: none !important;
    }
    .wrapper,
    .content-main,
    .MomentsPage.MomentsGuidePage .MomentsGuidePage-content,
    .MomentCapsuleSummary--hero .MomentCapsuleSummary-details,
    .MomentsPage.MomentsGuidePage .MomentsGuidePage-capsules,
    .MomentCapsuleSummary {
        width: 100% !important;
        padding: 0px !important;
    }
    .modal {
        width: 100% !important;
    }
    .Gallery {
        font-size: 0px !important; /* .Gallery-contentがinline-blockで、タグ前のスペースが見えてしまってずれたように見えるのでサイズを0にする */
    }
    .Gallery-content {
        min-width: 0px !important;
        width: 446px !important;
    }

    /* プロフィール */
    .AppContainer {
        max-width: 446px !important;
        margin: 0px !important;
    }
    .u-lg-size1of4 {
        display: none !important;
    }
    .Grid-cell.u-size2of3 {
        width: 100% !important;
    }
    .PermalinkOverlay-modal {
        left: 0px !important;
        margin-left: 0px !important;
        width: 100% !important;
    }
    .permalink-container {
        width: 100% !important;
    }
}

2つのファイルを作ったら、Chrome拡張に追加してください。(追加の仕方は、ググると紹介ブログが色々出てきます)

3. 「新しいツイートを表示」を何とかする。
TwitterのトップページはTwitter for Macのように自動でTLを流してくれないので、ぼーっと眺めるにはこれをなんとかしたいです。がんばらなくてもそのためのChrome拡張がありました。

Chrome ウェブストアでrefresh twitterを検索

好みのChrome拡張を追加してください。
以上です。

Enjoy your Twitter life!