« ソーシャルブックマークのタグって、使ってます? | トップページ | 思ったような見た目にするのは難しいですね »

2006/06/21

【ココログ】きまぐれブックテーマ:『お題』に沿った本のリンクをランダムに表示するJavaScript

Amazon Web サービスを用いて、自分で適当に設定しておいたキーワードで書籍検索を行い、得られた結果をランダム表示するようなスクリプトを作ってみました(例によってIE6/Sleipnir2とFirefox 1.5の最新版でのみ確認)。
サイドバーにある『きまぐれブックテーマ』がそれです。現状では約15秒毎に表示が切り替わります。

既にどっかにあるような気もしますが

設置の仕方ですが、適当に名前をつけたメモタイプのマイリストのメモ欄に、以下のソースを貼り付けます。

<script type="text/javascript" charset= "utf-8" src="https://furyu.tea-nifty.com/script/RbookSearch.js"></script>

<style type="text/css">
<!--
    .rbsWindow {
        width: 100%;
        margin-left: -8px;
    }
    .rbsThemeTitle {
        margin-left: 4px;
        padding: 4px 0px 2px 0px;
        color: darkgreen;
        font-size: 12px;
        font-weight: bolder;
        line-height: 120%;
    }
    .rbsThemeText {
        width: 96%;
        border: 2px dashed silver;
        background-color: lemonchiffon;
        padding: 4px 8px 4px 8px;
        color: navy;
        font-size: 14px;
        font-weight: bolder;
    }
    .rbsResultWindow {
        width: 110%;
        height: 364px;
        color: red;
        font-size: 12px;
        line-height: 14px;
        font-weight: bolder;
    }
    .rbsResultWindow .rbsImgTable {
        width: 98%;
        height: 168px;
        overflow: hidden;
    }
    .rbsResultWindow .rbsImgTable .imgWin {
        padding: 4px 0px 4px 0px;
        text-align: left;
        vertical-align: top;
    }
    .rbsResultWindow .rbsImgTable .imgWin img {
        height: 160px;
        background: url('https://furyu.tea-nifty.com/image/NoImage.png') no-repeat;
    }
    .rbsResultWindow .rbsTxtTable {
        width: 98%;
        height: 192px;
        overflow: auto;
    }
    .rbsResultWindow .rbsTxtTable .infWin {
        padding: 4px;
    }
    .rbsCredit {
        padding: 8px 0px 0px 0px;
        font-size: 10px;
        text-align: right;
    }
    .RBStheme {
        display: none;
    }
-->
</style>

<div class="rbsWindow">
  <div class="rbsThemeTitle">ただいまのお題</div>
  <div id="rbsThemeText" class="rbsThemeText"> </div>
  <div id="rbsResultWindow" class="rbsResultWindow"></div>
</div>
<div class="rbsCredit" >powered by <a href="http://www.amazon.co.jp/exec/obidos/subst/associates/join/webservices.html">Amazon Web サービス</a></div>

<script type="text/javascript">
    RbookSearch.argAws.aaid = "furyutei-22" ;           //  Amazon Associate ID  (for Afirieito)
    RbookSearch.argAws.subid = "1S9C327N3DZD43F0K102" ; //  Amazon Access Key ID (Subscription ID)
    RbookSearch.changeTimer = 15000 ;                   //  リンク変更タイマ (milli-second)
    RbookSearch.compCheckId = "main-bottom"             //  ページロード完了チェック用タグID

    {   //  デフォルトテーマ
        var RbookCategory = [
            "books-jp"  //  和書
        ,   "music-jp"  //  ポピュラー音楽(クラシックの場合"classical-jp")
        ] ;
        var RbookFavorite = {
            "books-jp"  :   [  //  和書用テーマ
                "ブログ"
            ,   "プログラミング"
            ,   "スクリプト"
            ]
        ,   "music-jp"  :   [  //  ポピュラー音楽用テーマ
                "長渕剛"
            ,   "中島みゆき"
            ,   "槇原敬之"
            ]
        } ;
        var catName = RbookCategory[Math.floor( Math.random() * RbookCategory.length )] ;
        if ( catName ) {
            RbookSearch.argAws.mode = catName ;
            var favArray = RbookFavorite[catName] ;
            if ( favArray ) {
                RbookSearch.defaultTheme = favArray[ Math.floor( Math.random() * favArray.length ) ] ;
            }
        }
    }
    RbookSearch.callRbookSearch() ;
</script>

赤字の所は、Amazon のアソシエイトID(Amazon Associate ID:アフィリエイト用)や、Amazon Access Key ID(Subscription ID:Amazon Web サービス用)をお持ちの場合には、ご自分のIDに必ず変更するようにして下さい(変更無しで設置すると風柳用のIDとなります。ご自分のIDをお持ちで無い場合はそのままでも構いません。また、アソシエイトIDのみお持ちの方は、そちらだけ変更してもOKです)。
青字の所、変更タイマはリンクの更新間隔です。お好みに応じて変更して下さい。
ロード完了チェック用タグは、通常はそのままで大丈夫のはずですが、環境(ココログのテンプレート)によって変更する必要が生じるかもしれません。
緑字の箇所は、標準で設定したいテーマ文字列を指定します。これがAmazonの書籍検索のキーとなります。指定したテーマによっては、1冊も引っかからない場合もありえますのでご注意下さい。

【2006/06/22】
設置用スクリプトを更新し、和書以外にポピュラー音楽にも対応。ブログ読込時にランダムにどちらかを選択(和書のみでよいなら
        ,   "music-jp"  //  ポピュラー音楽(クラシックの場合"classical-jp")
の行を削除)。
また、テーマ文字列を複数設定可能に。これもブログ読込時にランダム選択される。

また、記事の本文(続き)欄に
<span class="RBStheme">(ここにテーマを書く)</span>
のようなタグを設置しておけば(スタイルシートで見えなくしてあります)、その記事を開いたときにテーマが変更されます。
サンプル1 サンプル2

別に本文に埋めこんでもよいですが、 その場合トップページのテーマに影響が有ります(一番上の新しい記事に埋めこまれたテーマがトップページのテーマとなります)。
制限として、バックナンバー等では本文(続き)欄も表示されてしまうため、やはり一番上にある記事のテーマが参照されてしまいます。

ここにも<span class="RBStheme">JavaScript</span>JavaScriptのようなタグを埋めこんであります。

« ソーシャルブックマークのタグって、使ってます? | トップページ | 思ったような見た目にするのは難しいですね »

ウェブログ・ココログ関連」カテゴリの記事

パソコン・インターネット」カテゴリの記事

読書」カテゴリの記事

おもいつき」カテゴリの記事

覚書」カテゴリの記事

コメント

風柳さん、こんにちは♪

凄いスクリプト、またしても作成なされたのですね☆
えらく感激してしまいましたよヽ(・∀・)ノ 

体調の方は、いかがですか(??)
蒸す日が続きますね!
私は蒸す日は苦手で・・・w 

風柳さん こんばんわ~
またオリジナルなモノ制作されて~技術はともかく、こういうモノを作ろうっていう「発想」はどこから?大事なのはこの「発想」ですもんね~技術があっても「発想」が無ければ新たなモノの”創造”は出来ないっすからね~
で、
><span class="RBStheme">(ここにテーマを書く)</span>
のようなタグを設置しておけば(スタイルシートで見えなくしてあります)
ですが、ちょっとソースを覗いたんですが・・・煙が出まして・・・(^-^;A
実際的にはどういう風に見えなくするよう指定してあるのでしょうか?

ろんちゃんさん、どうもです。

よくある、サイドバーの広告とそんなに変わらないかな~と思っていたりしたんですが。お誉めの言葉ありがとうございます。

雨(湿度)の影響か、やっぱり体調はそれ程よくないですね~。
この季節は偏頭痛が止まらないのでちょっと憂鬱。
その分、カラッと晴れた日があるとうれしいですけどね。

hibikiさん、どうもです。

タグを隠すのは、スタイルシートで display:none; を設定することで出来ますよね。
設置用スクリプトに、
    .RBStheme {
        display: none;
    }
というのがありますが、これで見えなくしているわけです。

発想、といってもまぁ
ちなみに今回のきっかけには、hibikiさんも一枚噛まれてますよ(笑)。

この直前の記事で、ソーシャルブックマークにつけるタグって必要か?ということを出発点として、

そういえば記事にもカテゴリーって設定しているけど、あまり目立たないなぁ。意識的にわざわざ付けるんだから、実際にブログを表示したときにもっと記事の『テーマ』としてはっきり認識できればいいのになぁ。

プロフィールにも自分の興味がある事柄とか書いてあるけど、これをもっと視覚的に見せる手段ないかな?

という風に連想し、ついでその“見せる手段”を考えているときに、最近hibikiさんと話題にしていた蔵書リンクMAKERのことが頭に浮かんで……。

『蔵書リンクMAKERは予め判っている特定の一つの本のHTMLを作るけれど、逆にあるテーマ(=キーワード)で検索した複数の本の中の一冊をランダムに表示したらどうかな?』

というわけで、作ってみたわけでした。

企業などにより提供されるブログパーツと違って、テーマを自分で設定できるので関連した本が表示されるともちろん興味が湧きますし、意外な本が表示されたりする驚きもあります(あいまいなキーワードだと、一見なんの関係もなさげなものが表示されたり)。

コメントを書く

(ウェブ上には掲載しません)

« ソーシャルブックマークのタグって、使ってます? | トップページ | 思ったような見た目にするのは難しいですね »

戻るリンク追加

カレンダー

2022年4月
          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

ココログカレンダーPlus(旧2)

検索


    • Web全体 サイト内
    • 蔵書のISBNを入力して下さい
    • はじめる前
      初級者向け
      上級者向け
      ブログ紹介
      結果を表示

コメントリストツリー化

無料ブログはココログ