2010/09/23【 iUIを使ってサクッとiPhone最適化 】
株式会社 中部システム ⽜⽥吉樹

0Chubu 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エンジン）
ＰＣクライアント：Windows XP SP3
ＰＣブラウザ：Safari 4.0.5 or Chrome 6
実機検証：iPod touch iOS4 Safari

4課題と解決策既存のWebアプリは、PC向けに制作されている為全体像を表⽰した時に⼩さい。都度拡大縮⼩を繰り返さなくてはならない→ 画⾯の内容を簡素化して⾒やすいサイズへの最適化
5

• jQTouchJavaScript系UIツール（1） jQueryベースのiPhone風 UIを提供するライブラリ公式サイト http://www.jqtouch.com/
2010/9/13時点の最新バージョン「jqtouch-1.0-beta-2-r109」
ライセンス MIT License イメージUIが少しリッチに⾒えて、⼀⾒ウケが良さそうに感じた
正確なベンチーマークではないが、体感的に若⼲重たく感じた

6

JavaScript系UIツール（2）• iUI 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

開発環境する時便利だったモノ• 詳細のレイアウト確認

ＰＣ上のブラウザは、大枠の動作確認は出来るが、レイアウの詳細確認や、プレゼン用資料の作成には、向いていない
 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

Viewportの横幅

initial-scale

倍率の初期値

maximum-scale

倍率の最大値

user-scalable

ユーザーの拡大縮小可否
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

プロトタイプの作成（7）• iUIの使用⽅法（2）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

プロトタイプの作成（8）• iUIの使用⽅法（3）

商品検索結果画⾯の定義(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>

1ページの定義<li>〜</li>

ページのメニュー<a href="#"

ページ内遷移(ulﾀｸﾞのidと連動)

group(liﾀｸﾞclass)

メニューのグループ化

button(aﾀｸﾞclass)

ボタンUI

submit(aﾀｸﾞtype)

サブミットボタンUI※他多数あり20• 開発難易度

まとめ（1）

 htmlのﾀｸﾞや属性のルールを覚えるだけで、特に難しい点はなかった
 ベースアプリケーションがあればビューの⼿直しだけで済み、思いのほか⼯数も掛からなかった htmlやサーバーサイドの技術（例えばPHPなど）の理解が有れば、⼗分扱える• 学習コスト ⾯倒なJavaScriptや画⾯遷移の制御は”iUI”側で、⾏なってくれるので、特に特別な知識は必要が無かった

21

• iUIのメリット

まとめ（2）

 既存Webアプリケーションが既に存在する場合は、ビジネスロジックを流用出来る
 シンプルな機能だけなので習得しやすい
 短期間でiPhoneに最適化されたWebアプリが構築できる 動作も軽快に動く（※但し体感的な印象）

22• iUIのデメリット

まとめ（3）

 ドキュメント関係がない。サンプルを⾒て理解する必要がある 戻るボタンは、自動で履歴の管理しているので、複雑な画⾯遷移には向いていない オープンソースの為、商用ソフトの様なサポートは受けられない シンプルな機能ゆえ、iPhone独特のマルチタッチなどの動作は、別途実装する必要がある
23

まとめ（4）• iUIの使いどころ
 画⾯遷移が単純なアプリケーション
例 商品検索条件 → 商品⼀覧 →詳細 単純な操作（タッチ操作だけ）で済むようなケース
例 カレンダー表⽰ → スケジュール確認
 表⽰可能な情報量は、限られている為、単純な情報
例 倉庫選択 → 商品名と在庫を確認
⽐較的シンプルなアプリケーション向き
24

ご清聴ありがとうございました25