HTML

続・jQueryでUserTimeline拾ってこれたメモ

あの花は近年稀に見る素敵な最終回だった、普通に泣いてたりっくんですこんばんわ。なんという時間、今日は眠れないフラグ、明日もなんだけど。

jQueryでTwitterのUserTimeline取得続き

前回の日記のように、ちょっとjQueryをいろいろいじってますが、そもそもプログラミング経験がほぼ0なのでいろいろなところでつまずいてます。

とりあえず前回のコードのままだと最新Tweet1個しか持ってこれないので(一応コピペで対応できるけど)forつかっていっぱい出せたらなぁって言う。

 

Nの人ありがとう、細かいところ修正しておきましたおw

jQueryというかjs

/*
 * get UserTimeline
 */
		$(function(){
			$.getJSON("http://twitter.com/statuses/user_timeline/Ricckn.json?callback=?", function(data) {
			tweets = "";
			for(i = 0; i < 3; i++) {
				tweets += "" + data[i].text + "
"; }; $("#TweetList").html(tweets); }); });

ってことでこんな感じに。for(i = 0; i < 3; i++)ここの数を変えていくつまで取得するか変える感じ。

brで改行してるからmarginとか整えるといいのかな?できないね、よく考えてなかった(‘A`)

動いてるのはここのサイトで確認できます。私のjQueryメモ帳

http://remicck.net/jQuery

なんかIE8には嫌われてるんだよね、9は大丈夫なんだけど、まじ意味不明。

 

ってことでこの後、サッカーを見つつ本を読んで、眠れるかなぁって所です。ぐぬぬ・・・

 

 

jQueryでUserTimeline拾ってこれたメモ

調べる機会があったのと、これ見てjQuery勉強するためにメモ。

 

<html>
	<head>
	<title>test</title>
	<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
	<script type="text/javascript">
	$.getJSON("http://twitter.com/statuses/user_timeline/Ricckn.json?callback=?", function(data) {
     $("#LastTweet").html(data[0].text);
});
	</script>
	<!-- Riccknの部分を任意のユーザー名に -->
	</head>
	<body>
	<div id="LastTweet"></div>
	</body>
</html>

 

 

超簡易だけど、これ使ったらいろいろ面白いこと出来るかもね。
サンプル:http://remicck.net/getUserTimeline.html

まるまる参考にしたのはこちら:Twitterの最新ツイートを、jQuery と PHP で取得する2つの方法

 

 

jQueryでスライド表示してみた

jQueryおもしろいじゃない。
当Blogの右側のカラムに、Aboutmeというウィジェットが配置されているのですが、そこの more ボタンを押してみてください。

とまぁそんな感じでスライドするように出来ました。

<span class="bold">name</span>:Ricck(21)</br>
<span class="bold">occupation</span>:College Student</br>
(economics)</br>
<span class="bold">favorite</span>:</br>
FPS,FEZ:Aエル</br>
Camera:D80</br>
Android,Xperia</br>
</br>
<!-- ここから隠す -->
<div id="aboutmemore">
	<span class="bold">Server</span>(http,ftp,mumble,etc)</br>
	<span class="bold">Web</span>(html css js jQuery)</br>
	<span class="bold">PC</span>(Corei7,HD5850)</br></br>
	<span class="bold">Link</span></br>
	<a href="http://www.facebook.com/profile.php?id=100001176943922">Facebook</a></br>
	<a href="http://mixi.jp/show_profile.pl?id=24333775">mixi</a></br>
	<a href="http://fesns.com/?m=pc&a=page_f_home&target_c_member_id=50928">FESNS</a></br>
	<a href="http://fez-sns.jp/?m=pc&a=page_f_home&target_c_member_id=1932">FEZ-SNS</a></br>
	<a href="http://steamcommunity.com/id/ricckn">Steam</a></br>
</div>
<!-- ここまで -->
<a id="aboutmeclick" style="position: relative; margin-left: 100px;">
	<img src="//www.remicck.net/wp-content/themes/wp.vicuna/skins/style-mono/images/common/more.png">
</a>

んでjQuery

$(document).ready(function(){
    $("#aboutmemore").hide()
    $("#aboutmeclick").click(function(){
        $("#aboutmemore").slideToggle();
    });
});

初め躓いたのは一行目の

$(document).ready(function(){ 

が無くてまったく動かなかったこと。実はまだこれがどういうものか正確に把握してないんだけど、サンプルコードを見る限りこれ必要そうだったから入れておいた・・・。

#aboutmemoreを隠しておいて、#aboutmeclick(moreの画像のaタグに付与しておいて)をクリックすると、スライドして出てくる、っと。

とりあえず動く部分ができたから中のHTMLはもう少しこってもいいかもしれない。
問題はなんかロードしてる段階でみえちゃう場合があるんだよね。隠れるまで時間がかかる的な。これどうやって対処したらいいかまったくわからん。高速化的な部分になるのだろうか、謎。

まぁそこは後々。