当ブログは移行しました。

http://www.symmetric.co.jp/blogに移行しました。
5秒後に自動的に移動します。
移動しない場合はこちらをクリックしてください。

携帯サイト制作の実践ノウハウ:コンテンツ変換をカスタマイズする2つの方法

ここ数回のエントリーで、「PI機能」や「変換シート」を利用してコンテンツの表示コントロールをする方法を紹介しています。どちらもカスタマイズが可能なコンテンツ変換機能ですが、今回はこの2つの機能の違いや使い分けについて説明します。

●PI機能を使った変換イメージ


●変換シートを使った変換イメージ


まず大きな違いは、上の絵のように、「PI機能」はコンテンツの部分ごとに書き分けられるCASE式のようなもので、「変換シート」はサイト内で一括管理される変換設定である、という点です。

また、画面サイズやGPS対応/非対応など、機種スペックに応じた出し分けが可能なのはPI機能だけということも、決定的に違うところです。


2つの機能にはそれぞれ次のような特長があります。
  • PI機能の特長
    • 機種の属性やスペックを出し分け条件に使えるので、細かい出し分けが可能
    • HTMLに記述すればサイトに即反映されるので、急な対応や部分的な対応に向く
    • 制作者PCなどでローカルファイルを見たとき、全ケースのコンテンツが表示される
  • 変換シートの特長
    • キャリア・世代による変換ルールを、簡単なルール設定をCSV形式で編集できる
    • 記述したルールがサイト内全体に効き、一括置換できる
サイト全体で効いた方がよい場合は変換シートを使うし、冒頭に書いたような機種スペックによる出し分けがあったりサイト全体で設定するのが向かない個別のケースなら出現箇所が多くてもPI機能を使うということになります。

また、PI機能はサイト開発者によって自由に使えますが、メンバーによっては変換シートまで変更の自由がないかもしれません。一方、プロジェクト内で変換ルールを持って効率的に作業したいケースがあったりと、出し分けたいサイト制作の状況によっても向き不向きは変わってきます。


例えばリソースファイルを出し分けする場合を考えてみます。もしキャリアで拡張子を切り替えるだけならPI機能と変換シートのどちらの方法でも可能です。しかし待受画像の配布のように、機種のキャッシュサイズに応じて形式別・大きさ別に画像を用意する場合は、より細かい条件指定が可能なPI機能を使います。

(XHTML)
<?ra cache-size="1-20480"?>申し訳ございませんが、ご利用の機種は非対応となっております。
<?ra cache-size="20481-51200" carrier="DoCoMo|au" ?><img src="img/item_s.gif" />
<?ra cache-size="20481-51200" carrier="SoftBank|Disney" ?><img src="img/item_s.png" />
<?ra cache-size="51201-81920" carrier="DoCoMo|au" ?><img src="img/item_m.gif" />
<?ra cache-size="51201-81920" carrier="SoftBank|Disney" ?><img src="img/item_m.png" />
<?ra cache-size="81921-102400" carrier="DoCoMo|au" ?><img src="img/item_l.gif" />
<?ra cache-size="81921-102400" carrier="SoftBank|Disney" ?><img src="img/item_l.png" />
<?ra cache-size="102401-1000000" carrier="DoCoMo|au" ?><img src="img/item_xl.gif" />
<?ra cache-size="102401-1000000" carrier="SoftBank|Disney" ?><img src="img/item_xl.png" />

一方、次のようにキャリア専用のページへのリンクやリソースの参照を切り替えたいケースには、変換シートを使う方が向いています。

●キャリア別リンク切替ルール(イメージ)
変換元
ドコモ
au
ソフトバンク
PCブラウザ
_pc.html
_docomo.html
_au.html
_softbank.html
;(変換しない)
_pc.css
_docomo.css
_au.css
_softbank.css
;(変換しない)

このようにファイル名の一部をキャリアごとのワードに置換するルールを書けば、HTMLに触らず一括置換できます。また、PI機能と違い、ローカルなHTMLファイルをブラウザで見たときに内容が重複しないので、ローカルファイルのままデザインを顧客に見せたり、資料に落とし込めます。

0 コメント:

コメントを投稿