MMORPGを通じてリアルに結婚した、私と旦那とうさぎのうかつで愉快な日常です。
07« 12345678910111213141516171819202122232425262728293031»09

ツイッターいじったー

『twitter(ツイッター)始めてみました』で書いていた、
ブログの初期ページに最新の呟きを表示するスクリプト、いじってみました。

目標は、

 1.コメントのURLをリンクできるようにする。
 2.@コメント(特定ユーザーへのコメント)を非表示にする。


…こんなところで。


あと、</body>タグの手前にJavaScriptを書いたら、うまく表示されなかったと前に言っていたのですが、
試行錯誤(??)しているうちに解消されたので、Twitterを表示したい位置にHTMLを書き込んで、
</body>タグの手前にJavaScriptを貼付けることにしました。

[Twitterのつぶやきを簡単にブログへ貼り付ける]で紹介されている通りの形です。


以下のJavaScriptを、</body>タグの手前にぺたりと貼付け。


<!-- [Twitter]-->
<script type="text/javascript">
<!--

/* 参考サイト */
/* [Twitterのつぶやきを簡単にブログへ貼り付ける] */
/* http://ezorisu-web.com/web-design/archives/398 */
/* [http://で始まる文字を自動リンクしよう] */
/* http://www.openspc2.org/JavaScript/Ajax/jQuery_plugin/chapter8/index.html */

/* 時間表示を日本語化 */
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() + '日前)'; }
}

/* twitterの情報を処理 */
function twitterCallback(obj) {
i = 0;
var id,t_image,t_status,t_screen_n,t_user_n,t_status_t;

/* @発言は表示しない */
while (i<obj.length) { if (obj[i].text.match(/^@/)) { i++; } else { break; } }
if (i == obj.length) {
id = obj[0].user.id;
t_image = '<a href="http://twitter.com/' + obj[0].user.screen_name + '"><img src = "' + obj[0].user.profile_image_url + '" alt = "avatar" /></a>'
status = '特定のユーザー宛の発言が続いています。';
t_screen_n = '<a href="http://twitter.com/' + obj[0].user.screen_name + '">' + obj[0].user.screen_name + '</a>';
t_user_n = obj[0].user.name;
t_status_t = '';
} else {

id = obj[i].user.id;
t_image = '<a href="http://twitter.com/' + obj[i].user.screen_name + '"><img src = "' + obj[i].user.profile_image_url + '" alt = "avatar" /></a>'
status = obj[i].text;
t_screen_n = '<a href="http://twitter.com/' + obj[i].user.screen_name + '">' + obj[i].user.screen_name + '</a>';
t_user_n = obj[i].user.name;
t_status_t = relative_time(obj[i].created_at);
}

/* コメントのURLを自動リンク */
status = status.replace(/(http:\/\/[\x21-\x7e]+)/gi, "<a href='$1'>$1</a>");


/* 取得情報をHTMLに追記 */
document.getElementById('my_twitter_image').innerHTML = t_image;
document.getElementById('my_twitter_status').innerHTML = status;
document.getElementById('my_twitter_screen_name').innerHTML = t_screen_n;
document.getElementById('my_twitter_user_name').innerHTML = t_user_n;
document.getElementById('my_twitter_status_time').innerHTML = t_status_t;
}

/* twitterに接続 */
document.write('<script type="text/javascript" src="http://www.twitter.com/statuses/user_timeline/■ツイッターのユーザー名■.json?callback=twitterCallback&count=5"></scr'+'ipt>');
// -->
</script>
<!-- /[Twitter] -->



…って思ってたのですが、外部ファイルを呼出の方がいいなぁと思ったので、
上記の、上3行・下3行(水色の部分)を削除したテキストを、『twitter.js』とファイル名をつけてアップロードし、
</body>タグの手前に、

<script type="text/javascript" src="http://■アップロードディレクトリのURLパス■/twitter.js"></script>
と記述しました。

ちなみにFC2ブログでは、ファイルアップロードで画像以外の外部ファイルをアップロードして使うことができます。


今回私が追加した機能は、下記の部分で機能しています。。

1.コメントのURLをリンクできるようにする。
オレンジ色の2行で機能。

2.@コメント(特定ユーザーへのコメント)を非表示にする。
緑色の部分で機能しています。
『/* コメントのURLを自動リンク */』の上の『 } 』も機能ポイントです。

緑色部分の『特定のユーザー宛の発言が続いています。』は、
最新の呟きが5件以上@コメントだった時に表示されるコメントです。
最新の呟きを何件まで辿るかは、下の方の太字『 count=5 』の数値で決まります。


Twitterを表示したい位置に、以下のHTMLをぺたり。


<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>


実際には、赤色部分は(JavaScriptとHTML両方)私は削除しています。
イメージアイコンいらないやーの方針のままなので。



なんかちょっとだけ、JavaScriptがわかってきたかも。

旦那はプロのプログラマーですが、
その妻はプログラムいじりが若干趣味だったりという…。
(一応妻も業務的にちょっとだけプログラムやるんですよ。一応)

ツイッターに興じて楽しませてもらいました (--*)ゞ


次はちゃんと、夫婦の日常を。


[参考サイト]
[Twitterのつぶやきを簡単にブログへ貼り付ける]
[http://で始まる文字を自動リンクしよう]
スポンサーサイト
COMMENT : 0
TrackBack : 0
CATEGORY : 備忘録 | THEME : 私の事 | GENRE : 結婚・家庭生活 |

● COMMENT

Comment Form


秘密にする
 

● TRACKBACK

TrackBack List

プロフィール

usapooh
双方初彼氏彼女で2年と7ヵ月交際
2009年3月結婚。
2009年7月お家を購入!
ベビなし共働き中。
2013年1月うさぎのあんこ登場。

2014年12月旦那が不倫。
2015年5月別居開始。
2015年12月末、再構築へ。

● ぷちオタ家 ●
:usapooh
AGE:38歳
TYPE:典型的なO型
JOB:会社員(データ関連)

旦那:bayopooh
AGE:2年355日年下
TYPE:A型より(?)のAB型
JOB:フリーランス(SE)

あんこ(うさぎ)
AGE:2012年9月生
TYPE:ライオン混ドワーフ
JOB:自宅警備員


最新のコメント


カテゴリ


タグクラウドとサーチ


リンク


月別アーカイブ

08  07  06  05  04  03  02  01  10  09  08  07  06  05  04  03  02  01  12  11  10  09  08  07  06  05  04  03  02  01  12  11  10  09  08  07  06  05  04  03  02  01  12  11  10  09  08  07  06  05  04  03  02  01  12  11  10  09  08  07  06  05  04  03  02  01  12  11  10  09  08  07  06  05  04  03  02  01  12  11  10  09  08  07  06  05  04  03  02  01  12  11  10  09  08  07  06  05 


お小遣い稼ぎ中

☆御用達アンケートサイト☆
めちゃオススメです!
マクロミルへ登録

☆御用達ポイントサイト☆
ダブルポイントでゲット!
ポイントサイト「Point Income」


Plus