スマートフォン 最 適 化 Webサイト 開 発 運 用 支 援 ソリューション x-fit(クロスフィット) のご 紹 介 SCSK 株 式 会 社 ITエンジニアリング 事 業 部 ミドルウェアソリューション 部 2012 年 7 月 5 日 更 新
アジェンダ スマートフォンにおける 多 様 性 /コンテンツ 作 成 の 問 題 点 x-fitのご 紹 介 x-fit 導 入 のながれ Page 1
スマートフォンにおける 多 様 性 コンテンツ 作 成 の 問 題 点 Page 2
スマートフォンサイト 開 発 時 の 問 題 PC スマートフォン ios Version 4.X Version 5.X Version 2.2 ソニー エリクソン NEC ケータイ Android Version 2.3 Version 4.0 サムスン LG 端 末 毎 に 搭 載 OS バージョン 端 末 メーカーにより 仕 様 が 異 なることが 問 題 に Page 3
OS 端 末 毎 のブラウザ 仕 様 による 表 示 問 題 端 末 仕 様 の 問 題 により 表 示 エラーが 発 生 する 可 能 性 [ 端 末 1] OS:iOS Version:4.0 [ 端 末 2] OS:Android Version:1,6 [コンテンツA] 1HTML + 2CSS 3JavaScript [ 端 末 3] OS:Android Version:2,1 Page 4
OS 端 末 毎 のブラウザ 仕 様 による 表 示 問 題 [コンテンツA] 1HTML + 2CSS 3JavaScript [ 端 末 1] OS:iOS Version:4.0 [ 端 末 2] OS:Android Version:1,6 [コンテンツB] 1HTML + 2CSS 3JavaScript 端 末 毎 にコンテンツを 作 り 変 えて 対 応 [ 端 末 3] OS:Android Version:2,1 Page 5
x-fitのご 紹 介 Page 6
スマートフォンに 最 適 化 を 実 現 製 品 事 例 ではございません 動 的 なコンテンツをデザインテンプレートとして 提 供 各 スマートフォン 機 種 毎 の 仕 様 に 合 わせて コンテンツを 変 化 して 提 供 Page 7
スマートフォンコンテンツ 変 換 イメージ x-fit(クロスフィット) = TrainingEditor + Proxyサーバ TrainingEditor スマホ 全 機 種 に 対 応 変 換 コードを 呼 び 出 し 作 成 コードの 保 存 UI 部 品 作 成 プレビュー Windows Phone BlackBerry Proxyサーバ HTML5ジェネレート 機 能 タグ/ 画 像 変 換 機 種 判 別 新 機 種 自 動 対 応 スマホサイト 作 成 HTML5 CSS3 JavaScript JSP/PHP/ASP etc. ページテンプレート/CMS HTML 内 に 挿 入 Page 8
Proxyサーバによる 変 換 イメージ Windows Phone BlackBerry サーバ 上 に 最 新 の 機 種 情 報 を 保 持 し アクセスしてきた 機 種 を 自 動 識 別 することにより 各 端 末 に 最 適 なコンテンツを 配 信 アクセス 端 末 を 識 別 し 機 種 情 報 とマッチング コンテンツ 取 得 コンテンツ 変 換 ベースコンテンツ 日 次 で 自 動 更 新 機 種 情 報 (メモリ) データサーバ 機 種 情 報 サーバ 一 般 販 売 される 携 帯 電 話 を 購 入 して 端 末 情 報 を 調 査 国 内 で 利 用 可 能 なスマートフォンの 情 報 を 保 持 実 測 データを 新 機 種 発 売 後 に 反 映 Page 9
Training Editor のご 紹 介 x-fit 向 け 入 力 ソースのコーディング 支 援 [ブラウザから 利 用 するWEBサービス] x-fit 用 の 部 品 タグは サンプルから 呼 び 出 し 可 能 x-fit タグ HTMLの 編 集 リアルタイムに 反 映 するプレビュー 外 部 CSSやJavaScriptの 個 別 設 定 も 可 能 Page 10
コード 開 発 イメージ(ドロップダウンタブメニュー) スクラッチでの 開 発 HTML CSS JavaScript 3つの 異 なる 言 語 をデザインに 則 して 別 々に 定 義 し 構 築 x-fit 導 入 後 たったこれだけのコードをHTMLに 定 義 するだけで 完 成! Page 11
コンテンツデザイン 例 イメージ カルーセル ブロック リンク ブロック リンク ブロック リンク カルーセル ジャスティ ファイ カルーセル カルーセル 最 適 化 サイトの 一 例 となり 事 例 ではありません Page 12
コンテンツデザイン 例 [デザイン] [デザインイメージ] [ 表 示 機 能 ] 複 数 のメニューを 開 閉 させる ボックス 表 示 [デザイン] [デザインイメージ] [ 表 示 機 能 ] スマートフォンサイトで 特 徴 的 なリンクボックス 表 示 Page 13
コンテンツデザイン 例 [デザイン] [デザインイメージ] [ 表 示 機 能 ] 複 数 の 画 像 をスライドショー できる 表 示 [デザイン] [デザインイメージ] [ 表 示 機 能 ] タッチUIの 操 作 性 を 考 慮 した 押 し 安 いチェックボックス Page 14
コンテンツデザイン 例 [デザイン] [デザインイメージ] [ 表 示 機 能 ] 機 種 の 画 面 サイズ 毎 に レイアウトを 最 適 化 させる [デザイン] [デザインイメージ] [ 表 示 機 能 ] 機 種 の 画 面 サイズ 毎 に 画 像 サイズを 拡 大 縮 小 Page 15
コンテンツデザイン 例 [デザイン] [デザインイメージ] [ 表 示 機 能 ] 機 種 毎 の 画 面 の 幅 に 合 わせ コンテンツを 均 等 に 配 置 [デザイン] [デザインイメージ] [ 表 示 機 能 ] タッチUIの 操 作 性 を 考 慮 した 押 し 安 いラジオボタン Page 16
コンテンツデザイン 例 [デザイン] [デザインイメージ] [ 表 示 機 能 ] 画 像 などをスライドさせ 表 示 [デザイン] [デザインイメージ] [ 表 示 機 能 ] コンテンツの 縦 長 防 止 開 閉 可 能 なコンテンツ Page 17
コンテンツデザイン 例 [デザイン] [デザインイメージ] [ 表 示 機 能 ] チェックボタンに 画 像 を 埋 め 込 んだ デザイン [デザイン] [デザインイメージ] [ 表 示 機 能 ] 画 像 データを 埋 め 込 んだ デザイン Page 18
コンテンツデザイン 例 [デザイン] [デザインイメージ] [ 表 示 機 能 ] 幅 のある 段 組 みが 容 易 に デザイン 可 能 [デザイン] [デザインイメージ] [ 表 示 機 能 ] Switchデザインのボタンを 容 易 にデザイン 可 能 Page 19
コンテンツデザイン 例 [デザイン] [デザインイメージ] [ 表 示 機 能 ] ページ 内 を 複 数 ページで 切 り 替 え るデザインが 容 易 に 可 能 Page 20
x-fit 製 品 デモサイトの 紹 介 ショッピングサイトデモ 旅 行 サイトデモ 会 員 制 サイトデモ Page 21 https://www.x-fit.jp/v110/sp/
動 的 なページへのx-fit 適 用 動 的 なスマートフォンサイトの 作 成 にもx-fitを 適 用 することが 可 能 です 下 記 画 像 デザインについて 見 出 しの 内 容 の 数 や 内 容 自 体 を 動 的 に 生 成 する 適 用 方 法 : 動 的 に 表 示 したい 部 分 にPHPなどのロジックを 組 み 込 む ソース 例 <body> <?php $dsp_ac ='<accordion x-vwidth="100%" x-hwidth="100%">'; foreach($results->results as $key => $value){ $dsp_ac.= '<term x-vheight="100px" x-hheight="100px" class="acd_term_class">'; $dsp_ac.= '<span id="'.$value->termid.'">'. $value->term. '</span>'; $dsp_ac.= '</term>'; $dsp_ac.= '<content x-vheight="50px" x-hheight="50px" class="acd_content_class">'; $dsp_ac.= '<p id="'. $value->contentid. '">'. $value->content. '</p>'; $dsp_ac.= '</content>'; } $dsp_ac.='</accordion>'; print(mb_convert_encoding($dsp_ac, "UTF-8", "auto"));?> </body> 基 本 的 に x-fitの 部 品 はHTMLタグと 同 じような 感 覚 で 利 用 できます そのため プログラム 言 語 を 利 用 して x-fit 部 品 (タグ)を 動 的 に 生 成 することが 可 能 です Page 22
コンテンツ 変 換 ミドルウェア 活 用 メリット サイト 品 質 の 向 上 キャリア OS バージョンなどの 仕 様 差 異 へ 対 応 コンテンツソースの 一 元 管 理 ベースとするコンテンツを 統 一 することで 運 用 管 理 を 容 易 に 新 規 に 発 売 される 端 末 への 自 動 対 応 発 売 端 末 の 動 向 調 査 や 端 末 調 査 が 不 要 に Page 23
コンテンツ 変 換 ミドルウェア 活 用 メリット スマートフォン 最 適 化 サイトの 課 題 を 解 決! マークアップエンジニアには テスト 工 数 の 削 減 タッチUIの 再 現 性 再 利 用 性 の 確 保 UIを 探 す 手 間 の 軽 減 サイト 運 営 者 には 制 作 ガイドラインを 一 定 に 保 つことができる 使 い 回 しできる 部 品 で 属 人 デザインの 防 止 実 機 確 認 済 み 部 品 が 品 質 を 保 つ JavaScriptのブラウザ 差 異 の 吸 収 HTML5の 動 きでサイトの 差 別 化 Page 24
x-fit 導 入 のながれ Page 25
Page 26 x-fitを 利 用 したスマートフォンコンテンツ 開 発 のながれ スマートフォンサイト 開 発 のながれ サ イ ト 公 開 要 件 定 義 サ イ ト 設 計 デ ザ イ ン 制 作 HTML/CSS 制 作 JavaScript テ ス ト 作 業 x-fit 向 け コ ン テ ン ツ 開 発 x-fit サ ー バ 設 定 構 築 開 発 テ ス ト 作 業
Page 27 スマートフォンコンテンツ 公 開 後 運 用 のながれ スマートフォンサイト 通 常 運 用 のながれ サ イ ト 公 開 新 端 末 発 売 状 況 の 確 認 テ ス ト 作 業 新 端 末 仕 様 の 確 認 コ ン テ ン ツ 改 修 スマートフォンサイトx-fit 導 入 時 運 用 のながれ サ イ ト 公 開 x -fit サ ー バ 端 末 情 報 更 新
x-fitライセンス 価 格 体 系 について x-fit Enterprise Edition x-fit Lite Edition x-fit Developer Edition ライセンス 価 格 2,980,000.- 980,000.- 無 償 年 間 保 守 費 用 447,000.- 147,000.- 147,000.- 用 途 運 用 ライセンス 運 用 ライセンス 開 発 ライセンス 変 換 対 象 画 面 数 無 制 限 5URL 無 制 限 冗 長 化 構 成 可 能 可 能 可 能 x-fitライセンス 提 供 内 容 について 上 記 x-fitライセンスにはproxyサーバ 用 のライセンスが 含 まれます コードビルダーについてはWeb 上 より 利 用 が 可 能 であり サポートの 提 供 が 必 要 な 場 合 については 上 記 ライセンス 保 守 の 購 入 を 以 って ご 提 供 させていただきます Page 28
サポート 内 容 保 守 サービス 内 容 端 末 情 報 の 提 供 ( 自 動 または 手 動 による 更 新 ) Eメールによる 技 術 QAサポート ソフトウェアの 無 償 マイナーバージョンアップ サポート 対 応 時 間 平 日 10:00~18:00 土 曜 日 日 曜 日 日 本 国 の 定 める 祝 祭 日 ならびにKSK 所 定 の 休 日 を 除 く 平 日 の 午 前 10 時 から 午 後 6 時 までの 営 業 時 間 とする サポート 対 応 窓 口 株 式 会 社 KSK フレックスファームビジネスユニット Page 29
構 成 パターン 参 考 価 格 イメージ1 システム 構 成 パターン: 本 番 環 境 シングル 構 成 想 定 サイト:PC ケータイコンテンツ 併 用 サイト 変 換 対 象 画 面 数 :5 画 面 数 量 単 価 合 計 金 額 x-fit Lite Edition 1 980,000.- 980,000.- x-fit Lite Edition 年 間 保 守 費 1 147,000.- 147,000.- 初 年 度 合 計 1,127,000.- x-servlet 導 入 いただくサーバについては1CPUマシンを 前 提 とした 価 格 想 定 となります Page 30
構 成 パターン 参 考 価 格 イメージ2 システム 構 成 パターン: 本 番 環 境 冗 長 化 構 成 想 定 サイト:スマートフォン 特 化 型 サイト 変 換 対 象 画 面 数 : 無 制 限 数 量 単 価 合 計 金 額 x-fit Enterprise Edition 2 2,980,000.- 5,960,000.- x-fit Enterprise Edition 年 間 保 守 費 2 447,000.- 894,000.- 初 年 度 合 計 6,854,000.- x-fitを 導 入 いただくサーバについては1CPUマシンを 前 提 とした 価 格 想 定 となります Page 31
5 年 間 利 用 時 のコスト 試 算 御 見 積 のご 提 案 1:Lite Edition(シングル 構 成 ) 選 定 の 場 合 1 年 目 2 年 目 3 年 目 4 年 目 5 年 目 ライセンス 費 用 980,000 - - - - 年 間 保 守 費 用 147,000 147,000 147,000 147,000 147,000 累 計 1,127,000 1,274,000 1,421,000 1,568,000 1,715,000 御 見 積 のご 提 案 2:Enterprise Edition( 冗 長 化 構 成 ) 選 定 の 場 合 1 年 目 2 年 目 3 年 目 4 年 目 5 年 目 ライセンス 費 用 5,960,000 - - - - 年 間 保 守 費 用 894,000 894,000 894,000 894,000 894,000 累 計 6,854,000 7,748,000 8,642,000 9,536,000 10,430,000 Page 32
サポート 体 制 について 契 約 管 理 業 務 サポート 業 務 エンドユーザー 様 SIer 様 SCSK KSK 製 品 の 問 合 せ 御 見 積 依 頼 ご 契 約 営 業 ご 担 当 者 様 契 約 業 務 更 新 案 内 案 件 管 理 情 報 のご 提 供 御 見 積 作 成 x-servlet 営 業 部 保 守 サポートサービス 障 害 確 認 疑 問 発 生 開 発 ご 担 当 者 様 保 守 サポートサービス x-servlet カスタマーサポート Page 33
お 問 合 わせ 135-8110 東 京 都 江 東 区 豊 洲 3-2-20 豊 洲 フロント SCSK 株 式 会 社 前 提 条 件 モバイルソリューションに 関 するお 問 合 せ ITエンジニアリング 事 業 部 ミドルウェアソリューション 部 TEL:03-5166-1320 / FAX:03-5859-3087 E-mail:flexfirm-sales@ml.scsk.jp Page 34