出力切り替え機能
出力切り替え機能とは?
出力切り替え機能は、htmlに特定の記述をするだけで、表示切替を行うことができる機能です。
記述方法
divタグもしくはspanタグの属性に dr:carrier="DoCoMo" のような形式で記述します。
Durian4.7.0からdivタグ, spanタグに加え、metaタグ, linkタグ, imgタグ, inputタグの属性にも対応しました。
dr:carrier
dr:carrierで記述する属性の名称は、端末情報のキャリア名称(carrier)の項目を指定します。その際、大文字小文字は区別しません。
dr:carrier属性の値は「|」で区切ることで複数のキャリアを同時に指定できます。
dr:device(Durian4.7.0 以降)
dr:deviceで記述する属性の名称は、端末情報のデバイス区分(device)の項目を指定します。その際、大文字小文字は区別しません。
dr:device属性の値は「|」で区切ることで複数のデバイスを同時に指定できます。
dr:width(Durian4.7.0 以降)
dr:widthで記述する属性の値は、端末情報の表示可能ピクセル数(横)(pixelWidth)の項目を指定します。
dr:widthで記述する属性の値は、数字を指定します。
dr:maxlength(Durian4.7.0 以降)
dr:maxlengthについては、maxlength切り替え機能ページを参照ください。
動作説明
指定したキャリア名称, デバイス区分が端末情報と合致(大文字小文字は区別しない)した場合、もしくは表示可能ピクセル数が含まれる場合はdr属性だけが削除されます。
合致しない場合は、タグ全体が削除されます。
サンプルコード
HTMLに記述するソース
<div style="text-align:center" dr:carrier="docomo"> docomoからアクセスされました。 </div> <div style="text-align:center" dr:carrier="au|softbank"> auもしくはSoftBankからアクセスされました。 </div> <div style="text-align:center" dr:device="mobile"> i-mode, Ezweb, Yahoo!ケータイからアクセスされました。 </div> <div style="text-align:center" dr:device="smartPhone|PC"> スマートフォンもしくはPCからアクセスされました。 </div> <img src="img/qvga.jpg" dr:width="200-240" alt="qvga" /> <img src="img/vga.jpg" dr:width="241-480" alt="vga" /> <input type="text" name="foo" maxlength="5" dr:maxlength="10" />
docomo(N905i)でのアクセス結果
<div style="text-align:center"> docomoからアクセスされました。 </div> <div style="text-align:center"> i-mode, Ezweb, Yahoo!ケータイからアクセスされました。 </div> <img src="img/qvga.jpg" alt="qvga" /> <input type="text" name="foo" maxlength="20" />
SoftBank(945SH)でのアクセス結果
<div style="text-align:center"> auもしくはSoftBankからアクセスされました。 </div> <div style="text-align:center"> i-mode, Ezweb, Yahoo!ケータイからアクセスされました。 </div> <img src="img/vga.jpg" alt="vga" /> <input type="text" name="foo" maxlength="10" />