2010年08月21日

Twitter APIをjQueryから利用する

前回はTwitter MentionsというjQueryのプラグインを利用しましたが、今回はjQueryのみで、Twitter APIにアクセスしてみたいと思います。
APIへのリクエストは,$.getJSON()メソッドを利用します。
$.getJSON(url, [data], [callback(data)])
  • urlにはAPIのURLを指定します。
  • dataにはURLのリクエストパラメータを指定します。
  • callbackにはコールバック関数を指定します。匿名関数を使用するときは?を指定します。callback関数内のdataにはレスポンスがJSON形式で格納されます。
 
利用するAPIはsearchです。詳細はdev.twitter.comのこのページで確認できます。
以下が作成したコードと、ブラウザーで表示した画面になります。
<!doctype html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Twitter API from jQuery 1</title>
<link href="StyleSheet.css" rel="Stylesheet" type="text/css" />
<script src="jquery-1.4.1.min.js" type="text/javascript">
</script>
<script type="text/javascript">
$(function () {
//SearchAPIのURL
var url = '//search.twitter.com/search.json?callback=?';
var params = {
q: '@f1gate', //検索キーワード
rpp: '20', //取得件数
page: '1' //ページ番号
}

$.getJSON(url, params, function (data) {//コールバック関数
var html = "";

//つぶやきごとにHTMLを作成する
$.each(data.results, function (i, item) {
var fromUser = '<img src="' + item.profile_image_url + '"><span class="user">' + item.from_user +":"+ '</span>';
var text = '<span>' + item.text + '</span>';
html += '<li>' + fromUser + text + '</li>';
});

//ul.tw_listクラスにつぶやきのHTMLを追加する
$(".tw_list").html(html);
});
});

</script>
</head>
<body>
<ul class="tw_list">
</ul>
</body>
</html>


image
ラベル:Twitter,jQuery
【関連する記事】
posted by まーつん at 20:56| Comment(0) | TrackBack(0) | Twitter | このブログの読者になる | 更新情報をチェックする

2010年08月15日

Twitter Mentionsを試してみる

Twitterを使ったサイトを構築してみようと思ったので、まずはjQueryを使ってTwitterと連携できそうな"Twitter Mentions"を利用してみます。ちなみに作者の方のページを見る限り英語では無い(スペイン語)ようなので、使い方は私の勝手な推測で進めます。

まずは"Twitter Mentions"のページからzipファイルをダウンロードします。
ファイルを解凍してその中のjquery.twitter.mentions.jsをサーバーへアップロードします。

HTMLにscriptタグを追加し、jQueryとjquery.twitter.mentions.jsを呼び出します。
<script src="http://jqueryjs.googlecode.com/files/jquery-1.3.2.min.js" type="text/javascript"></script>
<script src="js/jquery.twitter.mention/jquery.twitter.mentions.js" type="text/javascript"></script>

HTMLのbodyは、以下のように指定しています。
<div id="container">
<div id="content">
</div>
</div>

twitterMentionsメソッドのパラメーターは以下のようになるようです(スペイン語をなんとか翻訳してみました。間違っていたらすいません)。
-username: [ string | array ] : ユーザー名のテキストチェーンか、複数ユーザー名の配列。
-options: [ object ] :任意で指定可能。以下のオプションがある。
-callback : [Function] : コールバック関数名。
-page : [Int] : ページング。デフォルトは1。(たとえば2にするとmaximumの数値+1から表示される)
-maximum : [Int] :1ページに表示される最大数。デフォルトは10。
-avatar : [bool] : ユーザーアイコンの表示。デフォルトはtrue。
-ulClass : [String] : ulタグに追加するクラス名。デフォルトはtwitter-mentions。
-odd : [bool] リストの1行ごとにCSSの別のクラスを割り当てる。デフォルトはtrue。
-oddClass : [String] : リストの1行ごとにCSSの別のクラスを割り当てる場合のクラス名。デフォルトはodd。
私が参考に作ったページでは、以下のような指定をしています。
<script type="text/javascript">
$(document).ready(function(){
$('#content').twitterMentions(['twj','yonda4'],{
avatar : true,
page: 1,
maximum : 20,
ulClass : 'twitter-mentions',
odd : true,
oddClass : 'odd'
});
});
</script>

上記の指定では表示はこんな感じになります(CSSはZipファイルに入っていたものを一部編集して利用しています) 。
 image

もう一つ別の指定をしてみました。

<script type="text/javascript">
$(document).ready(function(){
$('#content').twitterMentions(['twj','yonda4'],{
avatar : false,
page: 10,
maximum : 5,
odd : false
});
});
</script>

今度はシンプルな見た目になりました。
image
ラベル:twitter jquery
posted by まーつん at 20:11| Comment(0) | TrackBack(0) | Twitter | このブログの読者になる | 更新情報をチェックする

Seesaa Blogのデザインを変えてみる

最近CSSをかじり始めたので、このBlogのデザインを簡単に変更してみようと思います。
これが変更前のデザインです。
image 
Seesaa標準の”モスグリーン(右サイドバー)”を利用しています。

では、手始めに現在読み込まれているCSSを表示してみます。
Seesaaの”マイ・ブログ”画面から”デザイン”タブ>”デザイン一覧”をクリックします。そうすると今まで追加してきたデザインが表示されるので、右端の適用カラムが選択状態になっているデザイン(=現在ブログに適用されているデザイン)のタイトルをクリックします。
これでスタイルシートの編集画面となりました。
image

では早速編集してみたいと思います。
その前に念のため現在のCSSをコピーして、ファイルにバックアップを取っておきます。あと、スタイルシートの名前を変えてみます。これは後でわかりやすくなるからいいかなって程度でそんなに変える意味はないかもしれません。

フォントをメイリオにする。
font-family:Verdana;が結構多くのところで指定されているので、body以外での指定は削除します。そして、bodyのfont-familyをMeiryo,Verdanaに変更しました。
背景を白くする。
Seesaaでは背景はイメージで指定されているよう(少なくとも私の使用しているCSSでは)なので、background-imageを全部削除します。

これだけで結構すっきりしました。(タイトルが見えませんが、、)
image 

ヘッダーを調整する。
ヘッダーが分厚かったので、#banner のheightを40px;に変更しました。
文字の色を青にしたいので、h1 aとh1 a:hoverのcolorを#009AD9 に変更しました。右カラムのタイトルバーを調整する。
タイトルバーの文字の色をグレーに変更したいので、.sidetitleのcolorを#333に変更しました。
デザインを付けるために.sidetitleのpaddingを12px 0 0 0;に変更し、 border-bottom: 3px #009AD9 solid;を追加しました。

image

記事部分の調整をする。
日付の文字の色をグレーに変更したいので、.dateのcolorを#333に変更しました。
日付と記事タイトルの間隔を調整するために、h2のmarginを0に、paddingを10px 0 0 10px;に変更しました。h3のpaddingを10px 0にfont-sizeを14pxに変更しました。
記事部分の枠を青にしたいので、.blogbodyのborderを1px solid #009AD9;に変更しました。

幅を広げる。
ページ全体の幅を広げたいので、#containerのwidthを913pxに、#contentのwidthを640pxに変更しました。

これで完成です。デザインもすっきりし、幅も広くなったので、読みやすいページになったかと思います。
image

ラベル:Seesaa,CSS
posted by まーつん at 11:32| Comment(0) | TrackBack(0) | Seesaa | このブログの読者になる | 更新情報をチェックする
×

この広告は1年以上新しい記事の投稿がないブログに表示されております。