目 次 第 1 章 はじめに HTML の 記 述 スタイルシートの 利 用 絵 文 字 の 利 用... 8 第 2 章 画 像 変 換 変 換 画 像 の 基 準 幅 画 像 変 換 対 象 となるファイル

Transcription

1 Ver.2 ユーザマニュアル 開 発 リファレンス 第 2 版 最 終 更 新 日 2011/6/8 1

2 目 次 第 1 章 はじめに HTML の 記 述 スタイルシートの 利 用 絵 文 字 の 利 用... 8 第 2 章 画 像 変 換 変 換 画 像 の 基 準 幅 画 像 変 換 対 象 となるファイル 画 像 サイズ 自 動 変 換 アニメーション GIF オートレイアウト 画 像 個 別 の 画 像 変 換 指 示 非 対 応 端 末 向 けのフォーマット 変 換 用 意 した 画 像 の 出 し 分 け 画 像 の 転 送 禁 止 設 定 画 像 が 異 なるサーバに 存 在 する 場 合 パラメータによる 動 的 画 像 の 変 換 (ラウンドアバウト ビヨンドのみ)...15 第 3 章 端 末 情 報 ファイル 端 末 情 報 ファイルの 用 途 利 用 可 能 な 端 末 情 報 ファイルの 項 目 端 末 情 報 のリクエストヘッダ 出 力 非 対 応 端 末 設 定 ファイル 非 対 応 端 末 の 制 御...18 第 4 章 端 末 グループ

3 4-1 端 末 グループの 種 類 端 末 グループのネーミングルール ユーザー 端 末 グループの 定 義 初 期 設 定 済 のユーザー 端 末 グループ ユーザー 端 末 グループの 利 用 クローラーグループの 定 義 クローラーグループの 利 用 グループ 設 定 の 再 読 み 込 み...22 第 5 章 表 示 コントロール(PI) 利 用 可 能 な 端 末 情 報 PI で 使 用 できる 書 式...24 第 6 章 CSS 変 換 シート CSS 変 換 シートの 配 置 場 所 CSS 変 換 シートの 内 容 CSS 変 換 ルール 適 用 の 優 先 度...30 第 7 章 CSS ファイル 切 り 替 え 書 式...32 第 8 章 HTML 変 換 シート HTML 変 換 シートの 種 類 HTML 変 換 シートの 書 式 HTML 変 換 シートにおける 端 末 グループ 独 自 言 語 変 換 シートの 作 成 編 集 HTML 変 換 シートの 適 用 HTML 変 換 シートの 再 読 み 込 み...37 第 9 章 キャラクタエンコーディング 変 換

4 9-1 変 換 対 象 のキャラクタエンコーディング 使 用 可 能 な 文 字 セット Content-Type 変 換 キャラクタエンコーディングの 指 定...39 第 10 章 付 録 端 末 情 報 ファイルの 内 容 (terminfo.csv) 初 期 設 定 済 のユーザー 端 末 グループ(device-group.conf)

5 改 訂 履 歴 版 数 発 行 日 改 訂 内 容 第 1 版 2011 年 5 月 24 日 初 版 発 行 第 2 版 2011 年 6 月 8 日 目 次 の 項 番 () 以 下 を 省 略 一 部 見 出 しを 変 更 ( 内 容 への 変 更 無 し) ソース 設 定 ファイルの 表 記 を 変 更 ( 行 番 号 追 加 等 幅 フ ォント 一 部 記 号 の 半 角 表 記 フォントカラーではなく 書 体 を 用 いた 強 調 フキダシを 削 除 ) 1 章 1-1 (1) を 削 除 し 1 章 1-1 と 統 合 1 章 1-2 (1) を 削 除 し 1 章 1-2 と 統 合 2 章 2-3 (4) を 削 除 し 2 章 2-3 (3)と 統 合 10 章 10-1 の 表 の 空 欄 に 斜 線 追 加 同 一 内 容 のセルの 結 合 5

6 第 1 章 はじめに 本 書 は ラウンドアバウトの 機 能 全 般 のリファレンスになります ラウンドアバウトを 初 めてお 使 いにな る 場 合 には まずは 別 紙 ラウンドアバウト 2 スタートガイド をお 読 みいただくと 開 発 がスムーズに 始 められます ラウンドアバウトをカスタマイズして 使 うなど 機 能 の 詳 細 について 知 りたい 場 合 は 本 書 を お 読 みください 文 中 の 各 種 ファイルについて 配 置 ディレクトリなどはパッケージに 同 梱 の README.html に 詳 細 が 記 載 されていますので そちらを 参 照 ください 文 中 には Apache の 設 定 に 係 わる 記 載 がありますが こちらについての 詳 細 は 別 紙 Apache 設 定 リファレンス で 解 説 されていますので そちらを 参 照 ください 1-1 HTML の 記 述 通 常 の XHTML/HTML で 必 要 なものを 入 れられます ラウンドアバウトを 使 う 上 でポイントとなる 以 下 の 4 つの 宣 言 meta について 解 説 します 01 <?xml version="1.0" encoding="utf-8"?> 02 <?ra-page viewport="auto" image-convert="no" g="sp"?> 03 <meta name="disparea" content="vga" /> 04 <meta name="viewport" content="width=device-width, initial-scale=0.666, maximum-scale=0.666, minimum-scale=0.666" /> 1 ラウンドアバウトでは XHTML を 標 準 として 推 奨 していますので 始 めに XML 宣 言 を 書 きます (1 行 目 ) 2 画 像 変 換 を 行 わない 場 合 に スマートフォンの viewport 設 定 に 最 適 値 を 与 えるラウンドアバウトの 機 能 です ラウンドアバウトでは VGA ベースのコンテンツ 作 成 がデフォルト 設 定 で スマートフォン には 標 準 解 像 度 である HVGA サイズに 変 換 して 出 力 します 画 面 の 大 きいスマートフォンでは 画 像 変 換 を 行 うと 画 像 が 劣 化 して 見 えるため 作 成 した VGA ベースの 画 像 をそのまま 出 したい 場 合 には この 指 定 を 入 れてください XML 宣 言 より 後 HTML タグ 出 現 前 に 書 きます この 設 定 を 入 れるとランドスケープビュー 時 でも 最 適 な 表 示 になります 通 常 の viewport 設 定 を 併 記 した 場 合 ラウンドアバウトが 有 効 であれば この ra-page が 有 効 となります (2 行 目 ) 3 i モードブラウザ 2.x で VGA モードを 使 用 する 指 定 です ラウンドアバウトは i モードブラウザ 2.x 端 末 を VGA 端 末 として 扱 いますので この 設 定 は 必 ず 入 れてください (3 行 目 ) 4 通 常 の viewport 設 定 です 上 記 は VGA ベースでコンテンツを 作 成 し ラウンドアバウトを 通 さな 6

7 い 場 合 に 適 切 な 設 定 例 です 2を 併 記 していてラウンドアバウトが 有 効 な 場 合 は こちらは 無 効 と なり2が 有 効 となります (4 行 目 ) i モードブラウザ 1.0 搭 載 端 末 に 対 しては 1 行 目 が XML 宣 言 となっている 場 合 コンテンツが XHTML と 解 釈 され Content-Type が application/xhtml+xml に 自 動 設 定 されます 1-2 スタイルシートの 利 用 ラウンドアバウトでは 外 部 CSS の 内 容 を 一 部 の 機 種 向 けに style 属 性 へとインライン 展 開 します また CSS 変 換 機 能 ( 第 6 章 CSS 変 換 シート 参 照 )は 外 部 CSS ファイルと 連 動 して 機 能 します これらの 機 能 を 使 うために CSS は 外 部 ファイルとして 用 意 してください style タグ style 属 性 を 使 った 場 合 は 前 述 の 機 能 は 使 えませんので 注 意 してください CSS の 記 述 方 法 は 通 常 のスタイルシートの 文 法 に 従 って 記 述 規 則 はサポートしていませんので 複 数 ファイルを 読 み 込 む 場 合 は link タグを 使 用 します (1) i モードブラウザ 1.0 搭 載 端 末 への 対 応 外 部 CSS に 対 応 してない i モードブラウザ 1.0 搭 載 端 末 (900 シリーズ および それ 以 前 に 発 売 の 機 種 )には 外 部 CSS の 内 容 が style 属 性 にインライン 展 開 されます i モードブラウザ 1.0 で 使 用 できるプロパティは font-size color background-color です このプロパテ ィを 効 かせるには div か span タグに class 属 性 または id 属 性 を 1 つだけ 指 定 して 外 部 CSS に 設 定 値 を 書 きます CSS の 書 き 方 は 通 常 どおりです html ファイル 01 <div class= foo >... </div> css ファイル 01.foo { font-size:small; color: #EEEEEE; background-color: #333333; } (2) 利 用 する 際 の 制 限 事 項 以 下 の 場 合 i モードブラウザ 1.0 搭 載 端 末 への CSS 展 開 機 能 は 使 えません HTML 側 では id 属 性 と class 属 性 を 両 方 指 定 class 属 性 に 複 数 のクラスを 指 定 style 属 性 と class 属 性 を 同 時 に 指 定 7

8 1-3 絵 文 字 の 利 用 (1) 対 象 となる 絵 文 字 絵 文 字 は 下 記 のいずれかを 指 定 します docomo 絵 文 字 16 進 数 表 記 10 進 数 表 記 Shift_JIS コード 出 力 SoftBank 絵 文 字 16 進 数 表 記 au 絵 文 字 アイコン 番 号 表 記 からの 変 換 はオプションです これら の 絵 文 字 表 記 から 変 換 したい 場 合 は 開 発 者 サイト ラウンドアバウト デベロッパーコネクション ( より 変 換 シートをダウンロードしてお 使 いいただけ ます (2) 利 用 する 際 の 制 限 事 項 HTMLに 含 まれるすべての 絵 文 字 が 変 換 対 象 となるため title 要 素 や 属 性 内 に 記 述 する 絵 文 字 は 正 し く 変 換 表 示 できない 場 合 があります 16 進 数 表 記 時 の 英 字 は 小 文 字 で 記 述 してください 8

9 第 2 章 画 像 変 換 2-1 変 換 画 像 の 基 準 幅 ラウンドアバウトの 画 像 変 換 は ページ 内 のどんな 大 きさの 画 像 も 解 像 度 の 違 う 端 末 で 見 ても 同 じ 比 率 で 見 えるように 変 換 します その 変 換 のためには 個 々の 画 像 が 何 ピクセルの 解 像 度 の 画 面 を 想 定 して 作 られているのかを 設 定 しておく 必 要 があります デフォルト 設 定 は タブレット 端 末 を 除 く 現 在 のモバイル 端 末 の 最 高 スペックとなる VGA 画 面 の 幅 480 ピクセルになっています 2-2 画 像 変 換 対 象 となるファイル ラウンドアバウトの 画 像 変 換 対 象 となるファイルは 以 下 のタグや 属 性 により HTML 上 から 参 照 された 画 像 で かつウェブサーバのファイルシステム 上 からアクセス 可 能 な 画 像 ファイルです 画 像 の 種 類 記 述 方 法 インライン 画 像 img タグの src 属 性 背 景 画 像 body タグの background 属 性 body, div, p, table, tr, th, td, h1~h6, ol, ul, li, span タグの style 属 性 で 指 定 し た background および background-image プロパティ 外 部 CSS 内 で 指 定 した background background-image プロパティ イメージボタン input タグの src 属 性 リストのマーカー 画 li タグの style 属 性 で 指 定 した list-style-image プロパティ 像 外 部 CSS 内 で 指 定 した list-style-image プロパティ 画 像 リンク a タグの href 属 性 1 つのタグや 属 性 に 上 記 画 像 を 2 つ 以 上 組 み 合 わせて 指 定 することはできません 一 般 的 なウェブサーバの 構 成 で HTML と 画 像 が 同 一 サーバ 上 に 存 在 する 場 合 ラウンドアバウトが 有 効 なディレクトリ 以 下 の すべての 画 像 が 変 換 対 象 となります ただし 絶 対 URL で 画 像 ファイルを 指 定 した 場 合 は 変 換 の 対 象 となりません 2-3 画 像 サイズ 自 動 変 換 (1) 画 像 幅 に 合 わせた 縮 小 変 換 9

10 元 画 像 の 横 幅 がアクセスした 端 末 の 画 面 幅 (ブラウザの 可 視 領 域 )に 収 まりきらない 場 合 は 可 視 領 域 に 収 まるように 自 動 的 に 画 像 を 縮 小 変 換 し 出 力 します (2) ブラウザキャッシュ 容 量 に 合 わせた 自 動 容 量 調 整 全 画 像 を 含 めた HTML サイズが 端 末 のブラウザキャッシュ 容 量 に 納 まるように JPEG 高 圧 縮 化 パレ ット 数 削 減 による 画 像 容 量 の 調 整 を 行 います (3) 画 像 を 変 換 してもブラウザキャッシュ 容 量 内 に 収 まらない 場 合 の 代 替 処 理 画 像 を 最 低 品 質 まで 劣 化 させても 端 末 のブラウザキャッシュ 容 量 内 に 収 まらない 場 合 ラウンドアバウ トはスペーサ 画 像 もしくは 代 替 文 字 列 に 置 き 換 えて 出 力 します スペーサ 画 像 は1ピクセルx1ピクセル のGIF 画 像 (GIFに 対 応 していない 端 末 はPNG)です ページ 全 体 のレイアウトを 保 持 するため 変 換 後 の 画 像 と 同 じ 大 きさとなるようimgタグにwidth height 属 性 を 追 加 し スペーサ 画 像 を 引 き 伸 ばします 代 替 文 字 列 は alt 属 性 が 使 用 されます なお スペーサ 画 像 に 変 換 せずに 代 替 文 字 列 を 優 先 して 表 示 したい 場 合 は roundabout-vhost.conf で 設 定 が 可 能 です 詳 しくは 別 紙 Apache 設 定 リファレンス の RALCSpacerImage を 参 照 ください 2-4 アニメーション GIF アニメーション GIF はローカルカラーマップのアニメーション GIF に 変 換 されます また 元 画 像 のアニメ ーション GIF のフレーム 数 が 5 フレームを 超 える 画 像 の 場 合 は 最 初 の 1 フレーム 目 だけが 出 力 されま す GIF 形 式 の 画 像 に 対 応 していない 端 末 には 最 初 の 1 フレーム 目 の 画 像 が PNG に 変 換 され 出 力 され ます アニメーション GIF は 各 フレームの 縦 横 サイズが 全 て 同 一 である 必 要 があります 画 像 編 集 ソフト によっては デフォルト 設 定 が 各 フレームの 差 分 データしか 持 たないようになっていますので 注 意 が 必 要 です 2-5 オートレイアウト ラウンドアバウトを 利 用 した 開 発 では 基 準 となる 画 面 幅 を 決 めた 上 での 開 発 を 推 奨 しています ラウン ドアバウトでは 決 められた 基 準 から 決 められたルールで 自 動 的 に 画 像 を 変 換 し すべての 端 末 で 表 示 できるように 変 換 します 例 えば 基 準 となる 画 面 幅 を VGA と 決 めた 場 合 QVGA 画 面 幅 の 端 末 に 対 しては 縮 尺 比 0.5 に 画 像 を 自 動 変 換 し 出 力 します 10

11 ラウンドアバウト 設 定 01 RALCBaseWidth RALCImageScaleList 96,120,225,228,230,232,234,240,314,320,468,480 上 記 の 例 は 基 準 画 面 幅 を VGA にした 場 合 の 設 定 となります オートレイアウトの 設 定 の 詳 細 に 関 して は 別 紙 Apache 設 定 リファレンス RALCBaseWidth RALCImageScaleList 項 を 参 照 ください オートレイアウト 機 能 はデフォルトでは 有 効 で サイト 全 体 に 適 用 されています 設 定 により 無 効 にする ことも 可 能 です 画 像 を 個 別 にオートレイアウトさせることも 可 能 ですので 全 体 の 設 定 を 無 効 にするこ とで よりユーザーの 意 思 に 近 く 自 由 度 の 高 い 表 現 が 可 能 となります 2-6 画 像 個 別 の 画 像 変 換 指 示 オートレイアウトでは ページ 全 体 サイト 全 体 の 画 像 に 適 用 されますが 画 像 個 別 に 変 換 指 示 を 設 定 することも 可 能 です そのためには img タグや body タグにラウンドアバウト 固 有 の 属 性 を 追 加 します (1) ra:width 属 性 の 追 加 1 オートスケールの 有 効 / 無 効 を 指 定 する 画 像 に 対 し 個 別 にオートスケールを 有 効 にする 場 合 は 以 下 のように 指 定 します 01 <img src="./img/example.jpg" ra:width="on" /> また 逆 に 特 定 の 画 像 に 対 し オートスケールを 無 効 にする 場 合 には 以 下 のように 指 定 します 01 <img src="./img/example.jpg" ra:width="off" /> ra:width 属 性 はインライン 画 像 (img タグ)および 画 像 リンク(a タグ)にのみ 有 効 です 2 画 像 幅 の 相 対 値 指 定 サムネイル 画 像 など 大 きな 画 像 を 小 さく 使 いたい 場 合 で かつ どの 解 像 度 の 端 末 で 見 ても 画 面 サイ ズに 対 して 同 じ 比 率 の 大 きさで 見 えるようにしたい 場 合 は ra:width 属 性 で r という 単 位 をつけて 指 定 します 例 えば 200 ピクセルある 画 像 を 基 準 幅 の 端 末 で 80 ピクセルに 縮 小 した 状 態 で 表 示 し 他 の 解 像 度 の 11

12 端 末 でも 同 じ 大 きさに 見 えるようにするには 以 下 のように 指 定 します 01 <img src="./img/example.jpg" ra:width="80r" /> 画 像 の 大 きさが 指 定 した 値 より 小 さい 場 合 拡 大 はしません バイト 数 が 大 きすぎる 画 像 は 変 換 対 象 外 となりますので 注 意 してください 変 換 対 象 とするバイト 数 を 変 更 することもできます 詳 しくは Apache 設 定 リファレンス を 参 照 ください 3 画 像 幅 の 絶 対 値 指 定 画 像 を どの 解 像 度 の 端 末 で 見 ても 同 じピクセル 数 で 出 力 をさせたい 場 合 は ra:width 属 性 で 指 定 を 行 います 指 定 したい 横 幅 ピクセル 数 を 単 位 をつけずに 書 きます 画 像 を 横 幅 120 ピクセルで 出 力 させ たい 場 合 は 以 下 のように 指 定 します 01 <img src="./img/example.jpg" ra:width="120" /> (2) ra:size 属 性 の 追 加 ラウンドアバウトでは 容 量 計 算 の 際 に ローカルに 存 在 するファイルを 直 に 参 照 してファイル 容 量 を 取 得 します しかし 外 部 ファイル( 絶 対 URL で 指 定 されたファイル)の 容 量 は 把 握 することができません その 場 合 は ra:size 属 性 を 利 用 し ファイルサイズを 通 知 することで より 精 度 の 高 い 容 量 計 算 を 行 う ことが 可 能 になります 01 <img src=" ra:size="1024" /> 上 記 では 画 像 を 1024 バイトと 指 定 します この 指 定 で ラウンドアバウトは 端 末 が 持 つコンテンツ 表 示 許 容 量 から 1024 バイトを 差 し 引 いた 容 量 で 容 量 計 算 を 行 います 画 像 以 外 では FlashやCSSもra:size 属 性 を 利 用 することで 容 量 の 通 知 が 可 能 です ra:size 属 性 は 画 像 を 指 定 できる 全 てのタグと link object script タグで 使 用 できます 01 <object ra:size="12345" data=" 12

13 (3) ra:convert 属 性 の 追 加 コンテンツの 中 には 肖 像 権 がある 画 像 や 著 作 権 の 事 情 で 画 像 を 変 換 できない 場 合 があります その 場 合 以 下 のように 指 定 することで 画 像 変 換 対 象 から 外 すことが 可 能 です 01 <img src="./img/example.jpg" ra:convert="no" /> 指 定 された 画 像 は 完 全 に 画 像 変 換 対 象 から 外 されます 但 し 自 動 容 量 調 整 の 容 量 計 算 のために 画 像 の 容 量 は 計 算 対 象 に 含 まれます (4) 背 景 画 像 の 変 換 指 示 CSS で 指 定 する 背 景 画 像 についても ra:width 属 性 ra:size 属 性 ra:convert 属 性 が 使 えます 背 景 画 像 に 変 換 指 示 を 行 うには 背 景 画 像 を 含 んだセレクタ 内 に ラウンドアバウト 拡 張 のプロパティ 名 を 使 います 値 は 属 性 の 場 合 と 同 じものが 使 えます 属 性 名 ra:width ra:size ra:convert 拡 張 プロパティ 名 -roundabout-width -roundabout-size -roundabout-convert 01.foo { 02 background-image: url(a.jpg); 03 -roundabout-width: 120r; 04 } 2-7 非 対 応 端 末 向 けのフォーマット 変 換 用 意 した 画 像 フォーマットに 対 応 していない 端 末 からのアクセス 時 には 自 動 的 に 端 末 で 表 示 可 能 な 画 像 フォーマットに 変 換 して 出 力 します 変 換 対 象 フォーマット: JPEG GIF 8 ビット PNG BMP インターレース 画 像 プログレッシブ JPEG 8 ビット 以 上 の PNG はサポートしていません 13

14 2-8 用 意 した 画 像 の 出 し 分 け 肖 像 権 や 著 作 権 の 事 情 などで 画 像 を 自 動 変 換 させたくない 場 合 は 予 め 段 階 的 に 用 意 された 画 像 ( 大 中 小 )をアクセスした 端 末 のスペック( 横 幅 ピクセル 数 )で 出 し 分 ける 事 ができます 設 定 例 (roundabout-vhost.conf): 以 下 は roundabout-vhost.conf の 初 期 設 定 と 同 じです 01 RALCImgFileDispatch _XS 02 RALCImgFileDispatch _S 03 RALCImgFileDispatch _M 04 RALCImgFileDispatch _L 05 RALCImgFileDispatch _XL HTML 記 述 01 <img src="./img/example_l.jpg" /> 上 記 の 例 では 拡 張 子 を 除 いたファイル 名 の 末 尾 が RALCImgFileDispatch で 指 定 した 末 尾 "_L"と 一 致 するため 画 像 切 り 替 えの 対 象 となります ラウンドアバウトが 動 作 している 環 境 下 では QVGA 端 末 のアクセス 時 には 末 尾 "_M"が 使 用 されるため 画 像 example_m.jpg が 表 示 されます なお RALCImgFileDispatch を 利 用 する 場 合 はオートレイアウト 機 能 を OFF また 画 像 に 無 変 換 指 定 (ra:convert= no )を 行 ってください オートレイアウト 機 能 が ON の 場 合 画 像 切 り 替 え 後 にオートレイ アウトがかかってしまい 予 期 しない 変 換 となる 場 合 があります 設 定 の 詳 細 は 別 紙 Apache 設 定 リファレンス の RALCImgFileDispatch 項 を 参 照 ください 2-9 画 像 の 転 送 禁 止 設 定 docomo au SoftBank の 3 キャリアに 転 送 禁 止 フラグを 設 定 することが 可 能 です 画 像 を 転 送 禁 止 に するには 画 像 のコメント 領 域 に 以 下 の 文 字 列 を 埋 め 込 みます 01 kddi_copyright=on,copy="no" SoftBank には 画 像 の Content-Type を Forward Lock 方 式 の DRM Message の 型 にしているた め PC ブラウザでは 画 像 が 表 示 されない 場 合 があります 2-10 画 像 が 異 なるサーバに 存 在 する 場 合 HTML と 画 像 ファイルが 異 なるサーバ 上 に 存 在 している 場 合 でも 画 像 ファイルがマウントされ 14

15 mod_ralc 側 から 画 像 ファイルが 参 照 できる 環 境 であれば 画 像 変 換 を 行 うことができます 以 下 の 例 では HTML サーバ と 画 像 サーバ img.example.jp とで 構 成 される 環 境 で 画 像 サーバ 上 のドキュメントルートが HTML サーバ 上 のパス/mnt/img/htdocs にマウントされている 場 合 を 想 定 しています 設 定 例 (roundabout-vhost.conf): 01 RALCImageServer img.example.jp /mnt/img/htdocs HTML 記 述 01 <img src=" /> 2-11 パラメータによる 動 的 画 像 の 変 換 (ラウンドアバウト ビヨンドのみ) パラメータも 含 めて 1 つの 画 像 として 扱 うことで パラメータの 値 によって 動 的 に 切 り 替 わる 画 像 ( 地 図 画 像 など)でも 画 像 変 換 を 行 うことができます 含 めたいパラメータ 名 を ImageApplicatioinParam ディレクティブにて 設 定 します 複 数 設 定 できます 以 下 の 例 では id site cat のパラメータ 名 を 動 的 画 像 のキーに 設 定 しています 01 <img src="image.gif?id= &session=12345&site=5&cat=1&guid=on " /> 下 記 1と2は 同 じ image.gif でも パラメータが 異 なるため 別 の 画 像 として 扱 われます image.gif?id= &site=5&cat=1 image.gif?id= &site=7&cat=3 1 2 また 動 的 画 像 のキーとなるパラメータの 指 定 を 同 じ 画 像 のパラメータ 群 の 中 に 含 めることもできます キーとなるパラメータを とあるパラメータ 名 の 値 にすることで この 値 を 書 き 換 えることで キーとなる パラメータの 増 減 に 即 座 に 対 応 することができます 設 定 は ImageApplicatioinParamByQuery ディレク ティブにて 行 います 以 下 の 例 では 動 的 画 像 のキーとなるパラメータをパラメータ 値 として 持 たせるためのパラメータ 名 を _iap と 設 定 し id site cat のパラメータ 名 を 動 的 画 像 のキーに 設 定 しています 15

16 01 <img src="image.gif?id= &session=12345&site=5&cat=1&guid=on&_iap=id,site,cat" /> さらに パラメータ 名 stat を 動 的 画 像 のキーに 追 加 する 場 合 は 以 下 のようにします 01 <img src="image.gif?id= &session=12345&site=5&cat=1&guid=on& stat=2_iap=id,site,cat,stat " /> 詳 しい 設 定 方 法 については 別 紙 Apache 設 定 リファレンス の ImageApplicatioinParam ImageApplicatioinParamByQuery 項 を 参 照 ください 16

17 第 3 章 端 末 情 報 ファイル ラウンドアバウトではすべての 端 末 の 詳 細 なスペック 情 報 を 内 部 のデータベースとして 持 っています 画 像 変 換 ( 第 2 章 参 照 )や 表 示 コントロール(PI)( 第 5 章 参 照 )はすべてこの 情 報 を 元 に 動 作 していま す 3-1 端 末 情 報 ファイルの 用 途 ラウンドアバウトの 画 像 変 換 や 言 語 変 換 では より 端 末 に 適 したコンテンツを 出 力 するため 端 末 情 報 ファイルを 利 用 します また 端 末 情 報 はラウンドアバウトが 利 用 するのみならず バックエンドに 配 備 されるアプリケーションでも 利 用 することが 可 能 です 3-2 利 用 可 能 な 端 末 情 報 ファイルの 項 目 第 10 章 付 録 の 端 末 情 報 ファイルの 内 容 を 参 照 ください 3-3 端 末 情 報 のリクエストヘッダ 出 力 端 末 情 報 はリクエストヘッダとして PHP などのアプリケーションに 渡 されます アプリケーション 側 では リクエストヘッダから 端 末 情 報 を 取 得 することにより 機 種 情 報 を 利 用 した 処 理 を 行 うことができます 端 末 情 報 ヘッダは X-RA-( 項 目 名 ): ( 値 ) の 形 式 で 追 加 されます 端 末 グループのように 値 が 複 数 とな る 場 合 は 複 数 個 のリクエストヘッダが 追 加 されます 端 末 情 報 ヘッダは HTTP ヘッダの 一 般 的 な 書 式 に 則 り 各 単 語 の 先 頭 は 大 文 字 で 送 出 されます 端 末 情 報 ヘッダの 01 X-RA-Device-Name: N X-RA-Screen-Height: X-RA-Device-Group: DCM 04 X-RA-Device-Group: L2M 追 加 される 端 末 情 報 の 項 目 は RALCTerminfoHeader ディレクティブで 指 定 します 3-4 非 対 応 端 末 設 定 ファイル 17

18 ラウンドアバウトではキャッシュサイズが 低 すぎるなど 端 末 依 存 の 問 題 で 正 しく 表 示 を 行 うことができ ない 可 能 性 の 高 い 端 末 を 非 推 奨 端 末 としています これらの 非 推 奨 端 末 は 非 対 応 端 末 設 定 ファイル (unsupport.csv)のデフォルト 値 となっています 非 対 応 端 末 設 定 ファイルはユーザーが 自 由 に 変 更 可 能 です 非 対 応 対 象 機 種 を 追 加 する 場 合 は 端 末 情 報 ファイル(terminfo.csv)に 記 載 の Device-Id または Carrier または 端 末 グループ 名 を 非 対 応 端 末 設 定 ファイルに 追 加 してください 端 末 グループ 名 を 指 定 する 場 合 は 先 頭 ください 端 末 グループについては 第 4 章 端 末 グループ を 参 照 ください 3-5 非 対 応 端 末 の 制 御 ラウンドアバウトでは 非 対 応 端 末 の 制 御 方 法 として 以 下 の 方 法 を 提 供 しています (A) 非 対 応 端 末 向 けページへのリダイレクト( 非 対 応 端 末 からアクセスがあった 場 合 ) (B) 非 対 応 端 末 かどうかを 示 すリクエストヘッダ X-RA-Unsupport の 設 定 非 対 応 ページへのリダイレクトを 使 用 する 場 合 RALCUnsupportUrl ディレクティブでリダイレクト 先 URL を 指 定 します リダイレクト 機 能 を 使 用 しない 場 合 は X-RA-Unsupport ヘッダをアプリケーションから 参 照 することによ り 非 対 応 端 末 かどうかを 判 定 して 処 理 を 行 うことができます 非 対 応 端 末 からアクセスしたときのリクエストヘッダ: X-RA-Unsupport: 1 対 応 端 末 からアクセスしたときのリクエストヘッダ: X-RA-Unsupport: 0 18

19 第 4 章 端 末 グループ 端 末 グループは いくつかの 端 末 をグルーピングしたものです 端 末 グループは XHTML や CSS 出 し 分 けの 判 定 条 件 として 利 用 したり 端 末 情 報 ヘッダとしてリクエストヘッダに 追 加 したりできます 4-1 端 末 グループの 種 類 端 末 グループにはユーザー 端 末 グループ クローラーグループがあり ユーザー 定 義 が 可 能 です テ キスト 形 式 の 設 定 ファイルです 4-2 端 末 グループのネーミングルール グループの 名 称 は ユーザーが 自 由 に 定 義 できます 使 用 可 能 な 文 字 は 半 角 英 数 字 のみで 記 号 は 使 用 できません また 数 字 のみのグループ 名 は 使 用 できません ユーザー 端 末 グループ 名 の IPHONE DCM KDDI クローラーグループ 名 の crawlergoogle crawleryahoo 使 用 できない 名 前 の ( 数 字 のみ 記 号 が 入 っている) crawler? 4-3 ユーザー 端 末 グループの 定 義 ユーザー 端 末 グループは 端 末 グループ 設 定 ファイル(device-group.conf)で 定 義 します 端 末 グループ 設 定 ファイルはテキスト 形 式 のファイルです 端 末 グループ 設 定 ファイルには ユーザー 端 末 グループ 名 とその 条 件 をセットで 記 述 します 条 件 には 1 つ 以 上 の PI 表 記 の 条 件 式 を 記 述 しま す 19

20 条 件 式 の 書 き 方 については 第 5 章 表 示 コントロール(PI) を 参 照 ください 書 式 : 01 # [ユーザー 端 末 グループ 名 ]{ 03 [PI 表 記 の 条 件 式 ] : 04 } 1 行 目 は 固 定 です # から 始 まる 行 はコメント 行 です { } 内 には PI 表 記 の 条 件 式 を 1 つ 以 上 記 述 します 2 つ 以 上 の 条 件 式 を 指 定 した 場 合 いずれかの 条 件 式 にマッチすればそのユーザー 端 末 グループに 所 属 すると 判 断 されます 同 一 名 のユーザー 端 末 グループを 記 述 した 場 合 ファイル 内 で 最 初 に 出 現 したものが 優 先 されます 定 義 したグループ 名 を 別 のグループ 定 義 に 利 用 することができます その 場 合 参 照 されるグループ 名 は 利 用 する 箇 所 より 前 で 定 義 されている 必 要 があります 01 # #スマートフォン 03 SP { 04 <?ra ot=" " bt=" "?> 05 } 06 #タブレット 型 07 TABLET{ 08 <?ra g="sp" Screen-Inch=" "?> 09 } ot は Os-Type bt は Browser-Type g は Device-Group の 略 記 です 詳 細 は 第 10 章 付 録 の 端 末 情 報 ファイルの 内 容 を 参 照 ください 4-4 初 期 設 定 済 のユーザー 端 末 グループ 端 末 グループ 設 定 ファイルには 予 め 最 も 基 本 となる 端 末 グループが 定 義 されています こちらについ 20

21 ては 第 10 章 付 録 の 初 期 設 定 済 のユーザー 端 末 グループ を 参 照 ください 4-5 ユーザー 端 末 グループの 利 用 ユーザー 端 末 グループを 利 用 するには RALCDeviceGroupFile ディレクティブで 端 末 グループ 設 定 ファ イルを 指 定 します RALCDeviceGroupFile ディレクティブは <Location>ディレクティブ 内 でも 指 定 可 能 です 01 <Location /foo/> 02 RALCDeviceGroupFile /var/roundabout/conf/device-group.conf 03 </Location> PI での 利 用 方 法 については 第 5 章 表 示 コントロール(PI) を 参 照 ください 4-6 クローラーグループの 定 義 クローラーグループは クローラーグループ 設 定 ファイル(crawler-group.csv)で 定 義 します クローラーグループ 設 定 ファイルは CSV 形 式 のテキストファイルです クローラーグループ 設 定 ファイ ルには クローラーグループ 名 とマッチングさせる User-Agent のパターンをペアで 指 定 します ラウンド アバウトは HTTP リクエストの User-Agent ヘッダと User-Agent パターンとのマッチングを 行 い マッチ したクローラーグループを 端 末 グループに 設 定 します 書 式 : 01 [クローラーグループ 名 ],[User-Agent パターン] 02 : 01 crawlergoogle,*googlebot-mobile 02 crawleryahoo,*y!j-mbs 03 crawleryahoo,*y!j-srd User-Agent パターンの 先 頭 が * ではない 場 合 User-Agent と 先 頭 一 致 による 比 較 を 行 います User-Agent パターンの 先 頭 が * の 場 合 User-Agent と * より 後 の 部 分 を 部 分 一 致 による 比 較 を 行 います 21

22 4-7 クローラーグループの 利 用 クローラーグループを 利 用 するには RALCCrawlerGroupFile ディレクティブでクローラーグループ 設 定 ファイルを 指 定 します RALCCrawlerGroupFile ディレクティブは <Location>ディレクティブ 内 でも 指 定 可 能 です 01 <Location /foo/> 02 RALCCrawlerGroupFile /var/roundabout/conf/crawler-group.csv 03 </Location> コンテンツ 内 で クローラー 向 けに 文 言 を 表 示 したい 場 合 など コンテンツの 出 し 分 けでクローラーグル ープを 使 うこともできます こちらの 利 用 方 法 については 第 5 章 表 示 コントロール(PI) を 参 照 くださ い 4-8 グループ 設 定 の 再 読 み 込 み ユーザー 端 末 グループ 設 定 ファイルおよびクローラーグループ 設 定 ファイルは Apache 起 動 時 に 一 度 だけ 読 み 込 まれます 変 更 した 内 容 を 反 映 させるには Apache を 再 起 動 します なお 開 発 などの 用 途 でグループ 設 定 の 自 動 再 読 み 込 みを 行 うには RALCAutoReload ディレクティブ で 設 定 が 可 能 です 自 動 再 読 み 込 み 動 作 中 はグループ 設 定 ファイルが 更 新 された 場 合 変 更 内 容 が 即 座 に 反 映 されます デフォルト 時 : RALCAutoReload Off 自 動 再 読 み 込 み 有 効 時 : RALCAutoReload On 22

23 第 5 章 表 示 コントロール(PI) 表 示 コントロール(PI) 機 能 を 利 用 すると アクセスした 端 末 の 端 末 情 報 ( 第 3 章 端 末 情 報 ファイル お よび 第 4 章 端 末 グループ を 参 照 )に 従 い コンテンツ 内 の 表 示 の 一 部 を 切 り 替 える 事 が 可 能 です 例 えば <?ra g="iphone"?> という 文 字 列 を 行 の 先 頭 に 記 述 し 続 けてタグやテキストを 記 述 します 正 しい 記 述 内 容 でない 場 合 PI が 書 かれた 行 すべてが 削 除 されます 01 <p> 02 サンプルページです 03 <?ra g="iphone"?>iphone からアクセスされました 04 </p> g は Device-Group の 略 記 です アクセスした 端 末 が iphone であれば 直 後 に 続 けたタグやテキストは 表 示 されます それ 以 外 の 端 末 であれば 直 後 タグやテキストは 表 示 されません HTML 出 力 例 (iphone からアクセスした 場 合 ): 01 <p> 02 サンプルページです 03 iphone からアクセスされました 04 </p> HTML 出 力 例 (Android 端 末 からアクセスした 場 合 ): 01 <p> 02 サンプルページです 03 </p> ダブルクォーテーション 内 の 値 は 大 文 字 小 文 字 が 区 別 されます 5-1 利 用 可 能 な 端 末 情 報 端 末 情 報 ファイル(terminfo.csv)と 端 末 グループ(device-group.conf)の 内 容 が 利 用 できます 端 末 グ 23

24 ループを 使 うには g="[ 端 末 グループ 名 ]" と 書 きます 端 末 グループの 詳 細 については 第 4 章 端 末 グループ を 参 照 ください 端 末 情 報 については 第 10 章 付 録 の 端 末 情 報 ファイルの 内 容 を 参 照 ください 5-2 PI で 使 用 できる 書 式 (1) 一 致 書 式 : 01 <?ra [ 端 末 情 報 項 目 名 ]="[ 値 ]"?> 切 替 対 象 の 文 字 列 01 <?ra Carrier="DoCoMo"?>この 端 末 はドコモです アクセスした 端 末 のスペック 値 が 指 定 した 項 目 の 値 と 一 致 する 場 合 PI 以 後 の 文 字 列 が 残 されます 値 と 一 致 しない 場 合 その 一 行 は 削 除 されます 上 記 の 例 では ドコモ 端 末 からアクセスした 場 合 は この 端 末 はドコモです と 表 示 され それ 以 外 の 端 末 では 何 も 表 示 されません (2) 範 囲 指 定 書 式 : 01 <?ra [ 端 末 情 報 項 目 名 ]=" [ 開 始 値 ]-[ 終 了 値 ]"?> 切 替 対 象 の 文 字 列 01 <?ra Browser-Width ="1-240"?>この 端 末 は QVGA 以 下 の 解 像 度 です アクセスした 端 末 のスペック 値 が 指 定 した 項 目 の 範 囲 内 に 含 まれる 場 合 PI 以 後 の 文 字 列 が 残 されま す 範 囲 から 外 れた 場 合 その 一 行 は 削 除 されます 上 記 の 例 では ブラウザ 幅 が 240 ピクセル 以 下 の 端 末 からアクセスした 場 合 は この 端 末 は QVGA 以 下 の 解 像 度 です と 表 示 され それ 以 外 の 端 末 では 何 も 表 示 されません (3) 否 定 書 式 : 01 <?ra [ 端 末 情 報 項 目 名 ]="![ 値 ]"?> 切 替 対 象 の 文 字 列 24

25 01 <?ra Carrier="!DoCoMo"?>ドコモ 以 外 の 端 末 です アクセスした 端 末 のスペック 値 が 指 定 した 項 目 の 値 と 一 致 しない 場 合 PI 以 後 の 文 字 列 が 残 されま す 値 と 一 致 した 場 合 その 一 行 は 削 除 されます 上 記 の 例 では ドコモ 以 外 の 端 末 からアクセスし た 場 合 は ドコモ 以 外 の 端 末 です と 表 示 され ドコモ 端 末 からアクセスした 場 合 は 何 も 表 示 されませ ん 否 定 条 件 は 属 性 値 の 先 頭 にのみ 記 述 でき 属 性 値 全 体 にかかります (4) OR 書 式 : 01 <?ra [ 端 末 情 報 項 目 名 ]="[ 値 1] [ 値 2] [ 値 3]..."?> 切 替 対 象 の 文 字 列 01 <?ra Maker="LG Motorola NOKIA PANTECH SAMSUNG"?> 海 外 端 末 です アクセスした 端 末 のスペック 値 が 指 定 した 項 目 のいずれかの 値 と 一 致 する 場 合 PI 以 後 の 文 字 列 が 残 されます どの 値 とも 一 致 しなかった 場 合 その 一 行 は 削 除 されます 上 記 の 例 では NOKIA やサ ムスンなど 海 外 メーカーの 端 末 からアクセスした 場 合 は 海 外 端 末 です と 表 示 され それ 以 外 の 端 末 からアクセスした 場 合 は 何 も 表 示 されません 否 定 条 件 の 場 合 は 属 性 値 全 体 を 否 定 にします 部 分 的 に 否 定 条 件 を 使 うことはできません (5) AND 書 式 : 01 <?ra [ 端 末 情 報 項 目 名 1]="[ 値 1]" [ 端 末 情 報 項 目 名 2]="[ 値 2]"...?> 切 替 対 象 の 文 字 列 01 <?ra Carrier="SoftBank" Screen-Width="480"?>SoftBank の VGA 端 末 です アクセスした 端 末 のスペック 値 が 指 定 した 項 目 の 値 とすべて 一 致 する 場 合 PI 以 後 の 文 字 列 が 残 さ れます いずれかの 値 に 一 致 しなかった 場 合 その 一 行 は 削 除 されます 上 記 の 例 では SoftBank で 液 晶 サイズが 幅 480 ピクセルの 端 末 からアクセスした 場 合 は SoftBank の VGA 端 末 です と 表 示 さ れ それ 以 外 の 端 末 からアクセスした 場 合 は 何 も 表 示 されません また 同 じ 端 末 情 報 項 目 名 を 複 数 回 使 うことはできません 25

26 (6) ユーザー 拡 張 項 目 へのアクセス 方 法 ユーザー 拡 張 項 目 は 端 末 情 報 ファイルの User-Extention( 略 記 :ue) 項 目 のことです この 項 目 は A02110 のような 値 を 持 ち 各 桁 にそれぞれ 意 味 があります 各 桁 のデータを 取 得 するには ue.1 の ように 項 目 名 と n 個 目 の 数 字 をドット. でつなぎます n 個 目 は 左 から と 続 き 1~34 の 間 で 指 定 可 能 です 書 式 : 01 <?ra ue.[n 個 目 ]="[ 値 ]"?> 切 替 対 象 の 文 字 列 01 <?ra ue.3="2"?> 左 から 3 個 目 の 値 が 2 の 端 末 からのアクセスです 範 囲 外 の 値 や 存 在 しない 値 が 指 定 された 場 合 は PI の 書 かれた 行 すべてが 削 除 されます (7) 複 数 行 にわたる PI PI に line 属 性 を 追 加 することで PI の 書 かれた 行 を 含 む それ 以 降 の 複 数 行 を 出 し 分 けの 対 象 とする ことができます 書 式 : 01 <?ra [ 端 末 情 報 項 目 名 ]="[ 値 ]" line="[ 行 数 ]"?> 切 替 対 象 の 文 字 列 02 切 替 対 象 の 文 字 列 03 : 01 <?ra g="sp" line="4"?>スマートフォン 用 のコンテンツ 02 <div id="a"> 03 JavaScript のコンテンツ 04 </div> line の 行 数 を 満 たす 前 に 次 の PI が 出 現 した 時 点 で 前 の PI は 終 了 し 新 しい PIが 有 効 になります line の 値 を *(アスタリスク) とすると 行 数 制 限 なしになります <?ra break?> が 出 現 すると その 時 点 で 前 の PI は 終 了 します <?ra break?> の 書 かれた 行 は 削 除 されます 26

27 書 式 : 01 <?ra [ 端 末 情 報 項 目 名 ]="[ 値 ]" line="10"?> 切 替 対 象 の 文 字 列 02 切 替 対 象 の 文 字 列 03 <?ra [ 端 末 情 報 項 目 名 ]="[ 値 ]" line ="*"?> 切 替 対 象 の 文 字 列 04 切 替 対 象 の 文 字 列 05 <?ra break?> 01 <?ra g="sp" line="10"?>スマートフォン 用 のコンテンツ 02 <div id="a"> 03 JavaScript のコンテンツ 04 </div> 05 <?ra g="!sp" line="*"?> 携 帯 用 のコンテンツ 06 <div> 07 静 的 コンテンツ<br /> 08 </div> 09 <?ra break?> 複 数 行 PI はブロック 形 式 ではありません 複 数 の PI の 条 件 が 同 時 に 有 効 になることはありませ ん (8) タグ 表 記 PI 形 式 以 外 に 空 要 素 用 のタグ 形 式 で 表 記 することもできます PHP で <?~?> の 記 述 形 式 がバッティ ングしてしまう 場 合 は こちらのタグ 形 式 をお 使 いください 書 式 : 01 <ra:pi [ 端 末 情 報 項 目 名 1]="[ 値 1]" [ 端 末 情 報 項 目 名 2]="[ 値 2]"... /> 切 替 対 象 の 文 字 列 01 <?xml version="1.0" encoding="utf-8"?> 02 <html xmlns=" xmlns:ra=" 03 <ra:pi Carrier="SoftBank" Screen-Width="480" />SoftBank の VGA 端 末 です 27

28 名 前 空 間 URI は です (2 行 目 ) 名 前 空 間 プレフィックスは ra 固 定 です (4 行 目 ) 空 要 素 タグ 形 式 のみをサポートします 複 数 行 PI に 使 う <?ra break?> のタグ 表 記 は <ra:pi break="break" /> です 28

29 第 6 章 CSS 変 換 シート 機 種 によって 最 適 値 が 異 なるプロパティにおいて その 値 を 端 末 グループごとに 出 し 分 けることができ るのが CSS 変 換 シートです 例 えば 解 像 度 の 違 う 端 末 では 同 じ 値 のマージンでも 違 った 空 き 具 合 に 見 えます このような 若 干 の 違 いをコントロールしたい 場 合 に CSS のプロパティ 値 をピンポイントで 変 換 できるのが CSS 変 換 シートです CSS 変 換 シートのファイル 形 式 は CSV です 6-1 CSS 変 換 シートの 配 置 場 所 ファイル 名 は 対 象 CSS ファイル 名.css.csv とします 変 換 対 象 となる CSS ファイルと 同 じディレクトリに 配 置 します A.css A.css.csv 6-2 CSS 変 換 シートの 内 容 ファイルの 内 容 は 以 下 のようになります 実 際 のファイルは template/css/style.css.csv を 参 考 にし てください selector_name property_name property_value 端 末 グループ A 端 末 グループ B 端 末 グループ C font-size medium x-small large font-size small xx-small medium p line-height 1.2em 1.5em 1.0em div.class1 margin 5px 10px 8px selector_name 変 換 したい 値 のセレクタを 書 きます 何 も 指 定 しない 場 合 は 変 換 対 象 となる CSS ファイル 内 のすべてのセレクタが 対 象 となります property_name 変 換 したい 値 のプロパティ 名 を 書 きます selector_name が 省 略 された 同 名 のプ ロパティ 値 がある 場 合 上 に 書 かれたものが 適 用 されます この 項 目 は 省 略 できません property_value 変 換 したい 値 を 書 きます 何 も 指 定 しない 場 合 は CSS ファイルに 書 かれた 内 容 がそのまま 出 力 されます 29

30 端 末 グループを 増 やすには 列 を 追 加 してください 複 数 の 端 末 グループに 属 する 端 末 は 左 に 書 かれたグループの 内 容 が 適 用 されます ここで 使 うグループの 内 容 は 排 他 ではありません 1 つの 端 末 が 複 数 のグループに 属 することもあ ります 変 換 対 象 CSS ファイル 01 body { font-size: medium; } 02 p { line-height: 1.2em; font-size: small; } 03 div.class1 { margin: 10px; } 端 末 グループ A と B に 属 する 端 末 が 読 み 込 む CSS: 01 body { font-size: x-small; } 02 p { line-height: 1.2em; 03 font-size: xx-small; } 04 div.class1 { margin: 5px; } 端 末 グループ A の 値 が 適 用 されます 端 末 グループ B と C に 属 する 端 末 が 読 み 込 む CSS: 01 body { font-size: medium; } 02 p { line-height: 1.5em; 03 font-size: small; } 04 div.class1 { margin: 10px; } 端 末 グループ B の 値 が 適 用 されます CSS 変 換 が 働 くと 変 換 されたプロパティ 値 を 含 むセレクタ 全 体 を CSS 内 部 参 照 として HTML 内 に 展 開 します 複 数 の 端 末 グループに 属 している 場 合 は CSS 変 換 シートの 左 側 の 値 が 適 用 されます 端 末 グループの 設 定 については 第 4 章 端 末 グループ を 参 照 ください 6-3 CSS 変 換 ルール 適 用 の 優 先 度 1. セレクタ + プロパティ 名 + プロパティ 値 2. プロパティ 名 + プロパティ 値 3. セレクタ + プロパティ 名 4. プロパティ 名 30

31 第 7 章 CSS ファイル 切 り 替 え コンテンツによっては とある 端 末 グループには 全 く 別 の CSS ファイルを 専 用 に 用 意 するほうが 効 率 が よかったり 一 部 読 み 込 ませたくないプロパティなどがあって 同 じ CSS ファイルだとうまくいかなかったり と CSS ファイル 自 体 を 切 り 替 えたいというときがあります 端 末 グループごとに link タグを 書 き 換 えて 読 み 込 む CSS ファイルを 切 り 替 えるのが ra:rename 属 性 の 機 能 です ra:rename 属 性 は link タグに 使 用 します au ブラウザ 6 系 と i モードブラウザ 1.0 端 末 には style.css とは 別 の CSS を 読 ませたい 場 合 ra:rename 属 性 の 内 容 : rel type 属 性 は 省 略 しています 01 <link href="style.css" ra:rename="*:kddil,dcml" /> 用 意 するファイル: style.css style.kddil.css style.dcml.css style.css style.kddil.css style.dcml.css CSS を 出 し 分 ける 必 要 のない 端 末 に 読 ませたい CSS ファイル au ブラウザ 6 系 端 末 用 の CSS ファイル i モードブラウザ 1.0 端 末 用 の CSS ファイル 出 し 分 けが 必 要 のない 端 末 は link タグが 以 下 のように 書 き 換 えられます 01 <link href="style.css" /> KDDIL グループに 属 する 端 末 は link タグが 以 下 のように 書 き 換 えられます 01 <link href="style.kddil.css" /> DCML グループに 属 する 端 末 は link タグが 以 下 のように 書 き 換 えられます 01 <link href="style.dcml.css" /> 31

32 7-1 書 式 コロン : とカンマ, を 使 って 端 末 グループ 名 を 指 定 します コロンの 左 側 に 書 かれたグループには href の 内 容 をそのまま 出 します 右 側 に 書 かれたグループには href 属 性 の 値 を style. 端 末 グループ 名.css に 書 き 換 えます コロンの 右 側 は カンマ, で 区 切 って 複 数 の 端 末 グループを 指 定 できます 指 定 する 端 末 グループは 必 ずしも 排 他 ではないので コロン : の 右 側 を 左 から 評 価 していき 最 初 に ヒットしたグループで href 属 性 の 内 容 を 書 き 換 えます コロンの 左 側 は 最 後 に 評 価 されます ra:rename 属 性 に 指 定 されたグループのいずれにも 当 てはまらなければ link 要 素 は 削 除 されます 書 式 : 01 <link href= "style.css" ra:rename="[ 端 末 グループ A]:[ 端 末 グループ B],[ 端 末 グループ C]" /> 結 果 : 端 末 グループ B に 属 する 端 末 は link タグが 以 下 のように 書 き 換 えられます 01 <link href="style.b.css" /> 端 末 グループ C に 属 する 端 末 は link タグが 以 下 のように 書 き 換 えられます 01 <link href="style.c.css " /> 端 末 グループ A に 属 する 端 末 は link タグが 以 下 のように 書 き 換 えられます 01 <link href="style.css " /> 端 末 グループに 属 さない 端 末 は link タグ 削 除 が 削 除 されます コロンの 左 側 には アスタリスク * を 指 定 することができます これは コロンの 右 側 のグループ 以 外 の 全 てのグループに href の 内 容 をそのまま 出 したい 場 合 に 使 います 書 式 : 01 <link href= "style.css" ra:rename="*:[ 端 末 グループ B],[ 端 末 グループ C]" /> 結 果 : 端 末 グループ B に 属 する 端 末 は link タグが 以 下 のように 書 き 換 えられます 01 <link href="style.b.css" /> 端 末 グループ C に 属 する 端 末 は link タグが 以 下 のように 書 き 換 えられます 01 <link href="style.c.css " /> 上 記 以 外 の 端 末 グループに 属 する 端 末 は link タグが 以 下 のように 書 き 換 えられます 01 <link href="style.css " /> 32

33 ra:rename 属 性 に 1 つの 端 末 グループだけを 指 定 した 場 合 は 指 定 のグループのときのみ link 要 素 を 出 します 書 式 : 01 <link href= "style.css" ra:rename="[ 端 末 グループ A]" /> 結 果 : 端 末 グループ A に 属 する 端 末 は link タグが 以 下 のように 書 き 換 えられます 01 <link href="style.css " /> 上 記 以 外 の 端 末 グループに 属 する 端 末 は link タグ 削 除 が 削 除 されます 33

34 第 8 章 HTML 変 換 シート ラウンドアバウトは HTML 変 換 シート(conversion.csv)に 記 載 されている 変 換 ルールによって コンテ ンツ 変 換 を 行 います 出 荷 時 に 提 供 される 変 換 ルールには 公 式 サイトで 公 開 されている 仕 様 に 従 っ たルールが 含 まれ 3 キャリア 対 応 コンテンツの 制 作 が 可 能 な 状 態 にあります また デフォルトのルールを 編 集 もしくは 独 自 のルールを 追 記 することで より 自 由 度 の 高 い 変 換 ル ールを 構 築 することが 可 能 です 8-1 HTML 変 換 シートの 種 類 (1) デフォルト 言 語 変 換 シート XHTML もしくは HTML のコンテンツに 対 して 言 語 変 換 を 行 う 変 換 シートです XHTML および HTML の 判 断 は Content-Type により 行 われます この 変 換 シートのフォーマットは CSV 形 式 です (2) 絵 文 字 変 換 シート XHTML もしくは HTML のコンテンツに 対 して 絵 文 字 変 換 を 行 う 変 換 シートです XHTML および HTML の 判 断 は Content-Type により 行 われます この 変 換 シートの 書 式 は デフォルト 言 語 変 換 シートと 同 一 です (3) 独 自 言 語 変 換 シート XHTML もしくは HTML のコンテンツに 対 して 独 自 の 言 語 変 換 を 行 う 変 換 シートです XHTML および HTML の 判 断 は Content-Type により 行 われます この 変 換 シートのフォーマットは CSV 形 式 です 8-2 HTML 変 換 シートの 書 式 HTML 変 換 シートは CSV 形 式 で 提 供 されます 一 部 エクセルで 提 供 される 場 合 があります エンコーディングを UTF-8 または Shift_JIS としてください( ) 1 行 目 はコメントで 書 式 のバージョンを 示 します 2 行 目 はヘッダ 行 です 1 列 目 はキーワードです 2 列 目 以 降 は 端 末 グループ 名 です 3 行 目 以 降 はキーワード( 変 換 対 象 文 字 列 )と 変 換 後 文 字 列 を 列 挙 します 各 列 には RFC8140 準 拠 の 文 字 列 が 指 定 できます 34

35 3 行 目 以 降 に 変 換 後 文 字 列 として ; を 指 定 した 場 合 変 換 後 の 文 字 列 が 変 換 対 象 文 字 列 (1 列 目 )と 同 一 とみなされます なお ; に 変 換 を 行 いたい 場 合 は ;; と 指 定 します 変 換 は 対 象 と 完 全 一 致 の 場 合 のみ 処 理 されます RALCSourceEncoding が UTF-8 かつ both オプション 付 で 設 定 されている 場 合 (デフォルト 設 定 ) 変 換 シートの 文 字 エンコーディングは UTF-8 とし それ 以 外 の 設 定 の 場 合 (both オプションなしの UTF-8 設 定 や Shift_JIS, EUC-JP で 設 定 している)は Shift_JIS の 変 換 シートを 使 用 してください 詳 細 は 別 紙 Apache 設 定 リファレンス を 参 照 ください 8-3 HTML 変 換 シートにおける 端 末 グループ HTML 変 換 シートで 利 用 する 端 末 グループは 各 キャリア 言 語 仕 様 の 違 いや 端 末 スペックによって 分 類 された 端 末 情 報 ファイルで 定 義 されているグループです 1 つの 端 末 に 1 つだけ 与 えられた 完 全 に 排 他 のグループになります システム 端 末 グループ 名 foma3x foma2x foma1x pdc2 pdc1 win cdma sb3g will em iphone pc 意 味 i モードブラウザ 2.x 搭 載 端 末 i モードブラウザ 1.0 を 搭 載 し テーブル 関 連 タグ 対 応 端 末 i モードブラウザ 1.0 を 搭 載 し テーブル 関 連 タグ 非 対 応 の 端 末 mova で 画 面 解 像 度 が QVGA の 端 末 mova で 画 面 解 像 度 が QVGA 未 満 のもの WIN 端 末 au の Axxxx Cxxxx シリーズ SoftBank3G WILLCOM emobile ios 搭 載 端 末 Android 端 末 PC システム 端 末 グループを PI などで 利 用 する 場 合 には 端 末 グループ 設 定 ファイル (device-group.conf)で このグループを 再 定 義 していますので そちらを 使 ってください 詳 細 は 第 10. 章 付 録 の 初 期 設 定 済 のユーザー 端 末 グループ を 参 照 ください 8-4 独 自 言 語 変 換 シートの 作 成 編 集 独 自 言 語 変 換 シートは /var/roundabout/conf/ 以 下 に original-conversion.csv などの 名 前 で CSV フ 35

36 ァイルを 作 成 し それを 編 集 することで 独 自 言 語 変 換 シートになります 列 項 目 はデフォルト 言 語 変 換 シートと 同 じ 内 容 にしてください 列 項 目 については 同 章 8-3 HTML 変 換 シートにおける 端 末 グルー プについて の 表 内 システム 端 末 グループ を 参 照 ください 作 成 編 集 には Microsoft Excel を 利 用 す ると 非 常 に 便 利 です 但 し 一 部 のルール( 全 角 数 字 など)では Microsoft Excel のオートコレクト 機 能 で 修 正 されてしまうものがありますので 若 干 の 注 意 が 必 要 です 文 字 エンコーディングは デフォルト 言 語 変 換 シート 同 様 RALCSourceEncoding の 設 定 に 応 じて 適 切 なエンコーディングで 作 成 してください 8-5 HTML 変 換 シートの 適 用 HTML 変 換 シート(デフォルト 独 自 )は roundabout-vhost.conf の RALCConversionSheetFile RALCGlyphConversionSheet ディレクティブで 指 定 します 変 換 シートは ディレクトリ 別 に 設 定 すること ができその 設 定 は 同 ファイルの Location ディレクティブで 指 定 します 独 自 言 語 変 換 シートを 適 用 す る 場 合 はデフォルト 変 換 シートの 適 用 記 述 に 加 え 独 自 言 語 変 換 シートの 適 用 記 述 を 行 ってください Location ディレクティブ 内 では 適 用 したい 変 換 シートをすべて 記 述 してください 適 用 した 複 数 変 換 シート 内 で 変 換 ルールが 同 じものは より 後 述 の 変 換 ルールが 適 用 されます デフォルト 言 語 変 換 シートのみ 01 <Location /foo/> 02 RALCConversionSheetFile /var/roundabout/conf/conversion-utf8.csv 03 RALCGlyphConversionSheetFile /var/roundabout/conf/glyph-conversion-utf8.csv 04 RALCSourceEncoding UTF-8 both 05 </Location> デフォルト 言 語 変 換 シート+ 独 自 言 語 変 換 シートの 01 <Location /foo/> 02 RALCConversionSheetFile /var/roundabout/conf/conversion-utf8.csv 03 RALCConversionSheetFile /var/roundabout/conf/original-conversion-utf8.csv 04 RALCGlyphConversionSheetFile /var/roundabout/conf/glyph-conversion-utf8.csv 05 RALCSourceEncoding UTF-8 both 06 </Location> 36

37 8-6 HTML 変 換 シートの 再 読 み 込 み HTML 変 換 シートはデフォルト 設 定 では Apache 起 動 時 に 一 度 だけ 読 み 込 まれます シートの 内 容 を 変 更 した 場 合 は Apache の 再 起 動 後 に 反 映 されます なお 開 発 などの 用 途 で HTML 変 換 シートの 自 動 再 読 み 込 みを 行 うには RALCAutoReload ディレクテ ィブで 設 定 が 可 能 です 自 動 再 読 み 込 み 動 作 中 は HTML 変 換 シートが 更 新 された 場 合 変 更 内 容 が 即 座 に 反 映 されます デフォルト 時 : RALCAutoReload Off 自 動 再 読 み 込 み 有 効 時 : RALCAutoRelead On 37

38 第 9 章 キャラクタエンコーディング 変 換 ラウンドアバウトには XHTML/HTML コンテンツのキャラクタエンコーディング 変 換 機 能 があります キャラクタエンコーディング 変 換 機 能 は レスポンスボディのキャラクタエンコーディング 変 換 処 理 とレス ポンスヘッダ Content-Type ヘッダの 変 換 処 理 とで 構 成 されます 9-1 変 換 対 象 のキャラクタエンコーディング ラウンドアバウトが 対 応 しているキャラクタエンコーディングは 以 下 の 通 りです UTF-8 Shift_JIS EUC-JP 9-2 使 用 可 能 な 文 字 セット 使 用 可 能 な 文 字 セットは Windows-31J と 絵 文 字 です 具 体 的 には 以 下 の 文 字 セットです JIS X 0201:1997(ラテン 文 字 カタカナ) JIS X 0208:1997( 第 1 第 2 水 準 漢 字 ) NEC 特 殊 文 字 ( 丸 つき 数 字 など) NEC 選 定 IBM 拡 張 文 字 ( 髙 など) IBM 拡 張 文 字 ( 髙 など) i モード 対 応 絵 文 字 ( 基 本 絵 文 字 及 び 拡 張 絵 文 字 ) SoftBank 絵 文 字 以 上 の 文 字 セットに 含 まれない 文 字 には 対 応 しておりません 9-3 Content-Type 変 換 ラウンドアバウトでは RALCSourceEncoding の 設 定 と 端 末 グループにより 全 ての HTML/XHTML コン テンツを UTF-8 または Shift_JIS で 出 力 します そのため Content-Type ヘッダの charset パラメータ を 出 力 文 字 エンコーディングと 同 じに 設 定 します 38

39 RALCSourceEncoding システム 端 末 グループ 名 出 力 文 字 エンコーディング UTF-8(both オプションあり) UTF-8, Shift_JIS, EUC-JP(both オプション なし) pdc1, pdc2, win, cdma, will 上 記 以 外 全 グループ Shift_JIS UTF-8 Shift_JIS 9-4 キャラクタエンコーディングの 指 定 ラウンドアバウトではキャラクタエンコーディングを RALCSourceEncoding ディレクティブにて 明 示 的 に 設 定 します RALCSourceEncoding ディレクティブが 未 設 定 の 場 合 は Shift_JIS が 使 用 されます なお Content-Type ヘッダの charset パラメータや XML 宣 言 のエンコーディング 指 定 meta タグの Content-Type 指 定 値 は 無 視 され 内 容 による 自 動 判 別 も 行 われません 01 <Location /foo/> 02 RALCSourceEncoding UTF-8 both 03 </Location> RALCSourceEncoding ディレクティブには UTF-8 Shift_JIS EUC-JP のいずれかが 指 定 可 能 です また UTF-8 指 定 のみ both オプションを 指 定 可 能 です both オプションを 指 定 した 場 合 フォームから の GET/POST 送 信 時 UTF-8 アプリケーション 側 へ 送 信 されるリクエストの 文 字 エンコーディング 変 換 に 対 応 します 39

40 第 10 章 付 録 10-1 端 末 情 報 ファイルの 内 容 (terminfo.csv) 数 値 の 項 目 は 範 囲 指 定 ( 第 5 章 表 示 コントロール(PI) 参 照 )が 使 えます 大 文 字 小 文 字 が 区 別 されますので 注 意 してください 略 称 があるものは そちらも PI などで 利 用 できます 2011 年 5 月 24 日 現 在 の 値 です 項 目 名 ( 略 称 ) 意 味 値 値 の 意 味 < 文 字 列 > Carrier (cr) Device-Name Cache-Size (cs) Browser-Width (bw) Browser-Height (bh) Screen-Width (sw) Screen-Height (sh) Flashlite-Version (fv) Screen-Inch Browser-Type (bt) キャリア 端 末 名 ブラウザキャッシュサ イズ ブラウザ 横 ピクセル 数 ブラウザ 縦 ピクセル 数 待 受 画 面 横 ピクセル 数 待 受 画 面 縦 ピクセル 数 Flash Lite バージョン 液 晶 のインチサイズ ブラウザ 種 別 DoCoMo SoftBank Disney au WILLCOM emobile Apple PC < 文 字 列 > SH-09C T006 ( 1) < 数 値 > 単 位 :byte ( 1) < 数 値 > 単 位 :px 471 ( 1) < 数 値 > 単 位 :px 715 ( 1) < 数 値 > 単 位 :px 480 ( 1) < 数 値 > 単 位 :px 854 ( 1) < 数 値 > : 非 対 応 < 数 値 > 単 位 :inch 4.0 ( 1) < 数 値 > 100 i モードブラウザ 1 系 101 i モードブラウザ 2 系 102 i モードブラウザ 2LE 系 120 au ブラウザ 6.0 系 40

41 121 au ブラウザ 6.2 系 122 au ブラウザ 7.2 系 140 vodafone ブラウザ 系 141 softbank ブラウザ 1.0-Teleca-Browser 系 Browser-Type (bt) ブラウザ 種 別 142 softbank ブラウザ 1.0-Net-Front 系 143 softbank ブラウザ 2.0-Net-Front 系 160 emobile ブラウザ Obigo 系 161 emobile ブラウザ NetFront 系 162 emobile ブラウザ OpenBrowser 系 180 WILLCOM ブラウザ CNF 系 181 WILLCOM ブラウザ Opera 系 182 WILLCOM ブラウザ NetFront 系 200 iphone Safari 201 Android Safari 300 BlackBerry 400 Opera Mini 401 Opera Mobile 500 Internet Explorer Mobile 600 Firefox for Mobile 900~999 その 他 のブラウザ Browser-Version (bv) ブラウザバージョン < 数 値 > 1.01 i モード HTML i モード HTML i モード HTML i モード HTML i モード HTML i モード HTML4.0&XHTML i モード HTML5.0&XHTML i モード HTML6.0&XHTML i モード HTML7.0&XHTML i モード HTML7.1&XHTML i モード HTML7.2&XHTML i モードブラウザ i モードブラウザ

42 7 / 7.1 / 7.2 / 8.2 / 8.3 au ブラウザバージョン 6.0 系 の 詳 細 なバージョン 5.0 / 6.2 / 7.3 / 8.0 / 9.0 / 9.1 / 9.2 / 10.2 / 10.3 / 10.4 / 11.1 / 11.2 / 12.1 / 13.1 / 13.2 / 13.4 / 14.1 / 14.2 / 14.3 / au ブラウザバージョン 6.2 系 の 詳 細 なバージョン Browser-Version (bv) ブラウザバージョン 15.1 / 15.2 / 16.1 / 17.1 / / 1.3 / 1.5 / 2 / 3 / 4 / 5 au ブラウザバージョン 7.2 系 の 詳 細 / 6 なバージョン 0.0 Vodafone 系 3.3 / 3.4 / 3.5 SoftBank1.0 系 Net-Front 3.1 SoftBank1.0 系 Teleca 3.5 SoftBank2.0 系 2.0 CNF 系 7.0 / 7.2 Opera 3.3 / 3.4 NetFront 系 / / iphone Safari / / / Android Safari Os-Type (ot) Os-Version (ov) OS 種 別 OS バージョン < 数 値 > 0 フィーチャーフォン 100 ios 200 Android 300 BlackBerry 400 Windows 500 Symbian 999 PC の OS < 数 値 > 0:フィーチャーフォン PC 2.2 ( 1) Download-Speed 下 り 速 度 < 数 値 > 単 位 :Kbps 7200 ( 1) 42

43 <ビットアクセス> B ~F 3gp + Wmv + Asf = B 動 画 サポート ( 左 から 1 番 目 ) 8 3gp に 対 応 4 3g2 に 対 応 2 wmv に 対 応 1 asf に 対 応 0 全 て 非 対 応 0~3 User-Extension (ue) Release-Date スマートフォン 動 画 サ ポート ( 左 から 2 番 目 ) 入 力 インターフェース ( 左 から 3 番 目 ) table タグ 対 応 ( 左 から 4 番 目 ) GPS 機 能 ( 左 から 5 番 目 ) JavaScript 対 応 ( 左 から 6 番 目 ) 発 売 年 月 mp4 + flv = 3 2 mp4 に 対 応 1 flv に 対 応 0 全 て 非 対 応 フィーチャーフォン 0~F QWERTY キー + タッチ パネル = C 8 QWERTY キー 搭 載 4 タッチパネル 搭 載 2 テンキー 搭 載 1 タッチペン 付 属 1: 対 応 0: 非 対 応 1: 対 応 0: 非 対 応 1: 対 応 0: 非 対 応 ( 2) < 数 値 > (2011 年 02 月 ) 1 詳 細 は 端 末 情 報 ファイル 参 照 2 対 応 (1)となる 機 種 は 以 下 の 通 り i モードブラウザ 2.0 以 上 SoftBank2.0 機 種 以 上 (500KB ブラウザ) スマートフォン PC 43

44 10-2 初 期 設 定 済 のユーザー 端 末 グループ(device-group.conf) グループ 名 SP IPHONE ANDROID TABLET DCM DCML SBM SBML KDDI KDDIL OTHER3G 説 明 スマートフォン 全 般 iphone Android 端 末 7 インチ(GALAXY TAB) 以 上 の 画 面 サイズを 持 つ 端 末 i モードブラウザ 2.x 搭 載 の docomo 端 末 i モードブラウザ 1.0 搭 載 の docomo 端 末 画 面 解 像 度 が VGA の SoftBank 端 末 画 面 解 像 度 が QVGA の SoftBank 端 末 ブラウザバージョン 7.2 系 の au 端 末 ブラウザバージョン 6.x 系 の au 端 末 3 キャリア 以 外 のキャリア DGFOMA3 i モードブラウザ 2.x 端 末 ( 端 末 情 報 ファイルのグループ 再 定 義 ) DGFOMA2 DGFOMA1 i モードブラウザ 1.0 を 搭 載 し テーブル 関 連 タグ 対 応 端 末 ( 端 末 情 報 ファイルの グループ 再 定 義 ) i モードブラウザ 1.0 を 搭 載 し テーブル 関 連 タグ 非 対 応 の 端 末 ( 端 末 情 報 ファイ ルのグループ 再 定 義 ) DGPDC2 mova で 画 面 解 像 度 が QVGA の 端 末 ( 端 末 情 報 ファイルのグループ 再 定 義 ) DGPDC1 mova で 画 面 解 像 度 が QVGA 未 満 のもの ( 端 末 情 報 ファイルのグループ 再 定 義 ) DGWIN WIN 端 末 ( 端 末 情 報 ファイルのグループ 再 定 義 ) DGCDMA au の Axxxx Cxxxx シリーズ ( 端 末 情 報 ファイルのグループ 再 定 義 ) DGSB3G SoftBank3G ( 端 末 情 報 ファイルのグループ 再 定 義 ) 44

45 DGWILL WILLCOM ( 端 末 情 報 ファイルのグループ 再 定 義 ) DGEM emobile ( 端 末 情 報 ファイルのグループ 再 定 義 ) DGIPHONE スマートフォン ( 端 末 情 報 ファイルのグループ 再 定 義 ) DGPC PC ( 端 末 情 報 ファイルのグループ 再 定 義 ) L2S L2M NOFLT 標 準 より 小 さいフォントサイズを 使 うことが 推 奨 される 端 末 標 準 より 大 きいフォントサイズを 使 うことが 推 奨 される 端 末 ブロック 要 素 のフロートができない 端 末 USDCM docomo 非 対 応 機 種 (docomo902 シリーズ 以 前 のテーブル 非 対 応 端 末 ) USSBM SoftBank 非 対 応 端 末 (Vodafone) USKDDI au 非 対 応 端 末 (au のキャッシュサイズ 100KB 未 満 の 端 末 ) 45