携帯サイトを作ろう! -ちょっと詳しいモバイルサイトの作り方-
XHTML+CSSで一歩進んだモバイルサイトを作るテクニックを幅広く紹介☆
このエントリーを含むはてなブックマーク このエントリーをブックマークに追加
上記の広告は1ヶ月以上更新のないブログに表示されています。
新しい記事を書く事で広告が消せます。


このエントリーを含むはてなブックマーク このエントリーをブックマークに追加
3キャリア対応のモバイルサイトを作るテクニック。今回はちょっと荒技的手法?のご紹介です。

3キャリア対応を作成する際に問題となるのは、絵文字の互換性であることは、前にも書きました。

「ドコモ+au」と「ソフトバンク」対応という2ページ構成を行えば、この絵文字問題は解決できます。

しかし、絵文字以外は(※)基本的にHTMLの書き方に違いはありません。そこで、キャリアによって異なる絵文字以外の共通な部分は、すべて同期させようというのが今回のねらいです。
キャリアによる絵文字の互換性の問題を解決する1つの方法としてキャリア別にページを作成することが一番の早道となるのですが、一つ一つページをキャリア別に作成するのは結構面倒な作業です。

そこでキャリアによって異なる絵文字部分以外のHTMLは共通であることに着目して、この部分を共通利用してしまう(共通の部分を一つのファイルにまとめる)という方法があります。

1つのページを複数のファイルで構成させようとする方法には、いくつかありまが、たとえば、フレームを使用するのがその代表格。このほかにも、Javascriptを使ったり、OBJECTで読み込んだり、CGIを利用する方法などがありますが、携帯サイトで一般的に行うのは、SSI(Server Side Include - サーバーサイドインクルード)が主流です。

これは、携帯ブラウザの機能に制限が多いという理由が一番に挙げられます。携帯のブラウザはフレームやJavascriptなどには対応していません。

SSIは命令に従って、サーバー側で何らかの処理を行った上で結果をブラウザに渡します。SSIで読み込む方法はフレームと比べて複数のファイルで構成されているという点は同じです。

しかし、フレームのようにブラウザ側が複数のファイルを読み込んで表示するのではなく、事前にサーバー側が複数のファイルを連結して1つのファイルにまとめてからブラウザに渡すという手段がとられるので、ページの表示が軽いという利点があります。

このSSIを使ってページを構成するための手順としては、まず表示のされ方がキャリアに依存しない共通の部分を別ファイル化します。この共通化したファイルをキャリアごとに読み出し、ページの更新性を飛躍的に向上させます。

さて、実際の記述方法ですが、共通化するファイルはアスキーファイルであれば、基本的に拡張子はあまり関係ありません。

たとえば、以下のようなHTMLがあったとします。

<div id="header">
AAA
</div>

<div id="common">
BBB
</div>

<div id="footer">
CCC
</div>



このうち、「id=common」としたDIV要素だけをキャリア間で共有したいとします。この場合は、

<div id="common">
BBB
</div>

を別ファイルとして保存します。たとえば、テキストファイルで「commom.txt」とします。

次に、元のHTMLにはこのテキストファイルを読み込む指示をSSIで与えます。

<div id="header">
AAA
</div>

<!--#include file="./common.txt" -->

<div id="footer">
CCC
</div>



なお、この記述は用意したテキストファイルをカレントディレクトリから読み出す仕方です。ルートディレクトリからファイルの位置を指定する場合は「virtual=""」とします。詳しくは「SSI includeコマンド/SSI入門」をご覧になってください。

このようにキャリア別のページ同士で共有化をすることによって、更新の際に「common.txt」ファイルを1つだけ書き換えればよく、更新がしやすくなります。

なお、SSIを使用できる環境はお使いのサーバーに依存します。また、初期設定では動かなくても、設定次第で動作する場合もあります。具体的には「htaccess実践活用術」などをご覧ください。

※)au、ボーダフォンはXHTML表記を推奨していますが、HTML互換でもページを作成・閲覧できます。また、DOCTYPEやエンコード、対応画像フォーマット等は各キャリア異なることがあります。





管理者にだけ表示を許可する


有難うございます
やはり改行タグは必要なのですね。
shu | URL | 2006/10/16/Mon 09:39 [EDIT]
はじめまして!
コメントありがとうございます。

読み込ませたいテキストファイルはHTMLの記述をしていますでしょうか?
読み込むファイルはテキストでも、SSIでHTML内に読み込ませた場合は、
HTMLとして認識されますので、

例えば、

あいうえお
かきくけこ。


という文字を実際に表示させたいのであれば、

テキストファイルには、

あいうえお<br>
かきくけこ。

と書かなくてはなりません。
シバ犬@管理人 | URL | 2006/10/15/Sun 20:21 [EDIT]
はじめまして。
とても役に立つサイトで読ませていただいています。
この方法で外部からTEXTファイルを読み込むようにしてみました。
しかし、ページには表示されるものの、外部から読み込ませたテキストに改行が反映されません。
何が原因なのでしょうか?
shu | URL | 2006/10/14/Sat 18:59 [EDIT]



TRACK BACK
TB*URL





Copyright © 携帯サイトを作ろう! -ちょっと詳しいモバイルサイトの作り方-. all rights reserved.

上記広告は1ヶ月以上更新のないブログに表示されています。新しい記事を書くことで広告を消せます。