よくあるご質問

カテゴリー: JavaScript, shuttoの使い方, 技術関連 パーマリンク

PCサイトにあるスライドショーを変換できません。

PCサイト上で、JavaScriptを使って動的に画面の書き換え(スライドショーなど)を行っている場合に、そのJavaScriptの実行タイミングによってshuttoの変換が正常に行えません。

※編集画面上では、PC側のJavaScriptからの影響が出ないように制御しているため編集ができる場合があります。

まず、PC上で動的に画面の書き換えを行っているJavaScriptを、hogehoge.jsとします。
そしてJavaScript実行順序が以下のような場合に、shuttoの変換が正常に行えません。

ケース.1 shuttoのJavaScriptの実行後に、hogehoge.jsが実行される

処理1.shuttoのJavaScriptでPC画面を変換する
処理2.変換後のスマホ画面をhogehoge.jsが変換する

この場合は以下のような症状になります。
1.のタイミングで、スマホ変換されたページを、さらに2.で変換してしまい画面がおかしくなっている

ケース.2 shuttoのJavaScriptの実行前に、hogehoge.jsが実行される

処理1.hogehoge.jsがPC画面を書き換え
処理2.shuttoのJavaScriptが書き換わった部分を変換できない

この場合は以下のような症状になります。
shuttoで、hogehoge.jsが実行されていない画面で編集設定しているので、1.でhogehoge.jsが画面を書き換えてしまうと、2.で書き換わった部分を変換できない

ケース.1になるか、ケース.2になるかは、hogehoge.jsの実行タイミング次第ですが、それぞれの対処方法は下記のとおりです。

◆ケース.1の場合
この場合はshuttoの変換後にhogehoge.jsが動くので、

「変換前に実行されるコード(https://support.shutto.com/?p=902)」に

{hogehoge.jsの実行を止めるコード}

を記入します。
例)jQuery(window).off(‘load’);

※前提として、特定のJavaScriptを止める汎用的な方法は存在しないため、{hogehoge.jsの実行を止めるコード}は、該当するJavaScriptを開発したプログラマから適切なアドバイスを受けて下さい。
※例)に記載したJavaScriptの記述はあくまで例となります。

こうすることでケース.1の実行手順が以下のようになります。

1.「変換前に実行されるコード」で{hogehoge.jsの実行を止めるコード}が実行(hogehoge.jsが止まる)
2.hogehoge.jsでPC画面が書き換わっていないので、shuttoで正しく変換できる

◆ケース.2の場合
この場合はshuttoの変換前にhogehoge.jsが動くので、

変換前jsでretry(https://faq.shutto.com/?p=556)を使ってhogehoge.jsの実行を待ってshutto変換されるようにします。

ただし、この場合は、hogehoge.jsの実行後のHTMLに対して変換設定を作る必要があります。

そうするためには、chrome拡張(https://support.shutto.com/?p=1785)を使ってhogehoge.jsの実行後のPC画面の状態でHTMLを保存し、それを変換するようにしてみてください。

こうすることでケース.2の実行順序は

1.変換前jsが実行(hogehoge.jsを待つ)
2.hogehoge.jsがPC画面を変換
3.shuttoは、hogehoge.jsで書き換わった後の画面を変換元として設定されているので正しく変換できる。

以上の方法でうまく行かない場合は、独自でshutto上にJavaScriptを実装する(https://support.shutto.com/?p=902)ことをご検討ください。

カテゴリー: JavaScript, shuttoの使い方, 技術関連 パーマリンク

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