PLAINERナレッジセンター
ログイン

スマートフォンのブラウザ上で動くプロダクトのデモを表示することはできますか？

基本的にスマートフォンのブラウザで利用するプロダクトであれば対応しております。
プロダクト自体にスマートフォンのブラウザからアクセスし、正常に表示されているものであれば、キャプチャしたデモをスマートフォンから表示しても同様に表示されます。
但し、iOS、Androidのネイティブアプリは非対応です。

下記の方法で画面サイズをスマートフォンサイズにした上でキャプチャを行うと、より正確にスマートフォンでの表示を再現することもできます。

スマートフォンでの表示のキャプチャ方法

  1. PCのGoogle Chromeでキャプチャしたいプロダクトにアクセスし、拡張機能を起動します
  2. 拡張機能の右上の「-」ボタンを押して、拡張機能を最小化します
  3. ブラウザ上でF12キーを押します
  4. DevToolが起動しますので、そのままCtrl+Shift+Mを押します。(Macの場合はCommand+Shift+M)
  5. 上部のメニューから想定している端末を選択してください (iPhone XRなど)
  6. この状態で操作してキャプチャを行うと、スマホ表示でのキャプチャが可能です
    ※保存後の編集画面では画面幅がスマホ表示よりも広く見えますが、スマートフォンでアクセスすれば正常に表示されます

PCで閲覧するWebサイト上にスマホ表示のデモを埋め込む場合

⚠️HTML/CSSの知識が必要です

  1. デモコンテンツメニューに移動し、活用したいデモのタイトル横の︙ボタンを押します
  2. 埋め込みコード生成ボタンを押します
  3. 表示された埋め込みコードをコピーし、お使いのCMSなどで埋め込みたいページにコードを貼り付けてください
    ※デフォルトでは全画面でデモが表示されるようになっていますが、埋め込む箇所に応じて適切な位置・スマホの画面サイズに合わせた大きさで表示されるよう調整してください

サンプルコード

このコードはサンプルです。ご自身の責任でご利用ください。動作は保証しておりませんのでご了承ください。

CSS
*{ 
  margin:0;
  padding:0;
  text-align: center;
}
html,body{
  width: 100%;
  max-width: 640px;
  text-align: center;
  margin:0 auto;
  overflow-y: hidden;
  background: #f5f5f5;
}
iframe {
  border:4px solid #1F2022;
  position: relative;
  z-index: 5;
}
.iphone-top {
  background:#1F2022;
  width:348px;
  height:40px;
  margin: 10px auto 0;
  border-radius:30px 30px 0 0;
  position: relative;
}
.iphone-top:before {
  content:"";
  display: block;
  width: 55px;
  height: 5px;
  background: #171719;
  border-radius: 5px;
  margin-top: 3px;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}
.iphone-bottom {
  background:#1F2022;
  width:348px;
  height:60px;
  margin:8px auto;
  border-radius:0 0 30px 30px;
  position: relative;
  bottom:13px;
}
.iphone-bottom:before {
  content:"";
  display: block;
  width: 42px;
  height: 42px;
  border-radius: 50%;
  border: 3px solid #0A0A0A;
  background: #171719;
  position: absolute;
  bottom: 6px;
  left: 50%;
  transform: translateX(-50%);
}
@media only screen and (max-width:640px) {
  html,body{
  max-width: inherit;
  }
}
HTML
<div class="iphone-top"></div>
<div style="margin: auto; overflow: hidden; width:348px; height: 677px;">
    <iframe src="https://app.plainer.co.jp/XXXXXXXX/demo/XXXXXXXXXX" 
      id="plainer-demo-iframe"
      sandbox="allow-scripts allow-same-origin"       
      style="border: none; width: 100%; height: 100%"
      scrolling="yes">
    </iframe>
  </div>
  <div class="iphone-bottom"></div>

  <script>
    const iframe = document.getElementById('plainer-demo-iframe');
    const parentUrlParams = window.location.search.substring(1);
    iframe.onload = function () {
      iframe.contentWindow.postMessage(
        {
          message: { url: document.URL, plainer_query: parentUrlParams },
        },
        '*'
      );
    };
  </script>

関連記事