Creazy!

WEBエンジニア・ヤガーのテック・ガジェットブログ

JavaScript WebService 小技集

第8回:Twitter JavaScript Badges の日付フォーマットを自由にカスタマイズ

投稿日:


久しぶりに twitter ネタです。
というかシツコク JavaScript badges のお話。
以前のエントリーで IE での日付表示がおかしい件に対応しました。
そのエントリーにフォローする形で @iddz さんが日付の丸め方とか日本語で表示する方法とかを書いてくれました。

時間のところにだけ四捨五入をするようにしました。

ニンブロラボ. Twitter Badges 時間の丸め方が違う件

という事でもう書く事ないかなと思いつつ、もっとオーソドックスな日付表示の方法を紹介します。


っていうかね、JavaScript が分かる人ならなんなくできる事だろうけど、前のエントリーで割と初心者の方から好評だったので書いてみる訳です。

もちろん、relative_time関数をいじるのだ

書いた方が早いと思うのでソースをば。
Twitter Badges ページからコピってきたソースのrelative_time関数を下記に差し替え。

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);
// 日付情報取得
var dt = new Date();
dt.setTime(dt.getTime() - (delta*1000));
yy = dt.getYear();
mm = dt.getMonth() + 1;
dd = dt.getDate();
dy = dt.getDay();
hh = dt.getHours();
mi = dt.getMinutes();
ss = dt.getSeconds();
if (yy < 2000) { yy += 1900; }
if (mm < 10) { mm = "0" + mm; }
if (dd < 10) { dd = "0" + dd; }
dy = new Array("日","月","火","水","木","金","土")[dy];
if (hh < 10) { hh = "0" + hh; }
if (mi < 10) { mi = "0" + mi; }
if (ss < 10) { ss = "0" + ss; }
// フォーマットして返す
return yy+"/"+mm+"/"+dd+"("+dy+") "+hh+":"+mi+":"+ss;
}

つまり、つぶやいてから n 秒後というデータに直したあとに、もう一回日付オブジェクトに変換して、フォーマットしやすいように日付情報(年とか月とか日とか)を分解しておくという事です(メンドイ)。
個人的には「YYYY/MM/DD(DY) HH:MI:SS」という形式が好きなのでこんな感じになりました。
んで、表示するとこんな感じ。

バスケ終わり。今日はスリー入ったなぁ。[tM] 2007/06/16(土) 21:20:22

よしよし。ええ感じ。
Twitter の Badges はもう少しだけネタがあるので続きます。

twitterの公式Badgesにオレのハックが採用されてない??
第5回:twitter の JavaScript Badge を改造する
第4回:twitter の JavaScript Badge をIEで表示するとおかしい件に対応してみる

-JavaScript, WebService, 小技集

執筆者:


comment

メールアドレスが公開されることはありません。 が付いている欄は必須項目です

関連記事

JavaScriptにおけるクリップボード操作の変遷:ZeroClipboardからモダンClipboard APIまで

Web開発において「テキストをコピーする」という機能は、今や当たり前の UI です。しかし、その裏側にある JavaScript のクリップボード操作は、セキュリティと利便性の間で激しい試行錯誤を繰り …

no image

やまざきメソッドに学ぶ「制限によって生まれる使いやすさ」

実は、やまざきメソッド ジェネレーターのα版を社内公開した当初は登録できる項目数は任意でした。始めに項目数を自分で設定してフォームを出力、それから項目を入力みたいな。つまり、100項目とかもやろうと思 …

Googleスプレッドシートのチェックボックスを便利に使う方法

2018年中旬、Googleスプレッドシートにチェックボックス機能が搭載されました。エクセル同様に、計算式やGAS(Google Apps Script)による高度なカスタマイズで、ビジネスの効率化に …

「Hatebu Entry List」でサイト内はてブ一覧をまとめて確認

「はてブ Fans Ranking」の拡張版を作ろうと思ってゴニョゴニョしてたら思わぬ副産物ができてしまったので、これも公開しちゃいます。 調べたいURLを入れて「調べる」をクリックすると、そのサイト …

MacのAutomatorで楽天kobo「kobo Touch」に最適なcbz形式ファイルを作成する

ちょうど1週間前に発売した楽天koboですが、サービス開始時のクオリティの低さに悪評が絶えず、炎上案件となってしまっているようです。 ・「大きなミスを犯してしまった」――楽天koboに何が起きたのか …

スポンサードリンク

スポンサードリンク