スマートフォン対応

概要

スマートフォン(iPhone、Android、WindowsPhone、BlackBerry端末) からアクセスがあった場合に、専用ヘッダを挿入させて見栄えの最適化を行うことができます。

この専用ヘッダは x-Servlet Version2.10.1(20120702) までの形式となります。
最新版での形式はスマートフォン対応(Version2.10.1(20121120)以降)をご覧ください。

設定

コンテンツに挿入されるヘッダ定義ファイルを contentsRuleDefault.xml に設定します。

    <!--
      特定のグループにマッチした場合に head タグに挿入する書式を記述した
      ファイルを指定する。
    -->
    <!-- iPhone向けヘッダ挿入定義 -->
    <Attribute name="insertHeader_iPhone">conf/insertHeaders/iphone.xml</Attribute>
    <!-- Android向けヘッダ挿入定義 -->
    <Attribute name="insertHeader_Android">conf/insertHeaders/android.xml</Attribute>
    <!-- WindowsPhone向けヘッダ挿入定義 -->
    <Attribute name="insertHeader_WindowsPhone">conf/insertHeaders/windowsphone.xml</Attribute>
    <!-- BlackBerry向けヘッダ挿入定義 -->
    <Attribute name="insertHeader_BlackBerry">conf/insertHeaders/blackberry.xml</Attribute>
    <!-- GPS対応スマートフォン向けヘッダ挿入定義 -->
    <Attribute name="insertHeader_GpsSp">conf/insertHeaders/gps_js4sp.xml</Attribute>

形式

挿入されるヘッダ形式については以下をご覧ください。

説明

x-Servlet で端末がスマートフォンと識別されると、対応した定義ファイル(iphone.xml、android.xml、windowsphone.xml、blackberry.xml)の <content></content> で囲まれた内容がコンテンツの<head>ブロックの最後に挿入されます。
更に端末が位置情報取得に対応している場合は gps_js4sp.xml の内容も挿入されます。


この記述が挿入されることで以下の動作となります。

  • 初期表示にコンテンツが縮小表示されることを回避し画面サイズにフィットするようになります。
  • コンテンツ全体のフォントサイズが大きく表示されます。
  • ハイフンの含まれる数字を自動的に Phoneto リンクとしません。(iPhoneの場合)

変換結果

iPhone の場合(iPhone 4)

Version2.8.1以前 Version2.8.2以降
iPhone無変換 iPhone変換後
  • 適切な画面サイズに変換されます。
  • 絵文字が Softbank絵文字で表示されます。
  • XHTMLで出力されているので文字装飾が再現されます。
  • x-Servlet Version2.9.0~2.9.1 では <input> タグの istyle属性が「istyle="4"」の場合のみ「type="text"」が「type="number"」に変換されます。
    x-Servlet Version2.9.2 以降では Version2.8.2~2.8.3 と同様に「type="text"」のままとなります。
    このため、使用しているバージョンによって初期入力画面が異なります。
    変換前 変換後
    Version2.9.0~2.9.1 Version2.8.2~2.8.3、Version2.9.2以降
    <input type="text" istyle="4"> <input type="number"> <input type="text" mode="numeric">
    <input type="text" style="-wap-input-format:'*&lt;ja:n&gt;'"> <input type="number"> <input type="text" istyle="4">
    入力画面 input_number input_text

Android の場合(Xperia[Android_2.1])

Version2.8.3以前 Version2.9.0以降
Android無変換 Android変換後
  • 適切な画面サイズに変換されます。
  • 絵文字が docomo絵文字で表示されます。
  • XHTMLで出力されているので文字装飾が再現されます。

WindowsPhone の場合(IS12T[Windows Phone 7.5])

Version2.9.2以前 Version2.10.0以降
WindowsPhone無変換 WindowsPhone変換後
  • 適切な画面サイズに変換されます。
  • 絵文字が画像絵文字で表示されます。
  • XHTMLで出力されているので文字装飾が再現されます。

BlackBerry の場合(BlackBerry Bold 9700[BlackBerry OS_5.0])

Version2.9.2以前 Version2.10.0以降
BlackBerry無変換 BlackBerry変換後
  • 適切な画面サイズに変換されます。
  • 絵文字が docomo絵文字で表示されます。
  • XHTMLで出力されているので文字装飾が再現されます。

注意点

iPhone、Android、WindowsPhone、BlackBerry 共通

  • IPアドレスでアクセス制限を行っている場合は iPhone、Android、WindowsPhone、BlackBerry端末からアクセスできません。
  • <img> タグの copyright属性は非対応です。
  • <input> タグの accesskey属性は変換されて出力されますが端末側で対応していないため機能しません。
  • iPhone、Android、WindowsPhone、BlackBerry端末は UID に非対応なため X-Xp-Uid などで個体識別情報を取得することはできません。
  • コンテンツ内やx-Servletで挿入されるヘッダ定義ファイルで指定できる viewportのwidth指定は"device-width"もしくはサイズを示す数値のみとなります。

    問題ない例

    <meta name="viewport" content="width=device-width">
    <meta name="viewport" content="width=320">
    <meta name="viewport" content="width=320px">

    問題となる例

    <meta name="viewport" content="width=device-height"> ※device-widthではない
    <meta name="viewport" content="width=device"> ※device-widthではない
    <meta name="viewport" content="width"> ※値がない

iPhone、Android 共通

  • x-Servlet Version2.8.3 以下では GPS機能は非対応です。

iPhone に関して

  • iPhone で対応するブラウザは Safari のみです。
    他のブラウザでアクセスした場合には iPhone とは認識されずに「PC」扱いとなります。
  • iPhone の対応OSは iOS 3 以上となります。
  • iOS3 以上の iPodTouch は「iPhone OS_X.X」(X.X はバージョン番号)と認識されます。
  • x-Servlet Version2.8.3 以下では iPhone OS の バージョンは区別できません。
  • x-Servlet Version2.9.0 以降では画像変換で出力できる画像フォーマットは「JPG」「GIF」「PNG」となります。
    x-Servlet Version2.8.3 以下では「JPG」「PNG」となります。
    このため Version2.8.3 で「PNG」で表示されていた画像は、Version2.9.0以降では「GIF」で出力されるようになります。
  • ページ分割が行われるキャッシュサイズの設定は以下の通りとなります。
    Version2.8.3以前 Version2.9.0以降
    テキスト・画像込み 10MB テキスト 1MB
    画像込み 5MB
  • iOS 5 では「type="number"」フィールドに入力された値が「0」(ゼロ)で始まる数値の場合、先頭の「0」が削除されます。
    このため元コンテンツで「istyle="4"」が指定されているページは先頭が「0」で始まる数値を入力することができません。
    先頭が「0」で始まる可能性のあるデータ(ID番号、電話番号など)を扱う場合はx-Servlet Version2.9.2 以降をご利用頂くか「istyle="4"」を削除する必要があります。
    参考:機種依存について(iPhone)

Android に関して

  • Android で対応するブラウザは Androidブラウザ(正式名称「ブラウザ」)、Chrome(Chromeが標準ブラウザの機種に限る)、Sブラウザ(Sブラウザが標準ブラウザの機種に限る)、Yahoo!ブラウザ(Yahoo!ブラウザが標準ブラウザの機種に限る)のみです。
  • Android 端末での画像変換で出力できる画像フォーマットは「JPG」「GIF」「PNG」となります。
  • ブラウザ設定で「モバイルビュー」のチェックをオフにした場合、x-Servletでは「PC」扱いとなります。
  • 端末が絵文字に対応している場合は各キャリアの絵文字に変換され出力されます。
    絵文字に対応していない場合は画像絵文字に置き換えられます。
    参照:Android 絵文字非対応機種
  • Android端末では istyle属性は非対応です。
  • ブラウザ上に表示されている画像を保存しようとすると、新たに画像リクエストを行って取得しようとする場合があります。
    端末によってはリクエストされる User-Agent が端末のものとは異なるために正常に画像がレスポンスできなくなります。
    この現象は detectSessionWithTE を "false" に設定することで回避することができますが、異なる User-Agent のリクエストを受け入れる設定になるのでセキュリティが若干低下します。
  • スマートフォンの文字サイズ最適化は定義ファイルに指定された CSS によって行われています。
    元コンテンツ内で文字サイズを直接指定(style="font-size:small;" など)している場合は文字サイズ最適化が解除されてしまう場合があります。
    文字サイズを相対的に指定している例 文字サイズを絶対的に指定している例
    コンテンツソース
    <div style="text-align:center; font-size: 125%; background-color:#DDDDEE; color:#005EB2;"> 機能概要 </div> <hr style="border-style:solid; border-color:#BBBBFF; background-color:#BBBBFF; height: 3px;"/> <br/> <div style="font-size:75%;"> <div style="font-size: 125%; text-align:left; color:#005EB2;"> 新機能 [1]<br/> 検索順位を下げません! </div> <hr style="border-style:solid; border-color:#BBBBFF; background-color:#BBBBFF; height:1px;"/> <br/> <span style="color:#005EB2;">SEOサポート</span><br/> <img src="./img/ranking.jpg" style="margin-top:10px; margin-right:8px; margin-bottom:5px; margin-left:5px; float:left;" frameRatio="45"/> 従来の変換では端末を装ったクローラーからアクセスがあった場合、装った端末に対して変換が行われていました。そのため、クローラーに対して一般的に不利といわれている「セッションID」や「負荷分散用サーバID」の付与、「ページ分割」が行われていました。 新機能ではクローラーに対しては前述の動作は行わずに適切な変換を行います。そのため、<span style="color:#1122DD;">御社サイトにおけるSEO対策の効果を損ないません。</span><span style="color:#22EE11; text-decoration:blink;">&#xE6F5;</span> </div>
    コンテンツソース
    <div style="text-align:center; font-size: medium; background-color:#DDDDEE; color:#005EB2;"> 機能概要 </div> <hr style="border-style:solid; border-color:#BBBBFF; background-color:#BBBBFF; height: 3px;"/> <br/> <div style="font-size:small;"> <div style="font-size:medium; text-align:left; color:#005EB2;"> 新機能 [1]<br/> 検索順位を下げません! </div> <hr style="border-style:solid; border-color:#BBBBFF; background-color:#BBBBFF; height:1px;"/> <br/> <span style="color:#005EB2;">SEOサポート</span><br/> <img src="./img/ranking.jpg" style="margin-top:10px; margin-right:8px; margin-bottom:5px; margin-left:5px; float:left;" frameRatio="45"/> 従来の変換では端末を装ったクローラーからアクセスがあった場合、装った端末に対して変換が行われていました。そのため、クローラーに対して一般的に不利といわれている「セッションID」や「負荷分散用サーバID」の付与、「ページ分割」が行われていました。 新機能ではクローラーに対しては前述の動作は行わずに適切な変換を行います。そのため、<span style="color:#1122DD;">御社サイトにおけるSEO対策の効果を損ないません。</span><span style="color:#22EE11; text-decoration:blink;">&#xE6F5;</span> </div>
    文字サイズが相対的に指定されているので最適化したサイズから更に変更されます。 文字サイズが固定で指定されているので最適化が解除されてしまいます。

BlackBerry に関して

  • x-Servlet の変換結果として出力される絵文字は、BlackBerry 8707h のみ pictogram.xml に <Item name="HTML">xxxx</Item> が定義されている絵文字の場合はPCブラウザ用の絵文字表現、定義されていない場合は "ALT" 文字列が出力されます。
TOP