アジェンダハンズオンアジェンダスマートフォン開発の法 & ライブラリの紹介サンプルアプリケーションの構成を解説サンプルアプリケーションのアップロード (HO) OSの判定法を解説 HTML 記述の解説 (HO) データベースのアクセス法を解説データベースの表項目を追加 (HO) デ

Size: px

Start display at page:

Download "アジェンダハンズオンアジェンダスマートフォン開発の法 & ライブラリの紹介サンプルアプリケーションの構成を解説サンプルアプリケーションのアップロード (HO) OSの判定法を解説 HTML 記述の解説 (HO) データベースのアクセス法を解説データベースの表項目を追加 (HO) デ"

ふみなすえたけ
5 years ago
Views:

1 アジェンダハンズオンアジェンダスマートフォン開発の法 & ライブラリの紹介サンプルアプリケーションの構成を解説サンプルアプリケーションのアップロード (HO) OSの判定法を解説 HTML 記述の解説 (HO) データベースのアクセス法を解説データベースの表項目を追加 (HO) データベースとの繋がりを確認 (HO) 3

2 スマートフォンアプリの実現法スマートフォンアプリを実現する法 iosやandroidのネイティブアプリの開発開発環境開発語配布法は各プラットフォーム独自の法を使う必要がありそれぞれの知識が必要となります但しデバイスが持っている機能を使う事が出来るなどのメリットもあります Webアプリケーションの開発 ( 本のハンズオン ) Webアプリケーションの基礎知識 (PHP,HTML,JavaScript,CSS 等 ) で開発する事が可能です近年では JavaScriptのライブラリを使い多種のOSに対応するアプリケーションを構築する事も可能となり々進歩しています 4

3 JavaScript ライブラリの紹介 (1) スマートフォンアプリを開発可能なライブラリを紹介します 5

4 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

5 JavaScript ライブラリの紹介 (3) 今回のハンズオンで使用するライブラリを紹介します 7

6 JavaScript ライブラリの紹介 (4) iui iphone 風 UI を提供するライブラリ先 /10/13 時点の最新バージョン iui-0.40-α1 ライセンス MIT Licence イメージ正式リリースは最近更新されていないライブラリですが作成がシンプルで使いやすいので今回のハンズオンで使用しますバージョン (iui-0.31) 8

7 サンプルアプリケーションの全体像 IBM i 上の商品データの検索を目的としたアプリですメニュー商品検索商品詳細条件検索抜粋してこのあたりを説明します 9

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 1

9 サンプルプログラムの構成サンプルプログラムの構成ティレクトリファイルルート images ( 画像 ) db (DB アクセス ) ItemFromDb.php ( 商品データ取得 ) js (JavaScript ライフラリ ) include ( 共通ファイル ) logs ( エラーログ ) menu.php (Home メニュー ) src ( プログラム ) search.php ( 条件取得 html 成 ) 代表的なファイルのみ抜粋してます 11

10 サンプルプログラムのアップロード (1) サンプルプログラムのアップロード法デスクトップに用意されているサンプルプログラム SmartPhone ディレクトリを IBM i 上の Web 環境にアップロードしますアップロードには iseries ナビゲータを使用します 12

11 サンプルプログラムのアップロード (2) iseries ナビゲータの起動デスクトップにある iseries ナビゲータを起動します 13

12 サンプルプログラムのアップロード (3) iseries ナビゲータのサインオンサインオンを求められたらユーザー HANDSON??(01 20 の番号 ) パスワードも同じです 14

13 サンプルプログラムのアップロード (4) サンプルプログラム用ディレクトリの展開次の順にツリーを展開します Root www zendsvr htdocs ho HANDSON??(01 20 受講番号 ) 15

14 サンプルプログラムのアップロード (5) サンプルプログラムのアップロード展開した HANDSON 受講番号ディレクトリにサンプルプログラムがった SmartPhone ディレクトリをドラッグ & ドロップします 16

15 サンプルプログラムの実 (1) ブラウザの起動 ( スマートフォンをお持ちの ) スマートフォンをお持ちのはお持ちのスマートフォンのブラウザを起動して下さいブラウザのアドレスバーに受講番号 /SmartPhone/src/menu.php として下さい後ほど使用しますので上記アドレスをブックマークしておいて下さい HostName は isuc 会場の IBM i の IP アドレスに置き換えてえて下さい 17

16 サンプルプログラムの実 (2) ブラウザの起動 ( スマートフォンをお持ちでない ) お持ちでないはデスクトップの商品検索アイコンを起動します (Google Chrome ショートカット ) 18

17 OS の判定法 (1) OS の判定サンプルを起動している OS によってメニューの最上部に表されるアイコンが変化します ios(iphone,ipod touch,ipad) Android 上記以外 (Windows など ) 19

18 OS の判定法 (2) どのように判断してアイコンをかえているのか? ( 解説 ) 20

OS の判定法 (3) ユーザーエージェントを利用して OS 判定します Web

< ユーザーエージェント > iphone,android,widnows 21

0 (iphone; U; CPU iphone OS 4_0 like Mac OS

19 OS の判定法 (3) ユーザーエージェントを利用して OS 判定します Web の通信をう時にブラウザからサーバーに渡されるユーザーエージェントという情報を利用して OS を判定する事が可能ですこの機能により例えばスマートフォンに対応したサイトにユーザーを誘導する事も可能です http 通信 < ユーザーエージェント > iphone,android,widnows 21 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/

20 OS の判定法 (4) 具体的なコーディングをサンプルで確認しますデスクトップにある common.inc のショートカットを起動し 33 目付近を参照して下さい PHP のコーディング例 // は php のコメントです // ユーザー OSの判定 $agent = $_SERVER['HTTP_USER_AGENT']; //iphone,ipod,ipad いずれかの単語が字列に存在するかチェック if (preg_match("/iphone ipod ipad/", $agent)){ //Apple iosの場合の処理 } 22

21 HTML の記述について HTML の記述について具体的にていきます ( 解説 & ハンズオン ) 23

22 HTML の記述について (1) メニューの項目名を変更します変更前メニュー変更後メニュー menu.php (Home メニュー ) menu.php (Home メニュー ) 24

23 HTML の記述について (2) HTML の具体的なコーディングを確認しますデスクトップにある menu.php のショートカットを起動して下さい 25

24 HTML の記述について (3) 以下の様にソースを変更します 17 目付近  <ul id="home" title=" アプリタイトル " selected="true">  <ul id="home" title="home" selected="true"> 変更後に左上の保存ボタンをクリックします引き続きメニューを変更します 26

25 データアクセスの法 (5) DB 接続の具体的なコーディングを確認しますデスクトップにある ItemFromDb.php のショートカットを起動して下さい商品マスタ ITEM メニュー商品検索 ItemFromDb.php ( 商品データ取得 ) menu.php (Home メニュー ) search.php ( 条件取得 html 成 ) 4 35

26 HTML の記述について (4) 以下の様にソースを変更します 23 目 25 目 27 目 29 目 <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> 23 目 25 目 27 目 29 目 <img alt=" 覧 "... 中略... class="icon" /> 商品覧 </a></li> <img alt=" 編集 "... 中略... class="icon" /> 編集 </a></li> <img alt=" 追加 "... 中略... class="icon" /> 追加 </a></li> <img alt=" その他 "... 中略... class="icon" /> その他 </li> 変更後に左上の保存ボタンをクリックします 27

27 HTML の記述について (5) 変更したプログラムのアップロードします先ほど展開した iseries ナビゲータのディレクトリから更に src を展開しますそこに変更したソース menu.php をドラッグ & ドロップします 28

28 HTML の記述について (6) HTML 変更を確認しますスマートフォンのブラウザのアドレスバーに受講番号 /SmartPhone/src/menu.php として下さい再表やブックマークでも構いませんパソコンのデスクトップの商品検索アイコンを起動します F5 で再表でも構いません 29

29 表を確認します HTML の記述について (7) HTML の記述を変更する事によりメニューが変更されましたか? 30

30 データアクセスの法 (1) データアクセスについて具体的にていきます ( 解説 ) 31

31 データアクセスの法 (2) 今回使う商品マスターのファイルレイアウト (DDS) 物理ファイル名 :HANDSON/ITEM 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 データアクセスの法 (3) 今回使う商品マスター (QRY や SQL 等で確認 ) 物理ファイル名 :HANDSON/ITEM 33

33 データアクセスの法 (4) データアクセス全体の動き商品マスタ ITEM メニュー商品検索 ItemFromDb.php ( 商品データ取得 ) menu.php (Home メニュー ) search.php ( 条件取得 html 成 ) 4 1 商品覧ボタンを押すと 23 search.phpは search.phpを呼び出します ItemFromDb.phpを使いIBM i 上のレコードを取得します 4 search.php は取得したレコードから htmlを成し出します 34

34 データアクセスの法 (6) DB 接続のコーディング例 // $this->_db : データベース接続 $this->_db = db2_connect( データベース名, ユーザー, パスワード ); 中略 // $sql : SQL 字列 62 目付近 $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; 19 目付近 36 データの読みには別の関数を使う法もあります

35 データアクセスの法 (7) データアクセスの具体的なコーディングを確認しますデスクトップにある search.php のショートカットを起動して下さい商品マスタ ITEM メニュー商品検索 ItemFromDb.php ( 商品データ取得 ) menu.php (Home メニュー ) search.php ( 条件取得 html 成 ) 4 37

36 データアクセスの法 (8) データアクセスのコーディング例 // 連想配列より 1 レコードずつずつ取り出す 22 目付近 foreach ($rows as $row) { // 商品コード $code = $row['code']; } 取り出したレコードに相当する配列 $rowのインデックスは DDSのフィールド名となっています $rows [0:$row,1:$row,2:$row...] [0] : $row[ CODE : 1,NAME : オレンジ 100,SQTY: 続く ] [1] : $row[ CODE : 2,NAME : 果汁 100 クレーフ,SQTY:15... 続く ] 38

37 連想配列とはデータアクセスの法 (9) 通常の配列は指標 ( キー ) が正数 [0: 値 0,1: 値 1,2: 値 2...] 連想の配列は指標 ( キー ) に字列が使用可能 ['CODE': 値 0,'NAME': 値 1,'SQTY': 値 2...] レコード特徴指標( キー ) と値 ( バリュー ) のペアで使用する事が可能値の型は混在可能 ( 数値, 字列, 配列, オフシェクト ) 今回の例 db2_fetch_assoc 関数は指標にDDSのフィールド名を使ってアクセスが可能 39

38 DB の表項目を追加 (1) 商品覧に表項目を追加してみます ( ハンズオン ) 40

39 DB の表項目を追加 (2) DB の表項目を追加します今開いている search.php を変更して以下の様にします商品名と在庫数を表させます 41

40 DB の表項目を追加 (3) 以下の様にソースを変更します 28 目付近 // 商品名称 ($row['name']) $name = ''; // 在庫数 ($row['sqty']) $quantity = '' ; // 商品名称 ($row['name']) $name = $row['name']; // 在庫数 ($row['sqty']) $quantity = $row['sqty']; 変更後に左上の保存ボタンをクリックします 42

41 DB の表項目を追加 (4) 変更したプログラムのアップロードします先ほど展開した iseries ナビゲータのディレクトリから更に src を展開しますそこに変更したソース search.php をドラッグ & ドロップします 43

42 DB の表項目を追加 (5) 追加した項目を確認しますスマートフォンのブラウザのアドレスバーに受講番号 /SmartPhone/src/menu.php として下さい再表やブックマークでも構いませんパソコンのデスクトップの商品検索アイコンを起動します F5 で再表でも構いません 44

43 表を確認します DB の表項目を追加 (6) 商品覧で表されている DB の項目が追加されましたか? 45

44 データのつながりを確認 (1) IBM i 上の DB2 とリンクしている事を確認します ( ハンズオン ) 46

45 データのつながりを確認 (2) 直接データがリンクしている事を実際に確認しますブラウザに戻りサンプルプログラムの商品覧をタッチはクリックします 47

46 データのつながりを確認 (3) DFU を使い IBM i 上のデータベースを編集しますデスクトップの P-comm のショートカットを起動します 48

47 データのつながりを確認 (4) データ編集の続き DFU 実行コマンドサインオン画で STRDFU OPTION(5) FILE(HANDSON/ITEM) ユーザー HANDSON 受講番号パスワードも同じ受講番号のコードの名称を自由に編集して下さい編集が終わったらブラウザの商品覧に戻ります 49

48 データのつながりを確認 (5) DFU の編集が反映されているか? 確認します左上部の<Home>ボタンをクリックはタッチします再び商品覧をクリックはタッチします DFU での変更が反映される 50

49 以上でハンズオンを終りますありがとうございました 51

50 付録 -A iui の使い (1) スマートフォン用ビューのヘッダー設定通常の Window の替りにスマートフォンで拡大縮等が動作するビューポートを定義をする html のコーディング例  <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の横幅倍率の初期値倍率の最大値ユーザーの拡大縮小可否 52

51 付録 -A iui の使い (2) iui 用 HTML ヘッダーの設定 iui の JavaScript を動作させる為の設定 html, 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

52 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

53 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

54 iui の代表的な UI 覧付録 -A iui の使い (5) 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 56 他多数あり

Microsoft PowerPoint - CSS Nite（2010.09.23）.ppt

Microsoft PowerPoint - CSS Nite（2010.09.23）.ppt 2010/09/23 iuiを使ってサクッとiPhone 最適化株式会社中部システム吉樹 0 Chubu System Co,.ltd [http://www.cscweb.org] 自紹介 2001 年株式会社中部システム社 2002 年 RPG 中の開発に従事 2003 年主に製造販売業を中にSEとして活動 2005