Blog

※ブログ移転しました。 → hamashun.me

2010年01月Archives

2010年01月09日

JS習作:JavaScriptで簡易的なTwitterクライアントのような物を作ってみる試み その1

概要

12月4週目のJavaScriptです。 Twitter Search的な何かをもう少し発展させてみました。

ソースコード(API部分)

jQueryを使用しています。

$(function () {

  $('#friendTweetForm').after('<ul id="friendTweet" class="tweetList"></ul>');
  function friendTweet() {
    $.ajax({
      url: 'http://twitter.com/statuses/home_timeline.json',
      data: {
        'callback': 'friendtweet',
        'count': 100
      },
      type: 'get',
      dataType: 'jsonp',
      success: function(friend_data){
        $.each(friend_data, function(i, friend_item) {
          $('#friendTweet').append('<li class="tweet"><a href="http://twitter.com/'+ friend_item.user.screen_name +'/" class="icon"><img src="'+ friend_item.user.profile_image_url +'" alt="" width="48" height="48" /><span class="name">'+ friend_item.user.name +'</span></a><p class="text">'+ friend_item.text +'<a href="http://twitter.com/'+ friend_item.user.screen_name +'/status/'+ friend_item.id +'">Status page</a></p></li>');
        });
      }
    });
  }
  $('#friendTweetBtn').click(function(){
    $('#friendTweet').empty();
    friendTweet();
  });

  $('#mentionsTweetForm').after('<ul id="mentionsTweet" class="tweetList"></ul>');
  function mentionsTweet() {
    $.ajax({
      url: 'http://twitter.com/statuses/mentions.json',
      data: {
        'callback': 'mentionstweet',
        'count': 20
      },
      type: 'get',
      dataType: 'jsonp',
      success: function(mentions_data){
        $.each(mentions_data, function(i, mentions_item) {
          $('#mentionsTweet').append('<li class="tweet"><a href="http://twitter.com/'+ mentions_item.user.screen_name +'/" class="icon"><img src="'+ mentions_item.user.profile_image_url +'" alt="" width="48" height="48" /><span class="name">'+ mentions_item.user.name +'</span></a><p class="text">'+ mentions_item.text +'<a href="http://twitter.com/'+ mentions_item.user.screen_name +'/status/'+ mentions_item.id +'">Status page</a></p></li>');
        });
      }
    });
  }
  $('#mentionsBtn').click(function(){
    $('#mentionsTweet').empty();
    mentionsTweet();
  });


  $('#searchTweetForm').after('<ul id="searchTweet" class="tweetList"></ul>');
  function twitterSearch(searchWord) {
    $.ajax({
    url: 'http://search.twitter.com/search.json',
    data: {
      'q': searchWord,
      'rpp': 10,
      'lang': 'ja'
    },
    type: 'get',
    dataType: 'jsonp',
    success: function(search_data){
      $.each(search_data.results, function(i, search_item) {
        $('#searchTweet').append('<li class="tweet"><a href="http://twitter.com/'+search_item.from_user+'/" class="icon searchResultUser"><img src="' + search_item.profile_image_url + '" alt="" width="48" /><span class="name">'+search_item.from_user+'</span></a><p class="text searchResultText">'+search_item.text+'<a href="http://twitter.com/'+search_item.from_user+'/status/'+search_item.id+'">Status page</a></p></li>');
        });
      }
    });
  }
  $('#searchTwitter').click(function(){
    $('#twitterSearch').empty();
    var searchWord = $('#searchWord').val();
    twitterSearch(searchWord);
  });

});

ソースコード(UI部分)

jQueryを使用しています。

$(function () {
  $('.wrap').hide();
  $('#friendTweetWrap').show();
  $('h3.twitterHeadline').css({
    'position': 'absolute'
  });
  $('#twitter h3').click(function(){
    $('h3.twitterHeadline').attr('class', 'twitterHeadline');
    $(this).attr('class', 'now twitterHeadline');
    var clickTabId = $(this).attr('id');
    var showTargetForm = clickTabId.replace('Headline', 'Wrap');
    var showTargetUl = clickTabId.replace('Headline', '');
    $('div.wrap').hide();
    $('ul.tweetList').hide();
    $('#' + showTargetForm).show();
    $('#' + showTargetUl).show();
  });
});

改良したい点

  • 検索以外は再取得する際に新規分のみ追加したいのだけど、since_id がうまい事動かせられない。 eachで回してる最後のidを取得して、2回目以降のみ指定するってやればいいはずなんだけどそれをコードにできていない感じ。
  • Postもしたかったのだけど全然だめ。 こちらはさっぱりだめ。 参考になりそうな物を探したけど見つからない。

2010年01月16日

JS習作:IEでもimg要素のlabelを効かせる(ライブラリ無し版)

概要

12月5週目のJavaScriptです。 IEでもimg要素のlabelを効かせるのjQuery無しでも動く版です(hokacchaさんアドバイスありがとうございます!)。

IE以外では必要ないので、@cc_on ってなに? - Clouder::Bloggerを参考にして振り分けてみました。

ソースコード

/*@cc_on
var labels = document.getElementsByTagName('label');
for(var i=0; i<labels.length; i++) {
  labels[i].labelFor = labels[i].getAttributeNode('for').nodeValue;
  labels[i].onclick = function () {
    var cursorTarget = document.getElementById(this.labelFor);
    cursorTarget.focus();
    cursorTarget.click();
  }
}
@*/

ここの所忙しいのもあって、ちょっと遅れ気味だなあ。 まあ遅れるのを見越して目標設定しているのでギリセーフ。

2010年01月18日

CSS HappyLife ZERO がいい感じな件

CSS HappyLifeの平澤さんがCSS HappyLife ZEROという、主にCSS初心者・中級者の方を対象にしたCSSに関するアレコレがつまったサイトを公開しました。

まだ未完成との事ですが、関連・参考ページなどへのリンクが逐一載っていたり、対応ブラウザをアイコンで示したり、スクリーンショットを細かに乗せていたりと、凄く丁寧に作ってあります。 これ作るの、すげー大変だったろうなあ……。

個人的に特にいいなと思ったのが、デザインでした。 アカデミック臭が良い意味でしないと言うか、初学者な人は取っ付きやすいんじゃないでしょうか。

もちろん「仕様書読め」ってのは正しいですし通るべき道なんですが、慣れてないとあの見た目は結構、圧倒される物があります。 そんな人がワンクッション置くには合ってるんじゃないかなとか。

ちょうどうちの会社にインターン生が来ているので、早速紹介しました。 凄く嬉しいタイミングでの公開でした。

しかし平澤さん、フリーランスになって更に活動に磨きがかかってて凄いなあ。

2010年01月31日

JS習作:imageのフォームボタンをロールオーバー

2010-02-01:サンプルページのリンクが切れていたので直しました。

概要

1月1週目のJavaScriptです。 type="image"なフォームボタンをマウスオンでロールオーバーします。 jQuery使用。

ソースコード

$(function () {
  var preload_btn_num = $('div.submit input[type="image"]');
  for(var i=0; i<preload_btn_num.length; i++) {
    var preload_btn_src = $(preload_btn_num[i]).attr('src').replace('.png', '');
    var preload_btn = preload_btn_src + '_on.png';
    $('<img>').attr('src', preload_btn);
  }

  $('div.submit input[type="image"]').hover(function(){
    var btn_src_full = $(this).attr('src');
    var btn_src = btn_src_full.replace('.png', '');
    var on_src = btn_src + '_on.png';
    $(this).attr('src', on_src)
  }, function(){
    var btn_src_png = $(this).attr('src');
    var btn_src = btn_src_png.replace('_on', '');
    $(this).attr('src', btn_src)
  });
});

処理を変数に代入→次の行でそれを使って処理をして変数に代入、みたいな部分は一行で書いた方がいいんだろうか。 個人的には別々にした方が読みやすいのだけど。


Blog Search
Search
Recent Entry
Category
Monthly Archive