MacBook Air (13-inch, Early 2015) でJanetter（メニュー左配置）を全画面表示にすると4列にしかならないので、どうにかして5列表示にしてみた件

タイトルが長い（-10点）

Twitterクライアントとして有名なJanetterを何年も前から愛用している。Janetterには様々なテーマが用意されているのだけれど、自分は「Crow」という黒背景&左メニューのテーマをずっと使っている。

半年前にLenovoのノーパソからMacBook Airに乗り換えてからもJanetterを使い続けていた。普段使うOSが変わったとはいえ、やはりアプリケーションは使い慣れたものが使えるに越したことはないからだ。

ただ、ディスプレイの解像度が1440x900に変わったせいで、全画面*1にした時に表示される列数が減ってしまった。Lenovoの時は全画面にすると5列表示になっていたのだが、MacBook Airに乗り換えてからは全画面にすると4列しか表示されないという状況に。手動でウインドウサイズをさらに大きくすれば5列表示もできるのだけど、流石に面倒くさい。

この状況がもどかしいので、Janetterのテーマを編集することにした。

テーマが保存されている場所。

こちらの記事を参考に、Janetterの設定場所を開く。

Mac OS X

~/Library/Containers/net.janesoft.janetter/Data/Library/Application Support/Janetter/Theme

ファイル構造

こちらを参照

Janetter wiki - カスタムテーマ/CSS

ui.jsを編集する

UIを編集する箇所はいろいろとあるのだろうけど、今回はui.jsに手を加えてみる。

パス

今回は「Crow」というテーマの編集を行う。ui.jsのパスは以下の通り。

/Theme/Items/Crow/js/ui.js

編集箇所

7行目から14行目にかけてメニュー幅を調整する箇所があるため、8行目の(50+rem)+'px'を(30+rem)+'px'にする。

jn.adjustTimelineViewWrapperWidth = function(rem, deckWidth){
    var w = (50+rem)+'px'; //ここの50を30にする
    $('#menu').css('width', w);
    $('#header').css('padding-left', w);
    $('#main, #footer').css('left', w);
    $('#timeline-deck').data('offset', rem);
    return deckWidth - rem;
};

おしまい。

before after

before ((50+rem)+'px')

f:id:klim0824:20160515034258j:plain

after ((50+rem)+'px')

f:id:klim0824:20160515034308j:plain

きちんとメニュー幅が狭くなって、4列表示だったTwitterのTLが5列表示になってるのが分かる。

*1:MacOSでアプリケーションを全画面表示にする際、自分はSplit Screenというアプリケーションを利用している。画面分割用するためのものなのだけれど、全画面表示にも対応している。MacOSの全画面表示とは違ってWindowsのように今現在作業しているデスクトップ上でアプリケーションがフルスクリーンになるという仕様なので、全画面のアプリケーションの上に他のアプリケーションが表示できるのが嬉しい。ちなみにお値段はMac一台あたり$6.99也。なお自分は期間限定の無料セール時にDLできたのだった。がはは

klim.log()

フロントエンドエンジニア見習いによる学習記録