PCサイトをドラッグ&ドロップでスマホ対応!

  • ログイン
  • ユーザ登録

ドラッグドロップで持ってきたフォームの内部動作を変更しました

2014年4月21日 | 森下 奈緒

シェアする

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

PCページビューからドラッグドロップで持ってきたフォーム、及びHTML入力機能で作成したフォームの内部動作を変更しました。
この変更により、PCサイトに書かれたフォームを操作するJavaScriptがそのまま実行できることが多くなり、また修正するのも簡単になります。
動作を保証するものではありません。JavaScriptの内容によっては修正が必要です。
通常のフォームの使用に影響はありません。

変更が適用されるのは本日2014年4月21日14時頃以降に作成されたサイトのみで、既存のサイトに影響はありません。
また、shuttoプロ版で使えるフォームパーツの動作に変更はありません。

・2014年4月21日14時頃以前に作成されたサイトで新フォームを動かしたい場合

変換設定の「ページ>変換前js」に次の一行を書くと新形式フォームを使うことができます。

_shutto_params.managed_form = false;

動作にあたり、フォームのHTMLにあわせて、構造保持、イベントハンドラを残す、など適宜設定が必要になります。

・過去に作った設定でフォーム機能が 新形式/旧形式のどちらが適用されているか判別したい場合

該当ページをchromeプレビューした上で、以下のコードをデベロッパーツールのconsoleから入力実行してください。

_shutto_params.managed_form

trueの場合は旧形式、falseの場合は新形式です。

変更の詳細

フォームの中にある要素をドラッグドロップで持ってきた場合、これまでの挙動では変換後HTMLにformタグが含まれず、サブミットボタンのクリック時に動的に生成されたformを実行していました。今回の変更で、PCページにあったformタグを変換後もHTML中に保持するようになります。そのため、フォームを直接実行したり、フォーム内の要素の値を変更したりするJavaScriptが動作するようになります。

例えば、画像のクリック時にフォームを実行するようなJavaScriptが次のように書かれていた場合

<img onclick="document.form1.submit()" src="buy.png">

以下の手順で動作させることができます。

  1. imgタグをPCビュー画面からスマホレイアウト画面に挿入
  2. 編集メニューの「HTML構造を保持する」と「イベントハンドラを残す」両方にチェックを入れる
スマホ向け表示
株式会社イー・エージェンシー

〒100-0006 東京都千代田区有楽町1-9-4 蚕糸会館4階