スマートフォン対応(Version2.10.1(20121120)以降)

概要

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

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

設定

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

    <!-- GPS対応スマートフォン向けヘッダ挿入定義 -->
    <Attribute name="insertHeader_GpsSp">conf/insertHeaders/gps_js4sp.xml</Attribute>

    <!--
      スマートフォン向けにタッチしやすいデザインを実現できるテンプレートを head タグに挿入します。
    -->
    <!-- 各スマートフォンOS向けヘッダをリセット -->
    <Attribute name="insertHeader_iPhone"></Attribute>
    <Attribute name="insertHeader_Android"></Attribute>
    <Attribute name="insertHeader_WindowsPhone">conf/insertHeaders/wp_template_base.xml</Attribute>
    <Attribute name="insertHeader_BlackBerry"></Attribute>
    <Attribute name="insertHeader_FirefoxOS"></Attribute>
    <!-- 標準テンプレート挿入定義 -->
    <Attribute name="insertHeader_SP1">conf/insertHeaders/sp_template_base.xml</Attribute>
    <!-- テンプレート非対応スマートフォン向けヘッダ挿入定義 -->
    <Attribute name="insertHeader_BlackBerryOLD">conf/insertHeaders/blackberry.xml</Attribute>

形式

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

説明

x-Servlet で端末がスマートフォンと識別されると上記形式の <content> 部分の記述がコンテンツ内の <head> の最後に挿入されます。
更に端末が位置情報取得に対応している場合は gps_js4sp.xml の内容も挿入されます。

これらの記述が挿入されることで端末での表示が以下のようになります。

  • ページの幅:端末が表示可能な幅
  • 縮小、拡大はしない
  • 電話番号の自動リンク化:無効(iPhoneのみ)
  • ページのマージンなし
  • 半角カナを全角カナへ置換

また、定義されているClass名をコンテンツ内に指定することで装飾が可能になります。

変換結果

定義されている Class をコンテンツ内で指定することでスマートフォンからアクセスした場合に装飾が有効になります。
(BlackBerry端末でOSバージョンが6未満のものは装飾が有効にならないため こちら の変換となります)

フィーチャーフォンからアクセスした例 スマートフォンからアクセスした例

使用できる Class や装飾の効果については開発者ガイド スマートフォンテンプレート編をご覧ください。

注意点

iPhone、Android、WindowsPhone、BlackBerry、FirefoxOS 共通

  • IPアドレスでアクセス制限を行っている場合は iPhone、Android、WindowsPhone、BlackBerry、FirefoxOS端末からアクセスできません。
  • <img> タグの copyright属性は非対応です。
  • <input> タグの accesskey属性は変換されて出力されますが端末側で対応していないため機能しません。
  • iPhone、Android、WindowsPhone、BlackBerry、FirefoxOS端末は 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" 文字列が出力されます。

FirefoxOS に関して

  • FirefoxOS で対応するブラウザは Firefox のみです。
  • FirefoxOS の対応OSは FirefoxOS 2.0以上となります。
TOP