和田憲幸のブログ

札幌市南区在住、個人事業のWebエンジニア 和田憲幸(40歳)のブログです。

メールフォームプロ4.0開発状況(1)

Javascript側はある程度カタチが見えてきたのでご報告を。

2013-01-15 05:41:32
入力時間 / 17:51

今回のはホントすごいぞ!またも自画自賛してよいかね!旧来のバージョンではカスタマイズ性は高いが「カスタマイズするのがスゴイめんどくさかった」のですが、今回のバージョンは飛躍的にカスタマイズが容易になった!これはホントスゴイ!

言語関連の設定を統合

言語関連をすべてlanguage.jsというファイルに統合しました。この当たりの仕様はレスポンス向上のためにCGI側でマージする予定ですが、言語設定ができるのと同時に、タグでの装飾もしやすくなっています。jsファイルを見てピンと来る人はピンと来るんじゃないかなと。すごい柔軟にカスタマイズできる!スゴイ!

見た目の変更はCSSのみ

以前もお伝えした通り今回は見た目に関してはすべてCSSで処理する仕組みになっています。そのためCSSファイルは各要素毎に分散して定義しています。これに関してはレスポンスが低下するため、あまり褒められた手法ではないのですがカスタマイズの簡便さを優先しました。

新機能 レジュームしないエレメント指定

メールフォームプロにはレジューム機能という入力途中の状態を保持する機能があるのですが、FAQでよく「長期間記憶したいズラ」という要望が多かったのでそれを念頭に置いてみました。具体的にはcookieに保持させるとヤバい情報は保持させない事でcookieへの長期保存をさせようという魂胆です。また「入力内容を保存する」というチェックボックスにチェックを入れない限りcookieは強制的に消去する仕様にしたのでセキュリティへの造詣が低い方が設置した場合でもある程度の安心感は担保できるかなと。

新機能 number属性、date属性、email属性、tel属性への対応

前回、datetimeとかにも対応するような事を書きましたがchrome他でまだまともに動かないのでHTML5からの新属性は上記にしぼりました。特にnumber属性に関してはchromeやSafari(iOS版含む)でかなり利便性が高く、また簡易カート機能との相性も抜群のため、結構なウリになりそうです。詳細はデモページをご覧ください。商品個数入力のところがnumber属性になっています。

各確認画面もカスタマイズしやすく

今回は本当にカスタマイズ性の簡便さを重視したので確認画面のカスタマイズが飛躍的に向上しています。旧来のバージョンではMSIE6で角Rやドロップシャドウを実現するため、かなり無茶しているのですがMSIE8以下は捨てました(角Rとドロップシャドウだけね)。故にCSSでかなり突っ込んだカスタマイズができます。スゴイ!

また、まだ実装はしていませんがダイナミックに確認画面のタイプを変更するような事もできます。デモページ最下部にボタンによって確認画面の種類を変えるというサンプルボタンを設置していますのでぜひお試しください。PCではオーバーレイで表示してスマートフォンではフラットで表示なんてことも想定の範囲内ですよ!イイネ!

と、いうことで今回のアップデートはなかなか期待できそうです。ちゃんとMSIE6にも対応してるしね。ただ、自分が思っていた以上にメールフォームプロの機能が入り組んでいるため公開はもう少しかかりそうですが・・・。ともあれ、最新版をご期待ください!

TAG

P.1340

むぎっちさん
愛用させていただいております。
複数フォームに対応していただけるととてもありがたい…と常々思っております(チラッチラッ)2013-01-15 10:24:20
和田
>むぎっちさま
複数フォームを1ページ内に設置するという仕様には残念ながらなりません・・・。なぜなら役割毎にフォームのページを分けた方がコンバージョンレートがあがるという結果が出ているためです(和田調べ)。2013-01-17 15:03:15
tutuさん
スクリーンショットはよ。2013-01-18 00:43:19