最終更新：2017/02/01
TwitterクライアントJanetterでは、ツイートの発信元のユーザーと相互フォローになっている場合はツイート・ヘッダーに相互フォローアイコンとしてスマイル・マークが表示される。どのユーザーと相互フォローなのかひと目で判るJanetterの特徴のひとつ。本家Twitterの純正クライアントではタイムラインに相互フォローかどうかを示す情報は直接表示されない。
しかしながら、ツイート・フッターに表示される、リツイートしたユーザーを示す「Retweeted by （ユーザー名）」には同様のアイコンは表示されない。そこで、リツイートしたユーザーも相互フォローかどうかを判定し、ユーザー名にアイコンを表示するように改良する。
免責事項
本記事で紹介しているコードを使用したことによって生じた事態に当方は一切責任を負えない。動作を保証するものではないし、動作したとしても運用上生じたあらゆる問題にも同様に責任を負いかねる。相互フォローアイコンはあくまでもTwitterサーバーの応答を元にした目安であって、アイコンが表示されていないことをもってフォローを解除してしまったりして相手の心証を害することになっても関知できない。
決まり文句だけど、大事なことなので。
テンプレートの加工
Janetterカスタム・テーマのtweet.tplからリツイートユーザーを表示している次のようなコードを探す。独自にあちこち変更しているので、行番号はおおよその位置。
カスタム・テーマの作り方がわからない場合は、以前の記事をよく読んでもらって、新しくカスタム・テーマを追加する。くれぐれも、コモン・コードや標準で実装されているテーマに手を加えて上書きしてしまわないこと。
<div class="tweet-footer-text">
<p class="from">
<span class="source">
{if $sender}{* DM *}
{if $isMe}
to {$recipientName}
{/if}
{elseif $sourcevisible}
{if $retweeted_status}{* RT *}
via {$retweeted_status.source}
{else}
via {$source}
{/if}
{/if}
</span>
</p>
{if $retweeted_status}
<p class="retweetedBy">
<span class="icon-rtby"></span><span>Retweeted by </span>
{$retweetedBy}
</p>
{/if}
</div>
位置を特定できたら、「Retweeted by」のテキストとユーザー名を示す{$retweetedBy}の間に次のようなコードを追加する。
ツイート・ヘッダーと同じようにユーザー名の後にアイコンが続くようにしてデザインを統一したいと思うかもしれないけど、ユーザー名が長い場合はタイムラインからはみ出した部分が自動的にカットされてしまうので、相互フォローアイコンが見えなくなる。
<div class="tweet-footer-text">
<p class="from">
<span class="source">
{if $sender}{* DM *}
{if $isMe}
to {$recipientName}
{/if}
{elseif $sourcevisible}
{if $retweeted_status}{* RT *}
via {$retweeted_status.source}
{else}
via {$source}
{/if}
{/if}
</span>
</p>
{if $retweeted_status}
<p class="retweetedBy">
<span class="icon-rtby"></span><span>Retweeted by </span>
{if $friendvisible && $user && $user.both_following}
<span class="friend-rt"/>
{/if}
{$retweetedBy}
</p>
{/if}
</div>
Janetterのデバッグ・モードを使えばわかるんだけど、122～124行と125行のコードを入れ換えればユーザー名の後にアイコンを表示すること自体はできるので、どうしてもアイコンの位置にこだわりたい人はデベロッパ・ツールを駆使して調べてみるといいだろう。
CSSの追加
上のテンプレートのコードでは、friend-rtというクラスを新しく使用しているので、tweet.cssの任意の場所に次のCSSを追加する。200行あたりに相互フォローアイコンに関する設定があるので、その辺がちょうどいいかもしれない。行番号は同じく大体の位置。
span.friend-rt{
display: inline-block;
width: 9px;
height: 9px;
text-indent: -99999px;
background-image: url(../../../Common/images/timeLine/smile.png);
}
ちなみに、float: left;かfloat: right;などを追加すると、相互フォローアイコンだけ独立して表示させることもできる。改行されてしまって見栄えはあまり良くないので、お好みで。