関連記事

コメント

コメント一覧 (26件)

  • くまこ より:

    getiframe_allを編集し、GOLDにアップロードまでは解ったのですが、商品ページに掲載したい場合、商品ページのiframeを表示させたい任意の場所にを記載するという認識でよろしいのでしょうか。そのように記載したところiframeが表示されず、を掲載する場所の問題なのか、そうではなく、iframeを表示させたい場所には何か記載しなければいけないといことなのでしょうか…..。

  • クロ より:

    こんにちは。
    試してみましたが、iframeが表示されません。
    現在はこの方法は使えなくなっていますでしょうか?

  • とろ より:

    参考にさせていただいております。
    が、やはり私もiframe表示されないのです。。
    https://tools.tada-fla.com/getiframe/ も確認しましたが、

    3.アップしたjsファイルをページへ読み込む
    の「読み込む」とは具体的にどのような作業になりますでしょうか?

    このページの具体的な手順はすべて踏んで、リンク先URL等も間違いがないか何度もチェックしたのですが。。。

    • ひろ より:

      ありがとうございます。
      「読み込む」とは、商品ページ、カテゴリページの共通説明文に

      こちらのコードを記入することです。

      iframeそのものが表示されないということでしょうか?

      • とろ より:

        返信ありがとうございます。
        もう一度ゆっくり順を追ってひとつづつやってみたところ、うまく表示できました!ありがとうございます。シンプルなタグでスマートです、感謝いたします。

        • ひろ より:

          ご報告、ありがとうございます!
          おめでとうございます!
          素敵な商品ページ作りに役立てば幸いです!

  • しげ より:

    「商品Aページ内に読み込むjsファイル」「一括管理用のjsファイル」両方を同時に効かせることはできるのでしょうか?楽天のある商品ページ(スマホ)内に2つiframeを設置しています。ひとつは、全商品に共通するiframeです。ひとつは、商品ごとやカテゴリーごとに固有のiframeです。全商品に共通するiframeに対して「商品Aページ内に読み込むjsファイル」内にgetElementById(“iframe-box”)と記述しiframeを表示させ、「一括管理用のjsファイル」内にはgetElementById(“iframe-box-all”)と記述しiframeを表示させ、1ページ内でふたつのiframeを表示させようとしていますがうまくいきません。※どちらかひとつに絞ればうまくいきますが、両方同時に表示できないのです。2つのjs内で同じような箇所が見受けられるので、そこがエラーになっているんでしょうか?ご返信いただければ幸いです。よろしくお願いします。

    • ひろ より:

      ありがとうございます。
      おっしゃるように両方同時に高さ調整をしようとすると、このままではできません。
      どちらか一つしか表示されないというのは、iframeそのものがどちらかしか表示されないということでしょうか、それとも高さの自動調整が片方にしか効かないということでしょうか。

      表示についてですが、
      getElementById(“iframe-box”)
      これは #iframe-box をに対しての指示なので、商品ページ側でもこれに合わせてdivのidを変えてあげないといけません。
      こちらは問題ないでしょうか?

      2つのiframeの高さの調整に関しては、jsファイルの内容を書き換えないといけないので、申し訳ございませんがこちらのコメント欄での対応はいたしかねます。
      詳細をご連絡いただけましたらお見積りいたしますのでご一考くださいませ。

      • しげ より:

        ご返信ありがとうございます。

        どちらか一つしか表示されないというのは、iframeそのものがどちらかしか表示されないということでしょうか、それとも高さの自動調整が片方にしか効かないということでしょうか。
        ↑↑↑
        片方のiframeは高さ調整できている状態で表示され、もう片方のiframeは高さ調整できていない状態(途中で切れている)で表示されます。かつ、ページが明滅されていて、明らかにバグっている状態です。

        getElementById(“iframe-box”)
        これは #iframe-box をに対しての指示なので、商品ページ側でもこれに合わせてdivのidを変えてあげないといけません。こちらは問題ないでしょうか?
        ↑↑↑
        getiframe_single.jsではIDをiframe-boxとし、getiframe_all.jsではIDをiframe-box-allとして商品ページ内で2か所とに分けて指示しましたが、片方の自動調節しか効かないようです。

        iframeで読み込むGoldページへの記述
        (function(){
        function iframeHeight(){
        var h = ‘iframeheight’;
        window.parent.postMessage(h,’*’);
        }
        setInterval(iframeHeight, 500);
        })();
        表示させる子iframeが複数(今回は2か所)ある場合、呼び込むときにエラーとなってしまうのでしょうか?呼び込む子iframeのどちらにも効けばいいのですが。有料も検討したいのですが、納品においくらくらいかかるのでしょうか?

        • ひろ より:

          ご返信ありがとうございます。

          まず表示は行えているとのこと、ありがとうございます。
          その上のご対応ということでしたら、改めてご連絡差し上げます。

          どうぞよろしくお願いいたします。

  • 大谷 より:

    いつも勉強をさせて頂いております。

    何度もトライさせていただいておりますが、
    表示がされないため、ご連絡させて頂きました。

    https://tools.tada-fla.com/getiframe/
    上記の4番まではわかるのですが、

    5番の「5.呼び出されるGoldページへコードを記述する」は
    「1.管理用jsファイルを生成する」「iframeに呼び出される楽天Goldページ」で作成したHTMLファイルに追加記述をするのでしょうか?

    また、こちらの確認不足で申し訳ございませんが、iframeページの画像等には、width=”〇〇〇” height=”〇〇〇”は記載は必要でしょうか?

    実際にRMS上でiframeの記載をするバグコードも併せてご教示いただきたいと思い、ご連絡させて頂きました。

    ご返答お待ちしております。
    宜しくお願い致します。

    • ひろ より:

      ありがとうございます。

      >5番の「5.呼び出されるGoldページへコードを記述する」は
      「1.管理用jsファイルを生成する」「iframeに呼び出される楽天Goldページ」で作成したHTMLファイルに追加記述をするのでしょうか?

      おっしゃるとおりです。
      Goldにアップするhtmlファイルに記述してください。

      また、画像のwidthとheightですが、記載があるとページのレンダリング(表示)が早くなるのであるとよいですが、なくても問題ございません。
      cssで調整するとしても、一旦入れていただければと思います。

      >実際にRMS上でiframeの記載をするバグコード

      RMS上ではiframeの記載はございません。Javascriptからタグを生成するので、
      https://tools.tada-fla.com/getiframe
      に沿ってお試しください。

  • WK より:

    初めまして。
    こちらの記事を参考にさせていただいて、
    iframeを表示させるところまではできたのですが、
    幅や高さが調整されず、デフォルト?300×150で表示されてしまい、
    見切れてしまっている状態です。
    原因としては、postMessageがうまく送受信されていないのかと思うのですが、具体的にどうすればいいのかわからない状態です。
    もちろん、goldのhtmlには、</div>の直前に指定された内容の記述をしております。
    他の関係なさそうな、script要素も削除して、画像とこちらのscriptだけの最小構成にしてみてもダメでした。

    何か、他に気を付けなければならない点、修正してみる点などありましたら、ご教授願いますでしょうか。

    ※iframeの内容がそもそも表示されない方々へ。jsファイルのiframeを表示させたい商品ページのリンクURLの最後に「/」を入れてはいけません。自分も支援サイト通りにやっていたところ、「/」の削除を見落としていたので、見直してみてください。
    また、再度GOLDにjsファイルをアップしても、楽天の仕様上、画像と同じく、jsもキャッシュされており、なかなか更新されないので、即時反映したい場合は、ファイル名か階層を変えるなどしてみてください。

    • ひろ より:

      ありがとうございます。

      サイトを見ていないので原因は特定できませんが、</div>の前というのは、</body>の直前ということでよろしいでしょうか?
      もしhtmlの途中で<script>を記載しているなら、一度</body>直前へ移動させてみてください。

      コメントの補足、ありがとうございます。
      助かります!

      • WK より:

        返信ありがとうございます。
        の件、失礼いたしました。</body>の間違いです。

        また、一つ確認で、
        ブラウザ上から、iframeのソースを見ると、下記のスクリプトがの前に勝手に追加されています。

        実際のHTMLファイルには上記の記述はしていないので、楽天側で勝手に挿入されているものかと思っているのですが、こちらが不具合を起こしている原因だったりするのでしょうか。
        ご確認のほど、よろしくお願いいたします。

        • ひろ より:

          ご返信ありがとうございます。
          <srcript>の記述場所は問題ないのですね。

          コメント上でエスケープされてしまっていますが、https://r.r10s.jp/で始まるURLでしたら、Goldにアップした時点で自動で入るものとなります。
          現状ではそちらとバッティングして不具合というのは起こっていませんので、別の原因かと存じます。

          よろしくお願いいたします。

          • WK より:

            やはり、ちょっと原因がわからない状態です。
            もし、ご対応が可能でしたら、上記の商品ページを見ていただけますでしょうか。
            iframeの位置は「レビューを書く」「ショップレビューを見る」の上部にある
            「ここからは~」という画像のやつです。

            何卒、よろしくお願いいたします。

          • ひろ より:

            ご返信が遅くなり、申し訳ございません。
            支援ツールからダウンロードするjsファイルを修正しました。
            もう一度お試しいただけますでしょうか。
            よろしくお願いいたします。

  • にし より:

    初めまして。
    コメント失礼致します。
    記載いただいている方法ではまだ試させていただいてないのですが
    アンドロイドのスマホでiframeの高さが自動調節されず切れてしまう現象が起こって
    いるのですが、こちらの記載の方法ではアンドロイドのスマホでも高さ調節がきっちり
    できるのでしょうか??

    • ひろ より:

      ありがとうございます。
      古いAndroidは確認しておりませんが、4.4以降でしたら問題なく表示されます。
      ただし、ご使用は自己責任でお願いいたします。

  • より:

    はじめまして。コメント失礼いたします。
    こちらの記事を参考にして実際の商品ページにアップしました所、
    Android(Chrome)やPCでの検証画面では問題なく表示されました。
    ただ、iphoneでは表示されるものの
    アコーディオンメニューを開くと高さが可変されません。。。
    (Safari、Chromeともに同じ現象)
    (Android、PCの検証画面ではアコーディオンの開閉に合わせて高さも調整されます)
    考えられる原因はなにか、分かりますでしょうか?

    • ひろ より:

      ありがとうございます。
      こちら、検証でのiPhoneは問題ないが、実機のiPhoneでアコーディオンの高さの変化が反映されないという理解でよろしいでしょうか。

      • より:

        ご返信いただきまして、ありがとうございます。
        仰る通りです。
        実機のiphoneではSafari、Chromeともに高さが変わりませんでした。
        DW上、検証画面、Androidでは問題なく変化いたします。
        キャッシュをクリアして何度か試してみたのですがダメでした…。

        • ひろ より:

          ご返信が遅くなり、申し訳ございません。
          なるほど、そういうことですね。
          iOSの仕様なのかもしれませんが、ちょっと確認してみます。
          不具合のご連絡ありがとうございます。

コメントする

ページトップへ