軽量Twitterクライアント「twicli」のプラグインを書いた

実家へ帰ったときに非力なノートパソコンでNew Twitter（新しいTwitterのWeb）を使っていたのだがとても重い。非力なのが悪いのだが、やっぱりクライアントを探す必要があると思って、プラグインを作ってカスタマイズ可能なクライアントをちょっと探してみたらこういうのが見つかった*1。

• Seesmic Desktop (Silverlight)
• MahTweets (Windows)
• twicli (Web)
• twicca (Android)

この中で、Webベースで軽いということでtwicliを使ってみたらこれがなかなかいい。プラグインもJavaScriptで簡単に書ける。うちで使ってる様子はこんな感じ↘
早速いくつかプラグインを書いてみた。

返信する人を表示するプラグイン show_in_reply_to_user.js

*2
スクリーンショットの「いまなにしてる？」の部分。ここは最初の状態では何もないけれど、このプラグインを入れると表示されるようになる。
表示される内容は、TwitterのWebとほぼ同じ。新規ツイートのときは「いまなにしてる？」で、返信するときは「@ユーザ名 への返信」になる。
何がうれしいの？と思うかもしれないが、実はただツイートに「@ユーザ名」を入れることと、返信ボタンを押して返信するのでは、そのツイートの表示範囲が違ったりするので、それを区別するために使う。

使い方

https://gist.github.com/raw/779033/cab716b0cc5512e687ea88cefdf866d152a01bb2/show_in_reply_to_user.js
https://gist.github.com/raw/779033/show_in_reply_to_user.js

をプラグインの設定に追加して保存。*3

既知の問題

返信ボタンを押すと「@ユーザ名 への返信」と表示されて、ツイート入力欄に「@ユーザ名」が自動入力される。この後手動で「@ユーザ名」を消してしまうと返信にならないのだが、表示は「@ユーザ名 への返信」のまま。
内部的に in_reply_to_user というパラメータの値しか見ていないのが原因。入力欄を監視して、「@ユーザ名」が含まれない場合はメッセージを変える必要があるけど手抜き。
どのツイートへの返信なのかも表示できたほうがいいので、それも含めてそのうち直す予定？

リプライをTL上に自動的に展開表示するプラグイン embed_reply.js

*4
twicliにはボタンを押すと返信先（リプライ*5）をポップアップで表示する機能がついているのだが、それをいちいち押さなくても自動的にリプライをタイムラインに展開というか埋め込んで表示する。スクリーンショットの黄色くなっているツイートの部分。
リプライにさらにリプライがつながっている場合もあるが、今のところは1つだけ自動で展開する。2つめ以降は「@」ボタンを押すことで展開される。

使い方

https://gist.github.com/raw/781494/cc5fd62c2912fab8838993120cd53406b9cfca58/embed_reply.js
https://gist.github.com/raw/781494/embed_reply.js

をプラグインの設定に追加して保存。

注意

1つのリプライを取得するのにAPIを1回使用するため、リプライが多い場合はAPIを大量に消費してしまうので注意。すでに取得したツイートの場合はAPIを使わないが、リロードすると消えるのでリロードごとにいっぱい消費してしまう。ローカルストレージにツイートをキャッシュしたほうがいいかも。
コードをいじれる人は一応プロキシの設定をONにすることもできるけどうまく使えるかどうかはわかりません。

既知の問題

Internet Explorerでは（たぶん）動かない（手抜き）。
同じリプライが複数現れたとき、ノードidが重複する（手抜き）。
タイミングによってたまに展開されないことがある。

search.js の検索タブでリプライ表示を使えるようにするプラグイン search_via_phoenix.js

*6
標準プラグインの search.js を使うと、ハッシュタグやキーワード検索をタブで見ることができるが、Twitterの検索APIは貧弱なので、リプライなどの情報を得ることができない。
このプラグインを使うと、検索APIをNew Twitterが使っているAPIに差し替えて、リプライ情報を得ることができる。
スクリーンショットはちょうどこれを使って「twicli」で検索しているタブの様子。リプライ情報が得られるので embed_reply.js と組み合わせてリプライが自動展開されている。

使い方

https://gist.github.com/raw/781522/8459747c190d51e59f7d1e2df47fb996e1c987f4/search_via_phoenix.js
https://gist.github.com/raw/781522/search_via_phoenix.js

をプラグインの設定で「search.js」より後ろに追加して保存。

注意

公式に公開されているAPIではないのでいつ使えなくなるかわかりません。

既知の問題

2ページ以降の表示がなんかできないことがある（チェック不足）。

会話などの関連ツイートを表示するプラグイン related_results.js

*7
New Twitterでツイートをクリックしたときに右側に出る詳細表示を再現してみようというプラグイン。ただし今は以下の関連ツイート表示のみ。

• 会話のツイート
• 返信のツイート
• 特定のユーザーを含むツイート
• 特定のハッシュタグのツイート
• 特定の単語を含むツイート
• 同じユーザーの最近のツイート

必ず全部あるわけではなくて、会話や返信も実際にはあるのに表示されないときがある。この中から最大2項目表示される（らしい）。

使い方

https://gist.github.com/raw/782885/90a9396dada4bbbae398fcc6f7b5830829e8ab3f/related_results.js
https://gist.github.com/raw/782885/related_results.js

をプラグインの設定に追加して保存。
リロードすると、各ツイートのメニュー（▼）の中に「☄関連ツイート」*8という項目が出るのでそれをクリック。

注意

たぶんバグがいっぱい。

おまけ：スタイルシート

*9
スクリーンショットで使っているスタイルシート。
Elsewhitherで配布されているCSSをちょっといじって、Old Twitterになんとなく似せた感じのもの。きれいなデザインのCSSを公開していただいてありがとうございます。

使い方

@import url(https://gist.github.com/raw/777698/05ca4702ffa26b9c947a3be613babb977c711ef2/twicli_elsewhither.css)
@import url(https://gist.github.com/raw/777698/twicli_elsewhither.css)

をユーザスタイルシートの設定に追加して保存。

*1:http://twitter.com/tkawa/status/24746319365013504

*2:http://twitter.com/tkawa/status/25739881871319040

*3:1/23現在のバージョンのURL。更新された場合は手動で変更する必要ありURL変更。たぶんリロードすれば最新になる

*4:http://twitter.com/tkawa/status/26475145698738176

*5:適切な用語ではないが今は仮にこう呼んでおく

*6:http://twitter.com/tkawa/status/26484002227494912

*7:http://twitter.com/tkawa/status/27017514093379584

*8:「☄」という絵文字に特に意味はないけど、何かアイコンみたいにしたかった

*9:http://twitter.com/tkawa/status/25938156402511872