hamashun.com

• canvasでグラフを描いてみる
• タイマー
• ランチに迷ったら
• ドラッグドロップ で jQuery UI を試してみる

概要

溜まってる分をある程度一気にやりました。

感想など

canvasでグラフ

例によって手書きでグラフを書いてみたんですが、canvasの座標は左上からだけどグラフの座標は左下なのが面倒でした。 今度はカンマ区切りとかの値を渡して表示させたい。

組み込みオブジェクト

ここ最近は、DateオブジェクトとかMathオブジェクトとかいう、いわゆる組み込みオブジェクトを使う機会がありました。 本で読んだ事はあったんですが、実際に使った事はあまりなかったので新鮮でした。 便利だなーと言うか。

タイマーとかランチとかは完全に自分用です。

jQuery UI

簡単便利。 サンプルが超分かりやすいですね。 英語は読めないけどコードだけ読んだらどうにかなる感じ。
idやclassを自由に変えられるっていうのがマークアッパー好みですね。 すごいなーこれ。

サンプルページ

概要

1月3週目分のJavaScriptです。 canvasにさわってみようがテーマ。 塗りと直線で構成されたモンドリアンっぽい絵ならすぐに描けるんじゃね、って思いついて試してみました。

ソースコード

$(function(){

var canvas = document.getElementById('test');

if(!canvas.getContext) return;
var ctx = canvas.getContext("2d");

ctx.fillStyle = "rgb(200, 0, 0)";
ctx.fillRect(100, 0, 300, 300);

ctx.fillStyle = "rgb(0, 0, 0)";
ctx.fillRect(85, 0, 15, 400);

ctx.fillStyle = "rgb(0, 0, 0)";
ctx.fillRect(0, 150, 85, 25);

ctx.fillStyle = "rgb(0, 0, 0)";
ctx.fillRect(0, 300, 400, 15);

ctx.fillStyle = "rgb(0, 0, 0)";
ctx.fillRect(350, 310, 15, 90);

ctx.fillStyle = "rgb(0, 0, 0)";
ctx.fillRect(365, 350, 40, 15);


ctx.fillStyle = "rgb(0, 0, 200)";
ctx.fillRect(0, 315, 85, 85);

ctx.fillStyle = "rgb(250, 250, 0)";
ctx.fillRect(365, 365, 35, 35);

});

感想など

めんどくさい

手動で描くと大分面倒くさい。

次回は

今回はRectしか使ってないので、もっと色々使ってみたい。

サンプルページ

概要

1月2週目のJavaScriptです。 フォームにテキストを入力してボタンを押すと、リストの中から該当した物だけを残して非表示にします。 jQuery使用。

ソースコード

$(function (){
  var ranking_list = $('#designerList li');
  function list_search() {
    $(ranking_list).show('fast');
    var search_word = $('#searchInput').val();
    if(search_word){
      $(ranking_list).not($(ranking_list + ':contains(' + search_word + ')').closest('li')).hide('fast');
    } // end if
  }
  $('#searchButton').click(function(){
    list_search();
  });
  /*@cc_on
  var key_code = 0;
  $('#searchInput').keydown(function(down){
    if (down.keyCode == '13')
    list_search();
  });
  @*/
});

感想など

IE用の部分

IEは入力フォームでエンターを押しても動作してくれなかったので、キーコードを直接送る事で対応しました。
今回もIEにのみ読み込ませるようにしたのだけど、この手の部分はどうするのが良いのかなあ。 Firefoxなども適用してしまっていいんだろうか。

苦労した部分

テキストノードを取得する部分と、非表示にするのは該当した物以外である所が大分苦労しました。 会社のプログラマーの人に聞いたりして。

改良したい点

• アルファベットのケースの差を吸収したい。

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)
  });
});

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

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

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

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

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

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

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

サンプルページ

概要

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();
  }
}
@*/

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

サンプルページ

概要

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もしたかったのだけど全然だめ。 こちらはさっぱりだめ。 参考になりそうな物を探したけど見つからない。

サンプルページ

概要

12月3週目のJavaScriptです。 適用したいセレクタを入力してclearfixのコードを吐き出す何かを作ってみました。 出力のセレクタ部分はカンマで改行することもできます。

単純に文字列を取得して定型文に組み込んでいるだけなんですが、組み込む場所がまちまちだったりして書いてる内に混乱してきました。 シンプルにできる事を複雑にしてしまってる気がする。。。

ソースコード

jQueryを使用しています。

$(function () {
  $('#clearfixGeneration').click(function(){
    $(this).empty();
    var new_line_switch = $('#newLineOn').attr('checked');
    var selecter_val = $('#selecterInput').val();
    var comma_length = selecter_val.split(',').length;
    var selecter_text = selecter_val.split('\n');

    for(i=0; i<comma_length; i++) {
      var selecter_ie6 = '* html ' + selecter_text[i];
      var selecters_ie6 = selecter_ie6.replace('\n', '');
      if (ie6) {
        ie6 = ie6 + selecters_ie6;
        if(new_line_switch) {ie6 = ie6.replace(',*', ',\n*');}
      } else {
        var ie6 = selecters_ie6;
        if(new_line_switch) {ie6 = ie6.replace(',*', ',\n*');}
      };
      var selecter_ie7 = '*:first-child+html ' + selecter_text[i];
      var selecters_ie7 = selecter_ie7.replace('\n', '');
      if (ie7) {
        ie7 = ie7 + selecters_ie7;
        if(new_line_switch) ie7 = ie7.replace(',*', ',\n*');
      } else {
        var ie7 = selecters_ie7;
        if(new_line_switch) ie7 = ie7.replace(',*', ',\n*');
      };
      var selecter_modernbrowser = selecter_text[i] + ':after';
      var selecter_modernbrowser_substitution = selecter_modernbrowser.replace(',:after',':after,');
      var selecters_modernbrowser = selecter_modernbrowser_substitution.replace('\n', '');
      if (modernbrowser) {
        if(new_line_switch) {
          modernbrowser = modernbrowser + selecters_modernbrowser.replace(':after,', ':after,\n');
        } else {
          modernbrowser = modernbrowser + selecters_modernbrowser;
        }
      } else {
        if(new_line_switch) {
          var modernbrowser = selecters_modernbrowser.replace(':after,', ':after,\n');
        } else {
          var modernbrowser = selecters_modernbrowser;
        }
      };
      $('#clearfixDone').val(''+ ie6 +' {\n\tzoom: 1;\n}\n\n'+ ie7 +' {\n\tzoom: 1;\n}\n\n'+ modernbrowser +' {\n\tcontent: ".";\n\tdisplay: block;\n\tclear: both;\n\theight: 0;\n\tvisibility: hidden;\n}');
    }
  });
});

改良したい点

• なんかもっと短くまとめて書けると思う。 ブラウザごとに似た処理を3回やってるので、そこを関数にすればいいんだろうか。 でもそうなると引数が多くなるような気がするけどそこは気にしないでいいのかなーとか。 もにょもにょ。
• 入力するセレクタは改行くぎりでないと思った通りにならないので（split()を\nでやってるので）、カンマ区切りにも対応したい

サンプルページ

概要

12月2週目のJSです。 ごくごく簡単なTwitter APIを練習してみました。 やりたかった事は以下です。

• APIなる物をさわってAjaxなる物をやってみたい
• Twitterネタで何かやりたい

ソースコード

jQueryを使用しています。

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

学んだ事や雑感

Ajaxって何だか難しそう、と思っていた時代が僕にもありました

jQueryを使うと、なんとか理解できるくらいにはなりました。
忘れないようにと復習も兼ねて今回のコードで解説すると、まず一行目の

 $('#searchTwitterForm').after('<ul id="twitterSearch"></ul>');

は、検索結果を出力する場所を作っています。

$.ajax({
    url: 'http://search.twitter.com/search.json',
    data: {
      'q': searchWord,
      'rpp': 10,
      'lang': 'ja'
    },
    type: 'get',
    dataType: 'jsonp',

success: function(data){
      $.each(data.results, function(i, itm) {
        $('#twitterSearch').append('<li><a href="http://twitter.com/'+itm.from_user+'/" class="searchResultUser"><img src="' + itm.profile_image_url + '" alt="" width="48" /><span>'+itm.from_user+'</span></a><p class="searchResultText">'+itm.text+'<a href="http://twitter.com/'+itm.from_user+'/status/'+itm.id+'">Status page</a></p></li>');

        });

$('#searchTwitter').click(function(){
    $('#twitterSearch').empty();
    var searchWord = $('#searchWord').val();
    twitterSearch(searchWord);
  });