Shufoo!のPDFチラシをembedで表示する

17260 ワード
HTML JavaScript embed Shufoo HTML テキストリンク

スーパーのチラシの比較検討用に一枚のHTMLで近隣のチラシをずらっと並べようとしまして、

  • 固定URLの画像チラシはimgの直接リンク
  • テキスト(HTML)形式の特売情報はiframe

としていましたが、自動で更新されるShufoo!からの配信チラシはどうしようかと悩みました。


こんなの。

デジタルチラシはFlash製でもうずっと読めないので毎回(あれば)PDFチラシを見ているのですが、これを毎回クリックするのも面倒くさいし自作のHTMLにどう組み込めばいいのかも不明でした。

のでコードを読んでなんとかします。

Shoofooのチラシを生成する

Shufooのサイトからは情報がみつからなかったので、シンプルなスーパーのサイトからソースをのぞくとこんな感じでした

    <script charset="Shift_JIS" src="http://asp.shufoo.net/t/asp_client/src/js/asp_chirashi_list.js" ></script>
    <div style="width:190px">
    <script>
    SHUFOO.ASP.PC.AUTO.create({number:1, direction: "horizontal", shopId:整数値, un:"スーパー名", 'callback':{nohit:function(){}, 'error':function(){}});
    </script>
    </div>

このSHUFOO.ASP.PC.AUTO.createがおそらくあのチラシブロックに変容するようです。

情報はJSONでやりとりされていて、

JSONCallbackJscript2IdShufoohogehoge({
  "shop": {
    "shopId": "hogehoge",
    "shopName": "hogehoge",
    "shopNameRead": "hogehoge",
    "zipcode": "hogehoge",
    "prefectureName": "hogehoge",
    "address1": "hogehoge",
    "address2": "hogehoge",
    "address3": "",
    "tel": "hogehoge",
    "businessHour": "hogehoge",
    "logoUrl": "",
    "hpUrl": "http://hogehoge",
    "mapUrl": "",
    "mapLatitude": "hogehoge",
    "mapLongitude": "hogehoge",
    "takuhaibinUrl": "",
    "chirashis": {
      "chirashi": [      
        {
          "id": "hogehoge",
          "title": "12/10～12/13hogehoge",
          "subTitle": "",
          "iconUrl": "http://ipqcache2.shufoo.net/c/hogehoge",
          "pdfUrl": "http://asp.shufoo.net/api/aspViewerRedirect.php?shopId=hogehoge",
          "imgUrl": "",
          "contentsXML": "http://ipqcache2.shufoo.net/c/2019/12/09/c/hogehoge",
          "flashUrl": "http://asp.shufoo.net/api/aspViewerRedirect.php?shopId=hogehoge",
          "flashUrlType": "1",
          "publishStartTime": "2019/12/09 20:00:00",
          "publishEndTime": "2019/12/13 20:59:59",
          "insertTime": "2019/12/09 17:27:16",
          "updateTime": "2019/12/09 17:27:41",
          "timeShowPermit": "0"
        }

      ]
    }
  }
});

こんな情報がもらえます。
JSONをもらえるURLがわかったので直接叩いてもいいのですが、
なにかあるといやなのでcreateのコールバックで処理することとしておきます。

コールバックは
http://asp.shufoo.net/t/asp_client/src/js/asp_chirashi_list.js
を頑張って探してみるといくつかありそうですが、completeを使うことにしました。

引数に先のjsonが入っているので、pdfUrlを表示できるようにしましょう。

PDFを埋め込む

さて、HTML内でpdfを他の要素と同時に閲覧できるか調べたところ、

HTMLタグだけで PDF を埋め込み表示する方法 - Qiita

embedを使う方法がなかなかナウいそうでしたのでそうします。
元記事では縦横は%表記、

embed: 埋め込み外部コンテンツ要素 - HTML: HyperText Markup Language | MDN

などでは

height
このリソースを表示する高さを CSS ピクセル値で示します。絶対的な値でなければなりません。パーセント値は使用できません。

と%は不可と書かれていました。
動かしてみると手元のFirefox環境では、
widthのみなんとなく%が機能している風だったので、

<embed src="" type="application/pdf" width="100%" height="1900">

結局PDFビューワー内で拡大縮小するので、ディスプレイの高さ分ガバッと高さを確保しちゃいました。

で今はこんな感じ

<body style="width: 100%;height: 100%;">
<img src="URL固定のチラシ画像"  style="width: 100%;height: 100%;">
<embed src="" type="application/pdf" width="100%" height="1900">
<iframe src="テキストベースの情報" width="100%" height="1900">
</iframe>

    <script charset="Shift_JIS" src="http://asp.shufoo.net/t/asp_client/src/js/asp_chirashi_list.js" ></script>
    <div style="width:190px">
    <script>
    SHUFOO.ASP.PC.AUTO.create({number:1, direction: "horizontal", shopId:hoge, un:"hoge", 'callback':{nohit:function(){}, 'error':function(){}
        ,'complete': function(e) {
            document.querySelector('embed').src = e.target._data.chirashis.chirashi[0].pdfUrl
        }
    }});
    </script>
    </div>
</body>

こんな感じで三つのスーパーの情報をべたっと並べています。

夢としてはチラシから情報を正規化して表にできれば比較検討も楽になりそうなんですが、レイアウトの自由奔放さからGoogleなどの文字起こしでは現状イマイチで、機械学習などでなんとかする人が現れてほしいですね。

参考

<!--
    body要素内に記述してください
    shopIdとunはこのままコピーしても動作しません
-->
        <!--div style="border:1px solid #ccc;width:190px;height:200px;">
            <script>
                SHUFOO.ASP.PC.AUTO.create({
                     number:1       //表示件数:1（半角数字、最大3）
                    ,direction:"vertical"   //垂直方向　:　vertical　（半角ダブルコーテーション【"】で囲む）
                    ,shopId:257725      //半角数字
                    ,un:"ohkawa"    //半角英数（半角ダブルコーテーション【"】で囲む）
                });
            </script-->
        </p></div>
        <div style="border:1px solid #ccc;width:190px;height:200px;">
            <script>
                SHUFOO.ASP.PC.AUTO.create({
                     number:1       //表示件数:1（半角数字、最大3）
                    ,direction:"vertical"   //垂直方向　:　vertical　（半角ダブルコーテーション【"】で囲む）
                    ,shopId:257725      //半角数字
                    ,un:"ohkawa"    //半角英数（半角ダブルコーテーション【"】で囲む）
                });
            </script>
        </div>