ハンズオンアジェンダ - i5php.jp · スマートフォンアプリの実勶⽅法...

• ハンズオンアジェンダアジェンダ

� スマートフォン開発の⼿法＆ライブラリの紹介� サンプルアプリケーションの構成を解説� サンプルアプリケーションのアップロード（HO）� OSの判定⽅法を解説� HTML記述の解説（HO）� データベースのアクセス⽅法を解説� データベースの表⽰項目を追加（HO）� データベースとの繋がりを確認（HO）

3

スマートフォンアプリの実現⽅法

� iOSやAndroidのネイティブアプリの開発開発環境、開発⾔語、配布⽅法は、各プラットフォーム独自の⽅法を使う必要があり、それぞれの知識が必要となります。※但し、デバイスが持っている機能を使う事が出来るなどのメリットもあります

• スマートフォンアプリを実現する⽅法

4

� Webアプリケーションの開発（※本⽇のハンズオン）Webアプリケーションの基礎知識（PHP,HTML,JavaScript,CSS等）で、開発する事が可能です。近年では、JavaScriptのライブラリを使い、多種のOSに対応するアプリケーションを構築する事も可能となり、⽇々進歩しています。

スマートフォンアプリを開発可能なライブラリを紹介します

JavaScriptライブラリの紹介（1）

5

• ⾊々なライブラリやフレームワーク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

6

今回のハンズオンで使用するライブラリを紹介します

JavaScriptライブラリの紹介（3）

7

• iUIJavaScriptライブラリの紹介（4）

� iPhone風 UIを提供するライブラリ⼊⼿先 http://code.google.com/p/iui/

2011/10/13時点の最新バージョン「iui-0.40-α1」ライセンス MIT Licence� イメージ

正式リリースは、最近更新されていないライブラリですが、作成がシンプルで使いやすいので、今回のハンズオンで使用します。バージョン（iui-0.31）

8

• IBM i上の商品データの検索を目的としたアプリですサンプルアプリケーションの全体像

メニュー商品検索商品詳細

抜粋してこのあたりを説明します

9

条件検索

今回の実⾏環境

�サーバー：IBM i V7R1M0�PHP：Zend Server for i5 5.1 ⽇本語版（PHP5.2）

�ＰＣクライアント：Windows XP SP3�ＰＣブラウザ：Chrome 13�実機検証：iPod touch iOS4.3.3 mobile Safari

10

• サンプルプログラムの構成サンプルプログラムの構成

11

images(画像)

ｊｓ(JavaScriptﾗｲﾌﾞﾗﾘ)

logs(エラーログ)

src(プログラム)

db(DBアクセス)

include(共通ファイル)

menu.php(Homeﾒﾆｭｰ)

search.php(条件取得、html⽣成)

ItemFromDb.php(商品データ取得)ルート

ﾃﾞｨﾚｸﾄﾘファイル

※代表的なファイルのみ抜粋してます

• サンプルプログラムのアップロード⽅法サンプルプログラムのアップロード（1）

� デスクトップに用意されているサンプルプログラム「SmartPhone」ディレクトリをIBM i上のWeb環境にアップロードします。

� アップロードには「iSeriesナビゲータ」を使用します

12

• iSeriesナビゲータの起動サンプルプログラムのアップロード（2）

� デスクトップにある「iSeriesナビゲータ」を起動します。

13

• iSeriesナビゲータのサインオンサンプルプログラムのアップロード（3）

� サインオンを求められたら、ユーザー「HANDSON??（01〜20の番号）」、パスワードも同じです。

14

� 次の順にツリーを展開します。・「Root」→「www」→「zendsvr」→「htdocs」 →「ho」→「HANDSON??(01〜20受講番号)」

• サンプルプログラム用ディレクトリの展開サンプルプログラムのアップロード（4）

15

� 展開した「HANDSON受講番号」ディレクトリに、サンプルプログラムが⼊った「SmartPhone」ディレクトリをドラッグ＆ドロップします。

• サンプルプログラムのアップロードサンプルプログラムのアップロード（5）

16

• ブラウザの起動（スマートフォンをお持ちの⽅）サンプルプログラムの実⾏（1）

� スマートフォンをお持ちの⽅はお⼿持ちのスマートフォンのブラウザを起動して下さい。

� ブラウザのアドレスバーにhttp://HostName:10088/ho/HANDSON受講番号

/SmartPhone/src/menu.phpと⼊⼒して下さい。

17

※後ほど使用しますので、上記アドレスをブックマークしておいて下さい。

HostNameHostNameHostNameHostNameはははは、、、、iSuciSuciSuciSuc会場会場会場会場ののののIBM iIBM iIBM iIBM iののののIPIPIPIPアドレスアドレスアドレスアドレスにににに置置置置きききき換換換換えてえてえてえて下下下下さいさいさいさい

• ブラウザの起動（スマートフォンをお持ちでない⽅）サンプルプログラムの実⾏（2）

� お持ちでない⽅は、デスクトップの「商品検索」アイコンを起動します。（Google Chromeショートカット）

18

• OSの判定OSの判定⽅法（1）

� サンプルを起動しているOSによって、メニューの最上部に表⽰されるアイコンが変化します。

� iOS(iPhone,iPod touch,iPad)

� Android

� 上記以外（Windowsなど）

19

※どのように判断してアイコンをかえているのか？（解説）

OSの判定⽅法（2）

20

• ユーザーエージェントを利用してOS判定しますOSの判定⽅法（3）

� Webの通信を⾏う時に、ブラウザからサーバーに渡される”ユーザーエージェント”という情報を利用して、OSを判定する事が可能です。

� この機能により、例えばスマートフォンに対応したサイトに、ユーザーを誘導する事も可能です。

21

http通信＜ユーザーエージェント＞iPhone,Android,Widnows

・iPhoneの場合は以下の⽂字列Mozilla/5.0 (iPhone; U; CPU iPhone OS 4_0 like Mac OS X; en-us) AppleWebKit/532.9 (KHTML, like Gecko) Version/4.0.5 Mobile/8A293 Safari/6531.22.7

• 具体的なコーディングをサンプルで確認します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

※「//」はphpのコメント⾏です

※HTMLの記述について具体的に⾒ていきます（解説＆ハンズオン）

HTMLの記述について

23

• メニューの項目名を変更しますHTMLの記述について（1）

変更前メニュー

24



変更後メニュー

• HTMLの具体的なコーディングを確認しますHTMLの記述について（2）

デスクトップにある「menu.php」のショートカットを起動して下さい。

25

• 以下の様にソースを変更しますHTMLの記述について（3）

<ul id="home" title="アプリタイトル" selected="true">

26

※17⾏目付近

<ul id="home" title="Home" selected="true">

※変更後に左上の保存ボタンをクリックします。

引き続きメニューを変更します →

• DB接続の具体的なコーディングを確認しますデータアクセスの⽅法（5）

デスクトップにある「ItemFromDb.php」のショートカットを起動して下さい。

35

メニュー商品検索



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の記述について（5）

28

• HTML変更を確認しますHTMLの記述について（6）

� スマートフォンの⽅、ブラウザのアドレスバーにhttp://HostName:10088/ho/HANDSON受講番号

/SmartPhone/src/menu.phpと⼊⼒して下さい。再表⽰やブックマークでも構いません。

� パソコンの⽅デスクトップの「商品検索」アイコンを起動します。Ｆ５で再表⽰でも構いません。

29

• 表⽰を確認しますHTMLの記述について（7）

30

HTMLの記述を変更する事により

メニューが変更されましたか？

※データアクセスについて具体的に⾒ていきます（解説）

データアクセスの⽅法（1）

31

• 今回使う商品マスターのファイルレイアウト(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(' 仕⼊先コード ') •------------- 以下省略 ------------

32

物理ファイル名：HANDSON/ITEM

• 今回使う商品マスター（QRYやSQL等で確認）データアクセスの⽅法（3）

33

物理ファイル名：HANDSON/ITEM

• データアクセス全体の動きデータアクセスの⽅法（4）


34




商品マスタ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」のショートカットを起動して下さい。

37





商品マスタITEM

①② ③

④

• データアクセスのコーディング例データアクセスの⽅法（8）

////////連想配列連想配列連想配列連想配列よりよりよりより1111レコードレコードレコードレコードずつずつずつずつ取取取取りりりり出出出出すすすす

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 ...続く][1] : $row[ CODE : 2 ,NAME : 果汁100ｸﾞﾚｰﾌﾟ ,SQTY:15 ...続く]

• 連想配列とはデータアクセスの⽅法（9）

通常の配列は、指標（キー）が正数[0:値0 ,1:値1 ,2:値2...]

39

連想の配列は、指標（キー）に⽂字列が使用可能['CODE':値0 ,'NAME':値1 ,'SQTY':値2...]→レコード

【特徴】・指標（キー）と値（バリュー）のペアで使用する事が可能・値の型は、混在可能。（数値,⽂字列,配列,ｵﾌﾞｼﾞｪｸﾄ）・今回の例「db2_fetch_assoc」関数は指標にDDSのフィールド名を使ってアクセスが可能

※商品⼀覧に表⽰項目を追加してみます（ハンズオン）

DBの表⽰項目を追加（1）

40

• DBの表⽰項目を追加しますDBの表⽰項目を追加（2）

� 今開いているsearch.phpを変更して以下の様にします。

41

商品名と在庫数を表⽰させます

• 以下の様にソースを変更します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の表⽰項目を追加（4）

43

• 追加した項目を確認しますDBの表⽰項目を追加（5）

� スマートフォンの⽅、ブラウザのアドレスバーにhttp://HostName:10088/ho/HANDSON受講番号

/SmartPhone/src/menu.phpと⼊⼒して下さい。再表⽰やブックマークでも構いません。

� パソコンの⽅デスクトップの「商品検索」アイコンを起動します。Ｆ５で再表⽰でも構いません

44

• 表⽰を確認しますDBの表⽰項目を追加（6）

45

商品⼀覧で表⽰されているDBの項目が追加されましたか？

※IBM i上のDB2とリンクしている事を確認します（ハンズオン）

データのつながりを確認（1）

46

• 直接データがリンクしている事を実際に確認しますデータのつながりを確認（2）

� ブラウザに戻り、サンプルプログラムの商品⼀覧を、タッチ⼜はクリックします。

47

• DFUを使いIBM i上のデータベースを編集しますデータのつながりを確認（3）

� デスクトップのP-commのショートカットを起動します。

48

• データ編集の続きデータのつながりを確認（4）

� サイン・オン画⾯で・ユーザー「HANDSON受講番号」パスワードも同じ。

49

DFUDFUDFUDFU実行実行実行実行コマンドコマンドコマンドコマンド

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での変更が反映される

51

以上でハンズオンを終ります

ありがとうございました

• スマートフォン用ビューのヘッダー設定付録-A iUIの使い⽅（1）

� htmlのコーディング例

通常のWindowの替りに、スマートフォンで拡大縮⼩等が動作する、ビューポートを定義をする



<meta name="viewport" content="width=device-width; initial-

scale=1.0; maximum-scale=1.0; user-scalable=0;"/>

ユーザーの拡大縮小可否user-scalable

倍率の最大値maximum-scale

倍率の初期値initial-scale

Viewportの横幅width

52

• iUI用HTMLヘッダーの設定付録-A iUIの使い⽅（2）

� html , JavaScriptのコーディング例iUIの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>



<script type="text/javascript">

iui.animOn = true;

</script>

（ページ遷移した時のスライドするアニメーション）

53

おまじない的

• 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>タグでリンクにするだけで、次のアクションに遷移

55

• iUIの代表的なUI⼀覧付録-A iUIの使い⽅（5）

ボタンUIbutton(aﾀｸﾞclass)メニューのグループ化group(liﾀｸﾞclass)ページ内遷移(ulﾀｸﾞのidと連動)<a href="#"ページのメニュー<li>〜</li>1ページの定義<ul>〜</ul>メインページhome(ulﾀｸﾞid)

サブミットボタンUIsubmit(aﾀｸﾞtype)

ツールバーに表⽰する戻るボタンbackButton(id)ツールバーに表⽰するタイトルpageTitle(id)ツールバー定義toolbar(divﾀｸﾞclass)

※他多数あり

56

ハンズオンアジェンダ - i5php.jp · スマートフォンアプリの実勶⽅法...

Documents