2010/09/23 iuiを 使 ってサクッとiPhone 最 適 化 株 式 会 社 中 部 システム 吉 樹 0 Chubu System Co,.ltd [http://www.cscweb.org]
自 紹 介 2001 年 株 式 会 社 中 部 システム 社 2002 年 RPG 中 の 開 発 に 従 事 2003 年 主 に 製 造 販 売 業 を 中 にSEとして 活 動 2005 年 IBM iを 用 いた 社 内 Web 開 発 のメンバーとして 活 動 2007 年 IBM iを 用 いたPHPでの 開 発 に 着 2009 年 静 岡 Developers 勉 強 会 の 運 営 委 員 として 活 動 中 2009 年 OS 協 議 会 System i プラットフォーム 分 科 会 の メンバーとして 活 動 中 http://twitter.com/ushiday ushidayの 記 ( http://d.hatena.ne.jp/ushiday/ ) 1
テーマに 取 組 んだ 背 景 トレンドであるスマートフォンを 活 用 したい ホスト 上 のWebアプリを 活 用 したい スマートフォンのWebブラウザで ホスト 上 のWeb サイトを 閲 覧 してみたが 最 適 化 されていないので 閲 覧 や 操 作 ともにイマイチだった 既 存 のWebアプリを 活 かしつつ iphoneに 最 適 化 させる 法 を 模 索 iphoneになった 理 由 たまたま 周 囲 にAndroidより iphoneユーザーの が 多 かった ipod touchも 含 む 2
目 標 iphoneに 最 適 化 出 来 るライブラリやツールの 発 掘 既 存 アプリケーションを 活 かし 易 い 法 やライブ ラリの 選 定 最 適 な 開 発 環 境 を 整 える プロトタイプ アプリケーションの 作 成 開 発 上 の 難 易 度 や 学 習 コストの 極 め メリット デメリット 使 いどころ 等 の 判 断 3
検 証 した 環 境 サーバー:IBM i V5R4M0(オフコン) PHP:Zend Core for i5 2.6(PHPエンジン) PCクライアント:Windows XP SP3 PCブラウザ:Safari 4.0.5 or Chrome 6 実 機 検 証 :ipod touch ios4 Safari 4
課 題 と 解 決 策 既 存 のWebアプリは PC 向 けに 制 作 されている 為 全 体 像 を 表 した 時 に さい 都 度 拡 大 縮 を 繰 り 返 さなくてはならない 画 の 内 容 を 簡 素 化 して やすいサイズへの 最 適 化 5
jqtouch JavaScript 系 UIツール(1) jqueryベースのiphone 風 UIを 提 供 するライブラリ 公 式 サイト http://www.jqtouch.com/ 2010/9/13 時 点 の 最 新 バージョン jqtouch-1.0-beta-2-r109 ライセンス MIT License イメージ UIが 少 しリッチに えて ウケが 良 さそうに 感 じた 正 確 なベンチーマークではない が 体 感 的 に 若 重 たく 感 じた 6
iui JavaScript 系 UIツール(2) iphone 風 UIを 提 供 するライブラリ 先 http://code.google.com/p/iui/ 2010/9/13 時 点 の 最 新 バージョン iui-0.31 ライセンス New BSD Licence イメージ UIがiPhone 標 準 に 準 拠 という 感 じがする jqtouchほど 艶 っぽさが 無 いが これはこれで 悪 くない 7
その 他 その 他 UIツール(3) Universal iphone UI Kit (GPLv3) iwebkit (LGPL) iphone Web Developer Tool Dojo Toolkit - dojox.mobile(bsd License and the Academic Free License ) sencha touch (デュアルライセンス) 今 回 の 研 究 では 実 際 に 試 してはいないが 前 述 の2つ 以 外 に 上 記 もよく かけたので 情 報 として 掲 載 8
ツールの 選 択 今 回 は iui を 試 してみる 事 に... 9
iuiの 特 徴 iphone 用 のツールバーや 画 像 リンクやフォームパーツな ど 基 本 的 なパーツ/ 画 像 を 提 供 検 索 ボックスなどのパーツも 標 準 で 提 供 jsファイルを 読 込 後 簡 単 なHTMLを 記 述 するだけでiPhone 用 のページが 作 成 可 能 画 の 縦 横 の 検 地 ページ 遷 移 の 際 のアニメーション 機 能 戻 るボタンの 自 動 設 定 ( 履 歴 管 理 を ってくれる) 10
詳 細 のレイアウト 確 認 開 発 環 境 する 時 便 利 だったモノ PC 上 のブラウザは 大 枠 の 動 作 確 認 は 出 来 るが レイ アウの 詳 細 確 認 や プレゼン 用 資 料 の 作 成 には 向 いて いない iphone 用 シュミレータ ibbdemo2(gplv3) を 使 用 iphoneの 他 に ipadのシュミ レータも 備 えている Adobe AIR 上 で 動 作 する 為 AIRが 使 える 環 境 であれば ク ロスプラットフォームで 動 作 す る 11
プロトタイプの 作 成 (1) ベースとなるWebアプリケーション 商 品 検 索 (ホスト 上 のPHPで 動 作 ) ホスト 上 で 動 作 している 既 存 の 商 品 検 索 をiPhone 用 にビュー をカスタマイズする 12
プロトタイプの 作 成 (2) アプリケーション 全 体 の 構 想 認 証 メニュー 商 品 検 索 商 品 詳 細 抜 粋 してこのあたりを 説 明 13
プロトタイプの 作 成 (3) サーバサイドのiPhoneの 判 定 アプリケーションの り で ユーザーエージェントを 取 得 して iphoneサイトへ 誘 導 する PHPの 場 合...コーディング 例 //ユーザー 端 末 判 定 $agent = $_SERVER['HTTP_USER_AGENT']; if (preg_match("/iphone ipod/", $agent)){ //iphone ipod Touchの 場 合 の 処 理 } 14
プロトタイプの 作 成 (4) iphone 用 ビューのヘッダー 設 定 通 常 のWindowの 替 りに iphoneで 拡 大 縮 等 が 動 作 す る ビューポートを 定 義 をする htmlのコーディング 例 <!-- iphone viewport 設 定 --> <meta name="viewport" content="width=device-width; initialscale=1.0; maximum-scale=1.0; user-scalable=0;"/> width initial-scale maximum-scale user-scalable Viewportの 横 幅 倍 率 の 初 期 値 倍 率 の 最 大 値 ユーザーの 拡 大 縮 小 可 否 15
プロトタイプの 作 成 (5) iui 用 ヘッダー 設 定 iuiのjavascriptを 動 作 させる 為 の 設 定 html, JavaScriptのコーディング 例 <!-- iui 設 定 (CSS, JavaScript)--> <meta name="apple-touch-fullscreen" content="yes" /> <link type="text/css" rel="stylesheet" href="iui.css" media="screen"/> <script type="application/x-javascript" src="iui.js"></script> <!-- iui アニメーション 開 始 --> <script type="text/javascript"> iui.animon = true; </script> (ページ 遷 移 した 時 のスライドするアニメーション) 16
プロトタイプの 作 成 (6) iuiの 使 用 法 (1) iphoneのツールバー 部 分 の 定 義 htmlの<body>タグ 以 下 の 例 <div class="toolbar"> <h1 id="pagetitle"></h1> <a id="backbutton" class="button" href="#"></a> <a class="button" href="#searchform"> 検 索 </a> </div> 決 められたタグや class を 指 定 するだけで ボタン の 配 置 やリンク 先 を 自 動 的 に ってくれる 17
iuiの 使 用 法 (2) プロトタイプの 作 成 (7) iphoneのボディ 部 分 の 定 義 htmlの<body>タグ 以 下 の 例 <ul id="home" title=" 商 品 Home" selected="true"> <li><a href="search.php"> 商 品 一 覧 </a></li> <li><a href="#edititem"> 編 集 </a></li> <li><a href="add.php"> 追 加 </a></li> <li>その 他 </li> </ul> <ul> </ul>までが1ページの 範 囲 <li>タグで 羅 列 するだけで iphone 風 にメニューを 配 置 <a>タグでリンクにするだけで 次 のアクションに 遷 移 18
iuiの 使 用 法 (3) プロトタイプの 作 成 (8) 商 品 検 索 結 果 画 の 定 義 (PHPの 場 合 ) <ul title=" 商 品 一 覧 "> <?php $url = "edit.php?code="; foreach ($rows as $row) {?> <li><a href="<?php echo $url.$row["code"] ;?>"> <?php echo $row["code"]." : ". $row["name"] ;?></a></li> <?php } 前 述 のメニューと 同 じく<li><a>タグ?> で 商 品 を 羅 列 するだけで 結 果 の 画 が </ul> 出 される 19
プロトタイプの 作 成 (9) iuiの 代 表 的 なUI 覧 toolbar(divタク class) pagetitle(id) backbutton(id) home(ulタク id) <ul> </ul> <li> </li> <a href="#" group(liタク class) button(aタク class) submit(aタク type) ツールバー 定 義 ツールバーに 表 するタイトル ツールバーに 表 する 戻 るボタン メインページ 1ページの 定 義 ページのメニュー ページ 内 遷 移 (ulタク のidと 連 動 ) メニューのグループ 化 ボタンUI サブミットボタンUI 20 他 多 数 あり
開 発 難 易 度 まとめ(1) htmlのタク や 属 性 のルールを 覚 えるだけで 特 に 難 しい 点 は なかった ベースアプリケーションがあればビューの 直 しだけで 済 み 思 いのほか 数 も 掛 からなかった htmlやサーバーサイドの 技 術 ( 例 えばPHPなど)の 理 解 が 有 れば 分 扱 える 学 習 コスト 倒 なJavaScriptや 画 遷 移 の 制 御 は iui 側 で なっ てくれるので 特 に 特 別 な 知 識 は 必 要 が 無 かった 21
iuiのメリット まとめ(2) 既 存 Webアプリケーションが 既 に 存 在 する 場 合 は ビジネ スロジックを 流 用 出 来 る シンプルな 機 能 だけなので 習 得 しやすい 短 期 間 でiPhoneに 最 適 化 されたWebアプリが 構 築 できる 動 作 も 軽 快 に 動 く( 但 し 体 感 的 な 印 象 ) 22
iuiのデメリット まとめ(3) ドキュメント 関 係 がない サンプルを て 理 解 する 必 要 が ある 戻 るボタンは 自 動 で 履 歴 の 管 理 しているので 複 雑 な 画 遷 移 には 向 いていない オープンソースの 為 商 用 ソフトの 様 なサポートは 受 けら れない シンプルな 機 能 ゆえ iphone 独 特 のマルチタッチなどの 動 作 は 別 途 実 装 する 必 要 がある 23
まとめ(4) iuiの 使 いどころ 画 遷 移 が 単 純 なアプリケーション 例 商 品 検 索 条 件 商 品 覧 詳 細 単 純 な 操 作 (タッチ 操 作 だけ)で 済 むようなケース 例 カレンダー 表 スケジュール 確 認 表 可 能 な 情 報 量 は 限 られている 為 単 純 な 情 報 例 倉 庫 選 択 商 品 名 と 在 庫 を 確 認 較 的 シンプルな アプリケーション 向 き 24
ご 清 聴 ありがとうございました 25