2018/12/08

Mac版ChromeでTweetDeckと艦これをデスクトップアプリ化

ワタシはメインのWebブラウザをSafari、サブをChromeにして長いこと使ってきたけど、Safariの機能拡張がどんどん無効化されて不便になってきたので、一部のWebサービスをChromeでデスクトップアプリ化して使うことにした。特に今回はTwitter純正のTweetDeckと艦これについて書く。要点は以下:
  1. TweetDeckを使いやすくするためにBetterTweetDeckとMulti Row TweetDeckを導入
  2. 艦これを遊びやすくするためにStylebotと艦これウィジェットを導入
  3. AutomatorでChromeにパラメータを渡して特定のWebサービスをデスクトップアプリとして起動させる
  4. 好みでOpen WithとBetter Typography | Smooth Fontsを導入
以下、手順を簡単にまとめる。

1. TweetDeckにBetterTweetDeckとMulti Row TweetDeckを導入

TweetDeckは(過去に買収された)Twitter純正Webサービス。過去にはMacやiOS用のクライアントソフトも存在したけど、様々な経緯を経て現在はチームでアカウントを運用するのが主目的のプラットフォーム的なものになっている。

これを使うメリットは広告などが表示されず単純に見やすいのと、カラムを追加することでリストや検索結果を同時に眺められること。横長のモニタが主流となった現在では全画面表示にすると威力が一発で分かるので、まずは試してみてほしい(無料です)。

ただこれだけだと少々気が利かないところがあるので、定番のBetterTweetDeckを導入する。設定が細かくできるだけではなく、かなりの数の画像や動画サービスのサムネイル画像が表示され、クリックするとその場で表示・再生できるようになる。Twitterカードに対応していないのがほぼ唯一の不満点だけど、まあそれは些細なことなので今後に期待。

このへんの詳細はこちらの記事などをご参照ください。

んで、ワタシは自分の好みでMulti Row TweetDeckを導入している。これは縦のTLが横に並ぶTweetDeckのカラムを上下に多段化するもので、動きの少ないカラムを2段表示させたりできる。全画面表示では使いたくないという場合にも重宝するかもしれない。少々クセがあるのが難だけど、そこは工夫してください。

2. 艦これのためにStylebotと艦これウィジェットを導入

今年の夏に見た「艦これ on ICE」以来、予備役から復帰してちまちまプレイしているのだけど、せっかくHTML5化されたことだし、もう少しすっきりした画面にしたい。

昔はStylishという機能拡張があってカスタムスタイルシートが気軽に反映できたのだけど気がついたら無くなっていたので、代わりにStylebotを導入する。基本設定はデフォルトのままで、こちらのサイトの記述を参考に(というかほぼ丸パクリ)してStylesに以下のCSSを追加した。

対象URL: http://www.dmm.com/netgame/social/-/gadgets/=/app_id=854854/

#area-game {
    height: 720px;
    overflow: hidden;
}
#game_frame {
    height: 720px;
    width: 1200px;
}
#main-ntg {
    margin: 0;
    padding: 0;
    text-align: start;
}
.dmm-ntgnavi, #foot, .area-naviapp, #spacing_top, #sectionWrap, #ntg-recommend, #w > img {
    display: none;
}
body {
    margin: 0;
    min-width: 100%;
}

ウィンドウサイズを適切に調整したら、こんな感じになる。シンプル!


次にこれは好みによるけど、今回は艦これウィジェットを導入してみた。通知や何やら機能が追加されるにも関わらずサーバサイドには負荷をかけないとのことで、いわゆる垢BANされることはないと思うけど、そのへんは自己責任で。

3. AutomatorでChromeにパラメータを渡して特定のWebサービスをデスクトップアプリとして起動させる

特定のサービスとはもちろんTweetDeckと艦これのこと。こちらのサイトの「openコマンドでChromeアプリ化する手順」を使うと、基本的にどのWebサイトも単独のデスクトップアプリ的に動かすことができる。以下、Automatorに設定したコマンド:

・TweetDeck
open -n -a 'Google Chrome' --args '--app=https://tweetdeck.twitter.com/'

・艦これ

open -n -a 'Google Chrome' --args '--app=http://www.dmm.com/netgame/social/-/gadgets/=/app_id=854854/'

アイコンの編集は任意だけど見栄え的にはやっぱり設定した方が気分はよろしい。画像検索とかするとこんなのとかこんなのが見つかるが、こちらも自己責任で。

4. 好みでOpen WithとmacOS Font Smoothingを導入

ここまでやって少々問題が。特にTweetDeckだけど、リンクを単純にクリックするとChromeで開いてしまうのだ。基本的にメインのSafariで開きたいのだが、上手い方法を見つけ出すまでかなりの時間を要した。必要なのはOpen Withという機能拡張。こちらを追加後、オプションに書いてある手順に従って設定すれば、リンク右クリックでインストールしてある任意のWebブラウザを指定して開けるようになる。ダウンロードした「open_with_mac.py」ファイルは場所を動かすと設定をやり直さないといけないらしいので、事前にApplicationフォルダにでも移動しておくとよいだろう。

それともうひとつ、MacでChromeを使ってると文字が何となくぼやけて見えたので、おまじない的な意味でBetter Typography | Smooth Fontsを導入してみた。Safariをはじめ他のアプリと比較しても同じようにすっきり見える感じになったので、これで良しとする。

というわけで、TweetDeckと艦これを例にして、WebアプリケーションをChrome経由でデスクトップアプリ的に使う方法を簡単に解説してみた。ウインドウ内部で操作が完結するサービスは独立させておくと何かと便利なので試してみてください。



ブルネイ泊地からは以上です。