新バージョンDelphi/400 XE7ご紹介　－ マルチデバイスデザイナ機能で開発効率アップ！ －

Transcription

1 セッション No.2 新バージョン Delphi/400 XE7 ご紹介 - マルチデバイスデザイナ機能で開発効率アップ! - 株式会社ミガロ. RAD 事業部技術支援課吉原泰介

2 アジェンダ 1. マルチデバイス開発とは 2. 新バージョン Delphi/400 XE7 2-1.FireUI によるマルチデバイス開発機能 2-2. アップテザリングによるアプリ連携機能 3. まとめ

3 1. マルチデバイス開発とは

4 1. マルチデバイス開発とは これまでシステム運用するデバイスは Windows の PC だけが主な対象でしたが ここ数年で対象の OS デバイスの種類が急速に増加 様々 OS Windows OSX(Mac) ios Android 様々デバイス ノート PC iphone Android スマートフォン デスクトップ PC Windows タブレット ipad Android タブレット

5 1. マルチデバイス開発とは モバイルを含めたこれからのシステム開発の課題 OS 毎の異なる対応言語の習得デバイス毎のアプリケーション開発 PC でしか対応できない iphone と ipad でも画面設計が違う Android はデバイスの種類が無数がある 使用する OS( および開発言語 ) 使用するデバイスの種類

6 1. マルチデバイス開発とは マルチデバイス開発とは こうした様々な OS デバイスに対応した統一開発 Delphi では Delphi スキルで全てのアプリケーション開発に効率よく対応していける環境を目指しています

7 2. 新バージョン Delphi/400 XE7

8 2. 新バージョン Delphi/400 XE7 Delphi/400 XE5 では Windows OSX ios Android を対象としたネイティブアプリケーション開発が Delphi 言語だけで可能 様々な OS 対応 Delphi 言語 FireMonkey フレームワーク 開発言語を統一 OS の違いを吸収 Delphi が OS 毎にコンパイル Windows OSX(Mac) ios Android ( モバイルアプリケーション ) ( デスクトップアプリケーション ) XE5 では画面設計が異なるアプリケーションは別々に開発が必要

9 2. 新バージョン Delphi/400 XE7 Delphi/400 XE7 では さらに進化して異なるデバイス毎の画面開発も 1 つのアプリケーションで対応可能 様々なデバイス対応 1 つの Delphi プログラム ( ビジネスロジック ) FireMonkey マルチデバイスデザイナー (FireUI) デバイスの違いを細かく対応可能

10 2. 新バージョン Delphi/400 XE7 Delphi/400 XE7 の FireUI 開発 従来の開発 異なる画面パターン毎に別々のアプリケーションとして開発 FireUI 開発 異なる複数の画面パターンも含めて 1 つのアプリケーションとして開発 プログラム ( ビジネスロジック ) プログラム ( ビジネスロジック ) プログラム ( ビジネスロジック ) プログラム ( ビジネスロジック ) Windows 画面 ios 画面 Android 画面 Windows 画面 ios 画面 Android 画面 OS の違いも 画面設計の違いも 1 つのアプリケーション開発で対応!

11 2-1.FireUI によるマルチデバイス開発機能

12 2-1.FireUI によるマルチデバイス開発機能 マルチデバイスデザイナー (FireUI) XE7 の開発環境 1 プロジェクト 2 スタイル 3 ビュー 4 コンパイル

13 2-1.FireUI によるマルチデバイス開発機能 FireUI の機能 1 プロジェクト XE5 でのプロジェクト作成メニュー デスクトップアプリとモバイルアプリは別々の開発 XE7 でのプロジェクト作成メニュー マルチデバイスアプリとして統合開発

14 2-1.FireUI によるマルチデバイス開発機能 FireUI の機能 2 スタイル スタイルを切り替えるだけで OS 独自の画面表示で設計可能 Windows ios OSX(Mac) Android スタイルの切替

15 2-1.FireUI によるマルチデバイス開発機能 FireUI の機能 3 ビュー デバイス毎にビューを作成することができるため 同じプログラムでデバイス毎に画面を調整 変更することが可能 ビューの作成 切替

16 2-1.FireUI によるマルチデバイス開発機能 FireUI の機能 3 ビュー OS 毎の画面設計例 Windows OSX(Mac)

17 2-1.FireUI によるマルチデバイス開発機能 FireUI の機能 3 ビュー OS 毎の画面設計例 ios(iphone) Android( スマートフォン )

18 2-1.FireUIによるマルチデバイス開発機能 FireUIの機能 3 ビュー OS 毎の画面設計例 ios(ipad) Android( タブレット )

19 2-1.FireUI によるマルチデバイス開発機能 FireUI の機能 4 コンパイル 作成したプログラムはプロジェクトマネージャで対象の OS を選択して デバイス毎のビューと一緒に自動でコンパイルが可能 OS 毎にコンパイル etc

20 2-1.FireUI によるマルチデバイス開発機能 FireUI の仕組み マスタ画面をベースとして継承し OS やデバイス毎のビュー ( 画面 ) を 1 つのアプリケーションで開発できます マスタ画面 PC では細かい入力をできるようにしたり Excel ボタンを表示しよう ビュー作成 ビュー作成 スマートフォンでは表示項目を絞ってカメラボタンを表示しよう ビュー作成 タブレットではタッチで操作できるようにボタン等を大きくしよう

21 2-1.FireUIによるマルチデバイス開発機能 デバイスにおける画面設計差異のポイント 例 ) デバイスにおける設計の違い画面に表示できる項目数が異なるマウスとタッチでは操作性の考慮が異なるデバイスによって項目位置の優先が異なる PC アプリケーション スマートフォンアプリケーション PC では 多くの情報を表示しながら細かく操作する 同じ設計では使いづらい スマートフォンでは必要な情報を表示して簡単に操作する

22 2-1.FireUIによるマルチデバイス開発機能 OSにおける画面設計差異のポイント ios Android ホームボタンしかない 戻るボタン ホームボタン メニューボタンがある 例 )OSにおける設計の違い iosでは 戻るボタン が必要 閉じる ボタンは使用できない Android では 戻るボタン は不要 閉じる ボタンは使用できる OS デバイスの違いを把握した画面設計は非常に重要です FireUI はこうした違いを簡単に画面設計で調整できます

23 2-1.FireUI によるマルチデバイス開発機能 FireUI によるマルチデバイス開発例 1 つのプログラムで PC 向けとスマートフォン向けに作成するアプリケーション PC アプリケーション スマートフォンアプリケーション (iphone)

24 2-1.FireUI によるマルチデバイス開発機能 FireUI によるマルチデバイス開発手順 1 プロジェクトを作成する マルチデバイスアプリとして新規作成する テンプレートがいくつか用意されている

25 2-1.FireUI によるマルチデバイス開発機能 FireUI によるマルチデバイス開発手順 2 マスタ画面を作成する ポイント! リストは Panel の代わりに TMultiView コンポーネントの上に配置する

26 2-1.FireUI によるマルチデバイス開発機能 FireUI によるマルチデバイス開発手順 3 Windows で実行する Windows では扱えないカメラボタンは自動で非表示になる

27 2-1.FireUI によるマルチデバイス開発機能 FireUI によるマルチデバイス開発手順 4 FireUI で iphone 向けに画面を変更する

28 2-1.FireUI によるマルチデバイス開発機能 FireUI によるマルチデバイス開発手順 5 iphone 向けに画面を調整する 画面設計を iphone 用に調整 画面に項目が多すぎる ポイント! TMultiView の Mode プロパティを Drawer で設定 ( リストが折り畳まれる ) 閉じる ボタンも不要 閉じる ボタンは Visible を False に設定

29 2-1.FireUI によるマルチデバイス開発機能 FireUI によるマルチデバイス開発手順 5 iphone 向けに画面を調整する TMultiView コンポーネントとは? スライド操作などで必要なときだけ表示する領域を簡単に実装可能 リストが表示される Windows8 のスライド表示させるチャームメニューなどの動作が代表的です

30 2-1.FireUI によるマルチデバイス開発機能 補足 FireUI によるマルチデバイス開発手順 6 iphone 向けに画面を調整する OnItemClick イベント ( リストでのマルチビュー制御 ) procedure TForm1.ListView1ItemClick(const Sender: TObject; const AItem: TListViewItem); begin // リスト選択されたらマルチビューを閉じる MultiView1.HideMaster; end; リストをタッチするとリストを閉じる

31 2-1.FireUI によるマルチデバイス開発機能 FireUI によるマルチデバイス開発手順 7 iphone 向けにコンパイルする コンパイル マルチビューで画面設計も解決

32 2-1.FireUI によるマルチデバイス開発機能 アプリケーションの完成 1 つのプログラムから FireUI でデバイス毎に画面を調整して最適なアプリが完成! PC アプリケーション スマートフォンアプリケーション (iphone) もちろん Android やタブレット向けの画面を作成することも同様に可能です

33 2-2. アップテザリングによるアプリ連携機能

34 2-2. アップテザリングによるアプリ連携機能 アップテザリングとは? 同じネットワークや BlueTooth 上のアプリケーション間でデータや処理を共有して連携することができる XE7 の新機能 ( ルータとしての通信テザリングとは少し異なります ) PC アプリケーション スマートフォンアプリケーション 同一ネットワーク ( 遠隔でも連携可能 ) テザリングで連動 BlueTooth 近距離通信 ( ネットワーク外でも連携可能 ) アップテザリングの前提 同じネットワークに両機器つながっているか または両機器が BlueTooth で通信できる必要があります

35 2-2. アップテザリングによるアプリ連携機能 アップテザリング連携例例えば 2-1. で作成した Windows アプリケーションは せっかく画像を更新する機能があるのに カメラ機能が使えない事が残念 PC では通常写真撮影機能が使えない!

36 2-2. アップテザリングによるアプリ連携機能 アップテザリング連携例これまで写真撮影やバーコード読取を行う業務では専用機器を用意して連携する方法が一般的 商品写真を登録する デジタルカメラで撮影して SD カードを PC にアップして ようやくサーバへ登録 更新 スマートデバイスがあれば代用実現 バーコードを読み取って登録する 専用のバーコードリーダーや POS を用意して PC のアプリケーションから登録 更新 写真撮影やバーコード読取結果をスマートフォンアプリから PC アプリに送信して登録 更新 ( アプリで自動化が可能 )

37 2-2. アップテザリングによるアプリ連携機能 アップテザリング用のコンポーネントアップテザリングを使用する場合には 通信をする両方のアプリケーションに TTetheringManger と TTetheringAppProfile コンポーネントを配置 TTetheringManager コンポーネント NetWork や BlueTooth など通信方法を指定 ネットワーク上でテザリングするための接続等の管理 TTetheringAppProfile コンポーネント テザリングで接続したアプリケーション間で共有するリソースの制御 共有するグループ名を指定 共有するリソースをアイテムとして作成

38 2-2. アップテザリングによるアプリ連携機能 アップテザリング用のコンポーネントの使い方 TTetheringManger で接続を行い TTetheringAppProfile で共有リソースを送受信 画像やバーコードで読み取ったデータなどを共有 (Action なども共有使用できます ) PC アプリケーション スマートフォンアプリケーション TTetheringAppProfile で定義した共有リソース

39 2-2. アップテザリングによるアプリ連携機能 PC とスマートフォンのアプリケーション連携例作成するアプリケーション PC アプリケーション 読取バーコード送信 スマートフォンアプリケーション (iphone) 撮影写真送信

40 2-2. アップテザリングによるアプリ連携機能 PC とスマートフォンのアプリケーション連携例 iphone アプリ側画面設計 TTetheringManger ( 接続管理用 ) TTetheringAppProfile ( リソース共有用 ) TActionList ( 写真撮影用 ) TMSFMXZBarReader ( バーコード読取用 ) 詳細は第 15 回テクニカルセミナー資料 実践 ios / Android ネイティブ機能開発 をご参考ください TImage ( 撮影写真表示用 ) TButton 2 ( 撮影 & バーコード読取用 )

41 2-2. アップテザリングによるアプリ連携機能 iphone アプリ側開発手順 1 TTetheringAppProfile の設定 リソースを 2 つ追加 ポイント! 写真用に Name プロパティ :Camera ResType プロパティ :Stream 通信グループ名 送信側の Kind プロパティは Shared ダブルクリック バーコード用に Name プロパティ :Barcode ResType プロパティ :Data ResTypeプロパティはDataかStreamを選択 Data: 文字などの送信 Stream: 画像などの送信

42 2-2. アップテザリングによるアプリ連携機能 iphone アプリ側開発手順 2 Action の設定 ( 写真撮影ボタン ) Button の Action プロパティで標準アクションの新規追加 TTakePhotoFromCameraAction を選択

43 2-2. アップテザリングによるアプリ連携機能 iphone アプリ側開発手順 3 Action のイベントにプログラムを実装 ( 写真撮影ボタン ) OnDidFinishTaking イベントを作成 OnDidFinishTaking イベント ( 撮影写真を送信 ) procedure TForm1.TakePhotoFromCameraAction1DidFinishTaking(Image: TBitmap); var FStream: TMemoryStream; begin FStream := TMemoryStream.Create; // 写真用のStreamを作成 image.savetostream(fstream); // 撮影写真をStreamに格納 TetheringAppProfile1.Resources.Items[0].Value := FStream; // 共有リソースに送信 Image1.Bitmap.Assign(Image); // 画面に写真を表示 end;

44 2-2. アップテザリングによるアプリ連携機能 iphone アプリ側開発手順 4 バーコード撮影用のイベントにプログラムを実装 ( バーコード撮影ボタン ) OnClick イベント ( バーコード撮影起動 ) procedure TForm1.Button2Click(Sender: TObject); begin TMSFMXZBarReader1.Show; // バーコード撮影を起動 end; バーコード撮影用のイベントにプログラムを実装 (TMSFMXZBarReader) OnGetResultイベント ( 取得バーコード送信 uses 節にJSON 関連のクラスを使用するためのユニットを追加 ) procedure TForm1.TMSFMXZBarReader1GetResult(Sender: TObject; AResult: string); Begin // 読み取ったバーコード値を共有リソースに送信 TetheringAppProfile1.Resources.Items[1].Value := AResult; end;

45 2-2. アップテザリングによるアプリ連携機能 iphone アプリ側開発手順 5 画面起動時のイベントにプログラムを実装 OnCreate イベント ( テザリングで接続 ) procedure TForm1.FormCreate(Sender: TObject); begin // 起動時にテザリング接続を行う TetheringManager1.AutoConnect(); end;

46 2-2. アップテザリングによるアプリ連携機能 PC とスマートフォンのアプリケーション連携例 PC アプリ側画面設計 (2-1 の画面に追加 ) TTetheringManger ( 接続管理用 ) TTetheringAppProfile ( リソース共有用 )

47 2-2. アップテザリングによるアプリ連携機能 PC アプリ側開発手順 1 TTetheringAppProfile の設定 ( スマートフォン側と設定を合わせる ) ポイント! 写真用に Kind プロパティ :Mirror Name プロパティ :Camera ResType プロパティ :Stream リソースを 2 つ追加 通信グループ名 ダブルクリック 受信側の Kind プロパティは Mirror バーコード用に Kind プロパティ :Mirror Name プロパティ :Barcode ResType プロパティ :Data

48 2-2. アップテザリングによるアプリ連携機能 PC アプリ側開発手順 2 写真撮影リソースのイベントにプログラム実装 OnResourceReceived イベント ( 撮影写真を受信 ) procedure TForm1.TetheringAppProfile1Resources0ResourceReceived (const Sender: TObject; const AResource: TRemoteResource); begin AResource.Value.AsStream.Position := 0; //Streamのポジション Image1.Bitmap.LoadFromStream(AResource.Value.AsStream); // 画面に受信画像を設定 Image1.Repaint; // 再描画 end;

49 2-2. アップテザリングによるアプリ連携機能 PC アプリ側開発手順 3 バーコードリソースのイベントにプログラム実装 OnResourceReceived イベント ( 取得バーコードを受信 ) procedure TForm1.TetheringAppProfile1Resources1ResourceReceived (const Sender: TObject; const AResource: TRemoteResource); begin Edit1.Text := AResource.Value.AsString; // 画面に受信値を設定 end;

50 2-2. アップテザリングによるアプリ連携機能 PC とスマートフォンのアプリケーション連携例それぞれコンパイルを行い アプリケーション連携が完成 PC アプリケーション 読取バーコード送信 スマートフォンアプリケーション (iphone) 撮影写真送信 こうしたアプリ連携は Android はもちろん スマートデバイス間 PC 間のアプリケーションでも活用することができます

51 3. まとめ 新バージョン XE7 では FireUI により OS 毎だけでなく デバイス毎の画面設計にも対応したマルチデバイス開発を実現 マルチデバイス開発では OS デバイス毎の特徴をおさえてアプリケーションを設計することが重要 アップテザリング機能を使うとネットワークや BlueTooth を通じてアプリケーション間でデータや処理を共有できるため スマートデバイスを専用機器の代用などに利用可能

52 ご清聴ありがとうございました