2010.03.11.

Twitterのつぶやきを簡単にブログへ貼り付ける

最近作り直した(まだ途中ですが)個人的日記ブログの中でTwitterを貼りつけてみました。ブログパーツはたくさん出ているのでいろいろ試してみましたが、なかなか気に入ったのが見つからなくて自分で改良を加えてみることに。
おおもとはTwitter公式サイトのJavaScript Badgeです。Flashは使いたくないので。

ツイートは最新の1件分だけでOK。アイコン表示必須で日付は日本語がいい。この条件であっちこっち調べながら作ったものをメモしておきます。

とりあえずの出来上がりはこんな感じ。

まずはJavaScriptの部分。

<script type="text/javascript">
function relative_time(time_value) {
time_values = time_value.split(" ");
time_value = time_values[1]+" "+time_values[2]+", "+time_values[5]+" "+time_values[3];
var parsed_date = Date.parse(time_value);
var relative_to = (arguments.length > 1) ? arguments[1] : new Date();
var delta = parseInt((relative_to.getTime() - parsed_date) / 1000);
delta = delta + (relative_to.getTimezoneOffset()*60);
if(delta < 60) {
	return '(1分以内)';
}
else if(delta < 120) {
	return '(1分前)';
}
else if(delta < (45*60)) {
	return '(' + (parseInt(delta / 60)).toString() + '分前)';
}
else if(delta < (90*60)) {
	return '(約1時間前)';
}
else if(delta < (24*60*60)) {
return '(約' + (parseInt(delta / 3600)).toString() + '時間前)';
}
else if(delta < (48*60*60)) {
	return '(昨日)';
}
else {
	return '(' + (parseInt(delta / 86400)).toString() + '日前)';
}
}

function twitterCallback(obj) {
var id = obj&#91;0&#93;.user.id;
document.getElementById('my_twitter_image').innerHTML = '<a href="http://twitter.com/' + obj&#91;0&#93;.user.screen_name + '"><img src = "' + obj&#91;0&#93;.user.profile_image_url + '" alt = "avatar" /></a>';
document.getElementById('my_twitter_status').innerHTML = obj[0].text;
document.getElementById('my_twitter_screen_name').innerHTML = '<a href="http://twitter.com/' + obj&#91;0&#93;.user.screen_name + '">' + obj[0].user.screen_name + '</a>';
document.getElementById('my_twitter_user_name').innerHTML = obj[0].user.name;
document.getElementById('my_twitter_status_time').innerHTML = relative_time(obj[0].created_at);
}
</script>


<script type="text/javascript" src="http://www.twitter.com/statuses/user_timeline/■ツイッターのユーザー名■.json?callback=twitterCallback&count=1"></script>

42行目の「■ツイッターのユーザー名■」の部分は、実際に使ってるユーザー名に書き替えてください。私の場合だと「ezorisu」。パソコンのTwitter画面で、右上の設定を開くと自分で設定した「名前」とか「ユーザー名」とかがわかります。
script上はちょっと混乱してしまいますが、「obj[0].user.screen_name」が設定画面上の「ユーザー名」、「obj[0].user.name」が「名前」になっています。

IE対応と時差調整はCreazy!の「第4回:twitter の JavaScript Badge をIEで表示するとおかしい件に対応してみる」から、日付の日本語化には葛西総合研究所Blog-ENSIS Note3.5の「Twitterブログパーツを改造」記事から、codeを使わせていただきました。ありがとうございます。
他にもユーザーアイコンURLの取得方法やJavaScriptの基本的なことなど、いろいろなサイトを参考にさせていただいています。

私の改造部分は、アイコン画像を表示するためのURLを取得してimgタグでかこったうえでリンクタグを追加、表示名を取得してこれもリンクタグを追加したくらいです。
JavaScriptもあまりいじったことがなかったので、これが最善なのか分かりませんがとりあえずはツイートの中身は取り出せました。
書き込む場所は</body>の手前。これは最後に読み込む方が表示速度が遅いときにイライラしないから。

次はブログ内のTwitterを表示したい位置に以下のcodeを書きます。

<div id="my_twitter">
	<div id = "my_twitter_image"></div>
	<div id="my_twitter_status"></div>
	<div id="twitter_information">
		Twitter : <span id="my_twitter_screen_name"></span>
		<span id="my_twitter_user_name"></span>
		<span id="my_twitter_status_time"></span>
	</div>
</div>

後はcssで自分のサイトに合うように、サイズ、色、デザインを整えていきます。

#my_twitter {
	background-color: #c0deed; /*バックは好きな色で*/
	margin: 20px auto;
	padding: 10px 10px 5px 10px;
	width: 300px; /*全体の横幅*/
	font-size:12px;	
	line-height:1.4em;
}

#my_twitter_image {
	width: 60px; /*アイコン左寄せ部分の幅*/
	float: left;
}

#my_twitter_status {
	min-height: 34px;
	width: 240px; /*右寄せ部分は(全体の横幅 - 左寄せ部分の幅)*/
	float: right;
}

#twitter_information {
	font-size: 11px;
	text-align: right;
	padding: 5px 0 0;
	clear: both; /*フロート解除*/
}

#my_twitter_user_name {
	margin-left: 0.4em;
	color: #999999;
}

#my_twitter a {
	text-decoration: none;
}

#my_twitter a:hover {
	text-decoration: underline;
}

#my_twitter img {
	border: none;
}

これで最初のサンプル画像のようなTwitter Badgeの完成です。
これをたたき台にしてさらにこのあと、自分のブログに合わせていろいろ手を加えてみました。

実際に設置したものはこちら→「Sense of Wonder
メインエリアの上部に表示したかったので、サイズを横長にしてツイートはフキダシの中に入れました。アイコンも柔らかいイメージで角を丸めてあります。ただしIE6と7は、フキダシの角が丸くなりません。
デザインはいろいろ考えられそうですね。

参考サイト

ついでに参考図書も

JavaScriptの絵本
JavaScriptの絵本

posted with amazlet at 18.09.02
アンク
翔泳社
売り上げランキング: 243,932

ホントの大まかなところを押さえるにはわかりやすくていい入門書です。なにしろ初心者なので。細かいところはネットで検索。

2009.05.19.

Picasa スライドショーのサイズを調整してサイドバーに入れる

よくブログでサイドバーにFlickrのブログパーツを表示しているのを見かけますが、Picasaでも似たようなのがないかなと探してみたら、Picasa内に「スライドショーを埋め込む」ボタンを見つけました。

Picasa ウェブアルバムのスライドショーにしたいアルバムを開いて、横にある「このアルバムへのリンク」をクリックすると、「スライドショーを埋め込む」という項目が出るので、クリック。プレビューとともにスライドショー作成の画面が出ます。
何種類かのサイズを選べるんだけど、サイドバーで使えそうなサイズは、「小144ピクセル」と「中288ピクセル」くらい。
ところがこのサイズは、まわりの黒い部分も含めた大きさです。

中288ピクセル「中288ピクセル」

中144ピクセル「小144ピクセル」

最近のブログでは、サイドバーもだんだん幅広タイプが増えているような気もしますが、普通は180〜200ピクセルくらいが多いのではないでしょうか。
288ピクセルは大きすぎるし、144ピクセルだと写真部分が小さすぎて見にくい。
そこで、サイドバーに入れやすいように大きさを調整してみました。
できれば縁の黒いのもやめて、自分で好きな形にしたいし。

まずは、Picasaの「スライドショーを埋め込む」の貼り付け用コードをコピーして、自分のブログのサイドバー部分にペースト。どれでもいいんだけど今回は「中288ピクセル」を選んでいます。
中身を見ると、width=”288″ height=”192″というのがあるのでwidth=”160″ height=”120″に変更。
それからスライドショー部分を適当なidを付けて囲ってやります。
< div id="picasa-slideshow"> スライドショーのコード </div>
こんな感じで。

次は、cssで微調整。

#picasa_slideshow {
width:160px;
height:120px; 
margin:15px auto;
border: 1px solid #333333;
}

marginで上下の間隔調整とセンター配置。
細いボーダーも追加してます。

「中288ピクセル」の写真部分のサイズは200×150、「小144ピクセル」は72×54 になっています。
いろいろためしてみた結果、写真だけの表示にしてサイドバーで使えそうなサイズは、

  • 200×150
  • 160×120
  • 144×108
  • 72×54

こんなところです。サイドバーの横幅に合わせて使い分けてください。
あとは、cssで見せ方を工夫してやればOK。

実際に設置してみたのは、こちら「えぞりすノート