スキップしてメイン コンテンツに移動

ツイート関連のちょっとしたJavaScriptメモ

Twitterの情報を取得する簡単なOperaの拡張機能を作ってるところですが、JavaScriptのメモを。

ツイート時刻

JavaScriptでhttps://search.twitter.com/search.json?q=hogehoge (※API1.0) などと叩いてやるとhogehogeの検索結果と共に、
Tue, 28 May 2013 12:04:35 +0000
というようなツイートされた時刻を取得できるわけですが、タイムゾーンが+0000なので、日本時間ではありません。さて、これをどうやって変換してやればよいものか....
と思ってましたが、大して思い悩むほどのことでもありませんでした。

var date = new Date(Date.parse("Tue, 28 May 2013 12:04:35 +0000"));

これで日付オブジェクトになります。あとは、下記を参照しながら煮るなり焼くなり...
・日付(Date)
http://www.tohoho-web.com/js/date.htm
表示に際して、Twitterっぽい表示の時刻にしてみたいと思います。「~時間前」のような相対表記は面倒なので、絶対表記にしつつ、同日の場合は、西暦と月日を省くような。


<script>
function parseTwitterDate(stamp) {
    var str_date = "";
    var twi_time = new Date(Date.parse(stamp));
    var today = new Date();

    if(twi_time.getYear() != today.getYear()) {
        // 年が違えば年月日が必要
        str_date = twi_time.getFullYear() + "/"
                + zerofill(twi_time.getMonth() + 1)
                + "/"
                + zerofill(twi_time.getDate())
                + " ";
    }else if(twi_time.getDate() != today.getDate()) {
        // 日付が異なれば、月日が必要
        str_date += zerofill(twi_time.getMonth() + 1)
                + "/"
                + zerofill(twi_time.getDate())
                + " ";
    }

    var min = twi_time.getMinutes();

    return str_date + twi_time.getHours() + ":" + zerofill(min);
}

function zerofill(value) {
    if(value < 10) {
        value = "0" + value;
    }
    return value;
}
alert(parseTwitterDate("Tue, 28 May 2013 12:04:35 +0000"));
</script>

こんな感じ。
実行すると、執筆時(2013/05/28)では、21:04と表示されます。日付が変れば月日が付き、年が変れば西暦も表示されるようになるはずです。

ついでに、細々としたのを。


マウスオーバーでアイコンの差し替え

<img name="usericon" src="icon.png" onMouseOver="changeSettingIcon();" onMouseOut="changeOriginalIcon();"/>
<script>
function changeSettingIcon() {
document.usericon.src="settingIcon.png";
}
function changeOriginalIcon() {
document.usericon.src = "icon.png";
}
</script>

IMGタグにonMouseOverイベントとonMouseOutイベントでアイコンを切り替える関数を呼んでるだけです。CSSでもできるようですが、たしか背景を変更みたいな感じだったような。

画像を角丸に(CSS)


.icon img{
border-radius: 6px 6px 6px 6px;
}

追記:2013/06/20

Operaのオレオレ拡張機能をそろそろリリースするべく、Twitter API1.1対応をやってますが、
・Twitter APIと開発者規約変更のインパクトまとめ:結局、Twitter API 1.1で何が変わる? 5つのポイント - @IT
http://www.atmarkit.co.jp/ait/articles/1209/26/news120.html
>ツイートのタイムスタンプが24時間以内であれば相対時刻で表示すること
風の噂で何となく知ってましたが、やりたくないため目を背けてた時間の相対表記。上記サンプルだと絶対表記なので、一応追加コード。
var relative_time = Math.floor((today.getTime() - twi_time.getTime())/1000);

/**
 * 相対表記
 */
if(relative_time < 60) {
    return relative_time + "秒";
}
else if(60 <= relative_time && relative_time < (60*60)){
    return Math.floor(relative_time/60) + "分";
}
else if((60*60) <= relative_time && relative_time < (60*60*24)) {
    return Math.floor(relative_time/(60 * 60)) + "時間";
}

参考:Twitter相対時間表示 | マイヤーの開発ブログ

PR:Effective JavaScript JavaScriptを使うときに知っておきたい68の冴えたやり方
PR:作りながら覚えるHTML5+JavaScriptプログラミング

コメント

このブログの人気の投稿

GolangでWindows GUIアプリケーション

GUIアプリ作成の前提 社内ツールとしてexeで配布 開発環境はGoLandを使う 社内ツールとしてexeを配布ということであれば、Visual StudioでC#による開発だと思います。しかしながら、Go言語を習得したいのと、GoLandの補完機能が便利で、Android Studio使っていたこともあり、とっつきやすいという点からGo縛りでGUIアプリケーションを考えたいと思います。 lxn/walk Windows application library kit for Go. Windows向けしか考えていないので、まずこのライブラリなのですが、ボタンやコンボボックスが思ったように並ばなかったり、手軽にイメージボタンを配置したりなど、簡単にレイアウトを変更できない課題に直面しました。レイアウト作成だけで時間を取られてしまいます。そう言えば、Androidアプリ開発のときは、XMLでデザイン部分を切り離してたのを思い出して、今回の調査の運びとなりました。 fyne-io/fyne Cross platform native GUIs designed for Go based on Material Design. Supports: Linux, macOS, Windows, BSD, iOS and Android. walkと比べると、クロスプラットフォームで作成できるのですが、こちらもコードの中にデザインを書いていく形でした。 therecipe/qt therecipe/qt allows you to write Qt applications entirely in Go or JavaScript. Qt Creatorなるものがあるようで、デザイン部分を切り離せる印象はあるものの、最新のPCでもビルドに時間がかかるようで、学習コストもかかるという記事を見かけて断念しました。 どうしたものかとツイートしましたら、下記のようにご助言をいただいた。 同じ課題に対し色々試した結果、PWAのフルキャッシュドに落ち着いた。中身はGo+WASMで。 https://t.co/e60whDTV16 — のぼのぼ📡 (@nobonobo) July 21, 2020 PWA 早速調べてみました。Googleが進めているプロジェクトで、ネイティブアプリのよ

Eclipseの高速化メモ

Eclipseが重いと一言に言っても、いろいろな工程での話があると思いますが、過去記事のなども含めてこの記事にピックアップしておきたいと思います。以下はWindows環境での話です。

Eclipseで一通り基本的なGitを使ってみる

備忘録的にまとめておきたいと思います。おかしな点があればご指摘いただければ幸いです。 目次 環境 プロジェクト作成~初コミットまで コミットの履歴&差分を見る 元に戻す ブランチについて ブランチを作成してみる ブランチを統合するには マージする Rebaseする ローカルリポジトリからプロジェクトを取り込む コミットしたメッセージの修正 環境 Eclipse IDE for Java Developers:Juno Service Release 1 Git:上記Eclipseのプリインストール版