PCtoMobile 、Contents-Cart Ver.13のリリース

PC&携帯連動のショッピングカートPCtoMobile（ピクトモバイル） Ver.13、Contents-Cart Ver.13を
リリースいたしましたのでお知らせいたします。このバージョンUPは携帯ショッピングカートのデザインの
大幅な改善を実施したものです。 また、Unicode版では携帯電話でもUTF-8で出力するようにしま
した。

このバージョンUPは下記のショッピングカートで実施いたしました。
PCtoMobile Ver.13.00
PCtoMobile-2 Ver.13.00
PCtoMobile Unicode Ver.13.00
Contents Cart Ver.13.00
Contents Mall Ver.13.00

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

１．携帯CSSの使用に関する方針
２．文字サイズの指定
３．文字の色の指定
４．背景色付きの見出し
５．spacer.gifを使った罫線
６．spacer.gifを使ったスペース
７．float:leftによる画像の回り込み
８．Unicode版の改良

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


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

１）ドコモではインラインCSSのみ使える。（リンクの色だけ例外）
２）ドコモではインラインCSSでも使用できるCSSは少ない。

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

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

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

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

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

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

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

━━━━━━━━━━━━━━━━━━━━━━━━━━━
５．spacer.gifを使った罫線
━━━━━━━━━━━━━━━━━━━━━━━━━━━
罫線は普通タグ

---

を使いますが、３キャリアで表示を一致させることはむずかしく、上下のマージンを０に
することはできないようです。それで、最近多く使われている下記の方法で罫線を表示しました。これにより
柔軟な罫線表示が可能になります。

マージン０の高さ1xpの罫線：


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

高さ5pxの行間5pxのスペースの場合：


━━━━━━━━━━━━━━━━━━━━━━━━━━━
７．float:leftによる画像の回り込み
━━━━━━━━━━━━━━━━━━━━━━━━━━━
商品のサムネイル画像の回り込みは画面領域の節約と見やすいデザインのためにとても有効で、３キャリア
ともfloat:leftが使えるのでそれを利用しました。floatの解除は次のように行います。


・・・・・


━━━━━━━━━━━━━━━━━━━━━━━━━━━
８．Unicode版の改良
━━━━━━━━━━━━━━━━━━━━━━━━━━━
携帯の場合は、DoCoMo、SoftBankの最近の機種ではutf-8が使えます。しかし、AUではShift_JISのみ
が使える仕様となっています。それで、PCtoMobileのUnicode版Ver.13.00では、下記のように文字コード
を機種ごとに振分けて出力します。

１）DoCoMo、SoftBankの最近の機種：UTF-8
２）AU、及びDoCoMo、SoftBankの旧機種：Shift_JIS
３）３キャリア以外、及びPCからのアクセス：UTF-8

という訳で、DoCoMo、SoftBank、AUの３キャリアに対応し、かつ、Unicode対応の海外の携帯電話の
多くに対応しているはずです。


なお、バージョンUPに際しては下記の手順を参考にしてください。
（新バージョンのカートをダウンロードするために再注文する必要はありません。*****13.LZHでダウンロード
できます。）
http://wb-i.net/advice.htm#up


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

--------------------------------------------------------------------------
[ 会社紹介 ]
ＷＥＢインベンター
ホームページ http://wb-i.net/　

ショッピングカートCGIスクリプト（perl言語による）を中心に開発を進めており、PC＆携帯対応ショッ
ピングカートを格安で配布しています。

当社開発のショッピングカートSPシリーズは すべての設定をＷＥＢ上からでき、管理も充実していま
す。PC＆携帯対応はもちろん、SSL、クレジット・コンビニ決済（クロネコ＠ペイメント、イプシロン、
ZEUS、NP後払い-NPコネクトライト）にも対応しています。自社アフィリエイトプログラム付きのショッ
ピングカートや、A8.net、moba8.net（携帯アフィリエイト）対応の、さらには、デジタルコンテンツ販売
用のショッピングカートも提供中。


--------------------------------------------------------------------------
[ お問合せ先 ]
本件に関するお問合せは、下記までお寄せ下さい。
--------------------------------------------------------------------------
■■□ プログラム開発　ＷＥＢインベンター
■□ ＵＲＬ：http://wb-i.net/　
□ ＭＡＩＬ：info@wb-i.net　
--------------------------------------------------------------------------