開発者が知りたいDelphi実践テクニック！
明日から使えるテクニック集
第32回 エンバカデロ・デベロッパーキャンプ

株式会社ミガロ．
RAD事業部 営業・営業推進課

尾崎 浩司

本文書の一部または全部の転載を禁止します。本文書の著作権は、著作者に帰属します。

自己紹介
 Delphi/400：
 導入実績

:DelphiをIBM i (AS/400)に完全に対応させたミドルウェア
国内約700社、全世界約6,000社

RAD事業部 営業・営業推進課 課長
尾崎 浩司（おざき こうじ） Delphi/400等弊社取り扱い製品の販売促進や製品販売の技術支援を中心に活動 各種イベントや弊社主催セミナーでの講師等も多数担当

本文書の一部または全部の転載を禁止します。本文書の著作権は、著作者に帰属します。

2

アジェンダシステム開発の中で役立つ実践的な技術トピックを厳選し、デモプログラムやソース解説を交えてご紹介 IntraWebにおけるスマートデバイス向け
Webアプリ作成テクニック
 ユニットテストフレームワークについて
 モバイルアプリケーション開発のコツ

本文書の一部または全部の転載を禁止します。本文書の著作権は、著作者に帰属します。

3

IntraWebにおけるスマートデバイス向け
Webアプリ作成テクニック

本文書の一部または全部の転載を禁止します。本文書の著作権は、著作者に帰属します。

4

DelphiによるWebアプリ開発
 IntraWeb• GUIフォームアプリ同様の手法でWebアプリが構築できるフレームワーク
１．プロジェクトの作成

２．コンポーネント配置

GUIと同様、ビジュアル
コンポーネントを配置

４．実行
３．コーディング

イベントに処理を記述

Webアプリとしてブラウザ上で実行

本文書の一部または全部の転載を禁止します。本文書の著作権は、著作者に帰属します。

5

IntraWebでのWeb画面作成方法
 方法１：フォームにコンポーネントを配置した画面作成• レイアウトをGUIアプリと同様、すべてコンポーネントで構築できる• 画面のデザインを変更したい場合、フォームを直接修正する
開発画面
実行画面

フォームデザインのレイアウトでアプリが実行

デザイン、レイアウトを
すべてIWコンポーネント群を使用して作成本文書の一部または全部の転載を禁止します。本文書の著作権は、著作者に帰属します。

6

IntraWebでのWeb画面作成方法
 方法２：テンプレートHTMLを使用した画面作成• デザインをHTMLを使用して作成。実行時にフォーム部品とマージして表示。
• デザイン変更時はテンプレートHTMLのみ変更すればよい。
開発画面

入出力部品のみ
IWコンポーネントを配置

実行画面
HTMLデザインのレイアウトでアプリが実行

レイアウトをHTMLで作成

本文書の一部または全部の転載を禁止します。本文書の著作権は、著作者に帰属します。

7

スマートデバイスに最適な画面の検討
 IntraWeb• PCブラウザを前提としたWebアプリをスマートフォンで実行
PCブラウザスマートフォン

幅が足りなく、画面が切れている

スマートデバイスで使いやすい画面とはどんなものか？
本文書の一部または全部の転載を禁止します。本文書の著作権は、著作者に帰属します。

8

スマートデバイスに最適な画面の検討
 スマートデバイスの特徴• 種類や端末により、サイズや解像度がマチマチ• 操作は、タッチやスワイプなど指を使用 （細かな入力などは不向き）→

スマートデバイスに最適な画面とは？

• デバイスにかかわらず、レイアウトがきちんと表示されるのが理想
スマートフォン
タブレット

本文書の一部または全部の転載を禁止します。本文書の著作権は、著作者に帰属します。

9

スマートデバイスに最適な画面の検討
 モバイルWeb開発用フレームワーク“jQuery Mobile”• スマートデバイスに最適化した画面デザインや部品を提供するフレームワーク• デバイスやブラウザの違いをフレームワークが吸収• スマホやタブレットでのタッチ操作に最適化使用されているサイト例
公式サイト

http://jquerymobile.com/(2016/05現在 最新版は、Ver.1.4.5)

ASCII.jp「jQuery Mobileを使った国内スマホサイトまとめ」よりIntraWebアプリでjQuery Mobileを活用できないか？
本文書の一部または全部の転載を禁止します。本文書の著作権は、著作者に帰属します。

10

IntraWebでのWeb画面作成方法
 IntraWebとjQuery Mobileとの連携• jQueryMobileに用意されている画面デザインや部品は、HTMLで記述

IntraWeb開発画面

jQuery Mobile (HTML)

実行画面

＋

jQuery Mobileとの連携でスマートデバイスに最適な画面を実現可能！
本文書の一部または全部の転載を禁止します。本文書の著作権は、著作者に帰属します。

11

サンプルプログラム
 IntraWebアプリをスマートデバイスに最適化することを検討• 商品マスター照会プログラム
変更前（ PCブラウザで実行）

MITEMP（商品マスター）

一覧画面

DB Server
商品マスタ （MITEMP)

明細画面

ITITCD

商品コード

ITITNM

商品名

ITSTPR

標準単価

ITRMRK

商品備考

完成イメージ
一覧画面

本文書の一部または全部の転載を禁止します。本文書の著作権は、著作者に帰属します。

明細画面

12

サンプルプログラム

明細画面

 プロジェクト構成TIWDBEdit
DataSoureに関連した
データセットを表示

一覧画面

dbExpress

データモジュール
（セッション単位）

TIWDBGrid
DataSoureに関連した
データセットをグリッド表示
TIWDBGrid
ColumnsのOnClickイベント
セルのリンククリック

TClientDataSet
メモリ上のデータセット
本文書の一部または全部の転載を禁止します。本文書の著作権は、著作者に帰属します。

13

jQuery Mobile 基本ページレイアウト
 jQuery Mobile公式サイトより基本ページのHTMLソースを取得• トップページ から [Demos]をクリックし、[jQuery Mobile 1.4.5 Demos]をクリック• 「Pages & Navigation」 内の [Pages] をクリック• 「Putting it together: Basic single page template」内にあるHTMLソースをコピーして、メモ帳等のテキストエディタを起動して貼り付け• HTMLソース内の[version]部分を最新版である”1.4.5”に全て置換[version]部分を”1.4.5”に置換

リンク先にある
HTMLソースをメモ帳等に貼り付け

本文書の一部または全部の転載を禁止します。本文書の著作権は、著作者に帰属します。

14

jQuery Mobile 基本ページレイアウト
 基本ページレイアウトのHTML構成
Basic single page template
ページ幅、拡大率の設定

ページ全体
ヘッダ

ヘッダ領域

コンテンツ
コンテンツ領域

フッタ
フッタ領域

本文書の一部または全部の転載を禁止します。本文書の著作権は、著作者に帰属します。

15

明細画面の作成
 テンプレート用フォルダにHTMLファイルを保存• メモ帳にて[名前を付けて保存]を選択• IntraWebアプリ実行フォルダの中に[templates]フォルダを作成• [templates]フォルダの中にhtmlを保存（明細画面用として、ここではファイル名をdetail.htmlとして保存）• 保存の際、文字コードは”UTF-8”とする

detail.htmlというファイル名でUTF-8形式で保存[templates]フォルダを作成し、その中にHTMLを保存

本文書の一部または全部の転載を禁止します。本文書の著作権は、著作者に帰属します。

16

明細画面の作成
 HTMLとIntraWebコンポーネントとの関連付け• HTMLの中に、{%コンポーネント名%} と記述• ID属性はコンポーネント名の大文字となる。
ui-btndetail.html

jQuery Mobileのボタン
ID属性により関連付け

DetailFrm.pas
btnBack: TIWButton

ui-field-contain
ラベルとテキスト部品のレイアウトを画面サイズにより調整

IWDBEdit1: TIWDBEdit

IWDBEdit2: TIWDBEdit
IWDBEdit3: TIWDBEdit

IWコンポーネントの関連付け
IWDBMemo1: TIWDBMemo

本文書の一部または全部の転載を禁止します。本文書の著作権は、著作者に帰属します。

17

明細画面の作成
 IWTemplateProcessorHTMLコンポーネントを使用• TemplatesプロパティのDefaultサブプロパティにHTMLファイル名を指定• RenderStylesプロパティをFalseに指定• FormのLayoutMgrプロパティと関連付け
frmDetailとIWTemplateProcessorHTML1とを関連付け

DetailFrm.pas

RenderStyｌesをFalseに指定作成したhtmlファイルを指定
本文書の一部または全部の転載を禁止します。本文書の著作権は、著作者に帰属します。

18

明細画面の作成
 実行• jQuery Mobileで作成されたHTML画面にIWEditやIWMemoの値が明細画面セットされて出力

明細画面

スマートフォンでは、ラベルとテキスト
部品が、縦並びで表示

タブレットでは、ラベルとテキスト
部品が、横並びで表示

本文書の一部または全部の転載を禁止します。本文書の著作権は、著作者に帰属します。

19

一覧画面の作成
 一覧画面もテンプレートHTMLで動作するように変更• detail.htmlをコピーして、list.htmlを作成• ListFrm.pasにIWTemplateProcessorHTMLを追加してHTMLと紐づけを実施• list.htmlのコンテンツ領域に {%IWDBGrid1%}を指定

 実行

一覧画面
IWGridがそのまま表示されるため、グリッドが画面からはみ出していて、商品名が見えない

jQuery Mobileの一覧部品であるリストビューが使用できないか？
本文書の一部または全部の転載を禁止します。本文書の著作権は、著作者に帰属します。

20

一覧画面の作成
 ListView• リスト形式の一覧表示を行う
jQuery MobileのUI部品

list.html

公式サイト（デモページ）

様々なタイプのリストビュー
サンプルが記載

リンク先にある
htmlソースをコンテンツ領域に貼り付け

スマートフォンのタッチ操作に最適なリスト形式で出力

プログラムから動的にタグが作成できないか？
本文書の一部または全部の転載を禁止します。本文書の著作権は、著作者に帰属します。

21

一覧画面の作成
 IWTemplateProcessorHTMLコンポーネントのOnUnknownTag
イベントを使用• HTML上で {% 名前 %}で定義された部分に対して、ロジックでタグを作成可能
ListFrm.pas

list.html

タグを埋め込みたい箇所に{% 名前 %} と定義

ANameにセットされた名前より、
タグ文字列をVValueにセット

本文書の一部または全部の転載を禁止します。本文書の著作権は、著作者に帰属します。

22

一覧画面の作成
 データにもとづく動的なListViewの作成
ListFrm.pas
タグ文字列を作成するための文字列リスト変数

データセットをループでまわしながら、
リスト項目（<li>タグ）文字列を作成完成した文字列リストの文字列をVValueにセット

本文書の一部または全部の転載を禁止します。本文書の著作権は、著作者に帰属します。

23

一覧画面の作成
 実行
商品マスタより取得した
商品名をもとに動的に作成したリストを表示

応用例

次のような形式でタグを作成すれば、より使い勝手の良いリストも作成可能（例）<img src=“画像ファイル” ><p>商品コード</p><h1>商品名</h1><h4>単価</h4>

動的に作成したリストビューには、
クリックイベントが定義されていない為、タッチしても画面が遷移しない

Delphiのイベントと関連付けることはできないか？
本文書の一部または全部の転載を禁止します。本文書の著作権は、著作者に帰属します。

24

一覧画面の作成
 再度、IntraWebのフォームで一覧画面を実行
一覧画面

ListFrm.pas
EnabledをFalseにするとＩｎｔｒaWebのフォームで実行

PCブラウザで実行し、HTMLソースを表示

HTMLソース（抜粋、整形済）<a>要素にonclick属性が定義されており、javascriptのサブルーチンが呼び出されている

本文書の一部または全部の転載を禁止します。本文書の著作権は、著作者に帰属します。

25

一覧画面の作成
 IntraWebで生成されたHTMLとイベントとの関連• リンクのクリックがSubmitClickConfirmサブルーチンを呼び出し、
Delphiのイベントが実行
コンポーネント名（大文字）
列番号 + キー値

HTMLソース
ListFrm.pas

動的に作成するＬｉｓｔViewにonClick属性を追加すればよい！
本文書の一部または全部の転載を禁止します。本文書の著作権は、著作者に帰属します。

26

一覧画面の作成
 動的なListViewの改良
ListFrm.pas

onClick属性 固定値（可変部を%sで定義）

商品コードを可変部にセットし、<a>要素にonClick属性の文字列を追加本文書の一部または全部の転載を禁止します。本文書の著作権は、著作者に帰属します。

27

一覧画面の作成
 実行（完成）

jQuery Mobileの活用で、スマートデバイスに適した画面が作成可能！
本文書の一部または全部の転載を禁止します。本文書の著作権は、著作者に帰属します。

28

（参考）IWCGjQuery Mobileについて
 IntraWebを拡張する市販コンポーネント• jQuery Mobileを使用したスマートデバイスに最適なWeb画面をHTMLを使用せずに直接コンポーネントで作成可能
IWCGjQuery Mobile Suite
http://www.cgdevtools.com/products/iwcgjquery-mobile-suite/

本文書の一部または全部の転載を禁止します。本文書の著作権は、著作者に帰属します。

29

ユニットテストフレームワークについて

本文書の一部または全部の転載を禁止します。本文書の著作権は、著作者に帰属します。

30

ユニットテストとは？
 ユニットテストとは、ソフトウェアやシステムのテスト手法の一つで、単一の部品（モジュール）を対象に行うテスト。
→

Delphiの場合、procedureやfunction 単位にテスト実施
メソッドの宣言部
ユニットテストでは、メソッド（関数や手続き）
単位に仕様どおりに実行できるか確認する。

ユニットテストはどのように実施しているか？
本文書の一部または全部の転載を禁止します。本文書の著作権は、著作者に帰属します。

31

一般的なユニットテストの実施方法
 デバッグ実行• ブレークポイントを設定して、デバッグすることで実際に動作させながら値の確認などが行える。
ブレークポイント デバッグ実行の課題• ユニットテスト結果を保管することができない。
• 再テストの際、都度再設定して実行する必要がある。
• 必要なテストパターンを考慮して画面から実行するのが困難なことがある。

本文書の一部または全部の転載を禁止します。本文書の著作権は、著作者に帰属します。

32

一般的なユニットテストの実施方法
 デバッグプリント• 実装コードの中にOutputDebugString手続きを埋め込むことで、実行時にデバッグウィンドウに値を出力することができる。
デバッグ出力ロジック

デバッグ実行時
イベントログに結果が出力

 デバッグプリントの課題• 実装コードの中に直接デバッグ用コードを埋め込む必要がある
ユニットテストの課題を解決する方法はないか？

本文書の一部または全部の転載を禁止します。本文書の著作権は、著作者に帰属します。

33

テストフレームワーク DUnit
 ユニットテストを行うためのフレームワーク• 実装コードとは、別にテスト用コードを用意し、テスト実施を自動化可能• テストパターンを用意しておけば、何回でもテストを繰り返すことができる
仕様書の入出力内容にもとづき、
テストパターンを作成

ソース作成

テストコード作成

テスト実施

完成

DUnit :プロジェクト
仕様書の記述にもとづき、プログラムを作成

本文書の一部または全部の転載を禁止します。本文書の著作権は、著作者に帰属します。

テストパターンにもとづき、テストを実施。結果を確認。

34

DUnitを使用するメリット
 ユニットテストが自動化できる• テストコードを作成しておけば、何度でも再テストを行える。
（コードを修正した際のデグレードを防ぐことができる。）• ソースコード/プロジェクトに手を加えることなく、テストコードを追加できる。
• テストコード自体が、テスト実施のエビデンスとなる。
ソース修正
DUnit :テスト実行

ソース作成
一度テストコードを作成しておけば、ソースコードを変更した際、そのまま再テストが可能。
本文書の一部または全部の転載を禁止します。本文書の著作権は、著作者に帰属します。

35

サンプルプログラム
 月末日取得サブルーチン（メソッド）の作成• （仕様）••••

パラメータにセットした“年”、“月”の月末日を算出し、結果を返す。
“年”の有効範囲は、1900～2499“月”の有効範囲は、1～12“年”“月”の有効範囲が正しくない場合、結果として-1を返す。

• （書式）

function GetLastDay(AYear, AMonth: Integer): Integer;

本文書の一部または全部の転載を禁止します。本文書の著作権は、著作者に帰属します。

36

サンプルプログラム
 GetLastDayメソッドのコーディング
パラメータが対象範囲となっているかのチェック

パラメータの月により、月末日を返す

 実行

うるう年の考慮がないので、今年(2016年)は、2月は29日のはずが、28日と表示。
（メソッドの修正が必要）

GetLastDayメソッドをテストする方法を検討！
本文書の一部または全部の転載を禁止します。本文書の著作権は、著作者に帰属します。

37

ユニットテストプロジェクトの作成
 テストプロジェクトの新規作成(1/2)• [ファイル]→[新規作成]→[その他]を選択• 新規作成ダイアログの左側ツリーより、[ユニットテスト]を選択• [テスト プロジェクト]を選択し、[OK]を押下

本文書の一部または全部の転載を禁止します。本文書の著作権は、著作者に帰属します。

38

ユニットテストプロジェクトの作成
 テストプロジェクトの新規作成(2/2)• ソースプロジェクト選択、ユニットテスト用プロジェクト名を指定して[次へ]を押下• テストランナーを指定して[完了]を押下テスト対象のプロジェクトがデフォルト表示される。

GUIでテストするか、コンソールでテストするかを選択。

本文書の一部または全部の転載を禁止します。本文書の著作権は、著作者に帰属します。

テスト用プロジェクトが
追加作成。

39

テストケースの作成
 テストケースの新規作成• 新規作成ダイアログの[ユニットテスト]より[テストケース]を選択し、[OK]を押下• テストを行うユニットを選択し、テスト対象のサブルーチン（メソッド）を選択• ファイル名を指定して[完了]を押下

本文書の一部または全部の転載を禁止します。本文書の著作権は、著作者に帰属します。

40

テストケースの作成
実装部
テストケースのユニットが追加

テスト開始前に実行（テストに必要な初期化）
テスト終了後に実行（終了処理を記述）

宣言部
テストパラメータ変数

ここにテスト用ロジックを追加

publishedのメソッドに実行したい条件のテストを記述する！
本文書の一部または全部の転載を禁止します。本文書の著作権は、著作者に帰属します。

41

テストケースの作成
 2016年2月が正しく動作するかのテストケースを作成
データモジュールやフォームのメソッドを対象とする場合、オーナーの指定が必要。

テスト結果として想定される期待値を保持する
変数を定義。

テストケース ： 2016年02月
期待したい値： うるう年の為、29日
メソッド実行テスト結果の確認
CheckEquals手続き ：
2つの値が等しいことを確認
本文書の一部または全部の転載を禁止します。本文書の著作権は、著作者に帰属します。

42

テストケースの作成
 テストプロジェクトを[実行]

実行結果が色分けで表示： テスト成功： テスト失敗

テスト項目を選択し、実行

テスト失敗の原因が表示
期待値29に対し、28が結果であった仕様書に基づき、必要なテストパターンを同様に追加すればよい！
本文書の一部または全部の転載を禁止します。本文書の著作権は、著作者に帰属します。

43

テストパターンの作成
 テストパターンの作成• ブラックボックステスト（入出力仕様に合わせたテスト仕様を作成）• 同値分割と限界値分析
同値分割

正常に処理される有効同値クラスと、エラー処理
される無効同値クラスに分けてそれぞれの代表的な値をテストデータにする。

境界値分析

有効値と無効値の境界値をテストデータにする• テストパターンの検討• 年の境界値• 月の境界値• 年の同値分割

1899, 1900 … 2499, 2500
0, 1 … 12, 13
2015年2月 （平年：年が4で割り切れない）
2016年2月 （うるう年：年が4で割り切れる）
2100年2月 （平年：年が100で割り切れる）
2000年2月 （うるう年：年が400で割り切れる）

本文書の一部または全部の転載を禁止します。本文書の著作権は、著作者に帰属します。

44

テストパターンの作成
宣言部【P.41の宣言部を修正】
・ テストケースを汎用化するために、引数を追加
・ published → public に変更

テストパターンにもとづくメソッドを追加で宣言

実装部 (P.42のソースを修正)

テスト実行と結果の評価

本文書の一部または全部の転載を禁止します。本文書の著作権は、著作者に帰属します。

45

テストパターンの作成
テストパターン実装部（一部抜粋）
1899年は有効範囲外の為、-1となる
1900年は有効の為、大の月の31となる

2000年はうるう年の為、29となる

 テスト実施

うるう年の判定パターンがNGなことが結果としてわかる
テスト結果： 12件中2件NG本文書の一部または全部の転載を禁止します。本文書の著作権は、著作者に帰属します。

46

GetLastDayメソッドのロジック修正
 うるう年判定ロジックを追加

うるう年の判定ロジック（年が4で割り切れる） かつ（100で割り切れないあるいは400で割り切れる） → うるう年

配列を使用し処理を簡略化

本文書の一部または全部の転載を禁止します。本文書の著作権は、著作者に帰属します。

47

GetLastDayメソッドのロジック修正 ロジック修正後も、容易に再テスト可能

すべてのテストパターンにOK
テスト結果： 12件中12件OKテストパターンがあれば、何度でも再テスト可能でデグレードを防止！
本文書の一部または全部の転載を禁止します。本文書の著作権は、著作者に帰属します。

48

（参考）DUnitXについて
 新しいテストフレームワークDUnitX• Delphi XE8以降からは、DUnitXが推奨テストフレームワークとなっている。
（DUnitも使用可能）

DUnitX

DUnit＜DUnitXの概要＞
http://docwiki.embarcadero.com/RADStudio/Seattle/ja/DUnitX_の概要

DUnitXは、Delphi 2010以降であれば、下記よりダウンロードして使用可能
https://github.com/VSoftTechnologies/DUnitX
DUnitで作成したテストプロジェクトは、DUnitXに変換可能
http://docwiki.embarcadero.com/RADStudio/Seattle/ja/DUnit_テストを_DUnitX_に変換する方法

本文書の一部または全部の転載を禁止します。本文書の著作権は、著作者に帰属します。

49

モバイルアプリケーション開発のコツ

本文書の一部または全部の転載を禁止します。本文書の著作権は、著作者に帰属します。

50

PCアプリとモバイルアプリの違い
オフィスでの使用が前提
・キーボード・マウス
・十分な画面サイズ
・リッチな通信環境

PC

モバイル

時間をかけて作業することを前提とした多目的なアプリ。

そのまま「モバイル化」しても...

限られた時間で作業するのが困難な「使えない」アプリとなる。

いつでも・どこでもが前提
・ソフトキーボード
・タッチ・限られた画面サイズ
・不安定な通信環境

PCアプリの全ての機能をそのままモバイルで実現しても、結局使い勝手が悪い！
本文書の一部または全部の転載を禁止します。本文書の著作権は、著作者に帰属します。

51

モバイルに最適なアプリとは？
 限られた画面サイズ/入力方法• 1画面に情報を詰め込みすぎない(1機能＝1画面)• 部門選択

→

社員選択

→

社員編集

• 必要最小限の入力にする工夫• モバイルから編集が必要な物を取捨選択

 デバイス機能の活用• カメラによる画像撮影• マップやGPS、音声による入力省力化• 電話やメールとの連携

モバイルアプリでは、何を選び、何を捨てるか、
何を新しい価値として採用するか？を明確にすることが重要！
本文書の一部または全部の転載を禁止します。本文書の著作権は、著作者に帰属します。

52

モバイル画面設計のポイント
 使用するデバイスや画面サイズが限定できるか？

1. 業務で使用するデバイスが限定できれば画面設計はシンプル。
例）iPad専用アプリであれば 論理サイズ 768dp × 1024dpで固定できる。
iPad/iPad2: 1024ﾋﾟｸｾﾙ×768ﾋﾟｸｾﾙ
iPad3以降: 2048ﾋﾟｸｾﾙ×1536ﾋﾟｸｾﾙ
2. 機種が限定できない場合でも、論理サイズで設計する事である程度の解像度の違いは吸収可能。
3. 実行時の縦横切り替えを許可するか、固定化するかを決定する。

iPad 専用アプリ

 シンプルな表現を意識する。

1. テキスト/ボタンのサイズは大きくする。
2. 表示する情報量は最低限にする。
例）メール一覧：受信日時

3. 表記をシンプルにする。

【当日】時分のみ【当年】月日のみ例）アイコン表示

本文書の一部または全部の転載を禁止します。本文書の著作権は、著作者に帰属します。

53

モバイル画面設計のポイント
 デバイスの違いを意識する

1. iOSには「戻る」ボタンが無い。iOSの場合には画面上に「戻る」ボタンを配置する。
iOSの場合、フォーム上に[戻る]ボタンを配置

Androidは、ハードキー
で「戻る」が可能
Android

iPhone コンポーネントの配置に留意する。

1. よく使用する機能は、下に配置する。
右手で持って
2. 逆に「削除」等、誤タップを片手操作しやすい
防ぎたいものは上は配置。
エリア
3. 片手で操作しやすいエリア
よく使う機能はを意識する。
下部に配置
4. ソフトキーボードの出現を考慮する。

本文書の一部または全部の転載を禁止します。本文書の著作権は、著作者に帰属します。

「削除」は指から遠い位置に配置54

モバイルアプリ開発のコツ
 モバイル開発では、デバイス機能の活用が重要。
今回は、デバイス機能を活用した下記の活用方法を紹介！

①②

バーコード読み込み （カメラ機能）
Beacon （IoT:Bluetooth機能）

本文書の一部または全部の転載を禁止します。本文書の著作権は、著作者に帰属します。

55

(1)カメラを使ったバーコード読み取り機能
 カメラ機能を使ったバーコード読み取りの仕組み• スマートデバイスではカメラ機能を利用して、バーコードやQRコードを読み取り、値を取得することが可能。
（PCのように、バーコードリーダーの外部接続は不要）
B.スキャン
カメラ機能
A.起動

C.結果取得ネイティブ
アプリ

本文書の一部または全部の転載を禁止します。本文書の著作権は、著作者に帰属します。

56

(1)カメラを使ったバーコード読み取り機能
 バーコード読み取り機能の実装に便利なコンポーネント

TMSSoftWare社のバーコード読み取りコンポーネント（無償）【ZBarSDK】 ※iOS専用
http://www.tmssoftware.com/site/blog.asp?post=280

ただしZBarSDKコンポーネントはiOS専用。
Androidで使用する場合は、これをカスタマイズした
フリーソースとして公開されているTKRBarCodeSannerコンポーネントが便利。

【TKRBarCodeSanner】※iOS / Android可能（iOS使用時はZBarSDKもインストールが必要 ）http://www.fmxexpress.com/qr-code-scanner-source-code-for-delphi-xe5-firemonkey-onandroid-and-ios/→

今回はこのTKRBarCodeSannerコンポーネントを使用

本文書の一部または全部の転載を禁止します。本文書の著作権は、著作者に帰属します。

57

(1)カメラを使ったバーコード読み取り機能
 TKRBarCodeSannerコンポーネントのインストール①• TKRBarCodeSanner.zipをダウンロードして展開• [ファイル|プロジェクトを開く]よりTKRBarCodeSannerPkgDXEX5.dpkを開きます。
プロジェクトマネージャ
で右クリックからコンパ
イルとインストールを実行

本文書の一部または全部の転載を禁止します。本文書の著作権は、著作者に帰属します。

58

(1)カメラを使ったバーコード読み取り機能
 TKRBarCodeSannerコンポーネントのインストール②• [ツール|オプション]のライブラリでライブラリパスに
TKRBarCodeSannerPkgDXEX5.dpkを開いたパスを追加

TKRBarCodeSannerPkg
DXEX5.dpkのパスを追加【ポイント】
使用するプラットフォームを選択しておく必要があります• コンポーネントの登録が完了！
本文書の一部または全部の転載を禁止します。本文書の著作権は、著作者に帰属します。

59

(1)カメラを使ったバーコード読み取り機能
 TKRBarCodeSannerコンポーネントソースの修正が必要• Delphi XE5をベースにしたコンポーネントの為、XE7以降は若干修正が必要。

本文書の一部または全部の転載を禁止します。本文書の著作権は、著作者に帰属します。

60

(1)カメラを使ったバーコード読み取り機能
 バーコード機能の実装手順①• フォームに次のコンポーネントを配置
TKRBarCodeSanner 、TEdit、TButton

TKRBarCodeSanner
TButtonTEdit

本文書の一部または全部の転載を禁止します。本文書の著作権は、著作者に帰属します。

61

(1)カメラを使ったバーコード読み取り機能
 バーコード機能の実装手順②• TButtonのクリックイベントに処理を記述

A.カメラ起動 B.スキャン

OnClick処理（バーコードスキャン）
procedure TForm1.Button1Click(Sender: TObject);begin
TKRBarCodeScanner1.Scan; //バーコードスキャンを実行
end;

本文書の一部または全部の転載を禁止します。本文書の著作権は、著作者に帰属します。

62

(1)カメラを使ったバーコード読み取り機能
 バーコード機能の実装手順③• TKRBarCodeSannerのスキャン結果イベントにプログラムを実装

C.結果取得OnScanResult処理（スキャン結果）
procedure TForm1.TKRBarCodeScanner1ScanResult(Sender: TObject; AResult: string);
begin
Edit1.Text := AResult;//読み取ったコードをEditにセット
end;

本文書の一部または全部の転載を禁止します。本文書の著作権は、著作者に帰属します。

63

(1)カメラを使ったバーコード読み取り機能
 バーコード機能の実行
A.カメラ起動

本文書の一部または全部の転載を禁止します。本文書の著作権は、著作者に帰属します。

B.スキャン

C.結果取得64

(2)Beacon機能の活用
 Beacon（ビーコン）とは？

• IoTが身近なところで代表される機能のひとつがBeacon（ビーコン）。
BeaconはBluetoothを使い、半径十数メートル信号を発信する。
用途としては、スマートフォンなどの機器が信号範囲に入ってきたら情報を通知したり（お店のクーポン配信等）、
信号範囲から位置を特定して位置情報を使った機能として使うこともできる。

【利用例】
道路交通情報通信システム（VICS）では、渋滞の状況や所要時間、通行止めなどの情報を電波ビーコンや光ビーコンで車に情報を伝えている。
（一般財団法人 道路交通情報通信システムセンター ）また登山で携帯する「雪崩ビーコン」もその名の通り、非常時に場所を発信する
Beacon機器。

本文書の一部または全部の転載を禁止します。本文書の著作権は、著作者に帰属します。

65

(2)Beacon機能の活用
 TBluetooth、TBluetoothLEコンポ―ネント• 画面上にドラッグ＆ドロップするだけでアプリケーションをBluetooth、 BluetoothLE(LowEnergy)に対応できる

 TBeaconコンポーネント• Beacon情報を感知する

 TBeaconDeviceコンポーネント

MonitorizedRegionsプロパティ内のアイテムでUUIDを指定

UUIDプロパティを指定• Beacon情報を発信する※UUIDとは、全世界で2つ以上のアイテムが同じ値を持つことがない一意な識別子
BeaconはUUID、MajorID、MinorIDなどで信号を判別する本文書の一部または全部の転載を禁止します。本文書の著作権は、著作者に帰属します。

66

(2)Beacon機能の活用
 TBluetooth、TBluetoothLEコンポ―ネント• 画面上にドラッグ＆ドロップするだけでアプリケーションをBluetooth、 BluetoothLE(LowEnergy)に対応できる

 TBeaconコンポーネント• Beacon情報を感知する

 TBeaconDeviceコンポーネント

MonitorizedRegionsプロパティ内のアイテムでUUIDを指定

UUIDプロパティを指定• Beacon情報を発信する※UUIDとは、全世界で2つ以上のアイテムが同じ値を持つことがない一意な識別子
BeaconはUUID、MajorID、MinorIDなどで信号を判別する本文書の一部または全部の転載を禁止します。本文書の著作権は、著作者に帰属します。

67

(2)Beacon機能の活用
 Beacon受信サンプルアプリ開発• 機能概要①Beacon機器※
から信号を発信Beaconエリア外② Beaconの信号エリアに入るとアプリで広告表示！

Beacon発信エリア

Beacon機器

移動※Beacon機器は業界の標準規格であるiBeacon と AltBeacon に対応
本文書の一部または全部の転載を禁止します。本文書の著作権は、著作者に帰属します。

68

(2)Beacon機能の活用
 Beacon受信サンプルアプリ開発手順①• コンポーネントの配置

TBeacon（Beacon処理用）

本文書の一部または全部の転載を禁止します。本文書の著作権は、著作者に帰属します。

TImage（画像をセットしておく）

69

(3)Beacon機能の活用
 Beacon受信サンプルアプリ開発手順②• TBeaconプロパティの設定

MonitorizedRegionsプロパティをダブルクリック

アイテムを追加

Beaconに合わせたUUIDをセット

本文書の一部または全部の転載を禁止します。本文書の著作権は、著作者に帰属します。

70

(2)Beacon機能の活用
 Beacon受信サンプルアプリ開発手順③
OnCreateイベント（初期処理）
procedure TForm1.FormCreate(Sender: TObject);
Begin
Image1.Visible := False; //画像を非表示
Beacon1.Enabled := True; //Beaconを有効化
end;

OnBeaconEnterイベント（Beaconエリアに入った処理）
procedure TForm1.Beacon1BeaconEnter(const Sender: TObject;
const ABeacon: IBeacon; const CurrentBeaconList: TBeaconList);
begin
Image1.Visible := True; //画像を表示
end;

OnBeaconExitイベント（Beaconエリアから出た処理）
procedure TForm11.Beacon1BeaconExit(const Sender: TObject;
const ABeacon: IBeacon; const CurrentBeaconList: TBeaconList);
begin
Image1.Visible := False; //画像を非表示
end;
本文書の一部または全部の転載を禁止します。本文書の著作権は、著作者に帰属します。

71

THANKS!
www.embarcadero.com/jp
第32回 エンバカデロ・デベロッパーキャンプ

本文書の一部または全部の転載を禁止します。本文書の著作権は、著作者に帰属します。

72