【ココログ】きまぐれブックテーマ:『お題』に沿った本のリンクをランダムに表示するJavaScript
Amazon Web サービスを用いて、自分で適当に設定しておいたキーワードで書籍検索を行い、得られた結果をランダム表示するようなスクリプトを作ってみました(例によってIE6/Sleipnir2とFirefox 1.5の最新版でのみ確認)。
サイドバーにある『きまぐれブックテーマ』がそれです。現状では約15秒毎に表示が切り替わります。
設置の仕方ですが、適当に名前をつけたメモタイプのマイリストのメモ欄に、以下のソースを貼り付けます。
<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冊も引っかからない場合もありえますのでご注意下さい。
設置用スクリプトを更新し、和書以外にポピュラー音楽にも対応。ブログ読込時にランダムにどちらかを選択(和書のみでよいなら
, "music-jp" // ポピュラー音楽(クラシックの場合"classical-jp")
の行を削除)。
また、テーマ文字列を複数設定可能に。これもブログ読込時にランダム選択される。
また、記事の本文(続き)欄に
<span class="RBStheme">(ここにテーマを書く)</span>
のようなタグを設置しておけば(スタイルシートで見えなくしてあります)、その記事を開いたときにテーマが変更されます。
サンプル1 サンプル2
制限として、バックナンバー等では本文(続き)欄も表示されてしまうため、やはり一番上にある記事のテーマが参照されてしまいます。
ここにも<span class="RBStheme">JavaScript</span>JavaScriptのようなタグを埋めこんであります。
« ソーシャルブックマークのタグって、使ってます? | トップページ | 思ったような見た目にするのは難しいですね »
「ウェブログ・ココログ関連」カテゴリの記事
- 久しぶりの投稿がココログへの苦言というのもなんなのですが……(2019.03.20)
- ココログをTwitterカードに対応させてみる(2016.11.23)
- 【覚書】風柳亭(ココログプロ)をレスポンシブWebデザイン化(Bootstrap3使用)(2015.10.09)
- ココログ用全文検索 - ココログ最強検索を jQuery を使って作り直してみた(既知の不具合の幾つかに対応)(2015.09.01)
- 現在に生きるということ。(2013.01.05)
「パソコン・インターネット」カテゴリの記事
- Twitter 原寸びゅー:PC版ブラウザ用・Twitterの画像閲覧と保存がはかどる拡張機能の紹介(2016.02.12)
- スマートフォンをPC上の音楽を再生するためのリモコンとして使いたい(2016.01.10)
- BIGLOBE光ネクスト(大阪)の通信速度問題 - プロバイダ選びは難しい……(2015.08.13)
- BOOK☆WALKER さんに関して最近経験した不安と不満(2015.08.10)
- 『#鳥獣戯画制作キット』が楽しい(2015.07.01)
「読書」カテゴリの記事
- BOOK☆WALKER さんに関して最近経験した不安と不満(2015.08.10)
- 白泉社「楽園」web増刊・更新一覧(2014/11/21~12/30)(2014.11.22)
- Twitter上のソード・ワールド2.0イベント【『できそこないの転生伝承』ツイッターセッション】でTwBCDiceが使用されました!(2014.09.20)
- カザマアヤミ著「恋愛3次元デビュー」がひどい(誉め言葉)ので、みなさんもぜひっ!(2014.05.22)
「おもいつき」カテゴリの記事
- ココログをTwitterカードに対応させてみる(2016.11.23)
- 神使の兎 ~宇治神社にて~(2016.07.10)
- Twitter 原寸びゅー:PC版ブラウザ用・Twitterの画像閲覧と保存がはかどる拡張機能の紹介(2016.02.12)
- スマートフォンをPC上の音楽を再生するためのリモコンとして使いたい(2016.01.10)
- 【覚書】風柳亭(ココログプロ)をレスポンシブWebデザイン化(Bootstrap3使用)(2015.10.09)
「覚書」カテゴリの記事
- 鍛高譚 ~ カレイにまつわる物語(2018.05.25)
- ココログをTwitterカードに対応させてみる(2016.11.23)
- 神使の兎 ~宇治神社にて~(2016.07.10)
- Twitter 原寸びゅー:PC版ブラウザ用・Twitterの画像閲覧と保存がはかどる拡張機能の紹介(2016.02.12)
- スマートフォンをPC上の音楽を再生するためのリモコンとして使いたい(2016.01.10)
風柳さん、こんにちは♪
凄いスクリプト、またしても作成なされたのですね☆
えらく感激してしまいましたよヽ(・∀・)ノ
体調の方は、いかがですか(??)
蒸す日が続きますね!
私は蒸す日は苦手で・・・w
投稿: ろんちゃん | 2006/06/21 16:28
風柳さん こんばんわ~
またオリジナルなモノ制作されて~技術はともかく、こういうモノを作ろうっていう「発想」はどこから?大事なのはこの「発想」ですもんね~技術があっても「発想」が無ければ新たなモノの”創造”は出来ないっすからね~
で、
><span class="RBStheme">(ここにテーマを書く)</span>
のようなタグを設置しておけば(スタイルシートで見えなくしてあります)
ですが、ちょっとソースを覗いたんですが・・・煙が出まして・・・(^-^;A
実際的にはどういう風に見えなくするよう指定してあるのでしょうか?
投稿: hibiki | 2006/06/23 01:04
ろんちゃんさん、どうもです。
よくある、サイドバーの広告とそんなに変わらないかな~と思っていたりしたんですが。お誉めの言葉ありがとうございます。
雨(湿度)の影響か、やっぱり体調はそれ程よくないですね~。
この季節は偏頭痛が止まらないのでちょっと憂鬱。
その分、カラッと晴れた日があるとうれしいですけどね。
投稿: 風柳>ろんちゃんさん | 2006/06/23 01:33
hibikiさん、どうもです。
タグを隠すのは、スタイルシートで display:none; を設定することで出来ますよね。
設置用スクリプトに、
.RBStheme {
display: none;
}
というのがありますが、これで見えなくしているわけです。
発想、といってもまぁ
ちなみに今回のきっかけには、hibikiさんも一枚噛まれてますよ(笑)。
この直前の記事で、ソーシャルブックマークにつけるタグって必要か?ということを出発点として、
そういえば記事にもカテゴリーって設定しているけど、あまり目立たないなぁ。意識的にわざわざ付けるんだから、実際にブログを表示したときにもっと記事の『テーマ』としてはっきり認識できればいいのになぁ。
↓
プロフィールにも自分の興味がある事柄とか書いてあるけど、これをもっと視覚的に見せる手段ないかな?
という風に連想し、ついでその“見せる手段”を考えているときに、最近hibikiさんと話題にしていた蔵書リンクMAKERのことが頭に浮かんで……。
『蔵書リンクMAKERは予め判っている特定の一つの本のHTMLを作るけれど、逆にあるテーマ(=キーワード)で検索した複数の本の中の一冊をランダムに表示したらどうかな?』
というわけで、作ってみたわけでした。
企業などにより提供されるブログパーツと違って、テーマを自分で設定できるので関連した本が表示されるともちろん興味が湧きますし、意外な本が表示されたりする驚きもあります(あいまいなキーワードだと、一見なんの関係もなさげなものが表示されたり)。
投稿: 風柳>hibikiさん | 2006/06/23 01:55