- HOME >
- 【javascript】 >
- メールフォームプロCGIをjQueryMobileに対応させてみる。
すごく多機能でしかも完全フリーのメールフォームプロCGI（http://www.synck.com/contents/download/cgi-perl/mailformpro.html）。
最新バージョンでは設置方法もかなりシンプルで簡単になりスマートフォンにも対応しているということです。
こんな多機能なメールフォームをフリーで提供してくれている和田さんという方はすごく太っ腹ですね。本当にありがたい限りです。
しかし、「jQueryMobile」をベースにしてスマートフォンサイトを制作している場合、「jQueryMobile」ベースでメールフォームプロを実装しようとすると「jQueryMobile」の機能がいろいろ邪魔をしてくれます。
とりあえず普通に「jQueryMobile」ベースでメールフォームプロが使えるようにするにあたり問題となった2つの要因を解消してみます。
今回検証したそれぞれのバージョンは
●jQueryMobile「1.4.0」
●メールフォームプロ「4.1.2」
です。
【要因1】「jQueryMobile」のレイアウトが崩れる。
一つはレイアウトの問題で「jQueryMobile」のレイアウトが崩れたり各コントロールの選択状態のスタイルが正常に適用されないといった現象が起きます。
これは「jQueryMobile」が動的にスタイルをセットしていることが影響しています。
この「jQueryMobile」がセットしたスタイルでレイアウトが崩れる箇所へさらに定義を上書きすることで回避してみます。
レイアウトが崩れている問題箇所、上書きが必要な定義を洗い出しました。下記CSSを読み込んでください。
form#mailformpro label.mfp_checked,
form#mailformpro label.mfp_not_checked {
padding: 13px 13px 13px 40px !important;
border: solid 1px #CCC !important;
}
form#mailformpro label.mfp_checked {
background-color: #fff !important;
}
form#mailformpro label.mfp_not_checked {
background-color: #eee !important;
}
.ui-checkbox .ui-radio-on:after {
background-image: url("data:image/svg+xml;charset=US-ASCII,%3C%3Fxml%20version%3D%221.0%22%20encoding%3D%22iso-8859-1%22%3F%3E%3C!DOCTYPE%20svg%20PUBLIC%20%22-%2F%2FW3C%2F%2FDTD%20SVG%201.1%2F%2FEN%22%20%22http%3A%2F%2Fwww.w3.org%2FGraphics%2FSVG%2F1.1%2FDTD%2Fsvg11.dtd%22%3E%3Csvg%20version%3D%221.1%22%20id%3D%22Layer_1%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20xmlns%3Axlink%3D%22http%3A%2F%2Fwww.w3.org%2F1999%2Fxlink%22%20x%3D%220px%22%20y%3D%220px%22%20%20width%3D%2214px%22%20height%3D%2214px%22%20viewBox%3D%220%200%2014%2014%22%20style%3D%22enable-background%3Anew%200%200%2014%2014%3B%22%20xml%3Aspace%3D%22preserve%22%3E%3Cpolygon%20style%3D%22fill%3A%23FFFFFF%3B%22%20points%3D%2214%2C4%2011%2C1%205.003%2C6.997%203%2C5%200%2C8%204.966%2C13%204.983%2C12.982%205%2C13%20%22%2F%3E%3C%2Fsvg%3E");
background-color: #b36305 !important;
border-color: #995300 !important;
color: #ffffff !important;
text-shadow: 0 1px 0 #005599 !important;
-webkit-border-radius: .1875em !important;
border-radius: .1875em !important;
display: block !important;
width: 18px !important;
height: 18px !important;
margin: -9px 2px 0 2px !important;
}
.ui-checkbox .ui-radio-off:after {
-webkit-border-radius: .1875em !important;
border-radius: .1875em !important;
filter: Alpha(Opacity=30) !important;
opacity: .3 !important;
display: block !important;
width: 18px !important;
height: 18px !important;
margin: -9px 2px 0 2px !important;
}
.ui-input-text input, .ui-input-search input, textarea.ui-input-text {
width: 100% !important;
}
次にチェックボックスなどのコントロールのクラスを変更するために「mailformpro/librarys/core.js」を下記のように修正してください。
【318行目辺り】
mfp.$(labelObj).className = 'mfp_checked';
↓下記に修正
mfp.$(labelObj).className = 'mfp_checked ui-btn ui-corner-all ui-btn-inherit ui-btn-icon-left ui-first-child ui-radio-on';
【320行目辺り】
mfp.$(labelObj).className = 'mfp_not_checked';
↓下記に修正
mfp.$(labelObj).className = 'mfp_not_checked ui-btn ui-corner-all ui-btn-inherit ui-btn-icon-left ui-radio-off ui-first-child';
【383行目辺り】
mfp.$(mfp.Elements[obj.name].group[i]+'_label').className = 'mfp_checked';
↓下記に修正
mfp.$(mfp.Elements[obj.name].group[i]+'_label').className = 'mfp_checked ui-btn ui-corner-all ui-btn-inherit ui-btn-icon-left ui-first-child ui-radio-on';
【386行目辺り】
mfp.$(mfp.Elements[obj.name].group[i]+'_label').className = 'mfp_not_checked';
↓下記に修正
mfp.$(mfp.Elements[obj.name].group[i]+'_label').className = 'mfp_not_checked ui-btn ui-corner-all ui-btn-inherit ui-btn-icon-left ui-radio-off ui-first-child';
以上でおそらくレイアウト崩れやコントロールの動作不具合はなくなると思います。
【要因2】ラジオボタンやチェックボックスを配置するとメールフォームプロが動作しない。
もう一つはラジオボタンとチェックボックスを配置するとメールフォームプロが動作しない現象を回避します。
これは「jQueryMobile」の「<fieldset data-role="controlgroup">」が影響しているようです。
fieldsetを排除すると正常に動きます。
fieldsetを排除したことによるレイアウト崩れは前述のCSSを読み込む事で解決できていると思います。
【通常のjQueryMobileのソース】
<div data-role="fieldcontain">
<fieldset data-role="controlgroup">
<legend>性別</legend>
<label><input type="radio" name="性別" value="女性" /> 女性</label>
<label><input type="radio" name="性別" value="男性" /> 男性</label>
</fieldset>
</div>
【改善したソース】
<div data-role="fieldcontain">
<legend>性別</legend>
<label><input type="radio" name="性別" value="女性" /> 女性</label>
<label><input type="radio" name="性別" value="男性" /> 男性</label>
</div>
以上でとりあえず普通に「jQueryMobile」ベースでメールフォームプロが使えるようになったと思います。
送信ボタンを押した際、メールフォームのエラーチェック機能が働いた際にローディングイメージが表示され続けたり、メールが送られてしまう場合はとりあえずAJAXを無効にしてみてください。
下記をソースに記述してjQueryMobileのAJAXを無効にします。
<script language="JavaScript">
// ajax の無効化
$.mobile.ajaxEnabled = false;
</script>
次回はjQueryMobileでメールフォームプロの郵便番号から住所自動入力機能を利用した際に都道府県プルダウンが変化しない現象と選択項目によって表示する項目を切り替えるスイッチング機能を使えるようにする方法を解説いたします。
（※本ページはプロモーションが含まれています。）
- 広告
- 広告
