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経由でデスクトップアプリ的に使う方法を簡単に解説してみた。ウインドウ内部で操作が完結するサービスは独立させておくと何かと便利なので試してみてください。



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

2018/11/25

アイドルアニメを再定義する試み 〜「少女☆歌劇 レヴュースタァライト」と「ゾンビランドサガ」について

相変わらず勢いだけで、結論めいた妄想を先に書く。記事のタイトルに挙げた2つの作品、「少女☆歌劇 レヴュースタァライト」と「ゾンビランドサガ」は、「アイドルマスター」シリーズを直近の始祖として「ラブライブ!」シリーズで一種の形式として確立された「最近のアイドルアニメ」を総括し再構築する、極めてアグレッシブなスタンスをもって作られていると思う。もちろん、アイドルを題材にしたアニメはアイマス以前でも枚挙に暇がないが、ここでは「最近のアイドルアニメ」を「モーニング娘。」や「AKB48」 から「BABYMETAL」、果てはあまたの地下アイドルと呼ばれる方々までの「いまどきのアイドル」を参照している一連の作品群を指す。昭和のアイドルとしての矜持と葛藤を抱えたゾンビィ4号こと純子ちゃんには申し訳ないが。


2018/11/16

アニメで学ぶ絵と写真の現在とこれから 〜TVアニメ「色づく世界の明日から」について

その昔、アニメは手で実際に描いた絵を1枚1枚写真に撮って作ると相場が決まっていた。そんなアナログな固定概念を打ち破る作品がここ数年立て続けに現れたのだけど、2018年も終盤になって、こんなに素晴らしいものをまさかTVアニメで毎週拝めるようになるとは想像もしていなかった。

色づく世界の明日から」はそのタイトルが示す通り、色彩を主題としながら、アニメが絵と写真で作られてきたということを自覚しつつそこからの脱却を目指す、極めてチャレンジングな作品に思える。

その理由は見れば分かる。特に絵や写真を嗜む人なら、このキービジュアルがそのままアニメとして動き続ける事実がどれほど異様なことか、すぐにご理解いただけるだろう。

(せっかくなのでいつもより大きく表示させております)

2018/09/23

総天然色の想像力で全速前進する日本のアニメ 〜映画「若おかみは小学生!」レビュー(ネタバレあり?)

ここしばらく暇を見つけては映画館に通って(アニメを中心に)映画を見ているけど、実は今年の春から夏にかけて流れ始めた映画「若おかみは小学生!」の予告編がとにかく気になって仕方なかった。まずはネタバレ抜きということで、とりあえずこちらを見ていただきたい。



この、全体から溢れる、強烈な意思とオーラめいたものがお分かりいただけるだろうか?歴史に名を残す数々の「よいアニメ」特有のそれと同じ感触は、個人的に我がアニメ人生オールタイムベストに近い「リズと青い鳥」を何度も繰り返し見ているときでさえ、ワタシを刺激するのに十分だった。

2018/08/24

TweetDeckをiOSデバイスでなんちゃって全画面アプリ化

Twitterのヘビーユーザー間では定評のあったTweetDeck、現在ではほぼWeb版しか残ってないのだけど、ここ最近のTwitter社の各種改悪施策によって、公式Twitterアプリはもちろんサードパーティアプリも使い勝手がメタメタになってしまった関係で、一応はTwitter社純正サービスであるTweetDeckへの移住を検討している方も多かろう。

そんなわけでiOSのSafariでもTweetDeckを使えばいいじゃないという話になるんだが、アドレスバーなどが表示されていまひとつ見栄えがよろしくない。というわけでネットから拾ったネタを実行して全画面表示にして専用アプリっぽくしてみた。手順はわりと簡単だけどMacが必要なので、そのへんはうまくやっちゃってください。

設定が完了するとこんな画面になる。iPadの例。モザイクが汚くて済まぬ:


iPhoneでもできるけど設定画面がうまく使えないかもしれないので、先に設定を一通り済ませてからこの方法を実行したほうがいいかも:


さて具体的な方法なんだが、こちらの記事の内容をそのまま順番に実行すればよろしい。ただ、事前準備がひとつ。iOS機器側の設定>Safari>詳細から、Webインスペクタを有効にしておくのを忘れないように。


その後、iOS機器のSafariからTweetDeckにアクセス、ログインして、「ホーム画面に追加」をしておこう。これは後で使用するので忘れないように。


名前は分かりやすければ何でも。ワタシは特に工夫なく「TweetDeck」とした。


さっき開いたiOS側のTweetDeck画面に戻ってからMacに接続して、Mac側のSafariの開発メニューから、接続したiOS機器を選択して、「tweetdeck.twitter.com」のWebインスペクタを呼び出す(このへんちょっと迷いやすい)。Webインスペクタ画面が表示されたら、ストレージタブ>すべてのストレージ>Cookie欄を選んで、2つの値を行ごとテキストエディタなどにコピーして取っておく。右クリックして行をコピーすれば簡単。
  • auth_token
  • twid

コピーが終わったらWebインスペクタのウィンドウはいったん閉じてしまってよい。

ここからが本番。iOS機器のホーム画面に追加したTweetDeckアイコンをタップすると、以下の画面が表示される(はず)。


うまく表示できたら、再度Mac側Safariの開発メニューからiOS機器の「tweetdeck.twitter.com」を選んで、Webインスペクタ画面を開く。

ストレージタブ>全てのストレージ>Cookie欄を選んでさっきと中身が変わってるのを確認したら。表示されている行を全て削除する。1行ずつやらんといかんのがめんどくさいけど、あとちょっとで終わるから我慢。


削除が終わったら、コンソールタブへ移動する。画面に表示されてなかったら、「+」ボタンでも押してみてください。使うのは一番下の「>」が表示されてるところ。


ここに以下のコマンドを入力する(改行は見やすくするために入れてるだけで特に不要):
document.cookie="auth_token=abcdef1234567890;domain=twitter.com;expires=Fri, 31 Dec 9999 23:59:59 GMT"; document.cookie="twid=\"u=12345678\";domain=twitter.com;expires=Fri, 31 Dec 9999 23:59:59 GMT";
auth_token と twid は事前にコピーしておいた値に置き換えること(黄色の部分)。コマンド入力後、Returnを押す。エラーめいたメッセージが大量に出なければ、おそらく成功している。


その後おもむろにMacのキーボードでCommand+Rを押してやる(要はリロードする)と…

おめでとうございます!

複数のタブを開いていても指で横にスワイプして表示させられるので、使い勝手にそれほど違和感はない。何より公式アプリよりシンプルでサードパーティアプリより(比較的)安心して使えるのは大きい。本体のMac側では近いうちにTweetDeckへ乗り換えようと思っていたんだが、こちらを先に多用することになるかもしれない。