携帯CSS採用メールフォーム
新着情報/WEBインベンター

バージョンUP、最新情報、キャンペーン情報などを、月1回ほど配信 - WEBインベンター

新着情報/WEBインベンター 新着情報/WEBインベンター

マルチメールフォーム Ver.4.00 のリリース 2009年06月22日

マルチメールフォーム Ver.4.00 のリリース

マルチメールフォーム Ver.4.00 をリリースいたしましたのでお知らせいたします。このバージョンUPは携帯メールフォームのデザインの大幅な改善を実施したものです。 また、カレンダープログラムを標準装備いたしました。

マルチメールフォームはオプションが多くてショッピングカートでは対応しきれない特別注文用に開発されたもので、多彩な決済が可能なメールフォームです。今回のバージョンUPにより、CSSを使った携帯サイトの作成も容易になりました。

このバージョンUPは下記のプログラムで実施いたしました。
Multi Mail Form Ver.4.00

詳しくは下記をご覧ください。

1.携帯CSSの使用に関する方針
2.文字サイズの指定
3.文字の色の指定
4.背景色付きの見出し
5.spacer.gifを使った罫線
6.spacer.gifを使ったスペース
7.カレンダープログラムの標準装備

なお、サンプルはこちらでご覧になれます。携帯電話で実際にご覧になれば絵文字も含めてより一層良さが分かると思います。
http://wb-i.net/mailform.html


━━━━━━━━━━━━━━━━━━━━━━━━━━━
1.携帯CSSの使用に関する方針
━━━━━━━━━━━━━━━━━━━━━━━━━━━
携帯電話の進歩に伴い各社ともほとんどの機種(現時点で約90%)でスタイルシートが使えるようになってきました。しかしながら、PCとは異なり携帯のスタイルシートでは3キャリアの仕様の違いにより使用が著しく制限されます。下記の大きな制限があります。

1)ドコモではインラインCSSのみ使える。(リンクの色だけ例外)
2)ドコモではインラインCSSでも使用できるCSSは少ない。

それで、ドコモに合わせたデザインが必要になります。もっとも、携帯で必要なデザインはそれほど多くはありませんから、これでもまずまずのデザインが実現できます。それで、下記の2〜7をデザインに取り入れました。

なお、3キャリアのXHTMLの仕様は異なり、DOCTYPEも異なっています。さらに、i-modeおよびSoftBankでは、XHTMLが使用できない機種がまだ約15%ほどあります。プログラムではこれらを判別して適切なXHTML又はHTMLを出力しています。もちろん、XHTMLに対応していないかなり古い機種ではCSSは無視されますから、デザインはCSSなしのデザインとなります。しかし、携帯でインターネットをする人はそんなに古い機種を使ってはいないことでしょう。

━━━━━━━━━━━━━━━━━━━━━━━━━━━
2.文字サイズの指定
━━━━━━━━━━━━━━━━━━━━━━━━━━━
多くの携帯サイトで文字サイズを小さくする傾向にあります。それで、各社の携帯で大きさを統一することが難しい状況ですが、機種ごとに文字サイズを指定できるようにしました。

システム設定【21】携帯の基本設定の、「文字を1段階小さくする」のところで機種ごとに指定できます。
また、ここで、1を指定すると、下記のように設定されます。

x-small/xx-small/x-small/12px   (i-mode/AU/SoftBank/other(3キャリア以外)の順)

━━━━━━━━━━━━━━━━━━━━━━━━━━━
3.文字の色の指定
━━━━━━━━━━━━━━━━━━━━━━━━━━━
文字の色、リンク関係の色をWEB上から指定できるようにしました。
しかし、リンク関係の色指定は3キャリアで表示が異なっており同じ表示を実現するのは簡単ではありません。それで、背景色を黒にしたりする止むを得ない場合を除いては無指定にするほうが望ましいでしょう。

━━━━━━━━━━━━━━━━━━━━━━━━━━━
4.背景色付きの見出し
━━━━━━━━━━━━━━━━━━━━━━━━━━━
タイトルや見出しに背景を付けるだけでデザインや分かりやすさは飛躍的に向上します。この点で3キャリア共に同じ表示を実現できるように努力してみました。

━━━━━━━━━━━━━━━━━━━━━━━━━━━
5.spacer.gifを使った罫線
━━━━━━━━━━━━━━━━━━━━━━━━━━━
罫線は普通タグ<hr>を使いますが、3キャリアで表示を一致させることはむずかしく、上下のマージンを0にすることはできないようです。それで、最近多く使われている下記の方法で罫線を表示しました。これにより柔軟な罫線表示が可能になります。

マージン0の高さ1xpの罫線:
<div style='background:gray;'><img src="./p_image/spacer.gif" width='1'
height='1'></div>

━━━━━━━━━━━━━━━━━━━━━━━━━━━
6.spacer.gifを使ったスペース
━━━━━━━━━━━━━━━━━━━━━━━━━━━
限られた携帯画面では行間を適切に取ることが重要になります。それで、この場合も下記のような方法でスペースを確保しました。これにより改行ではできない行間の自由な設定ができます。

高さ5pxの行間5pxのスペースの場合:
<div><img src="./p_image/spacer.gif" width='1' height='5'></div>

━━━━━━━━━━━━━━━━━━━━━━━━━━━
7.カレンダープログラムの標準装備
━━━━━━━━━━━━━━━━━━━━━━━━━━━
カレンダープログラム(Multi Calendar)を標準装備いたしました。カレンダーの設定はcalendar_set.plファイルで行います。

━━━━━━━━━━━━━━━━━━━━━━━━━━━
8.Ver.4.00のリリースキャンペーン
━━━━━━━━━━━━━━━━━━━━━━━━━━━
マルチメールフォーム Ver.4.00 のリリースにあたり、\15,000円(事業者登録者\13,000円)でお求めになれます。この機会をお見逃しなく。


なお、バージョンUPに際しては下記の手順を参考にしてください。
(新バージョンのプログラムをダウンロードするために再注文する必要はありません。同じファイル名でダウンロードできます。)
http://wb-i.net/advice.htm#up


皆様のご意見を取り入れながらさらに優れたシステムを開発して行きたいと思います。ご指導の程、よろしくお願いいたします。


Copyright (C) 2009  WEBインベンター All rights reserved.