2013年10月11日

jQueryプラグインimgLiquidの使用時に、Bad Requestが発生する時の対処方法

jQueryプラグインimgLiquidがとても便利です。詳しい説明は、下記のサイトなどを参考にしてください。簡単な英語がわかれば、本家サイトを参考にすると手っ取り早いです。

簡単に説明すると、親コンテナの大きさに合わせて、画像を縦横比を維持したままリサイズしてくれるプラグインです。

動作は、以下の様な感じになります。

例えば、これに

<div class="parent" style="width:200px; height:200px;">
    <img src="xxxx.jpg">
</div>

imgLiquidを適用すると

jQuery(document).ready(function($) {
 $('.parent').imgLiquid({
            fill: false
    });
});

こうなります。

<div class="parent imgLiquid_bgSize imgLiquid_ready" style="width:200px; height:200px; background-size: contain; background-position: 
center center; background-repeat: no-repeat; background-image: url(" xxx.jpg");"="">
    <img src="xxx.jpg" style="display: none;">
</div>

元のimgは非表示となり、親コンテナの背景に表示されるようになります。画像に何かするのではなく、CSSを差し込み表示域を調整するという事ですね。

fill:false: 縦横比を維持したまま、コンテナ内に画像が全て表示されるようにリサイズされます。コンテナと画像の縦横比が異なれば余白ができます。
fill:true: 縦横比を維持したまま、コンテナの余白が埋まるようにリサイズされます。コンテナと画像の縦横比が異なれば画像の一部が隠れます。

ファイル名が変わってしまう不具合

ここからが本題です。

Amazon Product Advertising APIを試しているのですが、商品画像のurlを取得すると、たまにxxx%xxx.jpgというファイル名が返ってきます。

そのまま、imgLiquidを利用すると、400 Bad Requestとなります。

原因を探ってみると、親コンテナのbackground-imageのurlが、元となるimgのsrcと異なることが分かりました。

<img src="xxx%xxx.jpg">

このようにファイル名に%が含まれると、

<div 省略 background-image: url("xxx%yyxxx.jpg");>

なぜだかわかりませんが、ゴミが入ってしまいます。

修正方法

元のurlをコピーする処理を加えます。

$(this).each('img').each(function(){
    var img = $(this);
    $(this).closest('div.image').each(function(){
        var div_img = $(this);
        $(this).imgLiquid({
            fill: false,
            onFinish: function(){
                img_src = img.attr('src');
                img_src = 'url("' + img_src + '")';
                div_img.css('background-image',img_src);
            }
        });
    });
});

処理後に発生する、onFinish: function(){}を利用します。

scriptの通りですが、backgroung-imageのurlに元のimgのurl（src）をコピーします。url同士を比較して、異なればコピーするという処理でもいいですが、無駄に処理が増えそうなので全てコピーしています。

imgLiquidが処理した後に手動でコピーするのは無駄な気もしますが・・・仕方がないですね。

以下のようにonFinishを利用せずに、imgLiquidの処理後にurlの修正処理を行うと、

$(this).each('img').each(function(){
    $(this).closest('div.image').each(function(){
        $(this).imgLiquid({
            fill: false
            });
    });
});
 
ここに修正処理（urlの入れ替え）を書く

画像は正しく表示されますが、修正処理の直前に不正urlへのアクセスが発生するので、Bad Requestが発生します。

おわりに

ファイル名に%が含まれることは少ないと思うので、普通は気にする必要はないと思います。

不具合だとしたら発生しにくいような気もするので、作者さんに連絡しておいたほうがいいですね。でも、Product Advertising APIの利用者は多いはずなので、すぐに修正されそうな気がするのですが・・・それとも利用者が少ないのでしょうか？

「imgLiquid」で検索すると、約4,240件です。あれ、少ないですね。リリースされてから一年も経ってないので、そんなものでしょうか。