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

  • ログイン
  • ユーザ登録

Formタグに対応しました。

2012年2月27日 | 森下 奈緒

シェアする

※2014年4月21日14時頃以降に作成された設定はフォーム変換の仕様が変更されています。詳しくは下記、記事をご参照ください。

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

サイト内検索やECカートにかかせないフォームの機能ですが、shuttoでも利用できるようになりました。

使い方は簡単。
今までと同じようにドラッグ&ドロップするだけです。
(form要素にリピート設定は使えません。)

ラベル要素やチェックボックス要素を1つ1つ持ってくるのは大変ですので、その場合はHTMLの「構造を保持」オプションにチェックをいれると簡単です。

注意点としては、PCでは枠線や色などがCSSで整えられていたものが、スマホ変換後は「見えなかった枠が見える」「枠が消える」「色が変わってしまった」という場合があります。※スマホ変換により、CSSの構造が変わる場合があるためです。

その場合は、shuttoマニュアル(ダウンロード(3,470KB))のP.38「CSSの設定」をご確認いただき、CSSを適宜設定していただく必要があります。

ただ、下記の例のようにJavaScriptを使って制御している場合、このままではsubmitボタン(「カートに入れる」「検索」等のボタン)が動作しません。

【JavaScriptでsubmitするソース例】

<a onmouseout=”chgImg(‘/b_cartin.gif’,’cart’);” onmouseover=”chgImg(‘/b_cartin_on.gif’,’cart’);” href=”javascript:void(document.form1.submit())”><img id=”cart” name=”cart” alt=”カゴに入れる” src=”/b_cartin.gif”/>

</a>

ECCUBE等でよく見られるパターンです。
この場合、PCサイトからもってきたsubmitボタンの代わりに、HTMLで<input type=”submit”>ボタンを設置してあげます。

1.PCサイトから持ってきたsubmitボタンを消す。
CSSの設定からボタンを指定して「display: none;」で消すこともできますが、「抽出の設定」にある「非表示にする要素」で消すこともできます。

ここでは、img id=”cart” の要素を非表示に指定しました。

2.JavaScriptを使わないsubmitボタンを挿入する

HTML挿入機能を使ってinputボタンのソースを挿入します。
「form=」にはformのidを入れます。
formにidがついていないときは、「form=”formのセレクタ”」で指定することができます。例)form=”form[name=’form’]” など

変換例
http://shutto.com/view/KxLrE1n
※JSタグは埋め込んでおりませんので、プレビューのみ確認可能です。

また、shuttoがJavaScript情報を持ってこれない特性上、ECの商品ページ等で色やサイズ等の変更をJavaScript制御にしている場合も対応ができませんので、ご利用の際はお気をつけください。

e-Agencyが提供するサービス・プロダクト