ジーンコード 設 計 要 件 定 義 ガイド 第 1 版 最 終 更 新 日 2016/03/31
目 次 第 1 章 開 発 フロー... 4 第 2 章 要 件 定 義... 5 (1) 概 要... 5 (2) 変 換 による 制 約... 5 (3) デバイスによる 制 約... 6 (4) 端 末 の 保 証 についての 考 え 方... 6 (5) デザイン... 7 (6) デザインコンポーネントで PC サイトのアトミックデザイン 化... 7 (7) 弊 社 内 で 持 っているコンポーネントのご 紹 介... 8 (8) 注 意 するべき PC サイトの 要 素 など... 8 第 3 章 設 計... 9 (1) 設 計 の 概 要... 9 (2) HTML... 9 (3) パーツ...10 (4) 画 像...10 (5) スタイルシート...11 (6) JavaScript...11 (7) HEAD 内 要 素 や META 要 素 など...12 2
改 訂 履 歴 版 数 発 行 日 改 訂 内 容 第 1 版 2016 年 3 月 31 日 初 版 発 行 3
第 1 章 開 発 フロー ジーンコードを 使 用 した 開 発 フローでも 通 常 の 開 発 フローと 同 じ 流 れで 開 発 を 進 めていきます ただし 変 換 によってコンテンツを 作 り 出 す 方 式 のため 省 略 が 可 能 な 項 目 だけでなく 実 装 上 の 制 約 もあることに 注 意 が 必 要 です 4
第 2 章 要 件 定 義 (1) 概 要 対 象 範 囲 (URL)の 確 定 o PC サイトから 変 換 してスマホサイトと 表 示 する 対 象 ページの 確 定 作 業 ネットワーク 設 計 監 視 体 制 o ジーンコードを 導 入 する 際 のネットワーク 設 計 と 監 視 設 計 URL 設 計 o PC 変 換 して 構 築 したスマホサイトの URL について( 主 にドメインの 考 え 方 ) 対 象 デバイスタイプ(スマホ or タブレット) OS ブラウザ 確 定 o スマホサイトの 動 作 対 象 端 末 の 剪 定 PC 連 動 箇 所 指 定 o スマホサイトと 連 動 したい 箇 所 の 洗 い 出 し デザイン 提 案 o 連 動 箇 所 に 基 づくデザイン 作 成 作 業 (2) 変 換 による 制 約 変 換 の 都 合 上 次 のような 制 約 があります スマホページと 変 換 元 となる PC ページとの 関 係 は 1 対 1 です( 脚 注 1) 複 数 の PC ページから 1 つのスマホページを 作 成 することはできません フレーム/IFRAME を 使 用 したページの 場 合 も 各 フレーム/IFRAME ごとにスマホ 用 に 変 換 し ます スマホの 画 面 フローは PC の 画 面 フローと 同 じになります( 脚 注 2) PC サイト 側 に 存 在 しない 新 機 能 は 実 装 できません( 脚 注 3) フォームコンポーネントの 種 類 (テキストボックス ラジオボタン 等 )も 原 則 として PC ページと 同 じ 種 類 のコンポーネントを 使 用 します( 脚 注 4) 脚 注 : 1. 変 換 元 ページが 存 在 しない 場 合 に スマホ 独 自 ページ( 静 的 ページ)を 配 置 することは 可 能 で す 5
2. 自 動 で Submit するコードを 埋 め 込 んだページに 変 換 することで ページをスキップすることは できます 3. PC サイト 側 を 改 修 し ジーンコード 経 由 で PC サイトにアクセスした 際 の 動 作 表 示 項 目 を 変 更 すれば 実 現 可 能 です 4. 機 能 上 はコンポーネントの 種 類 変 更 も 可 能 ですが 既 存 の JavaScript コードやアプリケーショ ンに 影 響 が 出 る 可 能 性 があります (3) デバイスによる 制 約 機 能 上 はコンポーネントの 種 類 変 更 も 可 能 ですが 既 存 の JavaScript コードやアプリケーションに 影 響 が 出 る 可 能 性 があります Flash コンテンツは 表 示 できません VBScript/DHTML/Java アプレットは 動 作 しません zip ファイルなど 圧 縮 ファイルの 展 開 ができません 印 刷 ができません IP アドレスが 接 続 ネットワーク/ 利 用 場 所 等 により 変 動 します UserAgent ヘッダがスマートフォンの UserAgent になります (4) 端 末 の 保 証 についての 考 え 方 ジーンコードは 各 OS やブラウザの 表 現 や 挙 動 の 違 いを 吸 収 するシステムではなく すでにあるウェ ブサイトをマルチデバイス 対 応 させる 仕 組 みを 提 供 する 情 報 ハブとしての 役 割 を 果 たします ジーンコード 内 部 で 配 布 されいているパーツは 各 OS やブラウザでの 表 示 に 対 応 しておりますので パーツを 利 用 するのであれば 保 証 はされています ただ 上 級 なウェブページを 作 る 上 で パーツよりもよりカスタム 要 素 の 強 いサイトを 構 築 するのであれ ば そのデザインに 付 随 する CSS や JavaScript コードについては テンプレート 開 発 者 が 対 応 OS やブ ラウザを 設 定 し 自 身 で 対 応 する 必 要 あります 6
(5) デザイン デザインについては 次 のように 大 枠 のデザインポリシーを 決 めることをお 勧 めします ヘッダ/フッタ:スマートフォン 向 けのヘッダ/フッタとして 新 たにデザイン 定 義 します メニュ ーはスライドメニュー(フライアウト) またはドロップダウンメニューとし 表 示 するメニュー 項 目 は PC サイトと 同 じメニュー 項 目 を 使 います 見 出 し: 全 てテキスト 化 します コンテンツ:メインコンテンツ 内 のすべての 情 報 を 漏 れなく 表 示 します 画 像 一 覧 はカルーセ ル 化 します また リスト 表 示 部 分 では 詳 細 説 明 文 を 省 き リストの 一 覧 性 を 向 上 させます 右 サイドフレームの 情 報 は 一 部 を 除 き 表 示 しません デザイン:CSS で 再 現 出 来 る 表 現 を 基 本 とし フラットなデザインを 心 がけること 画 面 構 成 : 複 雑 な 表 組 み レイアウトはさけ シンプルな 構 成 とすること (6) デザインコンポーネントで PC サイトのアトミックデザイン 化 アトミックデザイン o これ 以 上 分 解 できないところまで 要 素 を 分 解 する = Atom o ちょっとした 組 み 合 わせ(ログインフォーム 検 索 フォーム フォームでいう 姓 名 など) = Molecule o 有 機 的 な 何 か(ヘッダーやフッターなど) = Organisme 定 義 o Atom = 原 子 ボタン リンク 文 字 o Molecule = 分 子 検 索 ボックス ログインフォーム o Organism = 微 生 物 単 細 胞 生 物 カルーセル フライアウトメニュー など o Templates = ジーンコードでいうパターンファイルに 近 い o Pages 対 象 となるページをすべてデザインするのではなく 似 たようなデザインを 探 し リファレンスを 作 る 方 式 で 作 業 の 効 率 化 を 図 ります 7
(7) 弊 社 内 で 持 っているコンポーネントのご 紹 介 別 紙 GCUI デザインコンポーネント を 参 照 (8) 注 意 するべき PC サイトの 要 素 など 画 面 幅 400px(iPhone 6 相 当 )を 標 準 的 なスマートフォンの 画 面 幅 とした 場 合 画 面 内 に 収 ま らない 要 素 は 構 造 を 大 きく 変 化 させる 必 要 がある o テーブル o バナー 画 像 クライアントサイドで 構 築 されている DOM 構 造 / AJAX など 文 字 を 含 む 大 きな 画 像 は 小 さく 表 示 することで 文 字 の 可 読 性 が 著 しく 低 くなってしまうことが あります ID やクラス 属 性 が 適 切 に 振 られておらず jquery セレクターで 要 素 の 特 定 が 難 しい 場 合 IFRAME モーダル ポップアップウィンドウ(スマホではタブになるため) window.opener は ios の Chrome で 使 用 できません 8
第 3 章 設 計 (1) 設 計 の 概 要 ジーンコードを 使 用 するにあたって 必 要 な 設 計 とは 主 に 以 下 2 点 を 決 定 していく 作 業 になります PC サイト 連 動 箇 所 :デザインを 実 現 するにあたり PC ページのコンテンツの 内 スマートフォ ン 側 で 利 用 するコンテンツブロック/フォーム/ 画 像 /JavaScript コード/meta タグ 等 はどれ か?また どのように 変 換 するか? スマートフォン 固 有 箇 所 :デザインを 実 現 するにあたり PC ページ 側 に 情 報 が 存 在 しないため に スマートフォン 向 けに 別 途 作 成 する 必 要 があったり 利 用 したりするスタイルシート/ 画 像 /HTML ブロック 等 は 何 か? (2) HTML スマートフォン 用 HTML をどのように 生 成 するかを 決 定 します スマートフォン 用 HTML は 主 に 以 下 の 4 つの HTML ブロックを 組 み 合 わせて 出 力 します 9
スマートフォン 用 HTML タグ( 直 接 記 述 ) 対 応 する PC ページから 取 得 した HTML ブロック 対 応 する PC ページから 取 得 し パーツで 変 換 した HTML ブロック 対 応 する PC ページから 取 得 し スクリプト(gc-script)で 変 換 した HTML ブロック また PC ページの HTML ブロックはセレクタ( 1)を 利 用 して 指 定 するため 変 換 対 象 ブロックを 特 定 できるセレクタが 存 在 するかを 調 査 し セレクタの 書 き 方 を 決 定 します( 2) これらは 最 終 的 にはテンプレートに 記 述 する 内 容 になります フレーム/IFRAME の 場 合 は 各 フレームの HTML 毎 に 生 成 方 針 を 検 討 します 1 変 換 対 象 の 参 照 方 法 としては jquery のセレクタ 構 文 を 使 用 します 2 変 換 対 象 を 特 定 するための id 属 性 /class 属 性 が 存 在 しない 場 合 は PC ページに 目 印 となる 属 性 を 追 加 することも 検 討 します (3) パーツ パーツは PC サイトの 構 造 とスマートフォンサイトで 使 用 する CSS フレームワークを 考 慮 し どのパー ツを 使 用 すれば 変 換 できるかを 決 定 します 代 表 的 なページに 対 し 事 前 にプロトタイプ 作 成 を 行 うこと をお 勧 めします (4) 画 像 画 像 については 以 下 のいずれの 変 換 方 式 をとるかを 検 討 します リサイズ:PC と 同 じ 画 像 ファイルを 使 用 しますが CSS で 大 きさの 調 整 を 行 います 置 き 換 え:IMG 要 素 の src 属 性 を 変 換 し 別 途 作 成 したスマホ 用 の 画 像 ファイルに 置 換 する 方 法 です テキスト 化 :img 要 素 の alt 属 性 を 利 用 してテキストに 置 き 換 え CSS でデザインする 方 法 です 見 出 し 画 像 やボタンに 適 した 方 法 です 10
削 除 :スペーサー 画 像 などに 適 した 方 法 です その 他 画 像 変 換 でクリッピングする 方 法 もあります (5) スタイルシート 利 用 作 成 するスマートフォン 向 け CSS を 検 討 します CSS は PC サイトからの 変 換 ではなく スマート フォン 向 けに 準 備 作 成 した CSS を 利 用 します ジーンコードでは 以 下 の CSS を 標 準 提 供 しています gcreset.css: 各 種 プロパティをリセットする CSS です gccommon.css:フォーム 等 に 基 本 的 なデザインを 適 用 する CSS です gcparts.css:パーツで 変 換 した 部 分 に 適 用 する CSS です gcbs-color.css:bootstrap パーツのカラーテーマです この 他 独 自 の CSS を 利 用 することができます また 使 用 する CSS は link タグでテンプレートに 記 述 します なお Bootstrap パーツや jquerymobile パーツを 使 用 すると 各 フレームワークの 書 式 に 則 った 構 文 で HTML 出 力 されるため Bootstrap のテーマ 等 の 利 用 も 可 能 です (6) JavaScript JavaScript については 以 下 の 観 点 で JavaScript の 扱 いを 検 討 します PC サイトの JavaScript( 外 部 JS ファイル 埋 め 込 み script タグ onclick 属 性 等 )は 基 本 的 に スマートフォンサイトでも 全 て 利 用 します ジーンコードでは jquery 1.7.2 を 使 用 します PC サイト 側 で 使 用 する jquery のバージョンと 異 なる 場 合 は どちらか 一 方 に 合 わせるか 共 存 を 検 討 します 11
JavaScript コードの 内 容 によっては ポーティングもしくは JS 変 換 /PostJS を 検 討 します 代 表 的 なケースは 以 下 の 通 りです o PC サイトとスマートフォンサイトの URL が 異 なる 環 境 で JavaScript コードに PC サイ トの URL が 記 載 してある 場 合 o HTML 変 換 に 伴 い JavaScript コードに 記 載 しているセレクタではオブジェクトが 参 照 できなくなる 場 合 o JavaScript コードが PC サイト 向 けのデザインを 出 力 する 場 合 (7) HEAD 内 要 素 や META 要 素 など サイトの 方 針 にもかなり 左 右 されますが 以 下 のことにも 考 慮 をする 必 要 があります Script タグなど 読 み 込 むスクリプトを 考 慮 する:HEAD タグ 内 のみではなく BODY などにもあ るかをしっかりチェックするべき Google Analytics などサイトの 分 析 用 のスクリプトを 入 れている 場 合 そのタグを 本 サイトと 共 有 するか 別 に 管 理 するかを 検 討 ください SEO 向 けに 入 れている 要 素 の 検 討 EFO スクリプト:フォームの 要 素 やタグ 構 成 が 変 わらないケースでは EFO スクリプトはそのま ま 流 用 することができますが 構 造 が 変 わってしまう 場 合 には EFO 業 者 に 確 認 が 必 要 にな ります ドメインが 本 サイトと 異 なる 場 合 アプリケーション 内 で 絶 対 URL を 出 力 しているケースはアプ リケーションの 修 正 が 必 要 な 場 合 もあります IFRAME やモーダル 表 示 などは 注 意 が 必 要 です 12