Ver.2 ユーザマニュアル スタートガイド 第 2 版 最 終 更 新 日 2011/7/12 1
目 次 本 書 について... 3 はじめに... 5 第 1 章 コンテンツ 制 作 方 法... 6 1-1 テンプレートの 使 用... 6 1-2 キャラクタエンコーディング... 7 1-3 ヘッダーの 書 き 方... 7 1-4 画 像 について... 8 1-5 CSS の 書 き 方... 8 1-6 フォントサイズの 指 定... 9 第 2 章 コンテンツ 制 作 のポイント...10 2-1 テーブルの 装 飾...10 2-2 ブロック 要 素 のフロート...11 (1) (2) (3) アイコンを 使 ったメニューデザイン...11 テキストをつかったメニューデザイン...12 デザインの 出 し 分 け...13 2-3 画 像 の 周 りにテキストを 流 し 込 む...14 2-4 iphone 風 のリスト...14 2-5 フォームコンポーネント(form の 子 要 素 )の 調 整...15 (1) (2) (3) form input select textarea タグのサイズ 調 整...15 ラジオボタン チェックボックスのサイズ 調 整...16 入 力 モードの 設 定...17 2
本 書 について 本 書 はラウンドアバウトを 利 用 したコンテンツ 制 作 ガイドです 本 書 では ラウンドアバウトのカスタマイ ズなしでコンテンツを 作 成 する 手 順 を 示 しています ラウンドアバウトの 機 能 をカスタマイズしてより 細 かく 作 りこみたい 方 は 機 能 について 詳 しく 書 かれて いる 別 紙 ラウンドアバウト 2 開 発 リファレンス を 参 照 してください 3
改 訂 履 歴 版 数 発 行 日 改 訂 内 容 第 1 版 2011 年 5 月 24 日 初 版 発 行 第 2 版 2011 年 7 月 12 日 第 1 章 1-1 に SoftBank 端 末 の 仕 様 とラウンドアバウト の 動 作 について 追 記 文 書 全 体 の 注 意 補 足 の 文 言 を に 訂 正 第 1 章 1-5 に au 端 末 の CSS 容 量 制 限 について 追 記 タイトルをスタートアップガイドからスタートガイドに 訂 正 4
はじめに モバイル 端 末 は 画 面 のピクセル 数 や HTML CSS の 解 釈 など 仕 様 に 違 いがあるので 同 じコンテンツ を 様 々なモバイル 端 末 でみると 画 像 のレイアウトが 崩 れてしまったりフォントの 大 きさがバラバラにな ってしまったりしてしまいます ラウンドアバウトを 通 すと ラウンドアバウトがモバイル 端 末 の 仕 様 の 違 いを 吸 収 してくれるので 下 ( 図 1)のように 同 じようなデザインにすることが 出 来 ます 図 1 ラウンドアバウトありのコンテンツ F-01C T004 N905i iphone このようなラウンドアバウトを 使 ったコンテンツをつくるための 手 順 を 次 の 章 以 降 で 説 明 します 5
第 1 章 コンテンツ 制 作 方 法 ラウンドアバウトを 使 ったスマートフォン 基 準 のコンテンツ 制 作 方 法 を 簡 単 に 説 明 します 1-1 テンプレートの 使 用 ラウンドアバウト 2 にはスマートフォンベースを 想 定 したサンプルコンテンツがデフォルトで 提 供 され こ れをテンプレートとしています コンテンツ 制 作 にはこのテンプレートを 使 用 します 初 期 出 荷 状 態 では はじめに で 紹 介 したコンテンツが 入 っています 図 2 テンプレートファイルの 構 成 template/ index.html 1 HTML ファイル css/ style.css style.css.csv 2 スタイルシート index.html HTML 3 CSS 変 換 シート ファイル img/ 第 index.html HTML 一 章 ファイル ファイル 第 二 章 ファイル 1 index.html ラウンドアバウトでのモバイルコンテンツ 制 作 に 必 要 なヘッダー 情 報 が 入 っています (1-3 項 参 照 ) 初 期 出 荷 状 態 では はじめに で 紹 介 したサンプルコンテンツが 入 っています 2 style.css タグのデザインを 初 期 化 するリセット 情 報 と コンテンツ 制 作 をしやすくするためのクラ スが 入 っています スタイルシート 内 は reset, radio,checkbox size などのコメントで 分 かれているの で 各 コメント 内 にどのようなスタイルが 入 っているのか 説 明 します reset デザインを 初 期 化 するためにはいっています reset を 追 加 するときは タイプセレクタ にプロパティを 複 数 書 かないで 1 つずつ 書 くようにします radio,checkbox size ラジオボタンとチェックボックスをタップしやすくするために 入 っているスマ ートフォン 向 けのサイズ 調 整 です 調 整 が 必 要 な 場 合 は 自 由 に 変 更 して 下 さい (2-5 項 参 照 ) smartphone style list iphone 風 の 矢 印 つきリストを 簡 単 に 作 るためのクラスが 用 意 されていま 6
す (2-4 項 参 照 ) 調 整 が 必 要 な 場 合 は 自 由 に 変 更 しても 構 いませんが CSS 変 換 シートと 連 動 し ているのでセレクタ 名 は 変 更 しないようにします main コンテンツに 対 してのスタイルを 自 由 にかきます 初 期 出 荷 状 態 では はじめに で 紹 介 したサンプルコンテンツが 入 っています 3 style.css.csv ラウンドアバウトのスタイル 変 換 機 能 である CSS 変 換 シートです CSS ファイルと 連 動 して 動 作 し フォントとラジオボタンとチェックボックス 矢 印 つきリストのサイズ 調 整 が 初 期 出 荷 状 態 で 入 っています CSS 変 換 シートを 使 うことで フォントサイズなどが 端 末 ごとの 最 適 な 大 き さに 調 整 できます [ 参 照 ] CSS 変 換 シートのカスタマイズについて 詳 しくは 別 紙 ラウンドアバウト 2 開 発 リファレン ス 第 6 章 CSS 変 換 シートを 参 照 してください SoftBank では HTML が 48KB 以 上 になると HTML を 一 切 表 示 することができなくなることから roundabout では 5%の 余 裕 を 残 した 45.6KB の 部 分 でコンテンツを 切 り 取 る 処 理 を 行 っています この 場 合 途 中 で 切 れてしまうので コンテンツを 見 直 して 下 さい 1-2 キャラクタエンコーディング コンテンツは UTF-8 で 作 成 します UTF-8 以 外 でつくる 場 合 はサーバの 設 定 変 更 が 必 要 になります [ 参 照 ] 詳 しくは 別 紙 ラウンドアバウト 2 開 発 リファレンス 第 9 章 キャラクタエンコーディング 変 換 を 参 照 してください 1-3 ヘッダの 書 き 方 1-1 項 で 紹 介 したテンプレートの index.html にあるヘッダの 内 容 です VGA をベースとしたコンテンツへ の 対 応 や スマートフォンの 表 示 領 域 設 定 など ラウンドアバウトを 使 ったサイト 制 作 に 必 要 な 設 定 等 が 含 まれています <?xml version="1.0" encoding="utf-8"?> <?ra-page viewport="auto" image-convert="no" g="sp"?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/tr/xhtml1/dtd/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja" lang="ja"> <head> <meta http-equiv="content-type" content="text/html; charset= UTF-8" /> <meta name="disparea" content="vga" /> <title>ここにタイトルを 入 れてください</title> <link rel="stylesheet" type="text/css" href="css/style.css" /> </head> 1 2 7
1 スマートフォン 用 のラウンドアバウト 調 整 機 能 で ラウンドアバウトが 自 動 で Viewport を 作 成 します スマートフォン 以 外 では 無 視 されます 2 i モードブラウザ 2.x 端 末 に VGA モードで 表 示 させるために 必 要 です [ 参 照 ] ヘッダ 内 容 について 詳 しくは 別 紙 ラウンドアバウト 2 開 発 リファレンス 第 1 章 内 の HTML の 記 述 を 参 照 してください 1-4 画 像 について JPEG GIF 8 ビット PNG 形 式 で 作 成 します JPEG は 容 量 を 気 にして 劣 化 させる 必 要 はありませんので 品 質 100%で 作 成 します GIF は 256 色 の 画 像 は 256 色 でつくったり 16 色 の 画 像 は 16 色 でつくったり スペーサーGIF などの 簡 単 な 画 像 は 1 色 でつくったりと 画 像 に 最 適 な 色 数 で 作 成 します PNG の 8 ビット 以 上 はサポートしていません 幅 480px の 画 面 を 想 定 してデザインします 例 えば 横 幅 いっぱいの 画 像 を 作 りたい 時 は 480px 幅 の 画 像 を 1 枚 用 意 して 横 に 2 つ 画 像 を 並 べた い 場 合 は 240px 幅 の 画 像 を 2 枚 用 意 します 画 像 は 相 対 パスで 書 きます 画 像 ファイルの 指 定 を 絶 対 URLですると 変 換 の 対 象 にならないので 相 対 パスなどで 書 くようにしてく ださい 画 像 に width,height 属 性 をつかった 指 定 はしないで 下 さい ただし 画 面 幅 ぴったりに 表 示 したい 場 合 は width 属 性 で width=100%と 指 定 することを 推 奨 します [ 参 照 ] 画 像 について 詳 しくは 別 紙 ラウンドアバウト 2 開 発 リファレンス 第 2 章 画 像 変 換 を 参 照 してく ださい 1-5 CSS の 書 き 方 外 部 CSS ファイルに 記 述 します (テンプレートの style.css ファイル) style 要 素 style 属 性 は 使 いません @ 規 則 には 対 応 していませんので 複 数 のファイルを 使 う 場 合 は link 要 素 を 使 って 読 み 込 みます 複 数 クラス 名 の 指 定 に 対 応 していない 端 末 があるので class 属 性 の 値 は 1 つにします OK <div class= foo > NG <div class= foo bar > 文 字 色 背 景 色 文 字 サイズを 設 定 する 場 合 は div か span 要 素 に クラス 名 をつけて 指 定 します 8
<h1> <span class= h1 > 色 と サ イ ズ を 変 え ま す </span> </h1> <div class= bg > 背 景 色 は 赤 です</div>.h1 { color: #333; font-size: medium; }.bg { background-color : #FF0000; } テキストや 画 像 などのアラインメントを 指 定 する 場 合 は div 要 素 に クラス 名 をつけて 指 定 します <div class= content > このテキストはセンターです </div>.content { color: #DDD; text-align: center; } au の 一 部 端 末 は CSS のファイルサイズが 4KB までという 制 限 があります 制 限 を 超 える 場 合 は CSS ファイルを 出 し 分 けてください [ 参 照 ] 別 紙 ラウンドアバウト 2 開 発 リファレンス 第 7 章 CSS ファイル 切 り 替 えを 参 照 してください 1-6 フォントサイズの 指 定 各 端 末 に 最 適 なフォントサイズがあらかじめ 指 定 されているので(デフォルトは x-large) フォントサ イズを 変 更 したい 箇 所 にだけ font-size プロパティを 指 定 してください font-size プロパティは 端 末 ごとに 最 適 サイズに 調 整 するため CSS 変 換 シートと 連 動 しています CSS 変 換 シートにあらかじめ 設 定 されている font-size プロパティが 使 用 可 能 です 使 用 可 能 な font-size プロパティの 種 類 xx-small x-small small medium large x-large xx-large 80% 100% 120% [ 参 照 ] 端 末 ごとのフォントサイズ 調 整 など デフォルト 状 態 から 変 更 する 際 は CSS 変 換 シートを 編 集 してください( 別 紙 ラウンドアバウト 2 開 発 リファレンス 第 6 章 CSS 変 換 シート) 9
第 2 章 コンテンツ 制 作 のポイント モバイルコンテンツを 作 る 際 の 基 本 的 なデザインのポイントについて 書 いてあるので コンテンツを 作 る 際 に 参 考 にして 下 さい 文 中 に HTML やスタイルシートのソースが 数 か 所 出 てきますが 一 部 ソースを 抜 粋 したものになり ます 2-1 テーブルの 装 飾 セルの 色 や 文 字 色 フォントサイズなどの 調 整 は th または td 要 素 のタイプセレクタを 使 います 端 末 ごとに 画 面 解 像 度 が 違 うので セルの 大 きさの 設 定 には % を 使 います docomo の 古 い 機 種 などでは border プロパティが 効 かないので 罫 線 を 表 示 する 場 合 には table 要 素 で border= 1 を 指 定 します 図 3 テーブル 装 飾 の 例 ハイスペックな 端 末 では こ のような 線 の 色 を 変 えたデザ インもできます N905i 932SH 図 3 の HTML ファイル 例 <table border="1" width="95%" cellpadding="0"> <tr><th> </th><th> 月 ~ 金 </th><th> 土 </th><th> 日 </th></tr> <tr><td> 午 前 </td><td> </td><td> </td><td rowspan="2"> </td></tr> <tr><td> 午 後 </td><td> </td><td> </td></tr> </table> 10
図 3 の CSS ファイル 例 一 部 プロパティを 省 略 しています th,td { text-align:center font-size:medium; } th { width:25%; border:4px solid #F21E8C; background-color:#6bc6dd; color:#ffffff; } td { border:4px solid #999999; color:#000099; } テーブルの 入 れ 子 はできません 古 い 機 種 では table 要 素 に 対 応 していないものがあります それらも 考 慮 したデザインをする 場 合 テーブルを 使 わないレイアウトを 考 えるか テーブルを 使 うものとそうでないものを 出 し 分 けます [ 参 照 ] 出 し 分 け 方 法 については 別 紙 ラウンドアバウト 2 開 発 リファレンス 第 5 章 表 示 コントロール を 参 照 してください 2-2 ブロック 要 素 のフロート au のすべての 端 末 と docomo の 古 い 端 末 などではブロック 要 素 のフロートができません その 場 合 table または div タグを 使 ったデザインをすると 同 じような 見 た 目 のデザインにできます (1) アイコンを 使 ったメニューデザイン 図 4 アイコンを 使 ったメニューデザイン 例 フ ロ ー トが 使 え な い 端 末 で は 縦 に 並 んでしまいます iphone W61K 11
アイコンを 使 ったメニューの 場 合 は table タグを 使 うと 同 じような 見 た 目 のデザインになります 図 5 table タグをつかった 例 図 5 の HTML ファイル 例 <table width="100%"> <tr> <td width="33%"> <a href="#"><img src="img/icon1.gif" />RA1</a> </td> <td width="33%"> <a href="#"><img src="img/icon2.gif" />RA2</a> </td> <td> <a href="#"><img src="img/icon3.gif" />RA3</a> </td> </tr> ~ 中 略 ~ </table> (2) テキストをつかったメニューデザイン 図 6 テキストをつかったメニューデザイン 例 フ ロ ー トが 使 え な い 端 末 で は 縦 に 並 んでしまいます iphone T004 12
テキストを 横 に 並 べるメニューの 場 合 は div タグと span タグを 使 うと 同 じような 見 た 目 になります 図 7 div タグと span タグを 使 った 例 図 7 の HTML ファイル 例 <div> <span class="item"><a href="#top"> 主 要 </a></span> <span class="item"><a href="#int"> 国 際 </a></span> ~ 中 略 ~ </div> (3) デザインの 出 し 分 け スマートフォンなどの 上 位 端 末 ではブロック 要 素 をフロートにして au 端 末 や docomo の 古 い 端 末 などブ ロック 要 素 のフロートが 使 えない 端 末 にだけ 違 うデザインを 出 したいという 場 合 ラウンドアバウトの 表 示 コントロール 機 能 を 使 うとコンテンツの 出 し 分 けが 出 来 ます 表 示 コントロールを 使 う 場 合 グループを 定 義 しているファイル(device-group.conf)にブロック 要 素 のフ ロートが 出 来 ないグループを NOFLT という 名 前 で 定 義 しているのでそれを 使 います 出 し 分 け 方 法 の 例 <?ra g="!noflt" line= *?> <ul> <li><a href="#top"> 主 要 </a></li> <li><a href="#int"> 国 際 </a></li> </ul> <?ra break?> ブロック 要 素 のフロートが 使 える 端 末 にはこちらを 表 示 します ブロック 要 素 のフロートが 使 えない 端 末 にはこちらを 表 示 します <?ra g="noflt" line= *?> <div> <span class="item"><a href="#top"> 主 要 </a></span><span class="item"><a href="#int"> 国 際 </a></span> </div> <?ra break?> 13
[ 参 照 ] device-group.conf ついて 詳 しくは 別 紙 ラウンドアバウト 2 開 発 リファレンス 第 4 章 端 末 グル ープを 参 照 してください [ 参 照 ] 表 示 コントロールについて 詳 しくは 別 紙 ラウンドアバウト 2 開 発 リファレンス 第 5 章 表 示 コン トロールを 参 照 してください 2-3 画 像 の 周 りにテキストを 流 し 込 む 図 8 T004 で 表 示 したテキスト 流 し 込 みの 例 画 像 の 周 りにテキストを 流 し 込 むには float プロパティと align 属 性 を 併 用 します float が 使 えない 端 末 でも 画 像 の 周 りにテキストを 流 し 込 む 場 合 には align 属 性 を 指 定 することで 同 じように 見 せることがで きます 図 8 の HTML ファイル 例 <img class= pict01 align= left src= photo.jpg /> 流 し 込 まれるテキスト 図 8 の CSS ファイル 例.pict01 { float:left;} class 属 性 は img 要 素 に 指 定 し CSS には.クラス 名 の 形 でクラスセレクタを 使 います float プロパティの 効 かない au 用 に align 属 性 を 指 定 します 2-4 iphone 風 のリスト 矢 印 つきの iphone 風 リストを 使 う 場 合 テンプレートに arrow という 専 用 クラスが 用 意 されているので それを 使 います 矢 印 つきにしたい li タグに arrow クラスを 指 定 してください 14
HTML ファイル 例 <ul> <li class="arrow"><a href="a.html">ラウンドアバウトの 特 徴 </a></li> <li class="arrow"><a href="a.html"><span class="font1">2011 年 5 月 末 発 売 予 定 </span><br />ラウンドア バウト 2.0!よりリッチに 使 いやすく</a></li> </ul> テンプレートの CSS 変 換 シートに 調 整 された 設 定 が 入 っているので 以 下 のようにモバイル 端 末 で 統 一 されたデザインになります 図 9 iphone 風 リストの 表 示 のされ 方 iphone 932SH docomo の 900 シリーズ などではスタイルに 制 限 があるので シンプ ルなリストデザインにな ります T004 N905i 2-5 フォームコンポーネント(form の 子 要 素 )の 調 整 (1) form input select textarea タグのサイズ 調 整 select タグを 使 ったフォームのサイズと input,textarea タグ 内 の 文 字 サイズの 変 更 は font-size プロパテ ィで 調 整 します input タグと textarea タグの 入 力 エリアのサイズは width height プロパティで 調 整 しま 15
す font-size プロパティは 端 末 ごとに 調 整 されますが width height プロパティは 調 整 されません [ 参 照 ] 端 末 ごとに width height プロパティを 調 整 したい 場 合 は CSS 変 換 シートを 編 集 して 下 さい( 別 紙 ラウンドアバウト 2 開 発 リファレンス 第 6 章 CSS 変 換 シート) CSS ファイル 例 input {width:95% ;font-size:large;} select {font-size:large;} textarea {width:95%;height:5em;font-size:large;} 図 10 フォームコンポーネントの 表 示 のされ 方 iphone 932SH T004 N905i ドコモ 900 シリーズでは input タグや textarea タグに 対 しての width,height が 効 きません サイズ 調 整 が 必 要 な 場 合 input タグは size 属 性 textarea タグは cols( 横 幅 )と rows( 縦 幅 ) 属 性 の 値 が 有 効 にな ります (2) ラジオボタン チェックボックスのサイズ 調 整 iphone ではラジオボタンとチェックボックスのサイズが 小 さいとタップしにくいことがあります そのため テンプレートには 以 下 のようなボタンサイズを 変 える 設 定 が 入 っています input[type="radio"] {height:30px; width:30px;} input[type="checkbox"] {height:30px;width:30px;} android 端 末 には 効 きません 16
(3) 入 力 モードの 設 定 携 帯 の 文 字 入 力 モードの 指 定 には istyle を 使 います istyle=1( 全 角 かな) istyle=2( 全 角 カナ) istyle=3( 半 角 英 字 ( 小 文 字 )) istyle=4( 数 字 ) スマートフォンには 効 きません 17