Flickrから画像を取得してくるSampleを書いた

Flickrから画像を取得して、表示するモジュールを書いた。

・キーワードを省略するとデフォルト「js」で検索されます。
・件数には整数値を入力してください。
　数値チェックはめんどくさいのでやってません。
　件数は100くらいがよいと思います（画像問い合わせが重いので)

demo:
http://shinya-api.appspot.com/sandbox/flickr/flickr.html


html:

     <div id="hoge">
      <img id="loading_img" src="img/loadinfo.gif" />
     </div>
        <div>キーワード : <input type="text" class="in" id="keyword" name="keyword" value="" /></div>
        <div>件数 : <input type="text" class="in" id="size" name="size" value="" /></div>
  <div><button onclick="flickr.exec();">exec</button></div>
  <hr />
  <div id="target"></div>
  <script type="text/javascript" src="js/flickr.js"></script>
  <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.js"></script>
  <script type="text/javascript" src="/js/shinya/jquery.toggleInputMsg.js"></script>
  <script>
   // id指定・オプション指定の場合
   //$('#keyword').toggleInputMsg({'value':'ほげ','color':'red','inputColor': 'blue'});
   // class指定、オプション無しの場合
   $('.in').toggleInputMsg();
  </script>

css:

body {
    background-color:#000000;
    color:#00ff00;
    margin:0;
    padding:0;
   }
   #hoge {
    width:200px;
    height:100px;
    background-color:#6F6F6F;
    opacity:0.8;
    position:absolute;
    display:none;
   }

js:

/**
  * JSONPでflickr APIへアクセス
  */
var flickr = (function() {
 var B = document.body,
  t = document.getElementById('target');
  hoge = document.getElementById("hoge") || alert("要素がないよ"),
     hst = hoge.style,
     limg = document.getElementById("loading_img") || alert("要素がないよ");
     limgs = limg.style,
     d = document.documentElement;;
 return {
  /** APIを呼び出す */
  exec : function() {
      var script = document.createElement('script');
      script.src = imageCreator.getApiURL();
      B.appendChild(script);
   hst.display = "inline";
   hst.height = window.innerHeight;
   hst.width = window.innerWidth;
   limgs.position='absolute';
   limgs.top = d.clientHeight / 2 -12;
   limgs.left = d.clientWidth/ 2 -12;
  },
  /** APIのcallback */
  callBackFuncForJson : function(data) {
   var i,
    photo,
    photos = data.photos;
   hst.display = "none";

   for (i = 0; photo = photos.photo[i]; i++) {
    var img = document.createElement('img');
    img.src = imageCreator.getImageURL(photo);
    t.appendChild(img);
   }
   if (i === 0) { alert('no much!');}
  }
 }
})();

/**
  *creator
  */
var imageCreator = function() {
 return {
  getImageURL : function (photo) {
    return "http://farm" + photo.farm +
        ".static.flickr.com/" + photo.server +
        "/" + photo.id +
        "_" + photo.secret +
        "_s.jpg";
  },
  getApiURL : function () {
   return "http://api.flickr.com/services/rest/?method=flickr.photos.search&api_key=d4009274a471c6b5448e87debe7d38bd"
    + "&format=json&jsoncallback=flickr.callBackFuncForJson&safe_search=1&content_type=1&sort=relevance"
    + "&text=" + (document.getElementById("keyword").value || "js")
    + "&per_page=" + (document.getElementById("size").value || "50");
  }
 };
}();

flickr.defaultMsgKeyword = "キーワードを入力してください";
flickr.defaultMsgNumber = "取得件数を入力してください";
(function() {
 
})

せっかくなのでinputフォームにデフォルト文字列を埋め込むモジュールを
jQuery plugin形式にしてみました。

/**
 * テキストエリアのデフォルトメッセージを設定する。
 * @author shinya
 */
var defaultMsg = "何か入れてください";
(function($) {
 $.fn.toggleInputMsg = function(opt) {
  var defaults = {
   'value' : '入力してください',
   'color' : '#696969',
   'defaultColor' : '#000000'
  }
  
  var setting = $.extend(defaults, opt);

  for (var i = 0, len = this.length; i < len; i++) {
   this[i].style.color = setting.color;
   this[i].value = setting.value;
   
   this[i].addEventListener("focus", function() {
    if (this.value == setting.value) {
     this.style.color = setting.defaultColor;
     this.value="";
    }
   });
   this[i].addEventListener("blur", function() {
    if (this.value == "") {
     this.style.color =  setting.color;
     this.value=setting.value;
    } 
   });
  }

  return this;
 };
})(jQuery);