Little Strange Software

スマホアプリの開発を行う LittleStrangeSoftware のブログです。

【Twitter タイムライン】複数の指定アカウントの最新ツイートだけを表示

 どうも!LSSです!!

 

さじさん(id:conasaji)のブログ記事、

conasaji.hatenablog.com

に、

自分としてはフォローしてる人の最新ツイートを 一覧で見れたら便利なのになあ、などと ものぐさな使い方を希望します。 Twitter様、ご検討を。

リツイーター、孤高たれ。 - ゆるっと広告業界

との記載を見つけました。

 

TwitterAPIや埋め込み機能を公開しているので、Twitter社がなんとかしなくてもユーザー側でなんとかなるかも?と思い、挑戦してみました!

 

 

表示例

 

 

 

コード

<style><!--
.twitter-timeline{display:inline-block;vertical-align:top;}
--></style>
<div id="gamen"> </div>
<script>// <![CDATA[
txt='';
tids=['LSS0324','hatenablog','YahooNewsTopics','akiko_lawson','711SEJ','famima_now','kobeojizoo','kobe_sumasui','UenoZooGardens'];
for(i=0;i<tids.length;i++){
txt+='<a class="twitter-timeline" data-tweet-limit="1" data-width="210px" href="https://twitter.com/'+tids[i]+'?ref_src=twsrc%5Etfw">Tweet</a>';
}
gamen.innerHTML=txt;
importScripts("https://platform.twitter.com/widgets.js");
// ]]></script>

  

 

使い方

tids=['LSS0324','hatenablog','YahooNewsTopics','akiko_lawson','711SEJ','famima_now','kobeojizoo','kobe_sumasui','UenoZooGardens'];

の行で、表示するアカウント名を列記しています。

(サンプルとして個人アカウントを表示するのは気が引けたので、適当に公式アカウントを並べてみましたw)

 

アカウント名を''(アポストロフィ。たいていの日本語キーボードで「7」のキーをShiftを押しながら叩くと出る記号)で囲み、複数のアカウント名の間はカンマで区切ると、いくつでも並べる事ができます。

 

はてなブログの場合、記事編集の「HTML編集」画面に上記コードをコピペして、アカウント名部分を表示したいアカウント名に書き換え、「プレビュー」画面でそれぞれの最新ツイートの一覧が確認できるようになります。

…が、「ブログとして公開する」事が個人アカウントだと相手さんに了承を得たほうが良さそう?なので、

  • 永遠に下書きとして置いておき、自分個人で見る用にする
  • 並べるアカウントの持ち主の意向を確認してから公開する

のどっちかかなぁ?と思いますね。

 

 

コード解説

最終的に、

importScripts("https://platform.twitter.com/widgets.js");

で、Twitterが用意しているスクリプトを呼び出しています。

これは、「class="twitter-timeline" がついたaタグ」をTwitterのTweetに置き換えてくれるスクリプトですね。

 

で、それを横並びにするために、

<style><!--
.twitter-timeline{display:inline-block;vertical-align:top;}
--></style>

として、display:inline-block; を指定しています。

また、そのままでは下詰め表示になるので、vertical-align:top;で上詰めに指定しています。

 

for(i=0;i<tids.length;i++){
txt+='<a class="twitter-timeline" data-tweet-limit="1" data-width="210px" href="https://twitter.com/'+tids[i]+'?ref_src=twsrc%5Etfw">Tweet</a>';
}

予め、配列変数 tids (任意の名前)に表示したいアカウント名を入れておき、ループ処理でそれぞれのAタグを作っています。

なお、

data-tweet-limit="1"

が表示する件数(1にしているので「最新ツイート1件だけ」)、

data-width="210px"

が表示される幅になります。(小さくしたら縦持ちスマホでも2列表示できるかな?と試してみましたが、限度があるみたいでできませんでした^^;)

 

 

ちなみに、JavaScriptを使わなくても

コード

<style><!--
.twitter-timeline{display:inline-block;vertical-align:top;}
--></style>
<a class="twitter-timeline" data-tweet-limit="1" data-width="210px" href="https://twitter.com/LSS0324?ref_src=twsrc%5Etfw">Tweet</a>
<a class="twitter-timeline" data-tweet-limit="1" data-width="210px" href="https://twitter.com/hatenablog?ref_src=twsrc%5Etfw">Tweet</a>
<a class="twitter-timeline" data-tweet-limit="1" data-width="210px" href="https://twitter.com/YahooNewsTopics?ref_src=twsrc%5Etfw">Tweet</a>
<a class="twitter-timeline" data-tweet-limit="1" data-width="210px" href="https://twitter.com/akiko_lawson?ref_src=twsrc%5Etfw">Tweet</a>
<a class="twitter-timeline" data-tweet-limit="1" data-width="210px" href="https://twitter.com/711SEJ?ref_src=twsrc%5Etfw">Tweet</a>
<a class="twitter-timeline" data-tweet-limit="1" data-width="210px" href="https://twitter.com/famima_now?ref_src=twsrc%5Etfw">Tweet</a>
<a class="twitter-timeline" data-tweet-limit="1" data-width="210px" href="https://twitter.com/kobeojizoo?ref_src=twsrc%5Etfw">Tweet</a>
<a class="twitter-timeline" data-tweet-limit="1" data-width="210px" href="https://twitter.com/kobe_sumasui?ref_src=twsrc%5Etfw">Tweet</a>
<a class="twitter-timeline" data-tweet-limit="1" data-width="210px" href="https://twitter.com/UenoZooGardens?ref_src=twsrc%5Etfw">Tweet</a>
<script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>

 

↑のように aタグを並べても同じ表示結果になります。

 

 

 

ってなとこで、今回はこのへんで!

次回もまた、よろしくお願いします^^

 

 

以下、Amazonで購入可能な書籍

ゼロからはじめる Twitter ツイッター スマートガイド [改訂2版]

Twitterの教科書: ~半年で9000人に集まってもらった筆者が伝える、人が集まるアカウント~

ロジカルなTwitter攻略 (あの出版)

改訂第6版 HTML&スタイルシート ポケットリファレンス (POCKET REFERENCE)

改訂第5版 JavaScript ポケットリファレンス