«前の日記(2011-06-16) 最新 次の日記(2011-06-18)» 編集

会長@腹部日記


2011-06-17 [長年日記]

_ iTunes アプリ情報埋め込み #tDiary プラグイン(5) - jQueryで処理させることを画策中

昨今のtDiary界隈ではサーバ側の負荷を下げるためのjQueryでの実装が盛んに行われております。jQueryを身につけるためにも、この波に乗ってみることにしました。 今日一日格闘した結果、jQuery部分は不慣れながらも動きました。

見た目

amazon-detailと同じです。

20110618_jquery

jQueryコード

コールバックとかとても便利ではありませんか・・・(σ´∀`)σ

/*
 * appstore.js : embeded iTunes information
 *
 * Copyright (C) 2011 by tamoot <tamoot+tdiary@gmail.com>
 * You can distribute it under GPL.
 */
$(function() {
  
  function desc(text){
    return jQuery('<span><span/>')
      .addClass("amazon-price")
      .text(text)
      .append("<br>");
  };
  
  function appstore(app_url, app_id, dom_id){
    alert(app_url + app_id + dom_id);
    var params = {output: 'json', id: app_id}
    var price  = "$";
    if ( $('html').attr('lang') == 'ja-JP' ){
      $.extend( params, {lang: 'ja_jp', country: 'JP'} );
      price = "¥"
    };
    $.ajax({
      type: 'GET',
      url: 'http://ax.itunes.apple.com/WebObjects/MZStoreServices.woa/wa/wsLookup?',
      data : params,
      dataType: 'jsonp',
      success: function(data){
        app = data["results"][0];
        var itunes_a = jQuery('<a>')
          .attr({target: "_blank",
                 href  : app_url})
          .addClass("amazon-detail");
        
        $("#"+dom_id).prepend(itunes_a);
        
        var itunes_spand = jQuery('<span></span>').addClass("amazon-detail");
        itunes_a.append(itunes_spand);
        
        itunes_spand.prepend(
          jQuery('<img />')
            .attr({
              src   : app["artworkUrl100"],
              width : 128,
              height: 128})
            .addClass("amazon-detail")
            .addClass("left")
        );
        
        var itunes_spandd = jQuery('<span></span>');
        itunes_spandd.addClass("amazon-detail-desc");
        itunes_spand.append(
          itunes_spandd
        );
        
        itunes_spandd.append(
          jQuery('<span><span/>')
            .addClass("amazon-title")
            .text(app["trackCensoredName"]+" ")
          );
        itunes_spandd.append( desc(app["version"]) );
        itunes_spandd.append( desc(app["releaseDate"]) );
        itunes_spandd.append( desc(app["sellerName"]) );
        itunes_spandd.append( desc(price + app["price"]) );
        itunes_spandd.append( desc(app["supportedDevices"].join(', ')) );
        itunes_spand.append('<br style="clear: left;">');
      }
    });
  }
});

残課題

日記本文のプラグイン記述から、どんなjavascriptコードを生成して、実行させるかです。JavaScript全般に不慣れなため、ちょっと勉強しないとorz

Tags: tDiary jQuery

_ 朝食

あさごはんもぐもぐ

本日のツッコミ(全2件) [ツッコミを入れる]
_ ただただし (2011-06-17 22:48)

あまりjsサイドでコンテンツを生成しすぎると検索にひっかからなくなってしまうので注意。

_ 会長@腹部 (2011-06-18 00:12)

すっかりその点を忘れてました。Rubyのみ版はすぐ完成しちゃったんです。どっちをcontribに入れようかなぁと迷ってます。