Amazon Web Service を Ruby にて操作


「.amazonrc」の内容
Amazon Web Service(http://aws.amazon.com/)にアカウント登録すれば、key_idやsecret_key_idなどの情報を取得できます。

key_id = 'XXXXX'
secret_key_id = 'XXXXX'
associate = 'XXXXX'
cache = false
locale = 'jp'
encoding = 'utf-8'

書籍検索サンプルコード

#!/usr/local/bin/ruby -Ku
# -*- coding: utf-8 -*-

# デフォルトだと設定ファイルは「/etc/amazonrc」「~/.amazonrc」などを読みにいく
# 今回はカレントの「.amazonrc」を読みにいくよう設定
ENV['AMAZONRCDIR'] = './'
ENV['AMAZONRCFILE'] = '.amazonrc'

require 'amazon/aws'
require 'amazon/aws/search'

req = Amazon::AWS::Search::Request.new()

#------------------------------------------------------------
# 色々な条件にて、ItemSearch を使用してみたよ
#------------------------------------------------------------
is = Amazon::AWS::ItemSearch.new( 'Books', {'Title' => 'ruby'} )
#is = Amazon::AWS::ItemSearch.new( 'Books', {'Author' => 'るびきち'} )
#is = Amazon::AWS::ItemSearch.new( 'Books', {'Title' => '逆引き', 'Author' => 'るびきち'} )

rg = Amazon::AWS::ResponseGroup.new( 'Large' )
page = req.search( is, rg )

#------------------------------------------------------------
# 1ページ分表示
#------------------------------------------------------------
puts "search count : #{page.item_search_response.items.total_results}"

page.item_search_response.items.item.each do |i|
  puts "title = #{i.item_attributes.title}"
  puts "publisher = #{i.item_attributes.publisher}"
  author = i.item_attributes.author
  author.each { |k, v| puts "author = #{k}" } if not author.nil?
  puts ""
end

#------------------------------------------------------------
# ページごと表示
#------------------------------------------------------------
total_page = page.item_search_response.items.total_pages.to_i
puts "page count : #{total_page}"

if total_page > 1 then
  page_cnt = 0
  page = req.search( is, rg, total_page )  # 1〜指定ページまで読み込み
  page.each do |p|
    puts "----------------------------------------"
    puts "#{page_cnt+=1}ページ"
    puts "----------------------------------------"
    p.item_search_response.items.item.each do |i|
      i.item_attributes.to_h.each do |k, v|
        if Amazon::AWS::AWSArray === v
          puts "#{k} = #{v.join("  /  ")}" if not v.nil?
        else
          puts "#{k} = #{v}" if not v.nil?
        end
      end
      puts ""
    end
  end
end

書籍検索サンプルコード(一気に全件取得)

#!/usr/local/bin/ruby -Ku
# -*- coding: utf-8 -*-

#--------------------------------------------------------------------------------
# Amazon Web Service / 書籍名にて検索(全件数を一気に取得)
#--------------------------------------------------------------------------------
ENV['AMAZONRCDIR'] = './'
ENV['AMAZONRCFILE'] = '.amazonrc'

require 'amazon/aws'
require 'amazon/aws/search'

req = Amazon::AWS::Search::Request.new()
is = Amazon::AWS::ItemSearch.new( 'Books', {'Title' => 'ruby'} )
rg = Amazon::AWS::ResponseGroup.new( 'Large' )
page = req.search( is, rg, :ALL_PAGES)

page.each do |p|
  p.item_search_response.items.item.each do |i|
    i.item_attributes.to_h.each do |k, v|
      if Amazon::AWS::AWSArray === v
        puts "#{k} = #{v.join("  /  ")}" if not v.nil?
      else
        puts "#{k} = #{v}" if not v.nil?
      end
    end
    puts ""
  end
end

チェックボックスJavaScriptからノード追加した場合の「checked」プロパティの挙動



<問題> ノード追加する前に「checked」プロパティを指定してもIEだとチェックされない。 IEのバグのようです・・・

  <script language="JavaScript" type="text/JavaScript">
  <!--
    function case1() {
      var checkEle = document.createElement("input");
      checkEle.setAttribute("type", "checkbox");
      checkEle.setAttribute("checked", true);
      document.getElementById("case1").appendChild(checkEle);
    }
  //-->
  </script>

  <div id="case1"></div>


<対応策1> createElementにて<input checked>を指定(IE限定の方法です)

  <script language="JavaScript" type="text/JavaScript">
  <!--
    function case2() {
      if(navigator.userAgent.indexOf("MSIE") != -1) {
        checkEle = document.createElement("<input checked>");
      } else {
        checkEle = document.createElement("input");
      }
      checkEle.setAttribute("type", "checkbox");
      checkEle.setAttribute("checked", true);
      document.getElementById("case2").appendChild(checkEle);
    }
  //-->
  </script>
  
  <div id="case2"></div>
  


<対応策2> ノード追加した後に「checked」プロパティを指定

  <script language="JavaScript" type="text/JavaScript">
  <!--
    function case3() {
      var checkEle = document.createElement("input");
      checkEle.setAttribute("type", "checkbox");
      document.getElementById("case3").appendChild(checkEle);
      checkEle.setAttribute("checked", true);
    }
  //-->
  </script>
  
  <div id="case3"></div>
  

StyleSheetソース

#RoundBox{
  width:            25em;
  margin:           2px 0 3px 3px; }  

#RoundBox .Header {
  font-size:        16px;
  color:            #004040;
  font-weight:      600;
  text-align:       center;
  border-color:     #CCEEAA;
  border-style:     solid;
  border-width:     0 6px 0 6px;
  margin:           0;
  padding:          6px;
}

#RoundBox .rb1 { margin: 0 6px; }
#RoundBox .rb2 { margin: 0 4px; }
#RoundBox .rb3 { margin: 0 3px; }
#RoundBox .rb4 { margin: 0 2px; }
#RoundBox .rb5 { margin: 0 1px; height: 2px; }

.rb1, .rb2, .rb3, .rb4, .rb5{
  height:           1px;
  overflow:         hidden;
  background:       #CCEEAA;
  padding:          0;
}

HTMLソース

<DIV id="RoundBox">
  <DIV>
    <DIV class="rb1"></DIV>
    <DIV class="rb2"></DIV>
    <DIV class="rb3"></DIV>
    <DIV class="rb4"></DIV>
    <DIV class="rb5"></DIV>
  </DIV>
  <DIV class="Header">角を丸くしたボックス</DIV>
  <DIV>
    <DIV class="rb5"></DIV>
    <DIV class="rb4"></DIV>
    <DIV class="rb3"></DIV>
    <DIV class="rb2"></DIV>
    <DIV class="rb1"></DIV>
  </DIV>
</DIV>

WEBページ レイアウト

TABLE要素 ・ DIV要素



レイアウトの為にTABLE要素を使用するのは良くないと聞きます。

<反省点>
 TABLE要素を使って画面を一つのテーブルで囲み、レイアウト(画面構成)を行っていた。

<答え?>
 レイアウトはDIV要素+CSSにて行うようにする。

<反省した理由>
 TABLE要素の内容は、その範囲のデータ全てがダウンロードされないと、列がいくつあるか確定できない為、
 ブラウザは画面表示を始められないようです。
 上記理由を知り、画面を一つのTABLE要素で囲むレイアウト方法だと、難点がある事に気づきました。
  ・動作が遅くなる
  ・全てを読み込むまで何も表示されない状態が続く

 ※「全てを読み込むまで何も表示されない状態が続く」対応策として、
  「THEAD, TFOOT, TBODY」や、HTML4で追加された「COLGROUP, COL」を使用する。

  「COLGROUP, COL」:最初にTABLEの列数と幅の情報を与える

角を丸くしたボックスを作ってみました


StyleSheetソース

/*********************************************
 内容エリア
*********************************************/
.body{
  border-left:      1px solid #919B9C;
  border-right:     1px solid #919B9C;
  border-bottom:    1px solid #919B9C;
  padding:          5px;
  height:           100%;
}

/*********************************************
 タブエリア
*********************************************/
#tabAreaPane{
  width:            100%;
  height:           25px;
  margin:           0px;
  border-bottom:    1px solid #919B9C;
}

#tabAreaPane DIV{
  width:            100px;
  height:           100%;
  border:           1px solid #919B9C;
  background-color: #FFFFFF;
  margin-left:      0px;
  margin-right:     2px;
  cursor:           pointer;
  position:         relative;
  bottom:           -1px;
  float:            left;
  text-align:       center;
}

#tabAreaPane SPAN{
  font-family:      arial;
  vertical-align:   top;
  width:            100%;
  line-height:      1.5em;
}

/*********************************************
 マウスが乗った時のタブ
*********************************************/
#tabAreaPane .overTab{
  border-top:       2px solid #FF0000;
}

/*********************************************
 マウスが離れた時のタブ
*********************************************/
#tabAreaPane .outTab{
  border-top:       1px solid #919B9C;
}

/*********************************************
 指定されているタブ
*********************************************/
#tabAreaPane .activeTab{
  border-top:       3px solid #FF0000;
  border-bottom:    none;
}