In Minutiae, God Dwells.

2019/05/28追記：Multi Row TweetDeckがバージョンアップしてmac版Chromeでも問題なく動くのを確認したので、この記事はさらにカスタマイズしたい人向けメモということで。さらに、これらの機能拡張を導入してからも楽に調整できて扱いが楽なPWAによるアプリケーション化を強くおすすめします。



以前の記事の続き。

お気に入りだったMulti Row TweetDeckが、いつの間にかMac版Chrome上のTweetDeck＋BetterTweetDeckで動かなくなってしまったので、代替策を模索した結果のメモ。


要するにBetterTweetDeckのカスタムCSS機能であれこれすれば、TweetDeckの列表示をわりと簡単にカスタマイズできて、例えば2段重ね表示なんかも実現できる。まあ中身はWebアプリケーションなので、本職さんからすれば当たり前の話なんだけどね。つまり、以下はあくまでもワタシ個人の環境におけるメモ書きということで。

必要なもの：

• Mac版Chrome（BetterTweetDeckが対応しているFirefoxでもOperaでも基本は変わらないけど、各種コマンドを使って独立したアプリケーションにできるので、ワタシはChromeを推奨）
• BetterTweetDeck
• もちろんTwitterアカウント
• CSS3に関する知識（ググれば何とかなるけど勉強したいなら専門書などがあるとベター）

概要：

TweetDeckは列をどんどん追加できるけど、追加するごとに列の幅がwebブラウザウィンドウに対して1/2、1/3、1/4…1/nになって、各列が次第に縦に細長くなって読みづらくなる。そこでワタシはMulti Row TweetDeckを導入して、メインのTLは縦1本、mentionやDMなどその他の列は半分の高さで縦2段置きにして使っていた。

ところがある日（諸々の仕様変更の影響だと思われるけど）Multi Row TweetDeckが機能しなくなってしまって途方に暮れて仕方なくTweetenなどでしのいできたけど、突然代替案を閃いた。

ChromeでTweetDeck＋BetterTweetDeckの環境を開いた状態で「表示」＞「開発/管理」＞「デベロッパーツール」を選ぶと奇怪な呪文がウィンドウ右側に出てくるけど、注意深くそれを辿っていくと、TweetDeckの各々の列の見栄えは、CSSでは column クラス（でいいんだよね？）で定義されていることが分かる。であれば、BetterTweetDeckのカスタムCSS機能で強引に書き換えができるはず。

例えばカスタムCSSに

    .column {
        height : 50% ;
    }

とか書くと、各列の高さが50％＝半分になる。しかしこれだと単純に横並びするだけで意味がないので、こんな感じでごにょごにょする。いま適当に書いたからまともに動かないかもしれないから自己責任で。内容の詳細はググって！

    .column {
        height : 50% ;
        display:-webkit-box;   /* old Android */
        display:-webkit-flex;  /* Safari etc. */
        display:-ms-flexbox;   /* IE10        */
        display:flex;
        -webkit-flex-flow    : column wrap;      /* Safari etc. */
        -ms-flex-flow        : column wrap;      /* IE          */
        flex-flow            : column wrap;      /* = flex-direction:row;flex-wrap:wrap; */
        float:left;
    }

んでワタシの環境でチマチマといじくった結果がこちら。最初の1〜2行は縦1列で幅が広め、その後の列は上が55％・下が45％の高さで2段重ねで幅が狭め、んで表示的に右端に来る列はList監視用のため縦1列で幅が狭めにしてある。それと1番目（メインのTL）以外の列は文字を小さくしたりもしてる。

    .column {
        display:-webkit-box;   /* old Android */
        display:-webkit-flex;  /* Safari etc. */
        display:-ms-flexbox;   /* IE10        */
        display:flex;
        -webkit-flex-flow    : column wrap;      /* Safari etc. */
        -ms-flex-flow        : column wrap;      /* IE          */
        flex-flow            : column wrap;      /* = flex-direction:row;flex-wrap:wrap; */
        float:left;
    }

    .column:nth-child(-n+2) {
        height: 100%;
        width: 28%;
    }

    .column:nth-child(2) {
        font-size: small;
    }

    .column:nth-child(n+3) {
        height: 55%;
        width: 23%;
        font-size: small;
    }

    .column:nth-child(n+5) {
        height: 45%;
        width: 23%;
        font-size: small;
    }

    .column:last-of-type {
        height: 100%;
        width: 19.5%;
        clear:both;
        position : absolute;
        top: 0px;
        right: 0px;
        font-size: small;
    }

まあ参考例なので動かなかったらすまぬ。まあ、しばらくHTMLやCSSを触ってなかったけど、いまどきのコードって融通が効くけど複雑になったねえというのが正直なところ。余裕ができたら勉強し直して、このサイトももっとカッコよくしたい。

そんなわけで必要な人はレッツチャレンジ。困ったらカスタムCSSの中身を消せば元に戻るから何とかなる！もちろん責任は一切負いませんが。