•
ハンズオンアジェンダ
アジェンダ スマートフォン開発の⼿法＆ライブラリの紹介 サンプルアプリケーションの構成を解説 サンプルアプリケーションのアップロード（HO） OSの判定⽅法を解説 HTML記述の解説（HO） データベースのアクセス⽅法を解説 データベースの表⽰項目を追加（HO） データベースとの繋がりを確認（HO）スマートフォンアプリの実現⽅法 iOSやAndroidのネイティブアプリの開発 開発環境、開発⾔語、配布⽅法は、各プラットフォーム独 自の⽅法を使う必要があり、それぞれの知識が必要となり ます。 ※但し、デバイスが持っている機能を使う事が出来るなどのメリットもあります
•
スマートフォンアプリを実現する⽅法
4 Webアプリケーションの開発（※本⽇のハンズオン） Webアプリケーションの基礎知識（PHP,HTML,JavaScript,CSS等） で、開発する事が可能です。近年では、JavaScriptのライ ブラリを使い、多種のOSに対応するアプリケーションを構 築する事も可能となり、⽇々進歩しています。スマートフォンアプリを開発可能なライブラリを紹介します
•
⾊々なライブラリやフレームワーク
JavaScriptライブラリの紹介（2）
Universal iPhone UI Kit （GPLv3） iWebkit (LGPL)
iPhone Web Developer Tool
Dojo Toolkit - dojox.mobile（BSD License and the Academic Free License ）
sencha touch(デュアルライセンス) jQuery Mobile
今回のハンズオンで使用するライブラリを紹介します
•
iUI
JavaScriptライブラリの紹介（4） iPhone風 UIを提供するライブラリ ⼊⼿先 http://code.google.com/p/iui/ 2011/10/13時点の最新バージョン「iui-0.40-α1」 ライセンス MIT Licence イメージ 正式リリースは、最近更新され ていないライブラリですが、作 成がシンプルで使いやすいので 、今回のハンズオンで使用しま す。バージョン（iui-0.31） 8• IBM i上の商品データの検索を目的としたアプリです サンプルアプリケーションの全体像
メニュー 商品検索 商品詳細
抜粋してこのあたりを説明します
今回の実⾏環境
サーバー：IBM i V7R1M0
PHP：Zend Server for i5 5.1 ⽇本語版
（PHP5.2）ＰＣクライアント：Windows XP SP3
ＰＣブラウザ：Chrome 13
実機検証：iPod touch iOS4.3.3 mobile Safari
1 0
•
サンプルプログラムの構成
サンプルプログラムの構成 images (画像) ｊｓ (JavaScriptﾗｲﾌﾞﾗﾘ) logs (エラーログ) src (プログラム) db (DBアクセス) include (共通ファイル) menu.php (Homeﾒﾆｭｰ) search.php (条件取得、html⽣成) ItemFromDb.php (商品データ取得) ルート ﾃﾞｨﾚｸﾄﾘ ファイル ※代表的なファイルのみ抜粋してます•
サンプルプログラムのアップロード⽅法
サンプルプログラムのアップロード（1）
デスクトップに用意されているサンプルプログラム「
SmartPhone」ディレクトリをIBM i上のWeb環境にアッ
プロードします。
アップロードには「iSeriesナビゲータ」を使用します
•
iSeriesナビゲータの起動
サンプルプログラムのアップロード（2）
•
iSeriesナビゲータのサインオン
サンプルプログラムのアップロード（3）
サインオンを求められたら、ユーザー「HANDSON??（01 〜20の番号）」、パスワードも同じです。
次の順にツリーを展開します。
・「Root」→「www」→「zendsvr」→「htdocs」 →「ho」→「HANDSON??(01〜20受講番号)」
•
サンプルプログラム用ディレクトリの展開
展開した「HANDSON受講番号」ディレクトリに、サンプ ルプログラムが⼊った「SmartPhone」ディレクトリをド ラッグ＆ドロップします。
•
サンプルプログラムのアップロード
サンプルプログラムのアップロード（5） 16•
ブラウザの起動（スマートフォンをお持ちの⽅）
サンプルプログラムの実⾏（1） スマートフォンをお持ちの⽅はお⼿持ちのスマートフォン のブラウザを起動して下さい。 ブラウザのアドレスバーに http://HostName:10088/ho/HANDSON受講番号 /SmartPhone/src/menu.php と⼊⼒して下さい。 ※後ほど使用しますので、上記アドレスをブックマークしておいて下さい。 HostName HostName HostName•
ブラウザの起動（スマートフォンをお持ちでない⽅）
サンプルプログラムの実⾏（2）
お持ちでない⽅は、デスクトップの「商品検索」アイコン を起動します。（Google Chromeショートカット）
•
OSの判定
OSの判定⽅法（1） サンプルを起動しているOSによって、メニューの最上部に 表⽰されるアイコンが変化します。 iOS(iPhone,iPod touch,iPad) Android 上記以外（Windowsなど）※どのように判断してアイコンをかえているのか？
（解 説）
OSの判定⽅法（2）
•
ユーザーエージェントを利用してOS判定します
OSの判定⽅法（3） Webの通信を⾏う時に、ブラウザからサーバーに渡される” ユーザーエージェント”という情報を利用して、OSを判定 する事が可能です。 この機能により、例えばスマートフォンに対応したサイト に、ユーザーを誘導する事も可能です。 http通信 ＜ユーザーエージェント＞ iPhone,Android,Widnows ・iPhoneの場合は以下の⽂字列Mozilla/5.0 (iPhone; U; CPU iPhone OS 4_0 like Mac OS X; en-us)
•
具体的なコーディングをサンプルで確認します
OSの判定⽅法（4） PHPのコーディング例 デスクトップにある「common.inc」のショートカット を起動し、33⾏目付近を参照して下さい。 //ユーザーOSの判定$agent = $_SERVER['HTTP_USER_AGENT'];
//iPhone,iPod,iPadいずれかの単語が⽂字列に存在するかチェック
if (preg_match("/iPhone|iPod|iPad/", $agent)){
//Apple iOSの場合の処理
}
22
※HTMLの記述について具体的に⾒ていきます
（解説 ＆ハンズオン）
•
メニューの項目名を変更します
HTMLの記述について（1）
変更前メニュー
24
menu.php
(Homeﾒﾆｭｰ) (Homeﾒﾆｭｰ)menu.php
•
HTMLの具体的なコーディングを確認します
HTMLの記述について（2）
デスクトップにある「menu.php」のショートカットを 起動して下さい。
•
以下の様にソースを変更します
HTMLの記述について（3）
<!-- メニューの定義 -->
<ul id="home" title="アプリタイトル" selected="true">
26 ※17⾏目付近
<!-- メニューの定義 -->
<ul id="home" title="Home" selected="true">
※変更後に左上の保存ボタン をクリックします。
•
DB接続の具体的なコーディングを確認します
データアクセスの⽅法（5） デスクトップにある「ItemFromDb.php」のショート カットを起動して下さい。 メニュー 商品検索 menu.php (Homeﾒﾆｭｰ) (条件取得、html⽣成)search.php ItemFromDb.php (商品データ取得) 商品マスタ ITEM ① ② ③ ④<img alt="⼀覧" ...中略... class="icon" />商品⼀覧</a></li> <img alt="編集" ...中略... class="icon" />編 集</a></li> <img alt="追加" ...中略... class="icon" />追 加</a></li> <img alt="その他" ...中略... class="icon" />その他</li>
•
以下の様にソースを変更します
HTMLの記述について（4）
<img alt="⼀覧" ...中略... class="icon" />メニュー1</a></li> <img alt="編集" ...中略... class="icon" />メニュー2</a></li> <img alt="追加" ...中略... class="icon" />メニュー3</a></li> <img alt="その他" ...中略... class="icon" />メニュー4</li>
27 23⾏目 25⾏目 27⾏目 29⾏目 ※変更後に左上の保存ボタン をクリックします。 23⾏目 25⾏目 27⾏目 29⾏目
先ほど展開した「iSeriesナビゲータ」のディレクトリから 、更に「src」を展開します。そこに変更したソース「
menu.php」をドラッグ＆ドロップします。
•
変更したプログラムのアップロードします
•
HTML変更を確認します
HTMLの記述について（6） スマートフォンの⽅、ブラウザのアドレスバーに http://HostName:10088/ho/HANDSON受講番号 /SmartPhone/src/menu.php と⼊⼒して下さい。 再表⽰やブックマークでも構いません。 パソコンの⽅ デスクトップの「商品検索」アイコンを起動します。 Ｆ５で再表⽰でも構いません。 29•
表⽰を確認します
HTMLの記述について（7）
HTMLの記述を変更する事により メニューが変更されましたか？
※データアクセスについて具体的に⾒ていきます
（解 説）
データアクセスの⽅法（1）
•
今回使う商品マスターのファイルレイアウト(DDS)
データアクセスの⽅法（2） •A**************************************************************** •A* ITEM 商品マスター 2011/10/20 CSC)Y.USHIDA •A**************************************************************** •A UNIQUE •A R ITEMR TEXT(' 商品マスター ') •A CODE 5S 0 COLHDG(' コード ') •A KANA 60O COLHDG(' カナ ') •A NAME 60O COLHDG(' 名称 ') •A SQTY 9S 0 COLHDG(' 在庫 ') •A PQTY 9S 0 COLHDG(' 発注数 ') •A LQTY 9S 0 COLHDG(' 発注点 ') •A DESC 1024O COLHDG(' 商品説明 ') •A VENDC 5S 0 COLHDG(' 仕⼊先コード ') •- 以下省略•
今回使う商品マスター（QRYやSQL等で確認）
データアクセスの⽅法（3）
33
•
データアクセス全体の動き
データアクセスの⽅法（4） メニュー 商品検索 menu.php (Homeﾒﾆｭｰ) (条件取得、html⽣成)search.php ItemFromDb.php (商品データ取得) 商品マスタ ITEM ① ② ③ ④ 商品⼀覧ボタンを押すと、 search.phpを呼び出します ① search.phpは、 ItemFromDb.phpを使いIBM i ②③ search.phpは、取得したレ コードから、htmlを⽣成し ④•
DB接続のコーディング例
データアクセスの⽅法（6） // $this->_db : データベース接続 $this->_db = db2_connect(データベース名,ユーザー,パスワード); --- 中略 ---// $sql : SQL⽂字列$sql="select * from ". ライブラリ . ".ITEM" . $where ; // db2_execを使用してSQLを実⾏し、$resultに結果を返す
($result=db2_exec($this->_db,$sql)) or
die("$sql に失敗しました。");
$rows = array();
// db2_fetch_assocを使用してレコードを配列にセット
while( ($row=db2_fetch_assoc($result)) != false){
$rows[] = $row ; } //レコードがセットされた配列を返す return $rows; 36 ※データの読み⽅には別の関数を 使う⽅法もあります。 ※19⾏目付近 ※62⾏目付近
•
データアクセスの具体的なコーディングを確認します
データアクセスの⽅法（7） デスクトップにある「search.php」のショートカット を起動して下さい。 メニュー 商品検索 menu.php (Homeﾒﾆｭｰ) (条件取得、html⽣成)search.php ItemFromDb.php (商品データ取得) 商品マスタ ITEM ① ② ③ ④•
データアクセスのコーディング例
データアクセスの⽅法（8） // // // //連想配列連想配列より連想配列連想配列よりよりより111レコード1レコードレコードずつレコードずつ取ずつずつ取取取りりりり出出出す出すすすforeach ($rows as $row) {
//商品コード
$code = $row['CODE']; }
38
※取り出したレコードに相当する、配列$rowの
インデックスは、DDSのフィールド名となっています
※22⾏目付近
$rows [0:$row ,1:$row ,2:$row ...]
[0] : $row[ CODE : 1 ,NAME : オレンジ100 ,SQTY:100 ...続く]
•
連想配列とは
データアクセスの⽅法（9）
通常の配列は、指標（キー）が正数 [0:値0 ,1:値1 ,2:値2...]
連想の配列は、指標（キー）に⽂字列が使用可能
['CODE':値0 ,'NAME':値1 ,'SQTY':値2...]→レコード 【特徴】
・指標（キー）と値（バリュー）のペアで使用する事が可能
・値の型は、混在可能。（数値,⽂字列,配列,ｵﾌﾞｼﾞｪｸﾄ） ・今回の例「db2_fetch_assoc」関数は
※商品⼀覧に表⽰項目を追加してみます
（ハンズオン）
DBの表⽰項目を追加（1）
•
DBの表⽰項目を追加します
DBの表⽰項目を追加（2）
今開いているsearch.phpを変更して以下の様にします。
商品名と在庫数を表⽰さ せます
•
以下の様にソースを変更します
DBの表⽰項目を追加（3） //商品名称 ($row['NAME']) $name = ''; //在庫数 ($row['SQTY']) $quantity = '' ; 42 ※28⾏目付近 //商品名称 ($row['NAME']) $name = $row['NAME']; //在庫数 ($row['SQTY']) $quantity = $row['SQTY']; ※変更後に左上の保存ボタン をクリックします。先ほど展開した「iSeriesナビゲータ」のディレクトリから 、更に「src」を展開します。そこに変更したソース「
search.php」をドラッグ＆ドロップします。
•
変更したプログラムのアップロードします
•
追加した項目を確認します
DBの表⽰項目を追加（5） スマートフォンの⽅、ブラウザのアドレスバーに http://HostName:10088/ho/HANDSON受講番号 /SmartPhone/src/menu.php と⼊⼒して下さい。 再表⽰やブックマークでも構いません。 パソコンの⽅ デスクトップの「商品検索」アイコンを起動します。 Ｆ５で再表⽰でも構いません 44•
表⽰を確認します
DBの表⽰項目を追加（6）
商品⼀覧で表⽰されているDBの項 目が追加されましたか？
※IBM i上のDB2とリンクしている事を確認します
（ハンズオン）
データのつながりを確認（1）
•
直接データがリンクしている事を実際に確認します
データのつながりを確認（2）
ブラウザに戻り、サンプルプログラムの商品⼀覧を、タッ チ⼜はクリックします。
•
DFUを使いIBM i上のデータベースを編集します
データのつながりを確認（3）
デスクトップのP-commのショートカットを起動します。
•
データ編集の続き
データのつながりを確認（4） サイン・オン画⾯で ・ユーザー「HANDSON受講番号」パスワードも同じ。 DFU DFU DFU DFU実行実行実行実行コマンドコマンドコマンドコマンドSTRDFU OPTION(5) FILE(HANDSON/ITEM) STRDFU OPTION(5) FILE(HANDSON/ITEM) STRDFU OPTION(5) FILE(HANDSON/ITEM) STRDFU OPTION(5) FILE(HANDSON/ITEM)
「受講番号」のコードの名称を自由に編集して下さい 編集が終わったら、ブラウザの商品⼀覧に戻ります
•
DFUの編集が反映されているか？確認します
データのつながりを確認（5） 左上部の＜Home＞ボタンをクリック⼜はタッチします 再び”商品⼀覧”をクリック⼜はタッチします 50 ※DFUでの変更が反映される以上でハンズオンを終ります
ありがとうございました
•
スマートフォン用ビューのヘッダー設定
付録-A iUIの使い⽅（1） htmlのコーディング例 通常のWindowの替りに、スマートフォンで拡大縮⼩等 が動作する、ビューポートを定義をする <!-- iPhone viewport 設定 --><meta name="viewport" content="width=device-width;
initial-scale=1.0; maximum-initial-scale=1.0; user-scalable=0;"/>
ユーザーの拡大縮小可否 user-scalable 倍率の最大値 maximum-scale 倍率の初期値 initial-scale Viewportの横幅 width 52
•
iUI用HTMLヘッダーの設定
付録-A iUIの使い⽅（2）
html , JavaScriptのコーディング例 iUIの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>
（ページ遷移した時のスライドするアニメーション） おまじない的
•
iUIのツールバー
付録-A iUIの使い⽅（3）
htmlの<body>タグ以下の例
スマートフォン用のツールバー部分の定義 <div class="toolbar">
<h1 id="pageTitle"></h1>
<a id="backButton" class="button" href="#"></a>
<a class="button" href="#searchForm">検索</a>
</div> 決められたタグや、class を指定するだけで、ボタン の配置やリンク先を自動的 に⾏ってくれる 54
•
iUIのメニュー部分
付録-A iUIの使い⽅（4）
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>タグで羅列するだけで、スマフォ風にメニューを配置 <a>タグでリンクにするだけで、次のアクションに遷移
