hamashun.com

サンプルページ

概要

ちょっと遅れましたが、11月4週目のJavaScriptです。やりたかった事は以下。

• いわゆるLightbox的なアレを作ってみたい
• サムネイルをクリックするとリンク先の画像を読み込んでサイズを取得、それに合わせてポラロイド風の枠線を付ける
• できるだけ使いまわしやすく・かつカオスにならないようにする

ソースコード

jQueryを使用しています。 IEは naturalWidth が効かないので、まだ対応できてません。

$(function () {
  var thumbnail = $('#thumbnail li a');                               // このセレクタを変えれば使いまわし可能
  
  thumbnail.click(function(event){
    event.preventDefault();                                           // リンクの遷移を止める
    var clickHref = $(this).attr('href');                             // 以下、クリックしたサムネのリンク先を取得して表示
    $('<img>').attr('src', clickHref).bind('load', function(){        // 内部でDOM生成。続きは画像のロードが終わってから進む
      var htmlElement = $('html');                                    // ブラウザの表示領域（高さ）を取得
      var htmlHeight = htmlElement.height();                          // ブラウザの表示領域（高さ）を取得
      htmlElement.css('height', htmlHeight + 'px');                   // 背景が見切れないようにheightを指定
      var originalImageSize = this.naturalWidth;                      // リンク先の画像サイズ取得
      $('body').append('<div id="hmsnBox"><div id="hmsnBoxOuter" style="height: ' + htmlHeight + 'px;"></div><p id="hmsnBoxInner" style="width: ' + originalImageSize + 'px"><img src="' + clickHref + '" alt="" /><span id="hmsnBoxClose">Close</span></p></div>');  
      $('#hmsnBoxClose').click(function(){                            // 閉じる
        $('#hmsnBox').remove();
      });
    });
  });
});

学んだ事や雑感

ブラウザの表示領域

$("body")で高さを取得したら、縦marginの影響でズレてしまったので、$("html")で取得したら思い通りになった。

$(this)と$("this")の違い

なんか違うらしい。

生成したDOMの中で変数を展開する

• src="' + clickHref + '"
• style="height: ' + htmlHeight + 'px;"

こんな感じ。

処理を入れ子にしていく

これまで他の人が書いたコードを見て「なんでこんなにたくさん入れ子になりまくるんだろう」と思っていたのだけど、なんとなくわかったような気がしないでもない。

画像のロードを待つ

jQueryは、単に $('<img>').attr('src', 'hoge.jpg') などとすると、表示はせずに内部で生成してくれる。 で、その画像のサイズを取得する処理が画像自体のロード完了より先に動いてしまうので、上手くいかなかった。

会社の人に聞いて、ロード完了後に取得するようにして解決。 ありがとうございます＞＜

改良したい点

• IEに対応したい。 JavaScript で、画像本来のサイズ(幅, 高さ)を取得する方法 - latest log で対応できそうなのだけど、理解するのにもう少しかかりそう。
• 画像のロード中に、ユーザーに何らかのアクションを返したい。 いわゆるロード中のくるくるとか。

サンプルページ

概要

12月1週目のJavaScriptです。仕事で似たような物を使う機会があったので、それをまとめてみました。 やりたかった事は以下です。

• チェックボックスのチェックを、まとめてオンオフしたい
• オンオフはそれぞれに専用のボタンがあるんじゃなくて、一つにしたい

ソースコード

jQueryを使用しています。

$(function () {
  var checkBoxs = $('input.checkbox');
  $('#allCheck').click(function(){
    if(this.checked) {
      checkBoxs.attr('checked', 'checked');
    } else {
      checkBoxs.removeAttr('checked');
    }
  });
});

学んだ事や雑感

仕様決めの時点的な事

最初は、ボタンでトグルするようにオンオフをしようと思っていたのだけど、それだとオンになるのかオフになるのかがわかりづらいし、オンオフが混在している場合にはどういう動作になるかが微妙だった。

ので、「全てチェック用のチェックボックス」を用意してそれに合わせる事にした。

サンプルページ

概要

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