ありのごとくあつまりてFC2ブログカスタマイズ,共有テンプレート,素材リンク集,フリーソフトの紹介など。 迷子にならないブログ作りを目指し... 何か1つでも お役に立てる情報 を提供できたらいいなぁと思っています。

モード変更

この記事に含まれるタグ (Keyword) :
ツイッター  jQuery  javascript  カスタマイズ  

自分のつぶやきをオートスクロールで表示 (jCarousel Lite を活用)

2012/03/09 (金)  カテゴリー: Twitter・ブラウザ関連

自分のつぶやきを jQuery の 『jCarousel Lite』 を利用して 1件ずつ自動でスクロール表示 するようにしてみました。 ツイートを何件ずつ表示するか、自動でスクロールさせるか・手動で送るようにするか などは自由に変更できるし、単純にリストで出力したものを利用しているだけなので、色々応用の効く方法だと思います。

Twitter,ツイートを取得して1件ずつ表示
※実際の表示は 個別記事ページの記事下 とトップページ にあります。

つい先日、jQuery 『jTwitteen』 というのを試したばかりなのですが... どうしても IE8以下 で見た時のフォントの汚さが気になってしまって、方法を変更することにしました。
[ デモページ / 関連記事 : ツイートを1件ずつ表示する jTwitteen の設置方法 ]


今回利用した 『jCarousel Lite』 は元々テンプレに設置していたものです。
[ 記事 : jCarousel Lite をカスタマイズして記事毎に! ] でも紹介したものですが、基本は ↓こんな感じ。 これは オートスクロールはOFF の状態ですが、自動も可能。


  • 立ち読みページ
  • 花粉症の長男用マスク
  • 次男用(これでも大きい..)
  • 20Lを2コ購入。コック付。

要は、リスト<li> で自分のツイートを表示するようにしたら これが使えたのですが、設置する上でかなり苦労した部分もあるので 方法を紹介しておきます。 各ツイートへの 「@返信,リツイート,お気に入り」 ボタンも付けてみました。


つぶやきを jCarousel Lite で、1件ずつ表示させる方法

取り敢えず FC2ブログ向け に説明を入れておきます。 私が実際に使っている id,class名 とは一部異なりますので ご注意ください。 Windows 7,Vista,XP, Wii, 3DS, iPad / Firefox, Google Chrome, Opera, Safari, IE6 ~9 等 で動作確認済みです。

1. スクリプトの準備

  1. jQuery ライブラリ本体
    Googleのサーバーから直接読み込んで使用する場合、準備は不要です。 私が使っているのは バージョン1.2.3 です。 それ以上なら機能すると思います。
    [ 参照 : Google AJAX Libraries APIを利用しよう! | THE HAM MEDIA ]
  2. jcarousellite_1.0.1.min.js (2 KB)
    jCarousel Lite Download からDLした .jsファイル を ファイルサーバーにアップロードします。※FC2ブログでは ファイル名に .(ドット) が含まれているとアップできないので... 予め、ファイル名を jcarousellite.js などのように変更しておいてください。
  3. blogger_tw.js (3 KB)
    http://twitter.com/javascripts/blogger.js を私がカスタマイズしたものです。
    blogger_tw.js をDLして (必要なら編集し) アプロードしておきます。
    ↑ これ以外にも色々サンプルを用意しました。 取り敢えず、これでテストしてみて 動作OK なら 他のと差し替えると良いかと思います。 (詳細は 記事とコメントを参照)

2. <head> ~ </head> 部分に以下を記入

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.2.3/jquery.min.js" type="text/javascript"></script>
<script type="text/javascript" src="http://blog-imgs-00.fc2.com/a/b/c/ ~ /jcarousellite.js"></script>
<script type="text/javascript" src="http://blog-imgs-00.fc2.com/a/b/c/ ~ /blogger_tw.js" charset="utf-8"></script>

<script type="text/javascript">
$(function(){
$("#jcarousel_tw .anyClass").jCarouselLite({ btnNext:"#jcarousel_tw .next", btnPrev:"#jcarousel_tw .prev", auto:5000, speed:1000, vertical:true, visible:1 });
});
</script>
  • 赤文字部分 には、アップロードしたファイルのパスを入れてください。
  • blogger_tw.js は 日本語を含んでいるので、文字コードを指定してあります。
  • auto:5000, speed:1000, vertical:true, visible:1
    jcarousellite.js デフォルトの値は、auto:null(オートスクロールしない), speed:200(スライドスピード), vertical:false(≒横方向スライド), visible:3(可視リスト3件) です。 『jCarousel Lite』 をツイッターでのみ利用するのであれば、js ファイル(該当箇所)を 直接書き換えておいても良いかも。。
  • auto:5000(1つを5秒表示) speed:200(スライドの移動スピード)

3. 表示させたい場所に以下を記入 (通常は CSS設定後)

<div id="jcarousel_tw">
<div class="next"></div><div class="prev"></div>
<div class="anyClass">
<span class="myTwitter"><a href="http://twitter.com/arinogotoku" title="Twitter へ" target="_blank">@arinogotoku</a></span><br />
<ul id="twitter_update_list"><li>つぶやきを取得・表示しています...</li></ul>
</div><!--/anyClass-->
</div><!--/jcarousel_tw--><br style="clear:both" />
  • 太字部分 のみ必須。 <li> に入れた内容は javascript OFF の場合と、読み込み中 及び ツイートが取得できなかった場合 に表示されます。
  • 灰色文字部分 は 任意のユーザーに変更してください。 入れなくてもOKです。

4. </body> 直前などに以下を記入

<script type="text/javascript" src="http://api.twitter.com/1/statuses/user_timeline.json?screen_name=arinogotoku&amp;include_rts=true&amp;count=7&amp;callback=twitterCallback2"></script>

  • 赤文字部分 に、取得したいユーザーのID と 表示したい件数 を入れます。
  • include_rts=true というパラメータを追加することで、公式RT も取得できるようになります。 逆に 公式RT は省略したければ、この設定を外せばOKです。 (表示件数は、いずれの場合も 公式リツイートを含む件数 になるようです。)
    ※現在の私の設定は count=7 → count=10 に変えています。
  • 余談 : 最初、 http://twitter.com/statuses/user_timeline/arinogotoku.json? を使う方法を試したのですが、これでは include_rts の設定が使えず、公式RT を拾う方法がないようです。 http://api.twitter.com/1/statuses/user_timeline.json? を利用します。

5. スタイルシートの設定例

以前、一般的な『jCarousel Lite』での設定例 を載せたので、それに合わせてあります。 前回のソースを使っている方は 緑色部分を追加すればOK です。

CSS の設定は あくまでも一例です。 全体のサイズ を入れておきます。

.prev と .next 部分は 背景画像を使った場合の設定例です。 方法は 色々あると思いますが... 私の場合は 横30px,縦78px の画像 を位置だけずらして使っています。

button_back.png  twitter_80x80.jpg  button_next.png

例えば、矢印画像など 色違いの画像を上下に並べて 「1つの画像に合成したもの」 を利用すればOKです!

※IE6以下では :hover 部分の設定は 無効になります。


/* jCarousel Lite
------------------------------------- */
/* 全体のサイズ設定 */
.anyClass {
height:180px !important;
overflow:hidden;
}
/* 余白のリセット */
.anyClass ul,
.anyClass li {
margin:0;
padding:0;
}
/* 個々のリストの設定 */
.anyClass li {
list-style:none;
float:left;
height:150px;
text-align:center;
font-size:11px;
}
/* 前へ(PREV)の設定 */
.prev {
float:left;
margin:41px 5px 0 0;
width:30px;
height:39px;
background:url(http://・・・/前へ用画像.png) no-repeat;
cursor:pointer;
}
.prev:hover {
background:url(http://・・・/前へ用画像.png) no-repeat 0 -39px;
}
/* 次へ(NEXT)の設定 */
.next {
float:right;
margin:41px 0 0 5px;
width:30px;
height:39px;
background:url(http://・・・/次へ用画像.png) no-repeat;
cursor:pointer;
}
.next:hover {
background:url(http://・・・/次へ用画像.png) no-repeat 0 -39px;
}
#jcarousel_tw .anyClass {
background:#fff url(http://アイコン画像・・・) no-repeat 5px 20px !important;
background-attachment:fixed;
}
#jcarousel_tw .anyClass li {
width:400px;
padding:5px 0 15px 100px;
text-align:left;
font-size:12px;
word-break:break-all;
}
/* ツイートの内容の装飾(省略可) */
#jcarousel_tw .tweet_body {
line-height:1.4;
}
/* ツイートの時間,返信メニューなど */
#jcarousel_tw .tweet_menu {
margin-top:10px;
text-align:right;
}
/* 背景アイコン下の @arinogotoku 部分 */
.myTwitter {
position:relative;
top:115px;
z-index:10;
font-size:11px;
}


短縮アドレスの展開 や 返信ツイート非表示 のカスタマイズ

URLパラメータに include_entities=1 (補足: include_entities=true だと何故か動かないそうです。) を指定すると、expanded_url(t.co に短縮される前の 元のURL) や display_url(ツイッターで表示されるリンクの表示) などのデータが扱えるようです。

  • t.co の短縮アドレスを展開して表示したい場合 (実装済み)
  • 返信ツイート(@ユーザー名で始まるもの) を非表示にしたい場合

「公式ウィジェットじゃ物足りない!」 という方などは是非使ってみてください。

キーワード検索 : ツイッター  jQuery  javascript  カスタマイズ  

スポンサーリンク

はてなブックマーク  Google Bookmarks Google Bookmarks Yahoo!ブックマーク Facebook Twitter
お役に立ちましたら、応援して頂けると嬉しいです(*´`*)
記事を読んで頂きありがとうございます。 FC2ブログランキング

URL http://arinogotokuatumarite.blog19.fc2.com/blog-entry-215.html

2012/03/09 ~ | Comment (11) tweet? | ↑ ページ先頭へ ↑ |
 @arinogotoku
  • paruparu (arinogotoku) on Twitter
    ツイートが上手く表示されない時は Twilog or 公式Twitter などから見てください。

11 Comment


t.co の短縮アドレスを展開

t.co展開を試してみました。

まず、htmlに記述するコールバック関数は

<script type="text/javascript" src="http://api.twitter.com/1/statuses/user_timeline.json?screen_name=arinogotoku&include_rts=true&include_entities=1&count=7&callback=twitterCallback2"></script>

↑こんな感じで。
*include_entities の引数に“true”を指定すると何故か展開後のアドレスが取得できないので、数字指定をしています。


blogger_tw.jsへの追記は、12行目と13行目の間に

var EXPurlCNT = twitters[i].entities.urls.length;
for (var j=0; j<EXPurlCNT; j++){
var tcoURL = twitters[i].entities.urls[j].url;
var expURL = twitters[i].entities.urls[j].expanded_url;
reg = new RegExp(tcoURL, "g");
status = status.replace(reg,expURL);
}

↑こんな感じで。


これでt.co展開できるはず...

ちなみに、コールバック関数の引数に“include_entities”を指定しない場合は
エラーになるので(手抜き)、別個のjsファイルにしておくと良いです。

COLTdeGO |  2012/03/09 (金) [ 編集 ] No.1307


include_entities=1

コルトさん、ありがとうございます!! 早速実装してみました。
最初、アドレスの表示が長いと ダラーンとなってしまうかなという感じもしたのですが、

#jcarousel_tw .anyClass li { word-break:break-all; }
を加えたら IE や Chrome では気にならないようになりました。 ただ、Firefox では 長いリンクの前には必ず改行が入ってしまうみたいで、ちょっと幅を取ってしまうのですが。。
展開するなら、長くなってしまうのは 仕方がないですよね。。

新しいスクリプト(DL用)は ↓ に作りました。
http://blog-imgs-38.fc2.com/a/r/i/arinogotokuatumarite/blogger_tw_exp.js


教えて頂いたスクリプトを元に また色々検索してみたら、
http://manuals.matrix.squizsuite.net/web-services/chapters/rest-resource-assets
で、以下のようなサンプルを見つけたのですが (一部書き換えてあります)

このような感じ (リンクテキストは 短縮のまま) にすること は可能なのでしょうか。。
追記 : もしくは display_url で... とかになると複雑になっちゃいますか?

var urls = twitters[i].entities.urls;
for (var j = 0; j < urls.length; j++) {
text = text.replace(urls[j].url, '<a href="' + urls[j].expanded_url + '" target="_blank">' + urls[j].url + '</a>');
}
// Replace user mentions with Twitter URL links.
var users = twitters[i].entities.user_mentions;
for (var j = 0; j < users.length; j++) {
text = text.replace('@' + users[j].screen_name, '<a href="http://twitter.com/' + users[j].screen_name + '" target="_blank">@' + users[j].screen_name + '</a>');
}

paruparu |  2012/03/10 (土) [ 編集 ] No.1308


> このような感じ (リンクテキストは 短縮のまま) にすること は可能なのでしょうか。。

blogger_tw.jsへの追記。
12行目と13行目の間に

var EXPurlCNT = twitters[i].entities.urls.length;
for (var j=0; j<EXPurlCNT; j++){
var tcoURL = twitters[i].entities.urls[j].url;
var expURL = twitters[i].entities.urls[j].expanded_url;
status = status.replace('<a href="' + tcoURL + '" target="_blank">' + tcoURL + '</a>', '<a href="' + expURL + '" target="_blank">' + tcoURL + '</a>');
}

↑こんな感じでいかがでしょうか?

COLTdeGO |  2012/03/10 (土) [ 編集 ] No.1309


> 追記 : もしくは display_url で... とかになると複雑になっちゃいますか?
display_urlの場合は...

blogger_tw.jsへの追記。
12行目と13行目の間に

var EXPurlCNT = twitters[i].entities.urls.length;
for (var j=0; j<EXPurlCNT; j++){
var tcoURL = twitters[i].entities.urls[j].url;
var expURL = twitters[i].entities.urls[j].expanded_url;
var dspURL = twitters[i].entities.urls[j].display_url;
status = status.replace('<a href="' + tcoURL + '" target="_blank">' + tcoURL + '</a>', '<a href="' + expURL + '" target="_blank">' + dspURL + '</a>');
}

↑こんな感じでOKだと思います♪

COLTdeGO |  2012/03/10 (土) [ 編集 ] No.1310


コルトさん、ありがとうございます!!

出来ました~。 期待していた通りの表示になって嬉しいです♪
こんなに教えて頂いてスミマセン。。。 いつか 別の記事などに まとめてみようかなと思いますが、取り敢えず ここにまとめておきました。

-----------------------------------------------------------
【 t.co 短縮アドレスを展開したいという場合は... 】

html に記述するコールバック関数を

<script type="text/javascript" src="http://api.twitter.com/1/statuses/user_timeline.json?screen_name=arinogotoku&amp;include_rts=true&amp;include_entities=1&amp;count=7&amp;callback=twitterCallback2"></script>

1. t.co を展開 (表示もアドレスも 短縮前の状態に)
http://blog-imgs-38.fc2.com/a/r/i/arinogotokuatumarite/blogger_tw_exp.js

2. t.co を展開 (表示は t.co のままで、リンクは展開されているもの)
http://blog-imgs-38.fc2.com/a/r/i/arinogotokuatumarite/blogger_tw_exp2.js

3. t.co を展開 (表示は display_url で、リンクは展開されているもの)
http://blog-imgs-38.fc2.com/a/r/i/arinogotokuatumarite/blogger_tw_display.js
私が使っているもの。 右下のURL のところに .jsファイルのリンク入れてあります。
-----------------------------------------------------------


0. デフォルト (表示もリンクも t.co の状態のもの)
http://blog-imgs-38.fc2.com/a/r/i/arinogotokuatumarite/blogger_tw.js
※この場合は &amp;include_entities=1 は不要

paruparu |  2012/03/10 (土) [ 編集 ] No.1311


> @ユーザー への返信ツイートを表示させたくない場合

折角なのでこちらも...(^^;

blogger_tw.jsへの追記。
12行目と13行目の間に

function HTMLpush() {
var EXPurlCNT = twitters[i].entities.urls.length;
for (var j=0; j<EXPurlCNT; j++){
var tcoURL = twitters[i].entities.urls[j].url;
var expURL = twitters[i].entities.urls[j].expanded_url;
var dspURL = twitters[i].entities.urls[j].display_url;
status = status.replace('<a href="' + tcoURL + '" target="_blank">' + tcoURL + '</a>', '<a href="' + expURL + '" target="_blank">' + dspURL + '</a>');
}
statusHTML.push('<li><span class="tweet_body">'+status+'</span><span style="display:block" class="tweet_menu"><a href="http://twitter.com/'+username+'/statuses/'+twitters[i].id_str+'" title="ツイッターで開く" target="_blank">'+relative_time(twitters[i].created_at)+'</a>    <a href="http://twitter.com/intent/tweet?in_reply_to='+twitters[i].id_str+'" title="返信" target="_blank">reply</a> / <a href="http://twitter.com/intent/retweet?tweet_id='+twitters[i].id_str+'" title="リツイート" target="_blank">retweet</a> / <a href="http://twitter.com/intent/favorite?tweet_id='+twitters[i].id_str+'" title="お気に入り" target="_blank">favorite</a></span></li>');
}

var orgstatus = twitters[i].text;
var repNAME = twitters[i].text.match(/\B@([_a-z0-9]+)/ig);
if (repNAME == null) {
HTMLpush();
} else {
var strlen = repNAME[0].length;
if(repNAME[0] != orgstatus.substr(0, strlen)) {
HTMLpush();
}
}


を追記して、
元々13行目にあった
statusHTML.push('<li>...略
を削除してください。


上記により、リプライは非表示、公式RTは表示という形にできます。
ちなみに、ツイートの先頭以外に“@ユーザ名”が存在する場合は非表示となりません(これはリプライではないので)。

COLTdeGO |  2012/03/11 (日) [ 編集 ] No.1312


@ユーザー への返信ツイートを表示させたくない場合

これまで... ありがとうございます。
count=7 → count=20 などのように リプライの頻度にもよりますが、(@リプライ分が除外されることを考慮して) 少し多めに指定しておくといいのですね。。
これもいいなぁ... と思いました。 どちらを使おうか迷いますね^^
需要は高いと思うので すごく参考にもなりました。

4. t.co を展開 (表示は display_url で、リンクは展開) + @ユーザーへの返信 を非表示
http://blog-imgs-38.fc2.com/a/r/i/arinogotokuatumarite/blogger_tw_replay0.js

paruparu |  2012/03/11 (日) [ 編集 ] No.1313


js ファイル更新しました。

・「include_entities=1」を指定しない場合でもエラーがでないように
・ 公式写真投稿 のリンクが展開されなかった点の改良

1. t.co を展開 (表示もアドレスも 短縮前の状態に)
http://blog-imgs-38.fc2.com/a/r/i/arinogotokuatumarite/blogger_tw_exp.js

2. t.co を展開 (表示は t.co のままで、リンクは展開されているもの)
http://blog-imgs-38.fc2.com/a/r/i/arinogotokuatumarite/blogger_tw_exp2.js

3. t.co を展開 (表示は display_url で、リンクは展開されているもの)
http://blog-imgs-38.fc2.com/a/r/i/arinogotokuatumarite/blogger_tw_display.js

4. t.co を展開 (表示は display_url で、リンクは展開) + @ユーザーへの返信 を非表示
http://blog-imgs-38.fc2.com/a/r/i/arinogotokuatumarite/blogger_tw_replay0.js

修正は COLTdeGOさん がしてくださったものです。
上書きしてありますが、既にDLされた方がいましたら、再DLしてご利用ください。


0. デフォルト (表示もリンクも t.co の状態のもの)
http://blog-imgs-38.fc2.com/a/r/i/arinogotokuatumarite/blogger_tw.js
これは変更していません。

paruparu |  2012/03/12 (月) [ 編集 ] No.1314


追記:ファイル更新しました。

リンクの直後に 全角スペースや 日本語が続いてしまっている場合
リンクが正しく張られないケースがある為、その対策を加えました。

var status = twitters[i].text.replace(/((https?|s?ftp|ssh)¥:¥/¥/[^"¥s¥<¥>]*[^.,;'">¥:¥s¥<¥>¥)¥]¥!])/g, function(url) {

 これを ↓ 以下のように変更しました。

var status = twitters[i].text.replace(/((https?|s?ftp|ssh)¥:¥/¥/[-_.!~*¥'()a-zA-Z0-9;¥/?:¥@&=+¥$,%#]+)/g, function(url) {

参考 : 正規表現の部分が解読できません - JavaScript - 教えて!goo
http://oshiete.goo.ne.jp/qa/6756840.html

ツイッターの投稿文中に リンクを張るときは 「前後に半角スペースを入れる」 のが原則 なのですが... ついうっかり全角スペースにしてしまったり、そのこと自体を知らないケースもあるので、対策をしておきました。 js ファイルも 上書き修正済みです。

paruparu |  2012/03/16 (金) [ 編集 ] No.1315


こんばんは

いつも参考にさせて頂いております。
「 jCarousel Lite をカスタマイズして記事毎に!」でも使わせて頂きましたので
こちらも、導入にトライしてみました。

Hiro |  2012/03/29 (木) [ 編集 ] No.1340


Hiroさんへ

早速 拝見させていただきました。
スッキリ、いい感じに表示されていて良かったです。 (CSS の説明とか若干不安があったので... 実際に 他のサイトでも設置されたことを教えていただけると嬉しいです^^)
スクロールボタンなしでも 全然OKですね!

paruparu |  2012/03/29 (木) [ 編集 ] No.1341

コメントを投稿する 記事: 自分のつぶやきをオートスクロールで表示 (jCarousel Lite を活用)


お気軽にコメントをどうぞ。
ソースコード等の < と > は (実態参照に変換されるので) そのまま使ってOKです。 & は 全角 に変えて使ってください。

  任意 : 後から修正や削除ができます。
  非公開コメントとして投稿する。(管理人にのみ公開)
 

Trackback