書籍の一覧をjQuery + Bootsrap4で作成してみた話

拝啓

皆様元気でしょうか?

私は元気です….

季節は冬、寒さも身にしみ春の暖かさが待ち遠しいです。

と言うどーーーーーでもよい始まりでやってみましたが、次回から絶対しないでしょうね。

と言うのも、前からWordpressの標準エディタがまったく使えない系です。
前のエディタでも、HTMLソースで書いていたのですが…
どこにある?
探すのもおっくうなのでこのまま書いています。
ブロックでうにょうにょなっているので、拝啓なんつう始まり方にしてみました。

さて、今回作成しましたページは本の表紙を一覧表示します。
書店の店頭みたいな感じにしたいなぁ〜

思い立ったのは、桂明日香先生の新作をAmazonで探していたのですが、先生の作品一覧… ちゃんと表示されていないのですよ。
新作の「スローハイツの神様 3巻」がないんですよ。

https://www.amazon.co.jp/l/B003UWUL68

ま、Amazonがメンテできていないのはショウガナイとして、個人的に先生の作品がどんだけあるかをまとめておいて先生様の血と肉に少しでもなれば!
ついでにアフィリエイトの画像にしてクリックしてくれるとうれしいなぁ〜とか言う下心を出してみました。

実際のページは下のurlにしました。

http://35.78.51.61/a_katsura/

本の表紙が並んでいるだけですね。
それ以外の解説は… 先生の本を買ってね。
おすすめは「そこはぼくらの問題ですから」です。

NEWとCardだけがbootstrap4です。他は調べてください。

内容を解説と言ってもリファクタリングしすぎてシンプル過ぎます。
HTMLのソース部分を抜き出しますと以下にです。

            <h3>スロウハイツの神様 <span class="badge badge-danger">New</span></h3>
            <div class='row book_cover'>4063809315,4065109825,406512297X</div>

コード内は、H3のタイトルと本の一覧を定義しています。
対象本のASINコードをカンマ区切りで書いています。
これだよぉ〜ってclassにbook_coverで指定しています。
単純になりすぎていますね。

次にJavaScript部分ですが、ソースは以下

    $(function(){
        $(".book_cover").each(function(){
            const codes = $(this).html().split(",");
            $(this).html("");
            appendBookCover($(this),codes);
            
        });
    });
    
    function appendBookCover(target,codes){
        for(let code of codes){
            $("<section>").addClass("card")
                .append(
                   $('<a>').attr('href','https://www.amazon.co.jp/gp/product/' + code 
                                 + '/ref=as_li_tf_il?ie=UTF8&camp=247&creative=1211&creativeASIN=' 
                                 + code + '&linkCode=as2&tag=mmppwataru01-22')
                .append(
                   $('<img>').addClass("card-img")
                    .attr('src','http://ws-fe.amazon-adsystem.com/widgets/q?_encoding=UTF8&ASIN=' + code 
                                   + '&Format=_SL250_&ID=AsinImage&MarketPlace=JP&ServiceVersion=20070822&WS=1&tag=mmppwataru01-22')
               )
           )
            .append(
               $("<img>")
                   .attr("src",'http://ir-jp.amazon-adsystem.com/e/ir?t=mmppwataru01-22&l=as2&o=9&a=' + code)
                   .attr("style","border: none !important; margin: 0px !important; text-align: center;")
                   .attr("alt","")
                   .attr("width","1")
                   .attr("height","1")
                   .attr("border","0")
           )
            .appendTo(target);
            
        }
        
    }

うん!シンプルですね。
appendBookCoverメソッドの内容ですが、アンカーと画像部分がアフィリエイトにするため難しくなっております。
アフィリエイトまで流用するという場合は「mmppwataru01-22」って部分を差し替えてください。
実際に流用するとなるとこんな感じで書いてやってください

            $("<section>").addClass("card")
                .append(
                   $('<img>').addClass("card-img")
                    .attr('src','http://ws-fe.amazon-adsystem.com/widgets/q?_encoding=UTF8&ASIN=' + code )               
               )
            .appendTo(target);

アフィリエイトのキーがないので取得できませんがタグ内で書いたURLに取得でしてください。
$(function() 部分は….
難しくもややこしくないので解説なし!

今回はPHPとか思っていたが、JavaScriptで十分でしたw
ついでにVue.jsを使おうとか思っていましたが…
Bootstrapのcardが格好良かったので使うと… jQueryでやっちゃいましたって感じです。

次回は!速攻予定です。
ネタをツンデレ過ぎるのでご期待ください!

ほなっ!