どうも!LSSです!!
さじさん(id:conasaji)のブログ記事、
に、
自分としてはフォローしてる人の最新ツイートを 一覧で見れたら便利なのになあ、などと ものぐさな使い方を希望します。 Twitter様、ご検討を。
リツイーター、孤高たれ。 - ゆるっと広告業界
との記載を見つけました。
TwitterはAPIや埋め込み機能を公開しているので、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人に集まってもらった筆者が伝える、人が集まるアカウント~
改訂第6版 HTML&スタイルシート ポケットリファレンス (POCKET REFERENCE)