Delphi/400 XE5　－こんなに簡単！IBM iスマートデバイスネイティブ開発－

Transcription

1 セッション No.2 Delphi/400 最新技術情報 Delphi/400 XE5 - こんなに簡単!IBM i スマートデバイスネイティブ開発 - 株式会社ミガロ. RAD 事業部技術支援課吉原泰介

2 アジェンダ 1. 企業導入が進むスマートデバイス 2. スマートデバイスアプリケーションの種類 3. ネイティブアプリケーションの開発 3-1. ネイティブアプリケーションの開発環境 3-2. 簡単なネイティブアプリケーションの開発 3-3. IBM i に接続するネイティブアプリケーションの開発 3-4. ネイティブアプリケーションの配布 4. まとめ

3 1. 企業導入が進むスマートデバイス

4 1. 企業導入が進むスマートデバイス スマートデバイス企業導入率と導入 OS の傾向この 1~2 年でスマートデバイスの法人への導入が急速に進んできます また企業で導入されるスマートデバイスは ios Android が主流になっている傾向です スマートデバイス企業導入率の遷移 2011 年に比べると 2013 年では導入率が 3.5 倍以上に増加 企業導入スマートデバイス比率 (2013 年 ) スマートデバイスを導入している企業の大半が ios Android を採用 60.0% 57.1% 53.6% 40.0% 30.0% 25.0% 20.0% 15.0% 10.0% 5.0% 0.0% 8.1% 17.1% ( 対象企業 :485 社 ) 29.6% 2011 年 2012 年 2013 年 ( 対象企業 :485 社 ) 重複所有を含む 20.0% 0.0% 9.8% 2.7% 2.7% ios Android BrackBerry WindowsPhone その他 参考 : キーマンズネット業務用スマートフォン導入状況 2013

5 1. 企業導入が進むスマートデバイス スマートデバイスアプリケーションの業務利用スマートデバイス導入企業の多くは 業務効率化 を導入目的としています 今後は PC アプリケーション (Windows ) だけではなく スマートデバイスアプリケーションも業務利用が増加 PC アプリケーションとスマートデバイスアプリケーションの特徴の違い 特徴が違う PCアプリケーションの特徴細かいキーボード入力ができる画面が大きく見やすいネットワークが安定している携帯性が低い スマートデバイスアプリケーションの特徴どこでもすぐに使用できるタッチで感覚的に操作できるカメラ GPS センサー等が利用できる細かいキーボード入力は不向き

6 2. スマートデバイスアプリケーションの種類

7 2. スマートデバイスアプリケーションの種類 スマートデバイスで利用されるアプリケーションスマートデバイス (ios Android) で利用することができるアプリケーションは 大きく 2 種類のアプリケーションに分かれます ネイティブアプリケーション Web アプリケーション

8 2. スマートデバイスアプリケーションの種類 ネイティブアプリケーション ネイティブアプリケーションは スマートデバイス端末上で動作してデバイス機能と連携ができるアプリケーションです App Store や GooglePlay といったストアや 社内向けに公開した Web サーバからインストールして利用することができます 特徴 デバイス機能 ( カメラ GPS 等 ) が利用できる レスポンスが良い オフラインでも利用できる 開発言語例 ios: Objective-C Android: Java 等

9 2. スマートデバイスアプリケーションの種類 ネイティブアプリケーション ネイティブアプリケーションの環境構成 スマートデバイス アプリケーションサーバ データベース ios ネイティフ アフ リケーション サーハ アフ リケーション Android ネイティフ アフ リケーション データベースを使用する機能は サーバアプリケーションを経由して実行 アプリケーションはスマートデバイス上で動作

10 2. スマートデバイスアプリケーションの種類 Web アプリケーション Web アプリケーションは Web サーバ上で動作するプログラムを PC 同様にブラウザから利用できるアプリケーションです スマートデバイス端末にアプリケーションはインストールされないため ブラウザのブックマーク等を使って利用することができます 特徴 ブラウザで実行するため プラットフォームを問わず汎用的に開発 利用できる インストールが不要なため 利用が容易 開発言語例 HTML5 javascript PHP java 等

11 2. スマートデバイスアプリケーションの種類 Web アプリケーション Web アプリケーションの環境構成 スマートデバイス Web サーバ データベース フ ラウサ 利用 Web アフ リケーション フ ラウサ 利用 アプリケーションは Web サーバ上で動作 ブラウザを利用して Web サーバにアクセス

12 2. スマートデバイスアプリケーションの種類 ネイティブ / Web アプリケーションの特徴 ネイティブ Web 開発言語 ios:objective-c Android:Java HTML javascript 等 アプリケーションによって多くの開発言語習得が必要 開発生産性 デバイス機能 言語によって開発環境が煩雑になるため 生産性が低くなる パフォーマンス オフライン動作 配布

13 2. スマートデバイスアプリケーションの種類 ネイティブ / Web アプリケーションの特徴 (Delphi) ネイティブ Web 開発言語 Delphi Delphi 開発生産性 デバイス機能 開発言語を Delphi で統一できる Delphi の開発機能は生産性が高い パフォーマンス オフライン動作 配布

14 2. スマートデバイスアプリケーションの種類 Delphi/400 XE5 ネイティブアプリケーションの強み Delphi スキルで ios / Android ネイティブ開発ができる 開発言語は Delphi だけで ios / Android のネイティブ開発ができます またコンパイルの設定切り替えだけで 1 つのプログラムから ios / Android 両方のスマートデバイスに対応できます 従来と同じ手法でネイティブ開発ができる コンポーネントで画面設計して イベントでプログラムコーディングする従来の開発手法でネイティブアプリケーションが開発できます デバイス連携機能を簡単に開発することができる スマートデバイス連携機能 ( カメラや GPS 等 ) を専用コンポーネントで 簡単に開発することができます

15 2. スマートデバイスアプリケーションの種類 ネイティブアプリケーションのデバイス機能連携ネイティブアプリケーションではカメラ連携 バーコード連携 GPS 連携といったデバイス連携機能をアプリケーションへ簡単に実装できます カメラ撮影バーコード読取 GPS 位置情報取得

16 2. スマートデバイスアプリケーションの種類 ネイティブアプリケーションのデバイス機能連携例 1 カメラ機能を連携したネイティブアプリケーション カメラを起動 一覧から明細へ 画像更新 撮影

17 2. スマートデバイスアプリケーションの種類 ネイティブアプリケーションのデバイス機能連携例 2 バーコード QR コード読取りを活用したネイティブアプリケーション DB2/400 バーコード読取機能を実行 IBM i で読み込んだコードでマスタチェック 他のソフトと連携できるものもあり

18 2. スマートデバイスアプリケーションの種類 ネイティブアプリケーションのデバイス機能連携例 3 GPS を使って地図連携を活用したネイティブアプリケーション 現在位置から GoogleMap を呼び出す 位置情報を IBM i に登録する

19 3. ネイティブアプリケーションの開発

20 3-1. ネイティブアプリケーションの開発環境 Delphi/400 XE5 のネイティブアプリケーション開発機能 Delphi/400 XE5 では Windows アプリケーションの開発機能に加え スマートデバイスのネイティブアプリケーション開発機能が追加されました FireMonkey フレームワークを利用することで Delphi スキルを使って ios Android アプリケーションが開発できます Delphi 設計画面上でスマートデバイス形式開発 (FireMonkey フレームワーク ) コンパイルを切り替えることで Windows Mac ios Android に対応 スマートデバイス向けのコンポーネントも充実

21 3-1. ネイティブアプリケーションの開発環境 ios ネイティブアプリケーション開発に必要な環境 - Windows 端末 (Delphi/400 XE5) - Mac 端末 (OSX 10.7~10.9) - ios Developer Program(Xcode, 配布 ) - ios 実機 (iphone ipad 等 ios6.0~7.1) 開発コンパイルインストール 実行 Xcode Mac 上に Windows 仮想環境を作成して 1 台で構成することも可能です iphone Windows Mac ipad

22 3-1. ネイティブアプリケーションの開発環境 Android ネイティブアプリケーション開発に必要な環境 - Windows 端末 (Delphi/400 XE5) - Android 実機 (Android 以降の ARM7 + NEON 対応デバイス ) 開発コンパイルインストール 実行 Android Phone/Tablet Windows

23 3-2. 簡単なネイティブアプリケーションの開発 簡単なネイティブアプリケーションの開発 この部分だけを開発します スマートデバイス アプリケーションサーバ DB ios ネイティフ アフ リケーション サーハ アフ リケーション Android ネイティフ アフ リケーション

24 3-2. 簡単なネイティブアプリケーションの開発 デモで開発するネイティブアプリケーションスマートデバイス機能 ( カメラ ) を連携したアプリケーションを開発 iphone Android ボタンをタッチすると入力欄の内容をボタンをタッチするとカメラで撮影が行えリストに追加するアプリケーションを作撮影した写真を画面に取り込みます 成します

25 3-2. 簡単なネイティブアプリケーションの開発 ネイティブアプリケーション開発の流れネイティブアプリケーションの開発は 従来の C/S Web 開発手法と同じです 1 コンポーネントの配置 2 イベントにプログラミング 3 コンパイル / インストール コンパイル インストール コンポーネントを使って画面設計 Delphi 言語でプログラミング ターゲットのスマートデバイスにコンパイルしてインストール

26 3-2. 簡単なネイティブアプリケーションの開発 ネイティブアプリケーション開発手順 1 新規作成よりモバイルアプリケーションを選択 数種類のテンプレートが用意されています

27 3-2. 簡単なネイティブアプリケーションの開発 ネイティブアプリケーション開発手順 2 ネイティブアプリケーション開発画面 フォームがスマートデバイス風になっていますが 開発環境 手法は従来の Windows アプリ開発と同様です

28 3-2. 簡単なネイティブアプリケーションの開発 ネイティブアプリケーション開発手順 3 フォームテンプレートを選択 開発環境右上のテンプレートリストでスマートデバイスのイメージを選択できます

29 3-2. 簡単なネイティブアプリケーションの開発 ネイティブアプリケーション開発手順 4 フォームに次のコンポーネントを配置 ToolBar Button Image ActionList ActionList ボタンの見た目は StyleLookup プロパティに豊富に用意されています Image Align:alClient Button Align:alCenter ToolBar Align:alBottom

30 3-2. 簡単なネイティブアプリケーションの開発 ネイティブアプリケーション開発手順 5 Action の実装 Button の Action プロパティで標準アクションの新規追加 TTakePhotoFromCameraAction を選択

31 3-2. 簡単なネイティブアプリケーションの開発 ネイティブアプリケーション開発手順 5 Action のイベントにプログラムを実装 OnDidFinishTaking イベントを作成 OnDidFinishTaking 処理 ( カメラ撮影終了処理 ) procedure TForm1.TakePhotoFromCameraAction1DidFinishTaking(Image: TBitmap); begin Image1.Bitmap.Assign(Image); end;

32 3-2. 簡単なネイティブアプリケーションの開発 ネイティブアプリケーション開発手順 6 ios 実機向けにコンパイル ios シミュレータ向けのコンパイルも可能 ios 実機向けコンパイル

33 3-2. 簡単なネイティブアプリケーションの開発 ネイティブアプリケーション開発手順 7 ios アプリケーションの実行 写真がアプリに取り込まれた! ボタンをタッチします カメラで撮影します スマートデバイスの機能を使えば カメラ撮影を連携したアプリケーションも PC や Web のアプリケーションと比べて 簡単に実現ができます

34 3-2. 簡単なネイティブアプリケーションの開発 ネイティブアプリケーション開発手順 8 Android 実機向けにコンパイル 同じプログラムを Android 実機向けにコンパイル

35 3-2. 簡単なネイティブアプリケーションの開発 ネイティブアプリケーション開発手順 9 Android アプリケーションの実行 写真がアプリに取り込まれた! ボタンをタッチします カメラで撮影します 1 つのプログラムから ios Android のネイティブアプリケーションを開発できます

36 3-2. 簡単なネイティブアプリケーションの開発 補足 :ios と Android の違い 1 ハードウェアキーの違い Android には 戻るボタン や メニューボタン が物理的に存在しますが ios には ホームボタン しかありません 例えば ios で 戻るボタン が前提のアプリを作成してしまうと意図した画面遷移操作が行えなくなります そのため OS ハードの違いを把握した画面設計は非常に重要となってきます ios Android ホームボタンしかない ホームボタン メニューボタン 戻るボタンがある

37 3-2. 簡単なネイティブアプリケーションの開発 補足 :ios と Android の違い 2 ファイル配置の違い ( プロジェクト 配置から設定 ) 音源ファイルや動画ファイルなど アプリケーション内で固有で持ちたい場合 配置 ( 保存 ) 先のパスはプラットフォームによって異なります ios. StartUp Documents に配置します Android assets internal に配置します

38 3-3. IBM i に接続するネイティブアプリケーションの開発 IBM i に接続するネイティブアプリケーションの仕組みネイティブアプリケーションから IBM i に接続する仕組みは Web アプリケーションに近い サーバを経由した 3 階層方式になります スマートデバイス アプリケーションサーバ IBM i (AS/400) ios ネイティフ アフ リケーション Android ネイティフ アフ リケーション 各デバイスからサーバへアクセス サーハ アフ リケーション Delphi/400 ミト ルウェア サーバから IBM i へ接続 DB2/400 Delphi/400 サフ システム

39 3-3. IBM i に接続するネイティブアプリケーションの開発 サーバアプリケーションとは? アプリケーションサーバ ( 中間サーバ ) からデータベースに接続 処理を行うアプリケーションです ネイティブアプリケーションは サーバアプリケーションを経由してデータベースにアクセスすることができます Delphi/400 で開発するサーバアプリケーション Delphi/400 ではサーバアプリケーションを DataSnap で簡単に開発できます DataSnap はサーバアプリケーション専用の開発機能です サーバアプリケーションは SQLConnection や SQLQuery 等の DB コンポーネントを設定したり 関数をプログラミングすることで機能を実装できます サーバアプリケーション開発手順の詳細は P61 以降の補足資料記載

40 3-3. IBM i に接続するネイティブアプリケーションの開発 DataSnap サーバアプリケーションの設定概要 スマートデバイスから IBM i へ SQL を実行できるサーバ機能を実装 SQLConnection SQLQuery DataSetProvider を配置して構成します SQLConnection コンポーネント dbexpress ドライバを CO400 に設定 SQLQuery コンポーネント 接続を SQLConnection1 に設定 DataSetProvider コンポーネント Option poallowcommandtext を True に設定この設定でクライアントアプリから SQL が自由に発行できます 今回は このプログラムをアプリケーションサーバ上で起動しておきます

41 3-3. IBM i に接続するネイティブアプリケーションの開発 デモで開発するネイティブアプリケーション iphone Android IBM i にアクセスして IBM アクセス用スイッチ データをオープンするスイッチ IBM i のデータにアクセスして 得意先リストを一覧表示するアプリを作成します

42 3-3. IBM i に接続するネイティブアプリケーションの開発 IBM i に接続するネイティブアプリケーション この部分を開発します スマートデバイス ios ネイティフ アフ リケーション アプリケーションサーバ DataSnap サーハ アフ リケーション 起動しておきます IBM i (AS/400) DB2/400 Android ネイティフ アフ リケーション Delphi/400 ミト ルウェア Delphi/400 サフ システム この部分を開発します

43 3-3. IBM i に接続するネイティブアプリケーションの開発 IBM i に接続するネイティブアプリケーション開発手順 1 メニューの [ ファイル 新規作成 ] から モバイルアプリケーション を選択

44 3-3. IBM i に接続するネイティブアプリケーションの開発 IBM i に接続するネイティブアプリケーション開発手順 2 フォームに次のコンポーネントを配置 ToolBar Label Switch ListView ToolBar Switch Label ListView Label は AutoSize プロパティを True に設定

45 3-3. IBM i に接続するネイティブアプリケーションの開発 IBM i に接続するネイティブアプリケーション開発手順 3 フォームに次のコンポーネントを配置 SQLConnection DSProviderConnection ClientDataSet SQLConnection DSProviderConnection 今回はサーバアプリケーションを利用して IBM i のデータを表示する機能を実装します ClientDataSet

46 3-3. IBM i に接続するネイティブアプリケーションの開発 IBM i に接続するネイティブアプリケーション開発手順 4 SQLConnection コンポーネントの設定 ConnectionName プロパティを DATASNAPCONNECTION に設定 Datasnap サーバ LoginPrompt プロパティを False に設定 Params プロパティを設定 使用するポートデフォルト :211

47 3-3. IBM i に接続するネイティブアプリケーションの開発 IBM i に接続するネイティブアプリケーション開発手順 5 DSProviderConnection コンポーネントの設定 ServerClassName プロパティを TServerMethods1 に入力設定 SQLConnection プロパティを SQLConnection1 に設定

48 3-3. IBM i に接続するネイティブアプリケーションの開発 IBM i に接続するネイティブアプリケーション開発手順 6 ClientDataSet コンポーネントの設定 2RemoteServer を設定していると ProviderName プロパティが選択できるので DataSetProvider1 を設定 サーバアプリケーションが起動している必要があります CommandText プロパティに実行する SQL を設定例 )SELECT * FROM CUSTOMER 1RemoteServer プロパティに DSProviderConnection1 を設定

49 3-3. IBM i に接続するネイティブアプリケーションの開発 IBM i に接続するネイティブアプリケーション開発手順 7 データ表示をライブバインディング機能で実装 ライブバインディング の設計画面 右クリックから ビジュアルにバインド を起動

50 3-3. IBM i に接続するネイティブアプリケーションの開発 IBM i に接続するネイティブアプリケーション開発手順 8 ClientDataSet の項目を ListView にドラッグ & ドロップでリンク CUSTNO を ItemHeaderText にリンク COMPANY を ItemText にリンク

51 3-3. IBM i に接続するネイティブアプリケーションの開発 IBM i に接続するネイティブアプリケーション開発手順 9 データ表示の確認 ClientDataSet の Active を True に設定するとデータが表示

52 3-3. IBM i に接続するネイティブアプリケーションの開発 IBM i に接続するネイティブアプリケーション開発手順 10 Switch の onswitch イベントにプログラムを実装 スイッチ切り替え処理 procedure TForm1.Switch1Switch(Sender: TObject); begin ClientDataSet1.Active := Switch1.IsChecked; end;

53 3-3. IBM i に接続するネイティブアプリケーションの開発 3 階層によってスマートデバイスから IBM i へ接続完成 スマートデバイス アプリケーションサーバ IBM i (AS/400) ios ネイティフ アフ リケーション Android ネイティフ アフ リケーション DataSnap サーハ アフ リケーション Delphi/400 ミト ルウェア DB2/400 Delphi/400 サフ システム 本資料では設定内容を全て記載していますが 開発時はプロパティ設定をしていくだけなので簡単!

54 3-3. IBM i に接続するネイティブアプリケーションの開発 補足 : カスタマイズ例選択先の受注明細画面を作成すれば 得意先別受注照会のようなカスタマイズも簡単に実現できます 複数ページの切り替えは TabControl を使って設計可能 StringGrid へライブバインディング

55 3-4. ネイティブアプリケーションの配布 ネイティブアプリケーションはスマートデバイスに配布 インストールする方法が 2 つあります 社内公開での配布 開発者は Web サーバ上にネイテブアプリケーションのファイルを公開して配布します 一般公開での配布 開発者は ios であれば AppleStore Android であれば PlayStore にネイティブアプリケーションを公開して配布します

56 3-4. ネイティブアプリケーションの配布 社内公開と一般公開の配布方法の違い 開発 社内公開での配布 Web サーバ公開 ios の場合 ios Developer Program の種類によって数が制限 ユーザー利用 一般公開での配布 ストア公開 開発 ios アフ リ開発 ( 社内公開 ) ios ユーザー AppleStore ios アフ リ開発 ( 一般公開 ) Web サーバ ndroid アフ リ開発 ( 社内公開 ) Android ユーザー PlayStore 各ストア公開には審査があります Android アフ リ開発 ( 一般公開 )

57 3-4. ネイティブアプリケーションの配布 社内公開と一般公開のメリット / デメリット メリット 社内公開 社内だけで配布 利用できる 審査がないため 社内専用のアプリケーションが開発できる 一般公開 ストアで公開するため どこからでもすぐにインストールして利用できる デメリット Web サーバ等を用意して 配布環境の構築 運用が必要 誰でも利用できてしまう 公開には審査が必要 ( 自社用アプリの公開は難しい ) 社内公開するアプリは 配布用のコンパイルしたファイルを Web サーバ上に配置して リンクでダウンロードできるように準備します 配布用のコンパイルファイル ios: ipa iplist ファイル Android: apk ファイル

58 4. まとめ

59 4. まとめ 企業導入されるスマートデバイスは ios Android が主流 Delphi/400XE5 では ios と Android のネイティブ開発が可能 IBM i への接続は DataSnap サーバを使った 3 階層方式 配布は社内公開と一般公開で方法が異なる

60 ご静聴ありがとうございました

61 補足資料

62 補足資料 サーバアプリケーションの開発手順 スマートデバイス クライアントアフ リケーション アプリケーションサーバ サーハ アフ リケーション IBM i (AS/400) DB2/400 Delphi/400 ミト ルウェア Delphi/400 サフ システム

63 補足資料 サーバアプリケーションの開発手順 1 メニューの [ ファイル 新規作成 その他 ] から DataSnapServer を選択

64 補足資料 サーバアプリケーションの開発手順 2 DataSnapServer の形式を選択 サーバ上でどのように実行するかを選択します サーバに常駐で起動させる場合はサービスアプリケーションを使います

65 補足資料 サーバアプリケーションの開発手順 3 通信プロトコルを設定 接続通信の設定標準は TCP/IP を使います HTTP 経由での通信も可能です

66 補足資料 サーバアプリケーションの開発手順 4 使用するポート番号を指定 サーバ接続に使用するポート番号を指定します ( デフォルト 211)

67 補足資料 サーバアプリケーションの開発手順 5 サーバーメソッドの上位クラスを選択 データセットを公開する場合は TDSServerModule を選択します

68 補足資料 サーバアプリケーションの開発手順 6 ソースの保存先を選択 プロジェクトソースの保存場所を指定します

69 補足資料 サーバアプリケーションの開発手順 7 選択した構成によってモジュールが生成 自動生成されるユニット Unit 画面 (VCL フォームアプリケーション時のみ ) ServerMethodsUnit サーバが提供する機能 ServerContainerUnit 通信を制御する機能

70 補足資料 サーバアプリケーションの開発手順 8 ServerMethods に次のコンポーネントを配置 SQLConnection SQLQuery DataSetProvider SQLConnection 今回は IBM i へ SQL 実行するサーバアプリケーションの機能だけ実装しています SQLQuery DataSetProvider

71 補足資料 サーバアプリケーションの開発手順 9 SQLConnection コンポーネントの設定 ConnectionName プロパティを CO400CONNECTION に設定 ライフ ラリ名 接続名ユーサ ーハ スワート Params プロパティを設定 接続名

72 補足資料 サーバアプリケーションの開発手順 10 SQLQuery コンポーネントの設定 SQLConnection プロパティを SQLConnection1 に設定

73 補足資料 サーバアプリケーションの開発手順 11 DataSetProvider コンポーネントの設定 DataSet プロパティを SQLQuery1 に設定 Option プロパティの poallowcommandtext を True に設定

74 補足資料 サーバアプリケーションの開発手順 12 完成したらコンパイルして アプリケーションサーバ上で起動 スマートデバイス アプリケーションサーバ サーハ アフ リケーション IBM i (AS/400) DB2/400 Delphi/400 ミト ルウェア Delphi/400 サフ システム