Re:RXJ Station

RX-JUNのブログです。ガジェット系ニュース、テクノ系音楽、カメラ、バイクの話題、アニメ、英語、本や音楽のレビューなどをだらだらと駄弁ります

TwitterのAPI停止から、Tweetdeckを「デスクトップアプリ的」に使う方法を模索してみる

TwitterがUserStream APIを停止する件で、各非公式Twitterクライアントが機能ダウンをせざるを得ない状況になっており、影響が大きいらしいですね。

togetter.com

www.itmedia.co.jp

UserStream APIに依存していたクライアントは設計の変更を余儀なくされ、更に9月にも予定されていると言われる、レートリミット(300post/15min をアプリ全使用者で共有)の解放についても混乱が生じているようで、最早

公式以外のクライアントは生殺し

と言っても良い状況になりそう。

一応、AndroidiOSにはTwitterの公式クライアントもあるにはある。

Androidplay.google.com

iOS

Twitter

Twitter

ただ、公式アプリは

  • タイムラインに時々広告が混ざる

  • 勝手に「ハイライト」が表示される

  • タイムラインが必ずしも時系列に列ばない

等など、使い勝手に関する不満があると言う人が多いのも事実。 そこで、Twitter傘下のTweetdeckを何とか活用できないか色々調べてみた。

Tweetdeckとは?

Tweetdeckは元々は非公式のクライアントツールの一つでTwitterFacebookMySpace(!)等のタイムラインをカラム形式で一覧表示出来るツールでしたが、 2011年にTwitter社に開発元が買収され、子会社化されたことでTwitterのみの機能に絞り込まれ公式クライアントの一つとして今も残っています。 f:id:rxjun:20180819090241p:plain

TweetDeck - Wikipedia

かつては、iOSAndroid用のTweetdeckクライアントアプリも有りましたが、買収後に軒並み開発が終了し現在はWebのサービスが残るのみとなっています

tweetdeck.twitter.com

Tweetdeckの利点

Tweetdeckは実質、Twitter本体を除けばほぼ唯一の公式クライアントと言えます。公式のメリット(利権?)を生かしていくつかの利点があります

  • API制約の影響を受けない・・・UserStream API廃止後もリアルタイムのタイムラインを表示出来る*1

  • Twitter本体のような広告やハイライト表示が入らない純粋なタイムライン表示となっている

  • タイムラインやリスト、DM等の表示をカラム化することで一覧性の高い表示を実現できる

www.simoom.net

ferret-plus.com

ただ、ややクセのある画面表示や、別のクライアントで既に使い慣れている人にとっては操作性が気にくわない等の好みの違いはあるかもしれません。 が、現状

「UserStream API亡き後、真っ当にタイムラインをリアルタイム表示出来るクライアント」

は事実上Tweetdeckしか残らないような状況です。(今後はどうなるか分からんけど)

ところが

Tweetdeckは現状単体のアプリが無いような状況なので実質WebUIで動かすしか無いのが実状です。パソコンの上でならまだしも、スマートフォンタブレット上で動かすには一手間増えて面倒、と言う所もあるかと思います。

そこで、色々工夫して「WebUIのTweetdeckをあたかも単体の専用アプリであるかのように振る舞う」用にする方法を色々試してみました。 プラットフォームによって簡単にできたり出来なかったり色々あったので、それぞれまとめてみました。

Tweetdeckのデスクトップアプリ化手順

プラットフォーム毎に手順が違うので、それぞれ参照してください。 因みに検証環境としては

でのみ検証しています。他の動作環境でどうなるかは分かりません。

(この情報は2018年8月19日時点での状況です。将来tweetdeckのサイトやOS、ブラウザの挙動の変更により動作が変わる可能性は有ります。)

導入が簡単な順に紹介します

Windows環境の場合

多分、Windowsが一番簡単です。

まず、Chromeでtweetdeckのサイトを開いて普通にログインします。ログインが出来たらChromeのメニューから「その他のメニュー」→「ショートカットを作成」を選択しましょう。

f:id:rxjun:20180818174752p:plain
Chromeで「ショートカットを作成」を選択

ショートカットの保存を適用な名前を付けて保存しましょう。デフォルトでTweetdeckのfaviconでアイコンが出来るようです。 f:id:rxjun:20180818174753p:plain

これで出来たアイコンを、選択するだけでTweetdeckだけを表示するウインドウが立ち上がります。

f:id:rxjun:20180818174754p:plainf:id:rxjun:20180818174755p:plain

Android環境の場合

Androidも割と簡単です。これも、Android上のChromeでTweetdeckにログインした状態にして、メニューから「ホーム画面に追加」を選択しましょう。

f:id:rxjun:20180818174757p:plain
ホーム画面に追加

うまく行けば、ホーム画面にTweetdeckのアイコンが表示されます。

f:id:rxjun:20180818174758p:plain
ショートカットアイコン(ホームの種類によって表示は違うかも)

これを使うと、ブラウザのURLバーや余計なメニューが表示されないTweetdeck専用画面が立ち上がります。

Macの場合

この辺からちょっと難易度上がります。 MacChromeを使った場合、一見Windowsと同じ方法でショートカットが作れそうに思うのですが、Mac版のChromeには実はこのメニューがありません。

なので、ここの情報を参考にしてみました

sp7pc.com

まず、Mac上でAutomatorを起動し、「アプリケーション」の新規作成を選択します。

f:id:rxjun:20180818174759p:plain
Automatorで「アプリケーション」を作成

アプリケーションの作成画面になったら、左側のカラムから「Apple Scriptを実行」を右側のペインにドラッグ&ドロップするとスクリプトを入力できるコンソールが表示されます。 ここで

do shell script "open -na 'Google Chrome' --args '--app=https://tweetdeck.twitter.com'"

と入力します。

f:id:rxjun:20180818174800p:plain
Apple Scriptの入力画面でChromeを登録

これで、作成したアプリケーションで、一度アプリケーションの実行ボタン(右向き▲)を押下して、期待した動きになっているかどうかを確認出来たら適当な名前で保存しましょう。

f:id:rxjun:20180818174801p:plain
作成したアプリケーションを保存

これでも十分なのですが、作成したアプリケーションのアイコンがAutomator標準のロボット型のアイコンになってしまうので、気にくわない人はアプリケーションの情報を表示させて、アイコン部分に適当なアイコンをコピペすることで好きなアイコンに変更できます。

f:id:rxjun:20180818174802p:plain
Automatorで作成したアプリにTweetdeckのfaviconを登録

これで、chromeからtweetdeckを読み込むアプリケーションを登録できます。

iOSの場合

さぁ、いよいよiPhone/iPadを含むiOS端末です。実はこいつが一番難しい。

iPhoneをお使いの方なら分かると思いますが、iOS端末でブラウザで表示している画面をホーム画面に保存するのは実は一見簡単。 ブラウザ上から「共有」で「ホーム画面に追加」を選択すれば、ホーム画面にいとも簡単にアイコンが作成できます。

f:id:rxjun:20180818174806p:plain
ブラウザからホーム画面追加を選択

が!実際にiOS上でブラウザ上でTweetdeckにログインした後に、「ホーム画面に追加」をしても、何故かこの追加したアイコン上から起動しても、Tweetdeckのログイン画面が表示されます。

f:id:rxjun:20180818174805p:plain
ホーム画面に登録したアイコンからTweetdeckに接続した場合

ここからログインしようとすると何故か別画面でブラウザ(safari)が開いてそちら側でログインしてしまい、元のアイコン側の画面側にログインしたはずのセッションが反映されていない事になります。

しばらく、この事象に悩まされていましたが、海外サイトの情報でこちらの解決策が載っていました。

medium.com

実際、この手順でうまく行ったので以下に紹介しますが、この手順を実現するには以下の条件が必要になります。

  • Macが必須(Windowsマシンしか持っていない人は作業できない)

  • MaciOS端末(iPhone/iPad)を物理的にLightningケーブルで接続する必要あり

ぶっちゃけ、Mac側で強引にiOSのブラウザのCookie情報を書き換える力業なので、Macが必須です。これ、少しハードル高いと思います。

まず、Mac側からiOSSafariを触れるようにするために「Webインスペクタ」を有効にします。

iOSの「設定」画面から「Safari」を選択し、一番下の「詳細」を選択します。

f:id:rxjun:20180818174804p:plain
iOSの設定からSafariの「詳細」を選択
「詳細」画面で「Webインスペクタを有効にする」をチェックして有効にします。
f:id:rxjun:20180818174807p:plain
「Webインスペクタを有効にする」を選択

また、iOS端末と接続する側のMacでもWebインスペクタを有効にする設定が必要です。 Mac側でSafari(Chromeではなく)を起動し、Safariの「設定」を開き、「詳細」画面を表示させて、下部にある「メニューバーに"開発"メニューを表示」にチェックを入れます。

f:id:rxjun:20180818174808p:plain
Safariの"開発"メニューを表示させる

ここまで、準備が出来たらまず「iOSの標準ブラウザでTweetdeckにログインした状態の画面」を表示させてください。

その画面を表示させたまま、MaciOS端末をLightningケーブルで接続します。

この状態で、Mac側のSafariで"開発"メニューを開くと、ケーブル接続したiOS端末がメニュー上に表示され、更にサブメニューにtweetdeckのURLが見えるので、これを選択します。

f:id:rxjun:20180818174809p:plain
MacSafariの開発メニューに接続したiPhoneのセッションが表示される

すると、iOS端末側のセッションの詳細情報が表示されるので、画面左側ペインで「Cookie」を選択し、画面上部のタブから「ストレージ」を選択しましょう。 すると、このセッションのCookie情報がいくつか表示されます。

f:id:rxjun:20180818174810p:plain
iOSのSarariのCookie情報

この中で

  • twid

  • auth_token

の2つのエントリーについて「値」の欄の情報をメモなどに控えておいてください。(コピペは出来ます) 他のエントリーは関係ないので、上記2つだけで良いです。 この画面は値が控えられれば閉じても構いません。

ここまで、出来たら先ほどの「iOS標準ブラウザでTweetdeckにログインした状態の画面」は閉じて「ホーム画面に追加した側のTweetdeckを開いた画面を表示」(上記のTweetdeckログイン画面が表示された状態)にして下さい。

この状態で、改めてMac側のSafariで、再度同様に開発メニューからiOS端末を選ぶと、今度は「ホーム画面のTweetdeckを開いたブラウザ」のセッションがサブメニューに表示されます。

再度上記と同様に、セッションの詳細画面で「Cookie」を選択し、画面上部のタブから「ストレージ」を選択します。 現時点でのCookieの情報が表示されるので、一旦全て削除して下さい(各エントリを選択して削除)

その後、画面上部のタブから「コンソール」を選択します。 表示された画面上で、以下のコマンドを入力します。

document.cookie="auth_token=[上記手順で確認したauth_tokenの値];domain=twitter.com;expires=Fri, 31 Dec 9999 23:59:59 GMT"; document.cookie="twid=\"[上記手順で確認したtwidの値]\";domain=twitter.com;expires=Fri, 31 Dec 9999 23:59:59 GMT";

一点、注意が必要なのは上記2行目のコマンドで"\"(バックスラッシュ)がありますが、一般的な日本語環境(JIS配列)のMacキーボードだと、キートップに表記がありません。 因みに、UNIX環境などでバックスラッシュの代わりに¥(円マーク)の半角が割り当てられることも有りますが、この環境はこれでは無効でバックスラッシュ必須です。

MacのJISキーボードでバックスラッシュを入力する方法は「optionキーを押しながら¥」で良いみたいです。

qiita.com

ここまで入力したら、Mac上で「cmd+r」キーを押してリロードしてみましょう。すると、iOS側のTweetdeck画面が描きかわってログインされた状態になります。 念のため、Cookieの「auth_token」と「twid」が反映されていることを確認しましょう。

f:id:rxjun:20180818174812p:plain

これで、「ホーム画面に追加した側のTweetdeck」でも、予めログインされたセッションが立ち上がります。

用が済んだら、iOS側のSafariのWebインスペクタは無効にしても問題ありません。

Tweetdeck自体の使い勝手

WindowsMacの画面上で表示する分にはマルチカラムを横に広げて一覧性が高いので利便性は高そうです。 また、(疑似)リアルタイムな事もあって、UserStream API廃止でTLの流速に飢えているこれまでの非公式クライアントユーザーの需要を一定程度は満たせそうです。

ただ、iOSAndroid等の小さい画面で表示しようとすると一覧性に少し欠ける部分はありそうです。 マルチカラムは左右スワイプで何とかなりそうですが・・・

あと、致命的なのは「所詮WebUIなのでDMやメンションの通知がAndroidiOSの通知に上げられない」点だと思います。 これは、ネイティブアプリでは無くWebブラウザのリンクをホーム画面においているだけ、と言う性質上如何ともしがたいところでしょう。

本来であればTweetdeckにiOS/Androidネイティブアプリがあるのが望ましいですが、現状では期待薄と言えそうですね。 ある程度の不便を覚悟してWebUIのTweetdeckを使うか、広告やハイライト表示に我慢してTwitter本家のクライアントを使うかの択一になりそうです。

え?自分ですか? 別に本家クライアントの表示にそれほど不満は無いので、そっち使いますよ?*2


*1:擬似的らしいですが

*2:散々検証しておいてそれかよw