JanetterでRTユーザーにも相互フォローアイコンを表示する

最終更新: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}
													&nbsp;to&nbsp;{$recipientName}
												{/if}
											{elseif $sourcevisible}
												{if $retweeted_status}{* RT *}
													via&nbsp;{$retweeted_status.source}
												{else}
													via&nbsp;{$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}
													&nbsp;to&nbsp;{$recipientName}
												{/if}
											{elseif $sourcevisible}
												{if $retweeted_status}{* RT *}
													via&nbsp;{$retweeted_status.source}
												{else}
													via&nbsp;{$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;などを追加すると、相互フォローアイコンだけ独立して表示させることもできる。改行されてしまって見栄えはあまり良くないので、お好みで。

関連記事

Janetterにフォロワー数/リツイート数/いいね数を表示する

最終更新:2017/01/27

カスタムテーマを設定すると、アカウントのアイコンの下にフォロワー数が表示される。6桁までは表示できた。リツイートされたツイートだとしても、ツイート元のアカウントのフォロワーが表示されるようになっている。また、本文の下にリツイート数といいね(お気に入り)の回数が表示されるようになる。自分のツイートでは良い条件のツイートがなかったので、ニュース記事のツイートを借りてきた。

TwitterクライアントJanetter(ジャネッター)にはタイムラインの表示方法やデザインを選べる「テーマ」という機能がある。標準で実装されているシンプルなテーマ群でも実用上はそれほど困らないんだけど、本家のTwitterのウェブ・クライアントと比べて情報量がやや少ない。

本家では「リツイート」や「いいね」(旧仕様の「お気に入り」)の回数がこれといった操作なしに常に表示されているけど、Janetterでは各ツイートの日付・時刻に備えられたリンクをクリックしてブラウザで確認しないとどのくらい「リツイート」や「いいね(お気に入り)」されているツイートなのか確認できない。

また、そのツイートをつぶやいたアカウントがどのくらいのTwitterユーザーにフォローされているのかはアカウントのリンクをクリックしてプロフィール用ウィンドウを表示させなければならない。本家のウェブ・クライアントではマウス・ポインタをユーザー名の上に置けば簡単なプロフィールを確認することができる。

全部は無理としても、アカウントのフォロワー数とツイートのリツイート数といいね(お気に入り)の回数くらいは視覚的に確認できるようにしたい。なお、名前が変わっただけで、Twitterの内部的には「いいね」と「お気に入り」はまったく同じもので、APIから送られてくるツイートの情報は相変わらず「Favorite(d)」になっている。

そこで、改良したユーザーテーマを作成してこれらの情報を表示させてみようと思う。なお、テーマの作成は一種のプログラミングなので失敗しても当方は責任を負えない。プログラムやスクリプトの作成経験がない場合は特に慎重に。

言うまでもないことだろうけど、Janetterを終了してからテーマの変更を行う。

テーマの移設

テーマを最初から全部作成するのは大変なので、標準のテーマのうちのひとつを複製して移設する。ここではもっとも標準的なSparrowテーマを使用する。

テーマを構成するデータは次のフォルダに入っているので、これをフォルダごと複製し、まずはフォルダに適当な名前をつける。ここでは仮に「TestTheme」とする。

C:\Program Files (x86)\Janetter2\Theme\Items\Sparrow

本来は*.janetthemeというテーマ・ファイルからJanetterに読み込ませてテーマを自動インストールするんだけど、自作の場合はフォルダを増設することで手動インストールすることができる。また、テーマ・ファイルは名前が違うだけで実態はzip形式の圧縮ファイルなのでJanetterの代わりに自分が解凍済みのデータをインストールしたと思えばいい。

TestThemeフォルダに入ったら、theme.iniという初期設定ファイルを開く。UTF-8(BOMなし)で記述されているので、Windows標準のメモ帳(Notepad)よりはあらゆる文字コードに対応した高機能テキスト・エディタを使用したほうが無難。

[TestTheme]
name = TestTheme
description = Left side menu
sample_image = sample.jpg
author = Jane, Inc.
url = http://janetter.net
twitter_id = Janetter_jp
main_frame_html = index.htm
popup_html = ..\..\Common\notice\notice.htm
image_viewer_html = ..\..\Common\viewer\viewer.htm
map_viewer_html = ..\..\Common\viewer\map.htm
profile_html = ..\..\Common\profile\profile.htm

最初の2行を書き換える。Janetterは最初の1行でテーマの存在を識別するので、必ず2行とも書き換える。また、標準のテーマから移設した場合、index = 0010といったようにインデックス番号を付けられているけど、この行は削除しておく。あっても害はないけど、Janetterでのテーマの表示順に関係しているので、最後に表示させることにする。

テンプレートの改造

次に、標準テーマで共通で使用されている共有テンプレートのtweet.tplファイルをTestThemeフォルダにあるtemplateフォルダにコピーする。

C:\Program Files (x86)\Janetter2\Theme\Common\template\tweet.tpl

また、同じフォルダにあるtweet.cssファイルも同様にコピーしておく。

C:\Program Files (x86)\Janetter2\Theme\Common\template\tweet.css

tweet.tplファイルを開くわけだけど、ここからは本当に高機能テキスト・エディタを使うべき。コードの間違いなのかファイルのデータ形式の問題なのか区別できなくなるので、信頼できるコーディング用テキスト・エディタを使うことを強くおすすめする。無料で使えるところではStyleNote5などがおすすめ。ウェブ作成関連で使用しそうな言語やマークアップにはすべて対応しており、コメントの閉じ忘れなど単純な書き間違いはその場でわかる。

フォロワー数の表示

テンプレートはJartyという一種のスクリプト言語で記述されている。ファイルの最初のほうは次のようになっている。わからなければprofile-boxというクラスを目印にして検索するといい。

				<div class="profile-box">
					{if $retweeted_status}{* RT *}
						<p class="main-profile">
							<a action="all"><img src="{$retweeted_status.user.profile_image_url}"></a>
						</p>
						<p class="sub-profile">
							<a action="all" class="sub-profile"><img src="{$user.profile_image_url}"></a>
						</p>
						<div class="icon-rt"></div>
					{elseif $user}{* Normal *}
						<p class="main-profile">
							<a action="all"><img src="{$user.profile_image_url}"></a>
						</p>
					{elseif $sender}{* DM *}
						<p class="main-profile">
							<a action="all"><img src="{$sender.profile_image_url}"></a>
						</p>
						{if $isMe}
							<p class="sub-profile-dm">
								<a action="all" class="sub-profile"><img src="{$recipient.profile_image_url}"></a>
							</p>
							<div class="icon-dm"></div>
						{/if}
					{else}{* Search *}
						<p class="main-profile">
							<a action="all"><img src="{$profile_image_url}"></a>
						</p>
					{/if}
				</div>

profile-boxクラスはツイートしたアカウントやそれをリツイートしたアカウントのアイコンが表示される領域で、そこにツイート元のアカウントのフォロワー数を表示する行を追加する。

				<div class="profile-box">
					{if $retweeted_status}{* RT *}
						<p class="main-profile">
							<a action="all"><img src="{$retweeted_status.user.profile_image_url}"></a>
							<div style="width:36px; margin:0 0 4px 0; text-align:center; color:Black; font-size: x-small;">{$main_user.followers_count}</div>
						</p>
						<p class="sub-profile">
							<a action="all" class="sub-profile"><img src="{$user.profile_image_url}"></a>
						</p>
						<div class="icon-rt" style="top: 57px;"></div>
					{elseif $user}{* Normal *}
						<p class="main-profile">
							<a action="all"><img src="{$user.profile_image_url}"></a>
							<div style="width:36px; margin:0 0 4px 0; text-align:center; color:Black; font-size: x-small;">{$main_user.followers_count}</div>
						</p>
					{elseif $sender}{* DM *}
						<p class="main-profile">
							<a action="all"><img src="{$sender.profile_image_url}"></a>
						</p>
						{if $isMe}
							<p class="sub-profile-dm">
								<a action="all" class="sub-profile"><img src="{$recipient.profile_image_url}"></a>
							</p>
							<div class="icon-dm"></div>
						{/if}
					{else}{* Search *}
						<p class="main-profile">
							<a action="all"><img src="{$profile_image_url}"></a>
							<div style="width:36px; margin:0 0 4px 0; text-align:center; color:Black; font-size: x-small;">{$main_user.followers_count}</div>
						</p>
					{/if}
				</div>

リツイート数/いいね(お気に入り)数の表示

次に74行目付近。tweet-bodyクラスが記述されている。ここにツイートの本文を表示するようになっている。

							<div class="tweet-body">
								{if $retweeted_status}{* RT *}
									<p class="text">{$retweeted_status.text}</p>
								{else}
									<p class="text">{$text}</p>
								{/if}
							</div>

本文の直後に「リツイート」の回数が2回以上あればリツイート数を表示し、「いいね(お気に入り)」の回数が1回以上あればいいね(お気に入り)数を表示するコードを記述する。

							<div class="tweet-body">
								{if $retweeted_status}{* RT *}
									<p class="text">{$retweeted_status.text}</p>
								{else}
									<p class="text">{$text}</p>
								{/if}
								{if $retweeted_status}{* RT *}
									{if $retweeted_status.retweet_count>1}
										<p class="rtcount">{$retweeted_status.retweet_count}</p>
									{/if}
									{if $retweeted_status.favorite_count>0}
										<p class="favcount">{$retweeted_status.favorite_count}</p>
									{/if}
								{else}
									{if $retweet_count>1}
										<p class="rtcount">{$retweet_count}</p>
									{/if}
									{if $favorite_count>0}
										<p class="favcount">{$favorite_count}</p>
									{/if}
								{/if}
							</div>

$retweet_count変数はTwitterから取得したリツイートの回数を、$favorite_count変数はいいね(お気に入り)の回数を格納している。ただし、これらの変数の数値はリツイートの場合($retweeted_status == true)にはリツイートした人のツイートについての情報になるため、元のツイートのリツイート数を知りたい場合は$retweeted_status.retweet_count変数から参照しなければならない。いいね(お気に入り)の回数についても同様で、$retweeted_status.favorite_count変数から参照する。

以上でテンプレートの編集は終了。ファイルを保存する。

CSSの追加

次に、tweet.cssファイルを開く。ファイルの最後までスクロールし、次のスタイルを追加する。リツイート数といいね(お気に入り)数の表示にはそれぞれrtcountとfavcountというクラスを割り当ててあり、それをどのような表示形式にするかという指定にあたる。CSSの記述方法を知っているのならば、ここは好みで自由に変更できる。

.rtcount {
	color: #fff;
	background-color: #19cf86;
	display: inline-block;
	width: 25%;
	border-radius: 5px;
	text-align: center;
	font-weight: bold;
}
.favcount {
	color: #fff;
	background-color: #e2264d;
	display: inline-block;
	width: 25%;
	border-radius: 5px;
	text-align: center;
	font-weight: bold;
}

厳密には、Jartyが表示する場所や内容をクラスで管理していると言ったほうが正しく、新しい表示要素を追加したい場合にはそれに対応するクラスを新たに定義しなければならない。

例えば、textクラスはツイート本文のクラスだけど、ただのテキストだからと思ってこれを別の用途に流用しようとすると、ツイート本文が2回、3回と連続で表示されたりする。また、クラスを定義していないHTMLタグを記述するとタイムラインが表示されなくなる。つまり、クラスはCSSのためだけにあるのではなく、内容にも紐付けられて管理されているということになる。

最初はHTMLを動的に生成するPHPのようなものかと思っていたけど、テンプレートに特化したスクリプトなのでPHPほどには融通はきかない。フォロワー数がクラスを定義しなくても表示できたのは本当に偶然。なんで大丈夫なのかは今でもよくわかっていない。とは言え、Jartyは構文をPHPに似せて作ってあり、関係演算子などはそのままコピーできるように設計されているようだ。

アイコン画像パスの変更

Sparrowテーマは独自のtweet.cssファイルを持っていないため共通ファイルから引っ張ってきたわけだけど、アイコン画像は共通のものをそのまま使いたいのでパスを変更しなければならない。基本的には、../../Common/images/timeLine/../../../Common/images/timeLine/に一律に置換すればいい。

独自のtweet.cssファイルを最初から持っているテーマから移設した場合は変更しなくてもいい。なお、CSSには独自にかなり変更を加えてしまったので、行番号は大体の位置。

「お気に入り」アイコン。今のTwitterの仕様で言うところの「いいね(お気に入り)」をしたツイートの左上隅に表示される黄色い星のアイコン。

.favorited .star-batch{
	position: absolute;
	top:0px;
	left:0px;
	width: 15px;
	height: 15px;
	background-image: url(../../../Common/images/timeLine/star-batch.png);
}

相互フォロー(スマイル)アイコン、非公開アカウント(鍵)アイコン、未読アイコン、位置情報(ジオピン)アイコン。

span.friend{
	float: left;
	display: block;
	width: 9px;
	height: 9px;
	margin: 4px 1px 0 1px;
	text-indent: -99999px;
	background-image: url(../../../Common/images/timeLine/smile.png);
}
span.protected{
	float: left;
	display: block;
	width: 9px;
	height: 11px;
	margin: 5px 0 0 2px;
	zoom: 0.9;
	text-indent: -99999px;
	background-image: url(../../../Common/images/timeLine/key2.png);
}
span.unread{
	float: left;
	display: block;
	width: 9px;
	height: 9px;
	margin: 4px 0 0 1px;
	text-indent: -99999px;
	background-image: url(../../../Common/images/timeLine/unread.png);
}
span.geopin{
	float: left;
	display: block;
	width: 9px;
	height: 11px;
	margin: 0 2px 0 0;
	text-indent: -99999px;
	background-image: url(../../../Common/images/timeLine/geopin2.png);
}

タイムラインのギャップに表示される波型のアイコン。

.gapArea{
	margin: 3px 0 10px 0;
	height: 24px;
	text-align: center;
	background-image: url(../../../Common/images/timeLine/gap_line.png);
	background-repeat: repeat-x;
}

以上でCSSの編集は終了。ファイルを保存する。

CSSファイルを保存したら、Janetterを起動する。設定画面から「デザイン」を選び、最も右に作成したTestThemeがあるので、それを選択し、「テーマを変更する」ボタンをクリックする。もしも、画面が真っ白になってしまって変化がない場合はテンプレートのコードがどこか間違っているので、別のテーマに戻して不具合を探す。エラーコードなどがはっきり出るわけではないので、変更した箇所をよく確認する。CSSの記述が間違っている程度であればタイムラインが止まってしまうような事態が起こることはまずない。

問題点

Janetter002
(参考)Janetterを利用したことがない方のために変更前のSparrowテーマの表示。フォロワー数、リツイート数、いいね(お気に入り)の回数は表示されない。サムネイル画像のサイズが大きいのはカスタムスタイルシートを設定してあるため(前の記事参照)。

フォロワー数は概ね期待どおりの結果になったんだけど、リツイート数といいね(お気に入り)の回数には少し問題があった。

リツイート数といいね(お気に入り)の回数はあくまでも大体のものだと思ったほうがよさそう。Janetterが定期的にAPIを叩いた時点での数値なのでツイートを読むまでに時差があった場合、本家のウェブ・クライアントと比べてみるとリツイート数にかなり差が出てしまっていることもよくある。

特に、「いいね(お気に入り)」の回数はかなりあてにならない。実は、実装はしていても$favorite_count変数はJanetterの公式でも現在公開されていなくて、信頼性が低いことは認識しているようだ。

それから、フォローしているアカウントのツイートが流れる「ホーム」のタイムラインに限ってはリツイート数もいいね(お気に入り)の回数も表示されないことがある。「再読み込み」をかけると表示されるんだけど、リアルタイムで追加されていくツイートには表示されない。一方、同じくリアルタイムで追加されていくものでも「リスト」では正しく表示される。

テンプレートは同じものを使っているので、おそらくリアルタイム性を重視したホーム用のユーザーストリームAPIとリストのデータをまとめて読み込むクローラーAPIの違いなんだろうと思うけどTwitter本家の仕様なのでクライアント側ではどうしようもない。Janetterがリツイート数といいね(お気に入り)数の表示に標準で対応していないのはこのへんに理由があるのかもしれない。

表示例

関連記事

参考記事

Janetterのサムネイルの画像サイズを変更する

最終更新:2017/01/27

Janetter000
サムネイル画像サイズ変更前。CSSで最大120×80pxに設定されている。Twitterからはthumbサイズで呼び出されるため、実質80×80px。

Janetter(ジャネッター)は、国産Twitterクライアントのひとつ。公式のアプリケーションやウェブ・クライアントではやってくれない未読管理もできてとても便利なんだけど、右の画像のようにツイートに添付されたサムネイル画像が非常に小さくて見づらいのが難点だった。

調べてみると、Janetterはウェブ・ブラウザのようにHTMLとCSSで画面表示の内容やデザインを決定しているようなので、やりようによってはカスタマイズできそうだった。

サムネイル画像サイズの変更

ユーザースタイルシートを記述できる空のファイルが用意されているので、そこに任意のCSSを記述する。具体的には次の場所。ユーザーフォルダの下の階層にあるので注意。

C:\Users\[user_name]\AppData\Roaming\Jane\Janetter2\UserStyleSheets\Custom.css

Custom.cssには次のように記述する。

.tweet-thumb img,
.tweet-thumb canvas{
	float: left;
	margin: 5px 5px 3px 0;
	max-height: 150px;
	max-width: 150px;
	border-radius: 5px;
}

なお、Twitterサーバーに置かれている画像ファイルには、Janetterで動作しているJavaScriptによって一律に「:thumb」のサフィックスが追加されるようになっているので、縦横ともに最大でも150pxまでしか指定できない。

上のスタイルの元になっているCSSは、次のtweet.cssファイルに記述されている。

C:\Program Files (x86)\Janetter2\Theme\Common\template\tweet.css

Janetterデバッグモード

他の要素(クラス、セレクタ)に対するスタイルがどこのCSSファイルに記述されているか調べるには、Janetterのデバッグモードを使用する。

まず、Janetterをいったん終了する。Janetterへのショートカットを別に作成し、次のように「リンク先」に--debugを追加する。

"C:\Program Files (x86)\Janetter2\bin\Janetter.exe" --debug

編集したショートカットをダブルクリックするとデバッグモードで起動される。デバッグモードになっているか確認するには、左上の「Janetter」のロゴを左クリックして「Developer Tools」や「Test」といったメニューが追加されているかどうかで判断する。

「Developer Tools」を選択すると、Chromiumの要素解析画面が表示される。上から順に要素を選択していくと、対応するJanetterの画面の一部がブロック(コンテント、パディング、ボーダー、マージン)で色分けされて表示されるので、それを参考にCSSの構造を解析する。

「:thumb」サフィックスの解除

Twitter規定のサムネイルのサイズ(150px)が実質上の最大サイズになってしまう制限を解除するには、次の場所にあるthumbnail.jsファイルをカスタムテーマのフォルダに複製してからJavaScriptコードを書き換える。カスタムテーマの作り方についてはこちらの記事を参照のこと。

(以前の版ではコモン・コードを直接書き換えていたけど、全部のテーマに影響を与えてしまい、褒められた方法ではないので、カスタムテーマをちゃんと用意するほうが良い。また、元のコードがわからなくならないように複製してコメントアウトしておいてから改変するほうが無難)

C:\Program Files (x86)\Janetter2\Theme\Common\js\janet\thumbnail.js

thumbnail.jsの125行目あたり。

		//-------------------------------------------------------
		// Twitter
		//-------------------------------------------------------
		function twimg(permalink){
			var a = _content.find('div.tweet-body p a[expanded="' + permalink + '"]'),
				media_url = a.attr('media'),
				extended_media_url = a.data('extended'),
				type = a.attr('type');
			if(media_url && (type=='photo' || type=='video' || type=='animated_gif')){
				if(extended_media_url){
					$.each(extended_media_url, function(){
						_append(this + ':thumb', type=='photo'? this + ':orig': '', permalink);
					});
				}else{
					_append(media_url + ':thumb',  type=='photo'? media_url + ':orig': '', permalink);
				}
				return true;
			}
			return false;
		}

136行目と139行目を次のように書き換える。

		//-------------------------------------------------------
		// Twitter
		//-------------------------------------------------------
		function twimg(permalink){
			var a = _content.find('div.tweet-body p a[expanded="' + permalink + '"]'),
				media_url = a.attr('media'),
				extended_media_url = a.data('extended'),
				type = a.attr('type');
			if(media_url && (type=='photo' || type=='video' || type=='animated_gif')){
				if(extended_media_url){
					$.each(extended_media_url, function(){
						_append(this + '', type=='photo'? this + ':orig': '', permalink);
					});
				}else{
					_append(media_url + '',  type=='photo'? media_url + ':orig': '', permalink);
				}
				return true;
			}
			return false;
		}

大きな画像やTwitterサーバー以外に置かれているメディアのことは考えていないので、タイムラインの幅にフィットさせるには上のCustom.cssの最大サイズを適宜書き換える必要がある。タイムラインの最小幅が300pxくらいだとすると、サムネイルの幅は250pxくらいになる(Developer Toolsを使えば厳密に測定できる)。

Janetter001
サムネイル画像サイズ変更後。「:thumb」サフィックスを解除してあるため画像全体が表示される。CSSで最大サイズを255×1024pxに設定してあるためサムネイルは縦に並ぶ。

「:thumb」サフィックスを解除し、Custom.cssを調整すると右の画像のようになる。1件のツイートが縦長になってスクロールするのが大変になる傾向にあるけど、未読のツイートをあまり時間をかけずに一気に閲覧していきたい時にはクリックの回数を減らせて便利。

流し読みをすると当然細かい見落としは多くなるけど、Twitter公式のウェブ・クライアントでは「1000件の新着ツイート」と表示されていても取得できるツイート数に上限があり、1000件全部を読むことはできない。寝る前に最後に見た時点のタイムラインに遡行するのも難しい。Janetterではそういう心配がない。

その代わりに、大量の未読ツイートに埋もれることにもなるけど、とにかく寝ている間や他の作業に集中している間の時系列がちゃんとつながっているだけでも大事な告知などの決定的な見落としがなくなって気分的にはだいぶ違う。

ただ、Twitterの本家は「Twitterカード」や「アンケート(投票)」など新しい機能を次々に実装しつつあるため、Janetter(この記事を書いている時点でWindows版はVer. 4.3.1.0)が徐々に旧式化しているのは事実。奇特な方が新機能に対応するプラグインを作ってくれるか、Janetterのバージョンアップを気長に待つしかない。

関連記事

参考記事

Twitterの埋め込みタイムラインをカスタマイズ

最終更新:2017/01/14

以前はTwitterからのツイートの取得が比較的簡単にできて、WordPressのプラグインにも色々な特徴があるタイムライン表示ツールがあった。このブログにも自分のツイートを表示していた。でも、いつだったかTwitterがAPIを大幅に変更したとかで、使えなくなってしまったプラグインがあって、しばらくの間ブログにツイートは表示しないでいた。

Twitterの公式ウィジェット機能を使うと自分のウェブサイトにタイムラインを表示するための埋め込みコードを取得できるんだけど、あまり使い勝手が良くないという印象しかなかった。最近はかなり改善されたようで、WordPressのウィジェットくらいの小さなスペースでも綺麗に表示されるようになった。また、埋め込んだウェブサイトやWordPress側のコードにパラメータを与えるとカスタマイズできるようになっていて自由度が増した(単に知らなかっただけかもしれない)。

特に、日本語表示のタイムラインは、「@VANGUARD_FLIGHTさんのツイート」の「ツイート」の文字だけ妙に大きくて不格好なのが不満だったので、従前の英語表示に変更することにした。公式ウィジェットのコードは次のようなもの。

<a class="twitter-timeline" href="https://twitter.com/VANGUARD_FLIGHT" data-widget-id="xxxxxxxxxxxxxxxxx">@VANGUARD_FLIGHTさんのツイート</a>
<script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0],p=/^http:/.test(d.location)?'http':'https';if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src=p+"://platform.twitter.com/widgets.js";fjs.parentNode.insertBefore(js,fjs);}}(document,"script","twitter-wjs");</script>

これにいくつかの属性を次のように追加する。

<a class="twitter-timeline" href="https://twitter.com/VANGUARD_FLIGHT"
data-widget-id="xxxxxxxxxxxxxxxxx"
data-chrome="transparent"
data-border-color="#808080"
data-lang="en">@VANGUARD_FLIGHTさんのツイート</a>
<script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0],p=/^http:/.test(d.location)?'http':'https';if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src=p+"://platform.twitter.com/widgets.js";fjs.parentNode.insertBefore(js,fjs);}}(document,"script","twitter-wjs");</script>

基本的には、属性名に「data-」というプレフィックスをつけるようにする。

data-chrome="transparent"は、ウィジェットの背景を透明にする設定。ウェブサイトの背景色に馴染まない時に。
data-border-color="#808080"は、ツイート間の境界線の色の設定。
data-lang="en"は、表示言語を英語にする設定。この設定だけはプレフィックスなしでlang="en"でも同様の表示になる。

パラメータ

Twitterのウィジェット設定画面で設定を変更したのに埋め込みタイムラインに反映されないことがあるので、埋め込みタイムラインのコード側で設定を強制することができる。使いどころがありそうなものを一覧にした。他にもパラメータはあるけど使い道のよくわからないものは省略した。詳細は参考記事を参照。

パラメータ一覧
属性名 効果 有効な値
data-chrome ウィジェットの表示要素をなくす。非表示にする要素をスペース区切りで指定する。ただし、noheaderを指定した場合は、Twitterの表示要件を満たすようにしなければならない。 noheader
nofooter
noborders
noscrollbar
transparent
data-tweet-limit タイムラインに表示するツイート数。 1~20
data-lang ウィジェットの言語コード。ツイートの内容には影響しない。lang=”en”でも同様の効果。 en
ja
es
data-theme ウィジェットのテーマ。Twitterアカウント画面でのテーマ設定が反映されない時に強行できる。 dark
light
data-link-color ツイートのリンク色。16進トリプレット表記 #0080ff
(16進数)
data-border-color ウィジェットの境界線の色。16進トリプレット表記 #dddddd
(16進数)
width ウィジェットの最大幅をピクセルで指定する。 180~520
height ウィジェットの高さをピクセルで指定する。tweet-limitパラメータが指定されているときは無効。 200以上

WordPressのウィジェットへの表示

WordPressのウィジェットにツイートを表示させたい場合は、ダッシュボードから外観を選んで「ウィジェット」で設定する。もっとも一般的な「テキスト」ウィジェットをドラッグ&ドロップして、上記のコードをコピー&ペーストすればいい。

参考記事