さいしんのにっき きじいちらん ゆーざーとうろく ろぐいん へるぷ

あとあじ このぺーじをあんてなについか RSSふぃーど

2008-11-19 あまぐらまーがはじめてのAjaxのぷろぐらむをさくせいするまでのみちのりぜんよう

あまぐらまーがはじめてのAjaxのぷろぐらむをさくせいするまでのみちのりぜんよう

げんきゅう, Tips, ひとりごと

ここすうじつ、かいしゃのべんきょうかいでjQueryをすることになって、そのでもとしてAjaxをつかったぷろぐらむをつくっていました。まともにAjaxさわったのははじめて。のうはうがひつようそうです。

jQueryのべんきょうかいのないようは、ごじつせいりしてあっぷしますので、おたのしみに。

で、ぷろぐらむをつくるまでのみちのりをびぼうろくもかねてとうこうしようとおもいます。ぶっちゃけそーすれべるはひくいです。まだまだかいぜんすべきてんはやまほどありますが、つくったぷろぐらむはたぶんしゅうせいしないので、ふかんぜんながらこうかいします。

つくったぷろぐらむ

scriptたぐをうめこめば、かいしゃのせいさくじれいをさいせいするぶろぐぱーつのようなもの

<script id="js" type="text/javascript" src="http://higashizm.sakura.ne.jp/parts/js/loading.js"></script>

これをHTMLのbodyないにうめこむとじれいがさいせいされます。

だきょうしたこと

かなりだきょうしてますね。。。じかんてきなせいげんもあったので、あるていどはわりきりました。

かいはつほうほう

かいしゃのじれいはでーたべーすからひっぱってくればてっとりばやいのですが、おれ、ぷろぐらまじゃないのででーたべーすにあくせすさせてもらえません。なので、ひつようなじれいのでーたはかいしゃのさいとからすくれいぴんぐしてひっぱってくることにします。

うちがわからがむりなら、そとがわからぜめろと。

じぶんでけいやくしたさくらのさーばーでつかえるげんごで、さーばーさいどのぷろぐらむぶぶんをじっそうします。

すくれいぴんぐたいしょうのぺーじはいかのとおり。idとかほとんどふってないので、けっこうめんどい。

ねんべつ/Web500じっせき/Webせいさく/こんさるてぃんぐ/さーふぼーど

さーばーがわのぷろぐらみんぐげんごをPerl、PHP、Python、Rubyのどれにするかひじょうにまよいました。

PerlとPythonではすくれーぱーをかいたけいけんがあります。Pythonのすくれーぱーはかきのきじでこうかいしています。

こうしてわたしも1000まいのおっぱいがぞうをてにいれた - あとあじ

このときPythonをえらんだりゆうは、Google App Engineがわだいになりはじめていたことと、たんにおっぱいとPythonがとてもなかよしになれるきがしたからです。ふたつあわせて「おPython」とすれば、しんかくかできます。

らいぶらりのBeautiful Soupもおっぱいっぽいし、よのなかうまいことできてる。

でもえらんだのはRuby。

なかではRubyがもっともしらないげんごだということと、Rubyでぷろぐらむをかきたかったからです。あたらしいげんごをおぼえるときは、きょくりょくきぞんのちしきをつかうのではなく、げんごのぶんかやてつがくをまなんでからじっそうしたいとおもっているので、はじめてのRubyとまるごと Ruby! Vol.1はよしゅうしました。Rubyのみならず、ほかのげんごでも、ぶんかをまなぶためにはおらいりーのいちばんぶあついほんとまるごと○○をよむようにしています。

すくれいぴんぐでしゅとくしたでーたをずっとためしてみたかったjsonでしゅつりょくし、jQueryをつかって（いちおう、jQueryのべんきょうかいようねたなので）さらにかこうし、さいとうえにひょうじするようにします。

かんきょうこうちく

さくらのさーばーにRubyのかんきょうをつくりました。

Rubyはさいしょからくみこまれていますが、そのかんきょうをつかったらいぶらりのいんすとーるがよくわかんないので、$HOMEにlocalでぃれくとりをつくって、Rubyのいんすとーるからはじめました。

で、gemいれて、ひつようならいぶらりのいんすとーる。ついでにvimのかんきょうもこうちく（vim-rubyと.vimrc）。

さーばーさいどのぷろぐらみんぐ（Rubyですくれいぴんぐ）

vimでこーでぃんぐして、でばっぐはMacのたーみなるとpめそっど。Rubyはぶらうざうえででばっぐするのがなんだかめんどうそうですね。すくれいぴんぐはHpricotをつかいました。

いかがこーどぜんたい。

#!/home/higashizm/local/bin/ruby
require 'rubygems'
require 'hpricot'
require 'open-uri'
require 'kconv'
require 'json'
require 'cgi'

class Uri
  def initialize(uri)
    @@uri = uri
  end
  attr_accessor :uri
end

class Document < Uri
  def get_uris
    @uris = []
    @jsons = []
    doc  = Hpricot( open(@@uri).read )
    1.upto(10) do |i|
      uris << @@uri.sub(/p=[1-9]+$/, "p=#{i}")
      @uris = uris
      break if (doc/"/html/body/div/div[4]/table//tr/td[2]/table//tr/td[2]//a[#{i}]").empty?
    end
  end
  attr_accessor :uris, :jsons

  def to_json 
    @uris.each{|uri|
      next if uri == nil
      @doc = Hpricot( open(uri).read.toutf8 )
        2.upto(16) do |i|
          doc  = @doc
          break if (doc/"/html/body/div/div[4]/table//tr/td[2]/table[#{i+1}]").empty?
          img  = (doc/"/html/body/div/div[4]/table//tr/td[2]/table[#{i}]//tr/td/a/img").to_html
 
          temp_hash = 
            {
              'title'       => (doc/"/html/body/div/div[4]/table//tr/td[2]/table[#{i}]//tr/td[2]/table//tr/td/a/font").inner_html,
              'img_uri'     => (doc/"/html/body/div/div[4]/table//tr/td[2]/table[#{i}]//tr/td/a/img").to_html[/http.*\.jpg/],
              'link_uri'    => (doc/"/html/body/div/div[4]/table//tr/td[2]/table[#{i}]//tr/td[2]/table//tr[3]/td/a").inner_html,
              'description' => (doc/"/html/body/div/div[4]/table//tr/td[2]/table[#{i}]//tr/td[2]/table//tr[5]/td").inner_html
            }
          @jsons << temp_hash
        end
        @doc = nil
    }
    @jsons = JSON.pretty_generate(@jsons)
  end

  def send_jsonp(callback)
    puts "content-type: application/json\n\n"
    puts "#{callback}(#{@jsons})"
  end
end

cgi = CGI.new
yy = cgi['yy']
mode = cgi['mode']
p = cgi['p']
callback = cgi['callback']
uri = "http://www.surfboard.jp/web100/list_year.asp?" << "yy=" << yy << "&mode=" << mode << "&p=" << p
response = Document.new(uri)
response.get_uris
response.to_json
response.send_jsonp(callback)

Hpricotのめそっどないで、Xpathのきじゅつがありますが、これはfirebugからこぴぺ。こぴぺしているのにどうさしなくて2じかんしょうひ。firebugがかってにつくるtbodyにもてあそばれました。。。

Hpricotはすくれいぴんぐすごくらく。たのしくきじゅつできる。

Rubyのいてれーたや?めそっどもわかりやすい。Rubyがたのしくぷろぐらみんぐできるというりゆうがわかったきがしました。

Rubyのjsonにかんするじょうほうがちょっとすくなかったのですが、jsonらいぶらりをつかっています。pretty_generateつかってあたいのかくにんしてましたけど、じっさいはgenerateでいいですね。あくせさとかもでばっぐようにつくったけど、けっきょくいらない。

はいれつにnilがいっっちゃうところがあったんですけど、いまいちわかんないのでifでかいひ。かんぜんにやっつけです。

すべてsshうえでさぎょうしていたのできづかなかったのですが、ろーかるでじっこうしたときにくろすどめいんのせいやくにひっかかり、jsonじゃなく、jsonpつかわなきゃいけないことにきづきました。jsonpはいだいだ。

callbackかんすうのじっそうは、なかなかなやみました。

ぷろぐらむはどのようにまとめればいいかぜんぜんわかんないです。しっかりせっけいできるようになりたい。

くらいあんとさいどのぷろぐらみんぐ（jQueryでAjaxのじっそう）

しょうじきあまりjQueryかつようできてないきがします。IEのきょどうおかしいし。

もちろんJavaScript だい5はんとまるごとJavaScriptはよしゅうすみ。

jsふぁいるはふたつつくりました。loading.jsとcontroller.jsです。

かいはつかんきょうはvimとfirebug。firebugなくしてjsかけないですね。

loading.js

そーすこーどはいか。

(function() {
    var jquery = document.createElement('script');
    jquery.src = 'http://higashizm.sakura.ne.jp/parts/js/jquery.js';
    jquery.type = 'text/javascript';
    var controller = document.createElement('script');
    controller.src = 'http://higashizm.sakura.ne.jp/parts/js/controller.js';
    controller.type = 'text/javascript';
    document.getElementsByTagName('head')[0].appendChild(jquery);
    document.getElementsByTagName('head')[0].appendChild(controller);
})();

とくめいかんすうでかこんだくろーじゃをすぐにじっこう。これで、jquery.jsとcontroller.jsをよみこんでます。scriptたぐをひとつですませるためのくふうだったんですが、これでくろすぶらうざのもんだいがはっせいしているのかもとおもったり。

じたくにWindowsないので、けんしょうできません。。。

id:amachangのいかのきじをさんこうにしました。

どうてきすくりぷとろーでぃんぐ（さんざんきしゅつだとおもうけど - ITせんき

これでくろすぶらうざのもんだいがはっせいしているのでなければ、はんようせいもたかいし、ひじょうにつかえるてくにっくだとおもいます。

controller.js

そーすこーどはいか。

$(function(){
  var div_wrapper = document.createElement('div');
  div_wrapper.id = 'wrapper';
  $('#js').after(div_wrapper);
  var cssObj = {
    height: '50px',
    paddingTop: '25px',
    backgroundColor: '#888',
    color: '#fff',
    textAlign: 'center'
  }
  $('#wrapper').css(cssObj);
  $('#wrapper').text('Now Loading');

  $.ajax({
    url : 'http://higashizm.sakura.ne.jp/parts/inccase.cgi',    
    dataType : 'jsonp',
    data : {
      yy : '2008',
      mode : '1',
      p : '1'
    },
    success : function(jsons){
      $('#wrapper').empty();
      var cssObj = {
        height: 'auto',
        paddingTop: '0',
        backgroundColor: 'transparent',
        color: '#000',
        textAlign: 'left'
      }
      $('#wrapper').css(cssObj);

      for (var i = 0; i < jsons.length; i++) {
        var div = document.createElement('div');
        div.id = 'case' + i;
        var h2  = document.createElement('h2');
        var img = document.createElement('img');
        var a   = document.createElement('a');
        var p   = document.createElement('p');
        $('#wrapper').append(div);
        $('#case' + i).append(h2).append(img).append(a).append(p);
        div = document.createElement('div');
        $('#case' + i + '> img').wrap(div);
        $('#case' + i + '> a').wrap(div);
        $('#case' + i).css('display', 'none');
      }
        
      for( i = 0; i < jsons.length; i++ ) {
        $('#case' + i + '> h2').text(jsons[i].title);
        $('#case' + i + '> div > img').attr({ src: jsons[i].img_uri, alt: jsons[i].title });
        $('#case' + i + '> div > a').text(jsons[i].link_uri); 
        $('#case' + i + '> div > a').attr({ href: jsons[i].link_uri });
        $('#case' + i + '> p').text(jsons[i].description);
      }

      var evalTexts = [] ;
      for ( var i = 0; i < jsons.length; i++ ) {
        evalTexts.push("setTimeout(function(){$('#case" + i + "').fadeIn(3000).fadeOut(3000, function(){$('#case" + i + "').remove();})}, 6000 * " + i + ");")
      }

      for( var i = 0; i < jsons.length; i++) {
        eval(evalTexts[i]);
      }
    },
    error : function() {
      alert('error');
    }
  });
});

CSSのきじゅつはてきとうです。jQueryはAjaxのきじゅつがすごくらくですね。jsonpのこーるばっくかんすうにとまどっただけで、のちはすんなりいきました。

ただ、すごくしょりにこまったかしょがいかのぶぶん。たぶん、こんかいのかいはつでいちばんじかんかかった。

      var evalTexts = [] ;
      for ( var i = 0; i < jsons.length; i++ ) {
        evalTexts.push("setTimeout(function(){$('#case" + i + "').fadeIn(3000).fadeOut(3000, function(){$('#case" + i + "').remove();})}, 6000 * " + i + ");")
      }

      for( var i = 0; i < jsons.length; i++) {
        eval(evalTexts[i]);
      }

forぶんのかしょです。まえのこーどで、#caseNというようそをじれいのかずだけつくっています。Nのかしょにいっっているすうじをつかってforぶんをはしらせつつ、#case0からじゅんばんにじれいをfadeIn()fadeOut()したかったんですけど、fadeIn()がはじまるまえにいんくりめんとがうごいちゃって、すごくこまりました。

べつのこーどにしてかくとこんなかんじ。これで#a1から#a3までをじゅんばんにfadeIn()fadeOut()したかった。

<script type="text/javascript">
$(function(){
for (var i = 1; i < 3; i++) {
$('a' + i).fadeIn(2000).fadeOut(3000);
}
});
</script>
<div id="a1" style="display:none;">a1 now printing</div>
<div id="a2" style="display:none;">a2 now printing</div>
<div id="a3" style="display:none;">a3 now printing</div>

いろいろためしてみたんですけどうまくいかず、さいしゅうてきにもじれつけいしきではいれつにかくのうして、そののちevalでじっこうするほうほうをとっています。

でもこれぜったいおかしい。ふしぜんすぎるきがする。かといっっててきかくなじょうほうにもいきつかず。。。

このぶぶんはよいかいほうがあればしゅうせいしたいです。よくありそうなぱたーんなので。ついでにくろすぶらうざにもたいおうしようかな。。。

さいごに

しきしゃのほうがみると、とんでもないこーどかもしれませんが、じぶんなりにはがんばれました。（じっしつ2にちかんしかこーでぃんぐじかんとれなかったし）

やってみてJavaScriptのおくふかさと、Rubyのたのしさをたいけんできたので、いまだにきめかねていたしゅりょくげんごはRubyにしようかなとおもいつつあります。もちろんJavaScriptも。RubyとJavaScriptはきょうつうてんがあってあいしょうがよさそうです。

ということで、こんごもぷろぐらみんぐをけいぞくしつつ、2,3ねんをめどにじぶんでさーびすをたちあげるまでのれべるにもっていきます。

っておれでぃれくたーなんだけどｗ

ついき1

くろすぶらうざたいおうをだきょうするのはあんまりよろしくないですよねというしてきもあったので、ごじつそのぶぶんをしゅうせいすることにします。*1

とうきょうへのひっこしとjQueryべんきょうかいのあっぷじゅんびにじかんがとられるので、さらいしゅうとかかな。がんばろう。

ついき2

かんいにかくにんするためにさーばーにあっぷしときました。みだしいがいはきほんてきにscriptたぐがいっってるだけです。

Demo

ついき3しゅうせいばん

Demo

ついき3

IEのえらーはcontroller.jsをちえんろーどしてないからっぽいです。

いかのようになおすとえらーはきえました。

(function() {
    var jquery = document.createElement('script');
    jquery.src = 'http://higashizm.sakura.ne.jp/parts/js/jquery.js';
    jquery.type = 'text/javascript';
    var controller = document.createElement('script');
    controller.src = 'http://higashizm.sakura.ne.jp/parts/js/controller.js';
    controller.type = 'text/javascript';
    document.getElementsByTagName('head')[0].appendChild(jquery);
    function wait(a,func) {
      var check = 0;
        try{
            eval("check =" + a);
        }catch(e){
        }
        if(check){
          func();
        }else{
          var f = function(){wait(a,func)};
          setTimeout(f,100);
        }
    }
    wait('jQuery.each',function(){document.getElementsByTagName('head')[0].appendChild(controller)});
})();

このきじをさんこうにさせていただきました。

JavaScriptでちえんろーどをするほうほうについてのおさらい - Clouder::Blogger

いずれにしてもCPUめちゃくちゃくうし、このあたりののうはうはこんごまなんでしゅうせいできるようにしておきたいところです。

Permalink | こめんと(2) | とらっくばっく(3) | 21:48 あまぐらまーがはじめてのAjaxのぷろぐらむをさくせいするまでのみちのりぜんよう - あとあじ をふくむぶっくまーく はてなぶっくまーく - あまぐらまーがはじめてのAjaxのぷろぐらむをさくせいするまでのみちのりぜんよう - あとあじ あまぐらまーがはじめてのAjaxのぷろぐらむをさくせいするまでのみちのりぜんよう - あとあじ のぶっくまーくこめんと

*1：Safariはうごいてるみたいですね。えらーでてたとおもったんだけど、どこかなおしたかていでえらーなくなったのかな？

4873113253
Book JavaScriptくいっくりふぁれんす
おらいりーじゃぱん でいびっどふらながん David Flanagan きのしたてつや ふくりゅうこうぎょう
4873113563
Book Rubyすくりぷてぃんぐてくにっく ―てすとくどうに...
おらいりー・じゃぱん Brian Marick かんのりょうじ
こめんとをかく

tomohiro555tomohiro555 2008/11/22 09:31 え？でぃれくたーさん？
blogのないようみるかぎり、りっぱなPGさん♪

jdgjdg 2008/11/22 12:26 ありがとうございます^^
えんじにあにはすごいあこがれをだいていますね。

「えいえんにえんじにあにあこがれつづけるでぃれくたー」っていうあんばらんすなじょうたいもよいのかなーってさいきんはおもいはじめています。

もっともっとぷろぐらみんぐはべんきょうしていきたいです。

げすと


とらっくばっく - http://d.hatena.ne.jp/jdg/20081119/1227098931
りんくもと
ぷろふぃーる

jdg

もとぱそこんいんすとらくたー。げんWebでぃれくたーです。 ↑ くわしくはjdgをくりっくしてください

かてごりー
にっきのけんさく

かれんだー
<< 2008/11 >>
にち がつ ひ みず き きん つち
1
2 3 4 5 6 7 8
9 10 11 12 13 14 15
16 17 18 19 20 21 22
23 24 25 26 27 28 29
30
さいきんげんきゅうしたしょうひん

follow taiju at http://twitter.com
www.learn-japan.org(romaji/hira/kata/hirakata)