View
2
Download
0
Category
Preview:
Citation preview
• ハンズオンアジェンダアジェンダ
� スマートフォン開発の⼿法&ライブラリの紹介� サンプルアプリケーションの構成を解説� サンプルアプリケーションのアップロード(HO)� OSの判定⽅法を解説� HTML記述の解説(HO)� データベースのアクセス⽅法を解説� データベースの表⽰項目を追加(HO)� データベースとの繋がりを確認(HO)
3
スマートフォンアプリの実現⽅法
� 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
6
• 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 V7R1M0�PHP:Zend Server for i5 5.1 ⽇本語版(PHP5.2)
�PCクライアント:Windows XP SP3�PCブラウザ:Chrome 13�実機検証:iPod touch iOS4.3.3 mobile Safari
10
• サンプルプログラムの構成サンプルプログラムの構成
11
images(画像)
js(JavaScriptライブラリ)
logs(エラーログ)
src(プログラム)
db(DBアクセス)
include(共通ファイル)
menu.php(Homeメニュー)
search.php(条件取得、html⽣成)
ItemFromDb.php(商品データ取得)ルート
ディレクトリ ファイル
※代表的なファイルのみ抜粋してます
• サンプルプログラムのアップロード⽅法サンプルプログラムのアップロード(1)
� デスクトップに用意されているサンプルプログラム「SmartPhone」ディレクトリをIBM i上のWeb環境にアップロードします。
� アップロードには「iSeriesナビゲータ」を使用します
12
� 次の順にツリーを展開します。 ・「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判定します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の記述について(3)
<!-- メニューの定義 --><ul id="home" title="アプリタイトル" selected="true">
26
※17⾏目付近
<!-- メニューの定義 --><ul id="home" title="Home" selected="true">
※変更後に左上の保存ボタン をクリックします。
引き続きメニューを変更します →
• DB接続の具体的なコーディングを確認しますデータアクセスの⽅法(5)
デスクトップにある「ItemFromDb.php」のショートカットを起動して下さい。
35
メニュー 商品検索
menu.php(Homeメニュー)
search.php(条件取得、html⽣成)
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と⼊⼒して下さい。再表⽰やブックマークでも構いません。
� パソコンの⽅デスクトップの「商品検索」アイコンを起動します。F5で再表⽰でも構いません。
29
• 今回使う商品マスターのファイルレイアウト(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
• データアクセス全体の動きデータアクセスの⽅法(4)
メニュー 商品検索
34
menu.php(Homeメニュー)
search.php(条件取得、html⽣成)
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」のショートカットを起動して下さい。
37
メニュー 商品検索
menu.php(Homeメニュー)
search.php(条件取得、html⽣成)
ItemFromDb.php(商品データ取得)
商品マスタ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の表⽰項目を追加(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と⼊⼒して下さい。再表⽰やブックマークでも構いません。
� パソコンの⽅デスクトップの「商品検索」アイコンを起動します。F5で再表⽰でも構いません
44
• データ編集の続きデータのつながりを確認(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での変更が反映される
• スマートフォン用ビューのヘッダー設定付録-A iUIの使い⽅(1)
� htmlのコーディング例
通常のWindowの替りに、スマートフォンで拡大縮⼩等が動作する、ビューポートを定義をする
<!-- iPhone viewport 設定 -->
<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を動作させる為の設定
<!-- 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>
(ページ遷移した時のスライドするアニメーション)
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
Recommended