Home > Tags > JavaScript

JavaScript Tag Archive

Amazon 画像のリンク切れをJavaScript でごまかしてみる

2008-08-07 (木)
WordPress

リンク切れ用代替画像読書感想カテゴリでは、サイドバー最上段に書影をランダムで10個表示するようにしていたのですが、ところどころ画像が表示されていないということに気付いていつつも放置していました。が、なんだか日が経つにつれてリンク切れ画像が増えていってるような気がして仕方なかったので、とりあえず対処療法を講じてみました。

そもそも、Amazon リンク切れ画像で検索すると、同様なことに悩んでいる方は少なからずいるようで、そして、結局はひとつひとつ手作業で修正するしかなさそうという事実に愕然としてしまいます。

しかし、何とかす方法はやっぱりあるようで、画像がリンク切れの時は、代替画像を表示するという方法を指定した画像がなければ別のサーバーの画像を読み込むにて知りました。

ってことで、早速テーマを書き換え。WordPress のRandom Imageプラグインの出力を書き換えて、

<?php randomimage(false,
                  10,
                  "height='120' width='90' class='random-image' onerror=\"this.src='http://www.u-1.net/images/noimage_small.png'\"",
                  true,
                  "(\.jpg|\.jpeg|\.png)",
                  "both",
                  "",
                  "9",
                  true,
                  "",
                  "%2"); ?>

のように変更。プラグインの細かいパラメータは配布サイトの説明参照してもらうとして、img タグ内にイベントハンドラ onerror を追加してやって、画像読み込みにエラーが出た場合は、代替イメージ noimage_small.png を表示してやるということですね。

同様に、各エントリの中の書影を表示している img タグにも一括置換で onerror を追加してやって対応完了。

そのうちこつこつと画像の UR Lは書き換えないといけないけれど、ひとまずはこれで不格好なレイアウト崩れは回避できるはず。

JavaScript

WordPress

Comments: 0
Trackbacks: 1

bookreader.js カスタマイズのメモ

2008-06-26 (木)
コンピュータ

SS の公開に使っている、bookreader.js ですが、やっぱり便利。ブラウザで超長文を縦スクロールで読むのは、辛いなあと思っていたひとには福音となりそうなライブラリです。というか、Web 小説を公開しているひとの多くが該当するのかも。まぁ、見せる方のこだわりの一つと思ってもらえれば……。

ただ、使用できるタグが限定されていたり、カスタマイズに関する情報はさすがに少なかったので、自力でいろいろいじってみて分かったことについてメモってみようかと思います。

bookreader.js 0.4.5 のカスタマイズ

0.4.1でも施した、p タグや div タグへの class 指定を 0.4.5 でもできるようにしてみました。パッチは以下。

--- bookreader.src.js.org	2008-07-08 00:11:32.000000000 +0900
+++ bookreader.src.js	2008-07-09 11:44:12.000000000 +0900
@@ -71,15 +71,17 @@
 				case 'P':
 					s = elm.innerHTML;
 					t = BookReader.Utils.dividelines(s, maxletter);
+					w = elm.readAttribute('class');
+					if (!w) { w = ''; }
 					t.each(function(line){
 						if (BookReader.currentline >= maxline || line == '<hr />'){ BookReader.insertPage(); }
 						if (line != '<hr />'){
 							if (elm.align == 'right'){
-								BookReader.pages[BookReader.pages.length-1] += '<p class="'+fontsize+' right">' + line + '</p>';
+								BookReader.pages[BookReader.pages.length-1] += '<p class="'+fontsize+' '+w+' right">' + line + '</p>';
 							} else if (elm.align == 'center'){
-								BookReader.pages[BookReader.pages.length-1] += '<p class="'+fontsize+' center">' + line + '</p>';
+								BookReader.pages[BookReader.pages.length-1] += '<p class="'+fontsize+' '+w+' center">' + line + '</p>';
 							} else {
-								BookReader.pages[BookReader.pages.length-1] += '<p class="'+fontsize+'">' + line + '</p>';
+								BookReader.pages[BookReader.pages.length-1] += '<p class="'+fontsize+' '+w+'">' + line + '</p>';
 							}
 							BookReader.currentline++;
 						}

0.4.5 では、行揃えなどが標準で組み込まれているので class 指定を使う必要があるケースはかなり少ないと思いますが、例えば、インラインで img タグを使用し文中に画像を入れたいときなどは、行の高さが決め打ちされているので、一部分しか表示されないなどの現象が起こりえます^*1

例えば、バナーなどをインラインで表示したい場合などは、専用の class を CSS に追記して、画像を表示する行に対して class を指定してやるなどの方法で対応するのが良いかと思います。

動作サンプルで具体的な記述方法や CSS の指定を確認して下さい。