よくあるご質問

カテゴリー: shuttoの仕様について, shuttoの使い方, 変換後の表示について   タグ: , ,   この投稿のパーマリンク

表示されたり、されなかったりして表示が崩れることがあります。特定の要素が読み込まれてからshuttoのJSを動作させる。

このページに記載されている「CSS」「JavaScript」等は、あくまでも記述例となっております。ご利用するPCサイトによって変更しないといけない場合があります。
そのため、このまま使用しサイトに異常が出た場合は、サポートは対象外となりますので、予めご了承の上ご利用いただけますようお願いいたします。

PCページでJavaScriptで表示されている要素は、変換時のJavaScript実行タイミングにより、「数回に1回しか表示されない」というような、 表示されたりされなかったりするケースがあります。

そのような場合は、特定の要素がPCページで読み込まれるまで、変換を待つ下記のコードをお試しください。

編集画面の「ページ」の編集メニュー内「JavaScript > 変換前に実行されるコード」に 下記を追加してください。

PCサイトにjQueryが使われている場合

//変換を待つ
if (!$('このJavaScriptでしか表示されていない要素のセレクタを書く').length)
  throw __smp.retry;

PCサイトにjQueryが使われていない場合(jQuery互換ライブラリの Zepto.jsを利用)

(function($) {
//変換を待つ
if (!$('このJavaScriptでしか表示されていない要素のセレクタを書く').length)
throw __smp.retry;
})(Zepto);

尚、表示確認は、実環境で実際に変換を行い実機でご確認ください。
また、変換を待つので表示にタイムラグが発生し通常より表示が遅い場合があります。

shutto内のプレビューでは、実際に変換した時とJavaScript実行のタイミングが異なりますので、 確認はできないケースがあります。

また、ajaxでXMLを読み込むようなページの場合も、こちらの方法を応用して、ajaxで生成された要素がページ内にできるのを待ってから変換jsを実行させることができます。

「変換前に実行されるコード」を入れた場合のブラウザの処理イメージ

1.HTMLを読み込む
2.smp.jsを読み込む
 →該当ページにshuttoの変換設定があるかチェック
  →「変換前に実行されるコード」変換設定に入っている場合
   →指定されたセレクタをチェック
    →指定されたセレクタある
     →変換を実行する
    →指定されたセレクタない
     →指定セレクタが表示されるまで待つ
  →「変換前に実行されるコード」変換設定に入っていない場合
   →変換実行する

カテゴリー: shuttoの仕様について, shuttoの使い方, 変換後の表示について   タグ: , ,   この投稿のパーマリンク

「shuttoを使ってきれいなページを作りたい」「ページが多いので、外部の会社の手を借りたい」 そういったご要望がございましたら実績のある制作パートナー様にご相談ください。