カテゴリー : HTML5

【jQuery】Twitterタイムラインの検索丸コピサンプル

Twitterタイムラインの検索丸コピサンプルです。
これを丸っとコピって実行すれば、タイムラインの検索結果が取得できます。

たまにツイッター検索結果を表示しているサイトで、表示されていない場合があります。
そんなサイトはきっと、PHPでツイッターAPIを叩いているんだと思います。

PHPで検索結果などOAuthを通さないAPIのアクセスは、
自サーバ→ツイッターサーバにアクセスするので、
そのページにアクセスがあるたびに、APIの回数制限のカウントが減っていきます。(たしか、OAuth通さない時は、1時間に100回だった気がします。)

そこで、Javascriptを使います。
Javascriptからの非同期通信の場合、APIの回数制限のカウントは、
クライアントのIPアドレスからになるので、
サーバで同時にアクセスがあろうとも関係ないのです。

PHPだとサーバにアクセスしている全員が閲覧できなくなりますが、
JSだとアクセス元のIPだけ閲覧できないので、自業自得ってことで対応できます。

基本的にOAuthしないAPIのアクセスはJavascriptを使った方がよさそうですね。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Twitter検索サンプル</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js"></script>
<script>
$(document).ready(function() {
        $str_search = "so-lat.com"
        var $getJsonUrl="http://search.twitter.com/search.json?q=" + $str_search + "&rpp=5&callback=?";
        var $data;
        $.ajaxSetup({scriptCharset:'utf-8'});
        $.getJSON($getJsonUrl, function($data) {
            var $str_html = "";
            for(var $i in $data["results"]){
                $str_html += '<li>';
                $str_html += '<img src="'+$data['results'][$i].profile_image_url+'" alt="" width="50" height="50" />';
                $str_html += $data['results'][$i].text;
                $str_html += '</li>';
            }
            $("#twitter").html($str_html);
        });
});
</script>
</head>
<body>
<ul id="twitter"></ul>
</body>
</html>

【HTML5】の公式ロゴ発表。W3C制定。

HTML5_Logo

HTML5_Logo


HTML5_1Color_Black

HTML5_1Color_Black

米国時間1/18にW3CからHTML5の公式ロゴが発表されました!
このロゴを使う時のライセンス条件はCreative Commons 3.0です。

今までにない斬新なロゴですね!
また、W3CではTシャツも売っているし無料のステッカーも提供しています!

うーんTシャツやステッカーまではやり過ぎな感じがするけどね。

いよいよHTML5の時代がやってきた!

Internet Explorer9やFireFox4のベータ版もあるし。

W3C HTML5 LOGO

【Chrome Extension】TweetChrome作りました!

TweetChrome - Google Chrome 拡張機・ギャラリー

TweetChrome - Google Chrome 拡張機・ギャラリー

Google Chrome Extensionを作ってみた!
以前作ったURL短縮サービスのAPIを使って、
アドレスバーの横から今開いているページの短縮URLを作成しツイッターページに遷移します!
基本的にHTMLとJSだけで作れる!

Google ChromeのAPIがあるので、
今開いているタブのURLを取得してきています。

一番ビビったのは登録して公開するときにどうも英語のエラーで登録できないなーと思っていたら、
$5.00払えと、、

せっかく作ったので、Developer登録も行いなんとか公開までたどり着きました、、

まぁ急いで作ったからデザインは気にしないでください!!
あとバグも気にしないでください!!
拡張機能の練習なのでw

TweetChrome