システム構成について｜Webサイトを携帯・スマートフォン用にコンバートするASP [モバース]
技術的な内容について以下に記載いたします。
システム的な要件がある企業様は以下をご覧ください。
モバースはそれ単体でデータを保管しない仕様になっております。
コンバート（変換）とは、別でHTMLを書き出し、別でサーバーに保管してアクセスするのではなく、モバースサーバー内のコンバート（変換）ルールに基づいた表示を閲覧することになります。
ユーザーはお客様Webサイトの中のデータをモバースサーバーを通して見ることになります。
モバースサーバーとお客様Webサーバーの役割は以下のように切り分けることができます。
Webサーバー：データ保管
モバースサーバー：変換ルール付け
コンバート（変換）ルールは細かく設定することができます。
例えばソースコード内での処理とモバース内での処理を以下のように組み合わせることが可能です。
1.---------------------------------------------------------------
というコンバート（変換）ルールを作成した場合、モバースでの表示は全て
<script type="text/javascript">～</script>はソースから削除された状態で表示されます。
2.----------------------------------------------------------------
というコンバート（変換）ルールを作成した場合、携帯電話で表示させたくない項目を
<div class="MoBirth_Delete">～</div>で囲えば携帯電話での表示から削除されます。
3.----------------------------------------------------------------
というコンバート（変換）ルールを作成した場合、携帯電話では
<p class="caption">～<p>のコードの部分は全て
<p class="mobile_caption">携帯電話でも予約を取ることが可能です</p>
と差し替わります。
コンバート（変換）ルールは上記のような仕様で差し替えることが可能です。
※ 注意点 モバースで特定の箇所だけ強制的に修正をおこなった場合、更新時にその部分が更新されない場合があります。
モバースの仕様は、Webサーバー内に存在するデータを表示させるようになっています。
これが意味するところは「携帯電話にはこの写真を使いたい」というご希望があった場合も
Webサーバーにアップロードすることが必要になってきます。
同じように、携帯電話のみでレイアウトの変更をしたい場合、専用のCSSファイルを
アップロードし、該当のWebページで読み込ませることが必要となります。
※ 一部、外部CSSファイルが読み込めない端末があります。
-------------------------------------------------
スマートフォン専用CSS参考例：[HTML側head内に記載]
フィーチャーフォン専用CSSの参考例：[HTML側head内に記載]
1.スマートフォン用のCSSには全て相対的な単位で記載します。
例：font-size:1.2em; 等
※ ただし、bodyに対する余白marginの設定は5px等、絶対的な単位が必要です。
2.background-imageは反応しません。
ナビゲーション部分など、background-image:、:hover、による処理をしている場合、
記載されているタグ内の文言を表示します。こういったケースは、代替画像で表示せず、
border:、font-size:、margin:、で調整（相対単位で）することでスマートフォンらしいレイアウトに仕上がります。
3.複数CSSは読み込みません。
例：<div class="examplecss1 examplecss2">example</div>
となっていた場合、通常のウェブブラウザではexamplecss1とexamplecss2をどちらも読み込みますが、
読み込めませんので、この場合では、Webサイト側を修正するか、モバース側で差し替えルールを作成することが必要となります。
-------------------------------------------------
表示上での代表的な問題はFlashです。
恐れ入りますが、全面Flashで作成されたWebサイトは承りかねます。
事実上、Flash等の[表示可不可]についてはその機種に依存します。
Androidに標準で搭載されているブラウザはFlashを表示することができます。
しかし、iPhoneについてはAdobeによる対応があるという話もありますが、2011年8月時点で標準非対応です。
このことから、弊社ではFlash利用の箇所は全て代替の静止画像をWebサーバーにアップいただき、
変換ルールによって差し替えることを推奨しており、お客様にも前提事項としてお考えいただいております。
CMSでWebサイトを運用されている場合、MovableType、WordPress共に表示できなかったケースはございません。
現段階では拡張子がphpであったり、部分的にincを読み込んでいても、最終的に返されるhtmlが表示されておりますので、問題なく表示できております。
※ 該当CMSのバージョンに依存している可能性もございますのでお申込前にご申告とテスト変換をお願いいたします。
PHP、CGIで作成されたメールフォームは動作できません。
全てのメールフォームは「メーラーの立ち上げ（mailto:）」によって代替しております。
ショッピングカートを利用している場合も動作できません。
ネットショップを運営の場合は、システムごと入れ替えを検討されるほうがよいと考えます。
※ 稀に、外部URLで決済するタイプのショッピングカートが存在するようですが、その場合はその外部サイトに依存いたします。
検索システムについても、基本的に動作できません。
javascriptによる検索システムでAndroid、iOSで動作した事例はありますが、通常のフィーチャーフォンで動作しないなど、
検証と要件を満たすかのご確認が必要となります。
画像拡大スクリプト、スライドショースクリプトの表示についても動作できません。
jQueryやMooTools等のプラグインで代表的なLightBox等の画像拡大スクリプトは動作を確認できておりません。
jQueryMobileでの制作とモバースでの初期調整のどちらも実施いたしました率直な感想を記載いたします。
jQueryMobileはスマートフォン用のWebページを作成する非常に優れたプラグインです。
このプラグインを利用すれば、ある程度の知識があれば容易にスマートフォン用のWebサイトが構築できます。
jQueryMobileを利用すれば、iPhoneアプリのページ推移のようにスライド推移やフリップ推移が容易に設定できることや、
細かくCSSを設定しなくとも、ある程度デザインが形づくられていることから、10ページ程度であればリファレンスを参照しながら3営業日あれば形ができます。
逆に、モバースの場合は通常携帯電話とも連携していることから、スライド推移やフリップ推移、
その他CSS3で実装されているデザインは対応しておりません。
しかし、その分大きな特徴としてCSSの知識さえあればご自身で自由なスタイルを作成することが可能です。
また、コンテンツを一から書く必要もなく、不要な箇所は依頼いただくことで削除することができます。
総論として、デザイン的な自由度を求める場合、jQueryMobileを利用するほうが良いですし、ランニングコストもかかりません。
逆にデザイン的な部分でこだわりが少なく、また、更新の手間などを省く場合は当サービスを利用されたほうが良い結果が生まれるかと存じます。
パソコン用Webサイトと同じイメージで携帯サイトを労力をかけることなく
お持ちいただけます。最新機種への対応も自動的に変換されますので
運営もラクラクです。携帯・スマートフォンへのコンバートASP [モバース]!!
独自の携帯サイトが運営できます
WebサイトのコンバートASP [MoBirth]
スマートフォンにも携帯電話にも対応!!
