更新履歴 2012/11/21 初版発行 2013/12/25 Web マニュアルへのリンクを修正 2015/3/19 x-servlet Ver リリースに伴う変更 2 共通設定のファイル内容に "insertheader_firefoxos" を追加 2018/11/26 x-se

Size: px

Start display at page:

Download "更新履歴 2012/11/21 初版発行 2013/12/25 Web マニュアルへのリンクを修正 2015/3/19 x-servlet Ver リリースに伴う変更 2 共通設定のファイル内容に "insertheader_firefoxos" を追加 2018/11/26 x-se"

まいえはやしもと
5 years ago
Views:

1 開発者ガイド - スマートフォンテンプレート編 -

2 更新履歴 2012/11/21 初版発行 2013/12/25 Web マニュアルへのリンクを修正 2015/3/19 x-servlet Ver リリースに伴う変更 2 共通設定のファイル内容に "insertheader_firefoxos" を追加 2018/11/26 x-servlet Ver リリースに伴う変更 1.3 対象を追加 pg. 2

3 目次 1 はじめに本書の目的概要対象共通設定標準利用設定カラーバリエーション指定方法サイズバリエーション ( 幅 ) 指定方法半角カナ変換指定方法注意事項リンク指定方法複数行リンク指定方法リスト指定方法ボタン指定方法テキストフィールド指定方法チェックボックスラジオボタン pg. 3

4 指定方法セレクトメニュー指定方法注意事項非表示指定方法簡単 2 列メニュー指定方法簡単リスト指定方法注意事項簡単並びボタン指定方法テーマの変更設定適用イメージカスタマイズ設定カスタマイズ項目フォント角丸背景色文字色矢印色サイズ注意事項テンプレートファイルの編集について jquery について pg. 4

5 6.3 非対応端末端末制限利用制限サンプルテンプレートとの違い pg. 5

6 1 はじめに 1.1 本書の目的パッケージに含まれているスマートフォン用テンプレートの利用方法について解説します 1.2 概要スマートフォン用テンプレートは既存のフィーチャーフォンサイトに適用することでページをスマートフォンライクに装飾することができます既存の資産であるフィーチャーフォンサイトをスマートフォン向けにも活用することで最小限のコストでスマートフォンサイトを実現できますテンプレートには複数の UI コンポーネント ( 以下コンポーネント ) が含まれ UI をタッチしやすくデザインする CSS と一部の UI を制御する JavaScript で構成されています利用方法は用意された標準デザインをそのまま利用する標準利用標準デザインの色だけを変更するテーマ変更標準デザインそのものをカスタマイズするカスタマイズがありますここではそれぞれの利用方法について説明します参考 ) x-servlet マニュアル:HOME > 開発者向けドキュメント > 機能詳細 > スマートフォン対応 (Version2.10.1( ) 以降 ) 1.3 対象本書では以下の x-servlet を対象としています x-servlet Version2.10.1( ) 以降 pg. 6

7 2 共通設定標準利用テーマ変更カスタマイズの各利用方法における共通の設定について説明します / conf/insertheaders/ CSS と JavaScript が定義されているテンプレート本体となるファイル群ですなかでも sp_template_base.xml にはほとんどのデザイン定義が集約されておりそれ以外のファイルは一部の調整を行なっているのみですそのため利用の際には必須となる sp_template_base.xml とその他のファイルを組合せて利用します sp_template_base.xml 標準テンプレート wp_template_base.xml WindowsPhone 用調整テンプレート sp_template_customize.xml カスタマイズ用テンプレート sp_template_customize_sample.xml カスタマイズサンプル sp_template_theme_black.xml テーマテンプレート黒 sp_template_theme_red.xml テーマテンプレート赤 sp_template_theme_blue.xml テーマテンプレート青 sp_template_theme_yellow.xml テーマテンプレート黄 sp_template_theme_orange.xml テーマテンプレート橙 sp_template_theme_green.xml テーマテンプレート緑 sp_template_theme_plain.xml テーマテンプレート白( グラデーションなし ) /conf/uagroupsetting.xml テンプレートを出力するスマートフォンのグループを SP1 と定義していますまた古い BlackBerry 端末 (OS6 未満 ) は CSS3 非対応なのでテンプレートの出力対象外とするためにグループ BlackBerryOLD として定義しています <UAGroup name="sp1"> <And> <StringCondition name="class">sp</stringcondition> <StringCondition name="servicename" negative="true">pc</stringcondition> <And negative="true"> <StringCondition name="browsername">blackberry OS</StringCondition> <NumberCondition name="browserversion" type="lt">6</numbercondition> </And> </And> </UAGroup> pg. 7

8 <UAGroup name="blackberryold"> <And> <StringCondition name="browsername">blackberry OS</StringCondition> <NumberCondition name="browserversion" type="lt">6</numbercondition> </And> </UAGroup> Version2.10.1( ) よりも古いバージョンにおけるスマートフォン向けの設定をリセットするため一部のスマートフォン設定を空設定にし古い BlackBerry 端末には既存の定義ファイルを適用しています /conf/contentsruledefault.xml <Attribute name="insertheader_iphone"> </Attribute> <Attribute name="insertheader_android"> </Attribute> <Attribute name="insertheader_blackberry"> </Attribute> <Attribute name="insertheader_firefoxos"> </Attribute> <Attribute name="insertheader_blackberryold"> conf/insertheaders/blackberry.xml</attribute> pg. 8

9 3 標準利用標準テンプレートに含まれる各コンポーネントの使用方法と使用した際の見た目を説明します 3.1 設定標準テンプレートはデフォルトで有効となっており以下の設定で実現していますこの設定により既存ページの適用させたい要素に対して後述する特定の class 名を指定することでスマートフォンに対してのみテンプレートが有効になります /conf/contentsruledefault.xml <Attribute name="insertheader_windowsphone"> conf/insertheaders/wp_template_base.xml</attribute> <Attribute name="insertheader_sp1"> conf/insertheaders/sp_template_base.xml</attribute> pg. 9

3.2 カラーバリエーション全てのコンポーネントにはカラーの指定が可能で指定できるカラーはここで紹介する 8 パターンですカラー指定が無い場合は白が適用されます 3.2.1 指定方法各カラーに対応した下記の予約 class 名を指定します他のコンポーネントを指定する class 名と併せて指定しますカラーバリエーション (class 名 ) 白 :xwhite 黒

10 3.2 カラーバリエーション全てのコンポーネントにはカラーの指定が可能で指定できるカラーはここで紹介する 8 パターンですカラー指定が無い場合は白が適用されます指定方法各カラーに対応した下記の予約 class 名を指定します他のコンポーネントを指定する class 名と併せて指定しますカラーバリエーション (class 名 ) 白 :xwhite 黒 :xblack 赤 :xred 青 :xblue 黄 :xyellow 橙 :xorange 緑 :xgreen 白 ( グラデーションなし ):xplain カラーバリエーション記述例 ) コンポーネント xlink とカラー xyellow を併記する場合 <a class= xlink xyellow href= >Flex Firm</a> pg. 10

3.3 サイズバリエーション ( 幅 ) コンポーネントによっては横幅のサイズ指定が可能です指定できるサイズはここで紹介する 3 パターンとなっておりコンポーネント毎に指定がない場合のデフォルトサイズが異なります詳細は各 UI コンポーネントの説明をご覧ください 3.3.1 指定方法各サイズに対応した下記の予約 class 名を指定します他のコンポーネントを指定する class 名

11 3.3 サイズバリエーション ( 幅 ) コンポーネントによっては横幅のサイズ指定が可能です指定できるサイズはここで紹介する 3 パターンとなっておりコンポーネント毎に指定がない場合のデフォルトサイズが異なります詳細は各 UI コンポーネントの説明をご覧ください指定方法各サイズに対応した下記の予約 class 名を指定します他のコンポーネントを指定する class 名と併せて指定しますサイズバリエーション (class 名 ) 80%:xeighty 40%:xforty 20%:xtwenty ボタンにおけるサイズバリエーション記述例 ) コンポーネント xlink にサイズ xtwenty を指定する場合 <a class= xlink xtwenty href= >Flex Firm</a> pg. 11

3.4 半角カナ変換フィーチャーフォンページで広く利用されている半角カナ文字を全角カナ文字に変換することでスマートフォンで表示した際に見やすくし違和感をなくします 3.4.1 指定方法特に指定は必要ありません自動的にページ内の半角カナが変換されます表示例 ) 元コンテンツテンプレート適用後 3.

12 3.4 半角カナ変換フィーチャーフォンページで広く利用されている半角カナ文字を全角カナ文字に変換することでスマートフォンで表示した際に見やすくし違和感をなくします指定方法特に指定は必要ありません自動的にページ内の半角カナが変換されます表示例 ) 元コンテンツテンプレート適用後注意事項通常のセレクトメニューに適用する場合は文字列がメニュー内からはみ出る場合がありますのでご注意くださいなおコンポーネントセレクトメニューを利用した場合は自動的に省略表記となりはみ出しません pg. 12

1 指定方法 a 要素に予約クラス名 xlink を指定します記述例 ) <a class= xlink

13 3.5 リンク単一行のリンクとしてブロック化しタップしやすくします文字列が長い場合には幅に収まる範囲で文字列が省略されます指定方法 a 要素に予約クラス名 xlink を指定します記述例 ) <a class= xlink href= >Flex Firm</a> 指定可能なサイズ xeighty xforty ( 指定なし :100%) 表示例 ) 元コンテンツ pg. 13

3.6 複数行リンク複数行のリンクとしてブロック化してタップしやすくします 3.6.1 指定方法 a 要素に予約クラス名 xlinkb を指定します

href= http://www.flexfirm.jp > <span class="xmiddle"> 設備充実!

14 3.6 複数行リンク複数行のリンクとしてブロック化してタップしやすくします指定方法 a 要素に予約クラス名 xlinkb を指定しますまた子要素となる span 要素にクラス名 xmiddle を指定し垂直方向の中央寄せを指定できます記述例 ) <a class= xlinkb href= > <span class="xmiddle"> 設備充実! ワイキキコントミニアム </span> </a> 指定可能なサイズ xeighty xforty ( 指定なし :100%) 表示例 ) 元コンテンツテンプレート適用後 pg. 14

3.7 リストリストの項目に枠線を設けて視認性を向上しますまた内部に a 要素が定義されている場合はブロック化してタップしやすくします文字列が長い場合には幅に収まる範囲で文字列が省略されます 3.7.1 指定方法 ul

15 3.7 リストリストの項目に枠線を設けて視認性を向上しますまた内部に a 要素が定義されている場合はブロック化してタップしやすくします文字列が長い場合には幅に収まる範囲で文字列が省略されます指定方法 ul または ol 要素に予約クラス名 xlist を指定します指定可能なサイズなし記述例 ) <ul class= xlist > <li>x-servlet</li> </ul> 表示例 ) 元コンテンツテンプレート適用後 pg. 15

16 3.8 ボタンボタンを大きくしタップしやすくします指定方法 input 要素の type= submit または type= reset または button 要素にクラス名 xbutton を指定します指定可能なサイズ xforty xtwenty ( 指定なし :80%) 記述例 ) <input class= xbutton type= submit name= send value= 検索 /> 表示例 ) 元コンテンツテンプレート適用後 pg. 16

17 3.9 テキストフィールドテキストフィールド内に余白を設けて大きくしタップしやすくします指定方法 input 要素の type= text または textarea 要素にクラス名 xinput を指定します指定可能なサイズ xforty xtwenty ( 指定なし :80%) 記述例 ) <input class= xinput type= text name= age size= 3 /> 表示例 ) 元コンテンツテンプレート適用後 pg. 17

1 指定方法 label 要素にクラス名 xlabel を指定します指定可能なサイズ xforty xtwenty ( 指定なし :80%) 記述例 ) <label

18 3.10 チェックボックスラジオボタンチェックボックスラジオボタンにおいてスマートフォンでは関連する label 要素がタップできませんがボックス化してタップできるようにしますまた文字列が長い場合には幅に収まる範囲で文字列が省略されます指定方法 label 要素にクラス名 xlabel を指定します指定可能なサイズ xforty xtwenty ( 指定なし :80%) 記述例 ) <label class="xlabel xforty" for= dom > <input id= dom type="checkbox" name="domestic" value="1" /> 国内 </label> 表示例 ) 0 元コンテンツテンプレート適用後 pg. 18

19 3.11 セレクトメニューボタンのようにしてタップしやすくします文字列が長い場合には幅に収まる範囲で文字列が省略されます指定方法 select 要素にクラス名 xselect を指定します指定可能なサイズ xforty xtwenty ( 指定なし :80%) 記述例 ) <select class="xselect" name="from"> <option value="h"> ハワイ </option> <option value="n"> ニューヨーク </option> <option value="o"> 沖縄 </option> <option value="d"> 北海道 </option> </select> 表示例 ) 0 元コンテンツテンプレート適用後注意事項このコンポーネントを適用すると子要素が追加されますその影響により CSS のセレクタによっては CSS が無効となる場合があるのでご注意ください pg. 19

20 3.12 非表示スマートフォンに対してのみ非表示とすることができます絵文字や改行などをスマートフォンでは出力したくない場合に使用します指定方法削除したい要素にクラス名 xinvisible を指定します指定可能なサイズなし記述例 ) <a href="#top"> <span class="xinvisible"> </span><span> ご利用ガイド </span> </a> 表示例 ) 絵文字の削除に利用 0 元コンテンツテンプレート適用後 pg. 20

3.13 簡単 2 列メニュー複数並んだリンクを 2 列のブロックメニューに整形します複数のリンクは div 要素の子である必要がありますまた文字列が長い場合には幅に収まる範囲で文字列が省略されます 3.13.1

スマートフォンでは改行させないようにします指定可能なサイズなし記述例 ) <div class="xto2column"> <a href="#top"> ご利用ガイド </a> <br

21 3.13 簡単 2 列メニュー複数並んだリンクを 2 列のブロックメニューに整形します複数のリンクは div 要素の子である必要がありますまた文字列が長い場合には幅に収まる範囲で文字列が省略されます指定方法リンクの親要素である div 要素にクラス名 xto2column を指定しますヒント br 要素を使ってリンクを改行させてリスト風にデザインしている場合 br 要素に前述の非表示指定 xinvisible を指定しスマートフォンでは改行させないようにします指定可能なサイズなし記述例 ) <div class="xto2column"> <a href="#top"> ご利用ガイド </a> <br class="xinvisible"> <a href="#top"> 会社概要 </a> <br class="xinvisible"> <a href="#top"> 対応機種一覧 </a> </div> 表示例 ) 0 元コンテンツテンプレート適用後 pg. 21

3.14 簡単リスト複数並んだリンクをリストに整形します複数のリンクは div 要素の子である必要がありますまた文字列が長い場合には幅に収まる範囲で文字列が省略されます 3.14.1 指定方法リンクの親要素である div 要素にクラス名 xtolist を指定しますヒント br 要素を使ってリンクを改行させてリスト風にデザインしている場合 br 要素に前述の非表示指定

22 3.14 簡単リスト複数並んだリンクをリストに整形します複数のリンクは div 要素の子である必要がありますまた文字列が長い場合には幅に収まる範囲で文字列が省略されます指定方法リンクの親要素である div 要素にクラス名 xtolist を指定しますヒント br 要素を使ってリンクを改行させてリスト風にデザインしている場合 br 要素に前述の非表示指定 xinvisible を指定しスマートフォンでは改行させないようにします指定可能なサイズなし記述例 ) <div class="xtolist"> <a href="#top "> ご利用カイト </a> <br class="xinvisible"> <a href="#top "> 会社概要 </a> <br class="xinvisible"> <a href="#top "> フライハシーホリシー </a> </div> 表示例 ) 0 元コンテンツテンプレート適用後 pg. 22

23 注意事項このコンポーネントを適用すると子要素が追加されますその影響により CSS のセレクタによっては CSS が無効となる場合があるのでご注意ください pg. 23

24 3.15 簡単並びボタン複数並んだリンクを複数横並びのボタンとして整形します複数のリンクは div 要素の子である必要がありますまた文字列が長い場合には幅に収まる範囲で文字列が省略されます指定方法リンクの親要素である div 要素にクラス名 xtobutton を指定しますヒント br 要素を使ってリンクを改行させてリスト風にデザインしている場合 br 要素に前述の非表示指定 xinvisible を指定しスマートフォンでは改行させないようにします指定可能なサイズなし記述例 ) <div class=" xtobutton"> <a href="#top "> ご利用カイト </a> <br class="xinvisible"> <a href="#top "> 会社概要 </a> <br class="xinvisible"> <a href="#top "> フライハシーホリシー </a> </div> 表示例 ) 0 元コンテンツテンプレート適用後 pg. 24

25 4 テーマの変更テーマを変更することによって標準利用で用意してある全てのコンポーネントに対してデフォルトカラーを一括して変更できますテーマの種類は下記 7 種類を用意しており各テーマは以下の設定ファイルで定義されています黒 :sp_template_theme_black.xml 赤 :sp_template_theme_red.xml 青 :sp_template_theme_blue.xml 黄 :sp_template_theme_yellow.xml 橙 :sp_template_theme_orange.xml 緑 :sp_template_theme_green.xml 白 ( グラデーションなし ):sp_template_theme_plain.xml 4.1 設定テーマを変更するためには以下の設定を行います /conf/uagroupsetting.xml 標準テンプレートとテーマ用テンプレート双方を適用させるためテーマ用テンプレートのグループ SP2 が定義されていますテンプレートファイルは読み込む順序が影響するため標準テンプレートのグループ名を SP1 テーマ用テンプレートのグループ名を SP2 としてください <UAGroup name="sp1"> <And> <StringCondition name="class">sp</stringcondition> <StringCondition name="servicename" negative="true">pc</stringcondition> <And negative="true"> <StringCondition name="browsername">blackberry OS</StringCondition> <NumberCondition name="browserversion" type="lt">6</numbercondition> </And> </And> </UAGroup> <UAGroup name="sp2"> <And> <StringCondition name="class">sp</stringcondition> <StringCondition name="servicename" negative="true">pc</stringcondition> pg. 25

26 <And negative="true"> <StringCondition name="browsername">blackberry OS</StringCondition> <NumberCondition name="browserversion" type="lt">6</numbercondition> </And> </And> </UAGroup> /conf/contentsruledefault.xml 上記で追加したグループ定義に対してそれぞれ適用するテンプレートファイルを指定しますテーマファイルは読み込まれる順序が重要なためグループ SP2 に対してテーマファイルを指定しますここでは例としてテーマ黒を指定しています <Attribute name="insertheader_windowsphone"> conf/insertheaders/wp_template_base.xml</attribute> <Attribute name="insertheader_sp1"> conf/insertheaders/sp_template_base.xml</attribute> <Attribute name="insertheader_sp2">conf/insertheaders/sp_template_theme_black.xml</attrib ute> pg. 26

27 4.2 適用イメージ各テーマの適用イメージは以下の通りです黒赤青黄橙緑白 ( グラデーションなし ) pg. 27

28 5 カスタマイズテンプレートをよりサイトに適したデザインへカスタマイズすることができますカスタマイズはカスタマイズ用のテンプレートファイル conf/insertheaders/sp_template_customize.xml を編集し標準のテンプレートに上書きして適用しますなおカスタマイズの例として conf/sp_template_customize_sample.xml を同梱しておりますので参考にしてください 5.1 設定カスタマイズ用のテンプレートファイルを有効にするには以下の設定を行います /conf/uagroupsetting.xml カスタマイズ用にスマートフォンを表すグループ SP3 が定義されています <UAGroup name="sp3"> <And> <StringCondition name="class">sp</stringcondition> <StringCondition name="servicename" negative="true">pc</stringcondition> <And negative="true"> <StringCondition name="browsername">blackberry OS</StringCondition> <NumberCondition name="browserversion" type="lt">6</numbercondition> </And> </And> </UAGroup> /conf/contentsruledefault.xml 上記のグループ定義に対してカスタマイズ用のテンプレートファイルを指定します <Attribute name="insertheader_windowsphone"> conf/insertheaders/wp_template_base.xml</attribute> <Attribute name="insertheader_sp1"> conf/insertheaders/sp_template_base.xml</attribute> <Attribute name="insertheader_sp2">conf/insertheaders/sp_template_theme_black.xml</attrib ute> <Attribute name="insertheader_sp3">conf/insertheaders/sp_template_customize.xml</attribut e> pg. 28

29 5.2 カスタマイズ項目カスタマイズはカスタマイズ用テンプレートファイル sp_template_customize.xml に定義されている以下の項目に対して行うことができますフォント対象コンポーネントリンク複数行リンクリストボタンテキストフィールドチェックボックスラジオボタンセレクトメニュー簡単並びボタン角丸対象コンポーネントリストボタンテキストフィールドチェックボックスラジオボタンセレクトメニュー簡単リスト簡単並びボタン背景色文字色対象コンポーネントリンク複数行リンクリストボタンテキストフィールドチェックボックスラジオボタンセレクトメニュー簡単 2 列メニュー簡単リスト簡単並びボタン矢印色対象コンポーネントリンク複数行リンクリストセレクトメニュー簡単リストサイズ対象コンポーネントリンク複数行リンクリストボタンテキストフィールドチェックボックスラジオボタンセレクトメニュー簡単 2 列メニュー簡単リスト簡単並びボタン pg. 29

30 6 注意事項 6.1 テンプレートファイルの編集について各テンプレートファイルは弊社にて実機テストを実施しておりますお客様にて修正を行った場合の動作保証は致しかねます必要に応じてお客様による実機テストを行なってください 6.2 jquery について一部のコンポーネントでは jquery を利用しており Google の CDN(Content Delivery Network) からファイルを取得しています取得元を変更する場合は /conf/insertheaders/ sp_template_base.xml を編集してください 6.3 非対応端末 BlackBerry の OS6 未満は CSS3 に対応していないため非対応です 6.4 端末制限 WindowsPhone にはグラデーションによる装飾は行いません 6.5 利用制限端末の横向き表示については実機テストを行なっておりません必要に応じてお客様による実機テストを行なってください同一サイズを指定してもコンポーネントの種類が異なる場合はデザインの都合上若干サイズが異なる場合があります 6.6 サンプルテンプレートとの違い Version2.10.1( ) よりも古い製品パッケージに含まれていたサンプルテンプレートファイル conf/sp_template_sample.xml との相違点は下記の通りです xlabel を指定する label 要素の記述構成が単独要素から input 要素の親要素へ変更になりました WindowsPhone のグラデーション表示を廃止としました xbutton および xinput のデフォルトの横幅がわずかに変更になりましたページ全体の font-size 指定 150% を廃止しコンポーネント毎に medium を指定するように変更しました pg. 30

31 ページ内全てのリンクに対する font-size 指定 115% を廃止しましたコンポーネントのクラス指定を行ったリンクに対して表示リセットを追加しました xlinkb の右矢印が上部からの固定位置から垂直方向の中央寄せになりましたデフォルトのグラデーション色がやや濃くなりましたテキストフィールドの角が角丸となりました pg. 31

x-Servlet Version 2.10 開発者ガイド

x-Servlet Version 2.10 開発者ガイド Version 2.10 開発者ガイド - スマートフォンテンプレート編 - 更新履歴 2012/11/21 初版発行 2013/12/25 Web マニュアルへのリンクを修正 2015/3/19 x-servlet Ver2.10.3 リリースに伴う変更 2 共通設定のファイル内容に"insertHeader_FirefoxOS"を追加 pg. 2

更新履歴 2012/11/21 初版発行 2013/12/25 Web マニュアルへのリンクを修正 2015/3/19 x-servlet Ver リリースに伴う変更 2 共通設定 のファイル内容に "insertheader_firefoxos" を追加 2018/11/26 x-se

更新履歴 2012/11/21 初版発行 2013/12/25 Web マニュアルへのリンクを修正 2015/3/19 x-servlet Ver リリースに伴う変更 2 共通設定のファイル内容に "insertheader_firefoxos" を追加 2018/11/26 x-se