Delphi で始める
ビジュアル
プログラミング
年（バージョン月対応）

エンバカデロ・テクノロジーズ

バージョン 10.4 Sydney の概要やビジュアルプログラミングの手法を解説した評価ガイド

目次の世界へようこそ！
お問い合わせ先の新機能
継続的なアップデート
メモリ管理の統合
の機能強化
の機能強化
の機能強化
言語の新機能コンパイラによるサービス指向アプリケーションの構築
無料からはじめよう！
個人またはスタートアップ企業の方は企業ユーザーの方はのビジュアル開発を体験しようを起動する
コンポーネント・

パーツの配置レイアウトを調整する
ボタンのキャプションを設定する
イベントを使う［戻る］ボタンに機能を実装するを入力してページを表示する表示されたページのとタイトルを表示する

新しいウィンドウでページを表示する
パーソナル

ブラウザの完成

デバッガを使ってみよう
モバイルアプリ開発に挑戦しよう
マルチデバイスアプリケーションを作成する
ユーザーインターフェイスを設計するを使おう
向けの追加実装や設定を行う

実行時パーミッションリクエストを実装する

資格リストを設定する
作成したアプリをスマホで動かそう
データベースを利用してみよう
データベース接続を定義するを使ってテーブルのデータセットを呼び出す
ユーザーインターフェイスを設計する
データフィールド設定とはレコードの移動と操作
データにコードからアクセスするにはファイル保存用のダイアログを用意する
画像を保存するコードの実装
スタイルの画面にしてみよう

で始めるビジュアルプログラミングの世界へようこそ！
このたびは、を評価いただき、誠にありがとうございます。

は、エンバカデロ・テクノロジーズが提供するフル機能のソフトウェア開発ソリューションで、、向けの真のネイティブアプリケーションの構築に加え、クラウドや、、とつながるアプリ

ケーションの構築をサポートしています。

年以上にわたり、

は、向けの業務アプリケーション構築にフォーカスし、機能強化を続けてきました。しかし近年、モバイルやといった新しいプラットフォームに加え、サービス指向のシステム構築といった新しいトレンドにも対応する必要が生じています。
は、すでに小売、財務、製造、産業用オートメーション、科学技術といったさまざまな分野で実績を上げていますが、これらの既存システム資産に対し、柔軟かつ容易に最新テクノロジーを活用できるようにすることが、私たちの務めであると考えています。
最新の
ーサル
および

を用いれば、新しいコントロール、プラットフォームスタイル、ユニバ

プラットフォームサービスコンポーネントなどを用いて、すばやく、かつ容易に既存のアプリケーションをに対応させることができるほか、、

で始めるビジュアルプログラミング

といったモバイルプラットフォーム向けにもすばやくアプリケーションを構築できます。加えて、従来のデータアクセスを、ビッグデータ、、クラウドサービス、エンタープライズサービスへと拡張し、複数システムをサービス指向のアーキテクチャによって連携させることも可能です。
の統合開発環境（
ズが約）も機能強化されており、従来よりもプロジェクトで利用できるメモリサイ

倍（※ バージョンと比較）になるなどの性能向上、クイック編集機能などの生産性向上機

能などを搭載しています。
は、

、

、

、

向けのマルチデバイスアプリケーションを、単一のツール、単一のプログラミング言語、単一のフレームワークを用いることで、極めて短時間で構築可能にします。
さらに、サーバーサイド開発では、

プラットフォームにも対応しており、とのクロスプラットフォームでサーバーアプリケーションの構築を実現しました。
特に、と呼ばれる中間サーバー構築機能がとで動作可能になったことで、モバイルクライアントとバックエンドシステムを接続する中間サーバー機能を多様なプラットフォーム上に構築できるようになりました。
このガイドはの機能評価の出発点であることにご留意ください。

には、このガイドで紹介しきれないほどの数々の機能があります。エンバカデロでは、これらの機能を最大限に活用するのに役立つ補足的な情報、ビデオ、ウォークスルー、ガイドなどを用意しています。本製品の最新情報については、機能一覧、製品情報ページなどを参照してください。

お問い合わせ先の評価に関してご不明な点、ご質問などがございましたら、下記までお問い合わせください。
エンバカデロ・テクノロジーズ インフォメーションサービスセンター：：

で始めるビジュアルプログラミング

の新機能
では、

開発に関する大幅な機能強化に加え、すべてのサポートプラットフォームにわたって生産性やパフォーマンスの強化が施されています。

継続的なアップデート
近年のは、およそ年回のメジャーリリースの他に、継続的に年数回のアップデートリリースを実施しています。これは、日々変化する

環境への迅速な対応と、製品機能を常にブラッシュアップしていくという方針に基づくものです。
モバイル向けのは、頻繁なアップデートを行っており、ユーザーもこれらを積極的にインストールする傾向にあるため、モバイル向けアプリを開発する場合には、最新
プデートは欠かせません。一方、に追従するための開発環境のアッは、安定的に同じバージョンを利用する傾向にあったため、開発環境を継続的にアップデートするという考えは一般的ではありませんでした。しかし、は、年 回のアップデートがスケジュールされており、これらのアップデートでは大幅な機能拡張や仕様変更が加えられています。つまり、に、最新向けのアプリケーション開発では、モバイル向けと同様

環境に追従する継続的な開発が必要となるのです。

エンバカデロでは、このような環境の変化と開発需要に対応するため、上記のような継続的なアップ

デートを実施しています。そして、開発者の負担を最小化するため、製品にアップデートサブスクリプション（年間保守）を標準添付しています。
開発者は、アップデートサブスクリプションサービスを継続することで、常に最新環境を利用することができます（同時に多数の旧バージョンへのアクセスも可能です）。

メモリ管理の統合のメモリ管理機構は、すべてのサポートプラットフォーム（モバイル、デスクトップ、サーバー）
で、従来型のオブジェクトメモリ管理の方式に統一されました。

（：

自動参照カウント）と比較して、既存コードとの互換性が高く、コンポーネント、ライブラリ、エンド
ユーザーアプリケーションで、よりシンプルなコーディングが可能になります。

で始めるビジュアルプログラミング

の機能強化
では、

の

パッケージマネージャを大幅に強化しました。パッケージをリリース日で並び変

えたり、インストールパッケージ、アップデートサブスクリプションユーザー向けのコンテンツ、アッ
プデートが提供されているパッケージなどの基準でフィルタリングできるようになりました。
また、

インストーラテクノロジーを使用した統合インストーラを導入しました。これにより、（インターネット接続環境での）オンラインインストールと、（イメージを用いた）オフラインインストールの双方で、単一のインストーラを使用するようになりました。
オンラインとオフラインインストールのいずれでも、プログラミング言語とターゲットプラットフォー
ムの選択を任意に選択可能。言語サポート、ヘルプリソースなど、インストールセットはいつでも追加／削除可能です。

の機能強化
（

）は、

ビジュアルコンポーネントです。

ファーストバージョンから利用されている
は、近年の

向けの

環境の変化に対応し、数多くの機能強化が施されており、現在も進化を続けています。
ここ数年の大きな機能強化は、への対応とサポートの強化です。

向け

の新しい

コントロールが追加されたほか、高解像度モニターでの表示などを改善しています。

以下は、で新たに追加された



におけるの強化ポイントの一例です。

スタイルの変更：

ルアーキテクチャが大幅に拡張され、およびモニターサポート向けに、

フォーム上のすべてのコントロールは、フォームが表示されるモニターの適切な解像度に合わせて自動的にサイズ変更されます。スタイル
ートされ、


新しい

スタイ
もアップデ

スタイルをサポートしました。
スタイル：多数のビルトインおよびプレミアム

スタイルを更新し、新しいスタイル モードをサポートすることで、あらゆるモニター向けの完成度の高いアプリケーションの設計が可能になりました。


コントロールスタイル単位での：複数のスタイルを、単一のアプリケーション内の異なる

フォーム、あるいは同じフォーム上の異なるビジュアルコントロールに適用できるようになりました。これには、プラットフォームデフォルトテーマとの両立も含みます。その結果、スタイル設定

で始めるビジュアルプログラミングにさらなる柔軟性が加わるだけでなく、スタイルをサポートしていないサードパーティコントロー
ルを、スタイル付き

新しい

アプリケーションで使用可能にする効果も得られます。

コンポーネント：

コントロールを用いれば、

アプリケーションで、



ベースの新しいを使用できます。これにより、よりモダンでセキュアなになります。従来のエンジンを利用できるようコンポーネントは、既存のベースのエンジンとブラウザを、必要に応じて動的に切り替えできるようになります。


新しい



新しい

コンポーネント：およびコントロールと

イティブ

プロパティ
プロパティにより、タイトルバーのカスタマイズが可能になりました。これにより、フォームのネ、、などのアプリケーションと同様の、最新の拡張タイトルバーを構築できます。


新しい



新しい

コンポーネント：マルチ解像度をサポートするイメージコンポーネントがマルチ解像度／

スケーリングをサポート。従来のコンポーネン

トと置き換えることで、高品質なイメージスケーリングと表示が可能になります。
のアプデート：
るため、多くのが提供する優れたプラットフォーム統合をさらに向上させ宣言を拡張し、さらに追加も行いました。

の機能強化
は、

によりマルチデバイスアプリケーションを開発する際に利用するクロスプラット

フォームコンポーネントフレームワークです。
では、

、

、

のいずれのエディションでも、によるモバイ

ル開発をサポートしています。単一コードにより、複数プラットフォーム向けのネイティブ開発をサポートしているので、プラットフォームごとに複数の言語やツールを習得する必要がなく、劇的な開発効率化が可能になります。
では、
に関連して以下のような機能強化が施されています。
のサポート：

で廃止予定）ではなく、プラットフォーム（

）で、古い

や

（

に対してアプリケーションを構築できるようになりました。これにより、今後の要件へのスムーズな移行と、画面描画のより良いパフォーマンスが提供されます。

で始めるビジュアルプログラミング



最新ののサポートに加え、組み込みのサポートを通じ、の起動画面のストーリ

ーボード要件にも対応できます。
では、プラットフォームでのスタイル付き装が含まれており、トフォームは
のサポートが改善され、追加の機能強化が行われています（



実
プラッ

からサポート）。

統合機能を利用することにより、（コンポーネント用の新しいアプリケーションを構築することができます

版以上）。
用

コントロールは、を使用して実装されました。



コントロール の

フレームワークを使用する開発者は、サポート済みオペレーティング システムの最新バ実装は、の使用により可能となりました。

ージョンをターゲットとすることができます。

言語の新機能のレコード型に、カスタム初期化／ファイナライズ、コピー演算子のサポートが追加されました。
これにより、レコードの生成、コピー、破棄でカスタムコードを記述できるようになり、クラスと比較しても効率性の高いデータ型として使用できるようになります。

コンパイラ
以降、
発者は

エンジンベースのコンパイラが搭載されています。これにより、をターゲットとした開発が可能となりました（

パイラは、

および

版以上）。

コンパイラに含まれる機能：

ファイルシステムをフルサポート

スレッド処理および並列プログラミングライブラリ

データベースアクセスのサポート（大半の




、

、

コン

との適合性を認証済みで、エンジンベースで構築されます。
新しい

開

互換データベースに対応）

で始めるビジュアルプログラミングによるサービス指向アプリケーションの構築
は、ベースのカスタム

発者は、従来のを実装するための中間サーバー機能を提供します。開でも使い慣れたデータアクセスコンポーネントやロジックコンポーネントを用いて、容易にサーバーサイドアプリケーションを実装できます。

を用いれば、モバイルクライアントとバックエンドシステムを結び付け、業務システムにモバイルクライアントを加えることが可能になります。さらに、新たにエンバカデロの製品ファミリーに加わったの開発ソリューション
アプリケーションをのバックエンドとしてもを利用できるため、既存に拡張する手段としても有効となります。

無料からはじめよう！
は、エンバカデロが提供するビジュアル開発ツールです。その歴史は古く、ボーランドから年に最初のバージョンがリリースされ、その生産性の高さと性能に世界中の開発者が驚嘆しました。
向け開発ツールとして登場した
現在では、

、

することができます。

、、

は、その後、マルチデバイス向け開発ツールへと進化し、、そして向けのネイティブアプリケーションを開発

で始めるビジュアルプログラミングによる開発を体験するには、無料から始めることができます。
すれば、のすべての機能を日トライアル版をダウンロード

日間試用することができます。また、個人またはスタートアップ企

業の方であれば、をダウンロードすることで、版相当の機能を使って開発を始められます（商用開発には制限があります）。

個人またはスタートアップ企業の方は以下のページからをダウンロードしてください。

https://www.embarcadero.com/jp/products/delphi/starter
には、

、

、

、

向けアプリケーションを単一コード

ベースから開発できるマルチデバイス開発機能、ローカルデータベースアクセス機能などが搭載されています。個人開発者または名以下の開発者の企業で利用（企業の年間売上がは個人開発者の場合、作成したアプリケーションの年間売上がドル未満、また

ドル未満の場合に限る）することができます。

企業ユーザーの方はの利用規定に該当しない企業ユーザーの方は、以下のページからトライ

アル版をダウンロードしてください。
https://www.embarcadero.com/jp/products/rad-studioトライアル版は、のすべての機能を日間試用することができます。

で始めるビジュアルプログラミングのビジュアル開発を体験しよう
初めてに触れる方は、「コンポーネント」と呼ばれるパーツをドラッグ＆ドロップで配置し、ユーザーインターフェイスを構築していく、直感的な開発手法に驚くかもしれません。

は、確かに簡単にアプリケーションを開発できるツールですが、簡単なだけでなく、高度なことも行えます。しかし、その開発手法は一貫しており、「プロパティ」で各コンポーネントの外観や動作を変更し、「イベント」でユーザー操作に合わせた動作をプログラミングしていきます。
ここでは、のプログラミング手法の基本を理解するために、パーソナル

ブラウザを作ってみ

ましょう。

を起動する
、あるいは

のアイコンをダブルクリックして統合開発環境（）を起動します。

によるプログラミング作業は、この統合開発環境で行います。ユーザーインターフェイスの設計、
コーディング、ビルド、デバッグ、実デバイスへの配置など、すべての操作をこの環境で実行できます。
新規にアプリケーションを作成するには、［ファイル］を順に選択します。

｜新規作成

｜

アプリケーション

で始めるビジュアルプログラミング

コンポーネント・

パーツの配置右下の「ツールパレット」からをドラッグし、画面中央のフォーム上にドロップします。ツール

パレットの検索バーに「Panel」と入力すると、探しやすくなります。

同様に、をドラッグして、フォーム上の別の位置にドロップします。フォームは、以下のようになります。

頻繁に使うコンポーネントは、簡単な方法で追加することもできます。フォーム上に配置した、（自動的に「Panel1」という名前が振られています）を右クリックすると、クイックメニューが表示されます。

で始めるビジュアルプログラミング

ここから、［コントロールの追加｜ボタン］を選択すると、Panel1 の上にボタンを追加することができます。

ボタン（Button1）を配置したら、再び Panel1 を右クリックして、［コントロールの追加｜編集］を選択して、Panel1 の上に Edit1 を追加します。
ここで左上の「構造」ペインを確認してみましょう。Button1 と Edit1 は、Panel1 の下の階層（子項目）に位置していることが分かります。

のように、別のコンポーネントをその上に置くことのできるコンポーネントを「コンテナ」といいます。コンテナの上に置かれたコンポーネントは、「構造」ペインでは、コンテナの子項目として表示されます。

を移動させると、その上に置かれた、Button1、Edit1 は一緒に移動します。コンテナを用いることで、複数のコンポーネントをグループ化してレイアウトすることができます。

で始めるビジュアルプログラミング

もし、「構造」ペインで、Button1 や Edit1 がの下に位置していない場合には、の子項目にはなっていないということです。これでは、レイアウトをする上で困ったことになるので、修正しておく必要があります。次のように「構造」ペインで操作をしてください。


Edit1 を Panel1 の上にドラッグアンドドロップします

Button1 を Panel1 の上にドラッグアンドドロップします

この操作は、必ず「構造」ペインで行います。フォーム上でコンポーネントを移動させても、親子関係は変わらないことに注意してください。

レイアウトを調整する
コンポーネントは、座標で配置されています。しかし、実際のアプリケーションでは、ウィンドウの大きさを変えても、

パーツは、適切にレイアウトされますよね。このようなレイアウトの調整を行うには、レイアウトを調整するためのプロパティを設定します。
「プロパティ」とは、コンポーネントの動作や外観などをカスタマイズできるさまざまなパラメータです。画面左下の「オブジェクト インスペクタ」には、コンポーネントに用意されたさまざまなプロパテ
ィの一覧が表示されています。

では、コードを記述しなくても、プロパティを設定するだけで簡

単にコンポーネントの外観や振る舞いをカスタマイズできるのです。
では、最初に Panel1 のレイアウトを調整してみましょう。「構造」ペインで、Panel1 をクリックします。すると、「オブジェクト インスペクタ」の「プロパティタブ」内に、Panel1 のプロパティが表示されます。ここから、「Align」を見つけ、右側の値列のドロップダウンリストをクリックし、画面上部（alTop）を選びます。

で始めるビジュアルプログラミング

同様の操作で、Button1、Edit1、WebBrowser1 の「Align」プロパティも設定します。

Button1
項目

値

Align

左側（alLeft）

Edit1
項目

値

Align

画面中央（alClient）

WebBrowser1
項目

値

Align

画面中央（alClient）

以上で、フォームは次のような外観になります。

フォームの大きさを変更しても、Button1、Edit1 は適切な場所に配置されていますね。

ボタンのキャプションを設定する
プロパティは、ボタンのキャプションを設定するためにも使えます。Button1 をクリックして選択状態にしたら、次のように「Caption」プロパティを設定します。

Button1
項目

値

Caption戻る

で始めるビジュアルプログラミング

この操作で、フォームのボタンのキャプションは、「戻る」に変わります。

では、プロパティの変更を設計フォームで直ちに確認できるため、直感的な開発が可能なのです。

さて、この［戻る］ボタンの機能はどのように実装するのでしょうか？ここで登場するのが「イベント」
です。でも急がずに、簡単なところから始めてみましょう。

イベントを使う
通常、ブラウザは、起動するとホームページに設定されたページが表示されます。フォーム上に配置したには、設定されたホームページを表示する機能が用意されています。ホームページ

は、のインターネットオプションで設定されているです。

では、このホームページの表示は、いつ、どのように呼び出すのでしょうか？
「プロパティ」は、コンポーネントの状態を設定したり、参照することができます。例えば、

プロ

パティは、そのコンポーネントの幅を表します。この値を参照すれば現在の幅が分かりますし、値を変更すれば実際に幅が変わります。
一方、コンポーネントの機能を呼び出すためには、「メソッド」が用意されています。

のGoHome メソッドは、「ホームページを表示しなさい」という指令をコンポーネントに送ります。GoHome
メソッドを呼び出すコードを記述することで、ホームページが表示されるというわけです。

で始めるビジュアルプログラミング

では、いつこれを呼び出せばいいのでしょうか？
そのために用意されたものが「イベント」です。コンポーネントには、複数のイベントが用意されています。例えば、ボタンをクリックすると「OnClick」イベントが発生します。マウスが上を通過すると「OnMouseOver」イベントが発生します。このように、コンポーネントに対してなされた「何か」によって、そのイベントが発生するのです。
そして、このイベントに対して「イベントハンドラ」と呼ばれるプログラムコードを記述することができます。これにより、さまざまなカスタムコードを定義できるのです。
今回は、フォームが作られたときに、ホームページを表示させます。つまり、の「OnCreate」イベントです。
これを行うには、Form1 をクリックして「オブジェクト インスペクタ」の「イベント」タブ内の「OnCreate」の右横の空白部分（値列）をダブルクリックします。

値列に FormCreate と入力され、コードエディタが表示されます。これがイベントハンドラです。イベン
トハンドラの必要なコードはが自動的に生成してくれるので、begin と end で囲まれた中身だけを記述すればいいのです。ここでは、次のように WebBrowser1.GoHome; と、一行記述します。

で始めるビジュアルプログラミング

procedure TForm1.FormCreate(Sender: TObject);begin
WebBrowser1.GoHome;
end;

間違ったイベントをダブルクリックして、必要のないイベントハンドラができてしまっても気にしないでください。

は、空白のイベントハンドラを自動的に削除してくれます。手作業で削除すると、自動生成したコードと一致しなくなる恐れがあるので、やめたほうがいいでしょう。

［戻る］ボタンに機能を実装する
では、この要領で［戻る］ボタンにも機能を実装してみましょう。
「戻る」という機能は、の GoBack メソッドを使うだけです。このように、コンポーネン

トには、あらかじめいろいろな機能が用意されているので、コード量は各段に少なくなりますよね。これもの利点のひとつなのです。

先ほど、コードエディタを使ったので、設計フォームは隠れてしまいました。再び設計フォームを表示
するには、画面右下の「デザイン」タブをクリックします。

Button1（［戻る］ボタン）を選択したら、オブジェクトインスペクタの「イベント」タブ内にある「OnClick」の値列をダブルクリックします（もう、ボタンをクリックしたときの処理を実装するために、
OnClick イベントを選択したことはお分かりですね）。

で始めるビジュアルプログラミング

Button1Click のイベントハンドラには、以下のようにコードを記述します。

procedure TForm1.Button1Click(Sender: TObject);begin
WebBrowser1.GoBack;end;

ところで、［戻る］ボタンを押したときに、戻るページがない（履歴がない）場合にはどうなるでしょうか？この場合はエラーが発生してしまいますが、一般的には、そのようなことのないように履歴がないときには、［戻る］ボタンが押せないように無効になっていますよね。
もちろんでもそのように設定することができますが、今回は割愛してアプリケーションの完成を急ぎましょう。興味のある方は、あとで実装してみてください。

で始めるビジュアルプログラミングを入力してページを表示する
多くのブラウザがそうであるように、フォーム上部に配置した Edit1 にを入力して［］キーを押すと、そのページが表示されるようにしようと思います。
Edit1 でキーが押されたときに発生するイベントは、OnKeyDown です。このイベントハンドラには、押されたキーの情報が渡されます。

キーかどうかは、あらかじめ定義された値「vkReturn」を使って調べます。では、この値はどこで定義されているのでしょうか？
ちょっと視野を広げて、のソースコード全体を眺めてみましょう。今回作成したアプリケーショ

ンのコードは、Unit1 という名前が付いています。これは、のコードは、主にのコードです。

つの部分に分かれています。

unit Unit1;
interface
implementation
end.

unit は、このユニットを表す名称を定義します。この名前はファイル名と一致している必要があります。
今回のケースでは、Unit1.pas というのがファイル名になるわけです。
interface は、他のユニットから何にアクセスできるのかを宣言します。そして、implementation には、実際のコードや他のユニットからはアクセスできない宣言を記述します。
のプログラムは、このようなユニットをいくつも使ってできています。単純なフォームでも、いくつものユニットを使っているのです。使っているユニットは、uses で宣言します。Unit1 でも、次のように多くのユニットが使われていますね。

uses
Winapi.Windows, Winapi.Messages, System.SysUtils, System.Variants,
System.Classes, Vcl.Graphics, Vcl.Controls, Vcl.Forms,
Vcl.Dialogs, Vcl.StdCtrls, Vcl.OleCtrls, SHDocVw,
Vcl.ExtCtrls;

で始めるビジュアルプログラミング

さて、vkReturn が定義されているのは、System.UITypes です。この値を使えるようにするには、usesに System.UITypes を追加します。

設計フォームを表示して Edit1 を選択し、「OnKeyDown」イベントを設定します。Edit1KeyDown のイベ
ントハンドラを次のように記述します。

procedure TForm1.Edit1KeyDown(Sender: TObject; var Key: Word;
Shift: TShiftState);begin
if Key = vkReturn then
WebBrowser1.Navigate(Trim(Edit1.Text));
end;
ここまでで

ブラウザの基本的な動作を実装することができました。簡単でしたね。

では、最後にもう少しだけ機能を追加して、より本物に近づけてみましょう。

表示されたページのとタイトルを表示するを入力する Edit1 は、現在のを表示するボックスとしても機能しなければなりません。そのため、ページが表示されたら、そのを Edit1 に設定し直すという動作が必要です。これを実装するのにちょうどよいイベントが、に用意されています。OnDocumentComplete です。

で始めるビジュアルプログラミング

WebBrowser1 を選択して、「OnDocumentComplete」イベントのイベントハンドラを作成します。

作成されたイベントハンドラ WebBrowser1DocumentComplete に、以下のコードを記述します。

procedure TForm1.WebBrowser1DocumentComplete(ASender: TObject;
const pDisp: IDispatch; const URL: OleVariant);
begin
Edit1.Text := WebBrowser1.LocationURL;
end;

もうひとつ実装すべきなのは、タイトルの表示です。
多くのページにはタイトルが定義されていますが、ブラウザでは、ウィンドウのタイトルに、ページのタイトルを表示するようにしています。

これを行うには、の OnTitleChange イベントを使います。WebBrowser1 を選択して「OnTitleChange」イベントのイベントハンドラを作成、次のようにコードを記述します。

procedure TForm1.WebBrowser1TitleChange(ASender: TObject;
const Text: WideString);
begin
Self.Caption := Text;
end;で始めるビジュアルプログラミング

さて、ここで新しい要素 Self が出てきました。Self は自分自身を表す変数です。ここでいう自分自身とは、TForm1 です。
今編集している Unit1 には、TForm1 というクラスが宣言されています。TForm1 は、現在作成しているフォームです。

は、オブジェクト指向によってビジュアル開発を実現しており、フォームを作成するという簡単なビジュアル操作をしていても、実はオブジェクト指向プログラミングができてしまっているのです。
TForm1 は、TForm というからっぽのフォームを継承し、ブラウザの機能を実装してきました。ウィンドウの基本的な機能を作らなくてよかったのは、TForm の機能を利用してきたからです。
オブジェクト指向プログラミングについては、ここで詳細に説明することはしませんが、を深く知るには役立つ知識です。
コードの説明に戻りましょう。Self.Caption という記述は、自分自身の Caption プロパティという意
味になります。TForm の Caption プロパティは、ウィンドウのタイトルを表しますので、ここに渡された Text（新しいタイトル）を設定すれば、ページのタイトルを表示できるのです。

新しいウィンドウでページを表示するには、標準的なブラウザ機能の多くがあらかじめ用意されているので、ブラウザ上でマウスを右クリックして［新しいウィンドウで開く］といったメニューを選択することもできます。この動作はまだ定義していません。このままでは、別のブラウザを表示してしまうので、新たにもうひとつフォームを表示するように記述してみましょう。
「TForm1 はクラスである」と説明しました。クラスのインスタンスが、実際に表示されているフォームです。アプリケーションが起動すると、最初に TForm1 のインスタンスがひとつ作成され、表示されます。
この部分のコードは記述していませんが、
program Project1;
uses
Vcl.Forms,
Unit1 in 'Unit1.pas' {Form1};{$R *.res}が自動的に作成してくれているのです。

で始めるビジュアルプログラミング

begin
Application.Initialize;
Application.MainFormOnTaskbar := True;
Application.CreateForm(TForm1, Form1);
Application.Run;
end.

このコードは通常意識する必要はありません（画面右側の「プロジェクト マネージャ」で「Project1.exe」を選択して右クリックし［ソースの表示］を選択すると表示されます）。

「新しいウィンドウを開く」という動作を実装するには、フォームをもうひとつ、つまり TForm1 をもうひとつ作成する必要があります。これには TForm1.Create を呼び出します。［新しいウィンドウで開く］
メニューが選択されると、の「OnNewWindow3」イベントが発生します。これに対応する

コードを記述するために、WebBrowser1 の OnNewWindows3 イベントにイベントハンドラを記述します。
記述するコードは、新しいフォームを作成し、これを表示します。このためには、作成したフォームを変数に代入する必要があります。イベントハンドラのローカル変数として TFrom1 を格納する newForm を宣言する場合には、begin の上に次のように記述します。
procedure TForm1.WebBrowser1NewWindow3(ASender: TObject;var ppDisp: IDispatch;
var Cancel: WordBool; dwFlags: Cardinal;
const bstrUrlContext, bstrUrl: WideString);
var
newForm: TForm1;
begin

イベントハンドラのコード全体は、以下のようになります。
procedure TForm1.WebBrowser1NewWindow3(ASender: TObject;var ppDisp: IDispatch;
var Cancel: WordBool; dwFlags: Cardinal;
const bstrUrlContext, bstrUrl: WideString);
var
newForm: TForm1;
begin
newForm := TForm1.Create(Self);

で始めるビジュアルプログラミング

newForm.Show;
newForm.WebBrowser1.Navigate(bstrUrl);
Cancel := True;end;

ここまでの作業が完了したら、［ファイル｜すべて保存］でユニット、プロジェクトファイルを保存しておきましょう。これまでファイル名として
が、

、

、

などのデフォルトの名前を使ってきましたなどの名称を付けておくといいでしょう。

パーソナル

ブラウザの完成

以上で、おおよそ

ブラウザらしい動作が実装できました。

キーを押すか、［実行

｜実行

］メ

ニューを選択して、プログラムを実行します。

しかし、まだまだ検討の余地は残っているようです。例えば、
ど。また、多くのエラーが発生したときの処理な

ブラウザでは、メインフォームという概念はなく、いくつもウィンドウを開いて、どの順番に閉じても構わないという動作をします。しかし、今回の実装では、最初のウィンドウをメイ
ンウィンドウとしており、複数のウィンドウを開いているときに、メインを閉じると、すべてのウィン
ドウが閉じられ、アプリケーションが終了してしまいます。
あらゆる操作を想定してプログラムを記述することは、困難なことかもしれません。しかし、にはさまざまなエラーハンドリングのしくみが用意されているので、比較的容易にエラーに対応するコードを実装することができます。

で始めるビジュアルプログラミング

デバッガを使ってみようの統合開発環境には、ソースコードレベルでアプリケーションをステップ実行したり、変数の内容を監視できるビジュアルデバッガが搭載されています。デバッガを使えば、プログラムが意図したとおりに実行されているか、変数に正しく値が設定されているかを確認し、容易にバグを取り除くことが
できます。
作成した
実行

ブラウザアプリケーションをデバッグ実行してみましょう。メインメニューで［実行｜］を選択します。

ソースコード中のイベントハンドラ TForm1.Edit1KeyDown の最初の行の左余白をクリックして、ブレー
クポイントを設定します。アプリケーションで、Edit1 に何か入力すると、ブレークポイントを設定した行で実行が停止します。

監視式に、引数として渡された Key などの変数を追加すると、現在どのような値がイベントハンドラに渡されているかを確認することができます。

で始めるビジュアルプログラミング

モバイルアプリ開発に挑戦しよう
最新の
作成には、

のもうひとつの魅力は、マルチデバイスサポートです。
と呼ばれるコンポーネントライブラリを使いました。

化し、ビジュアル操作で
一方、

は、

をカプセル

の機能を使いこなせるようにしたものです。

はマルチデバイス対応のフレームワークで、つのプラットフォーム向けの開発が可能です。
イブラリレベルでは、

ブラウザアプリケーションの

、

、

、

同様、ネイティブコードにコンパイルされますが、ラの差を極力意識しないで開発ができるようになっています。そのため、単一のコードから複数プラットフォーム向けの開発ができるのです。

マルチデバイスアプリケーションを作成する
［ファイル

｜新規作成

の

｜マルチデバイス アプリケーション表示されたテンプレートから「空のアプリケーション」を選びます。

］メニューを選択します。

で始めるビジュアルプログラミング

マルチデバイス向けのフォームが表示されるので、画面中央上部にあるビルドターゲットから「ビット」を選択します。

コンポーネントのルック＆フィールは、スタイルによって設定されます。どのスタイルが適用されるかは、によって異なります。スタイルは自由にカスタマイズできますが、通常は標準のスタイルが適用されます。
設計フォーム左上のドロップダウンリストを用いると、設計時のスタイルを変更できます。ここでは、を選択しておきましょう。

で始めるビジュアルプログラミング

ユーザーインターフェイスを設計する
まず初めに、を配置します。

はアプリケーションの機能を呼び出すショートカットを

整理、配置するためのコンポーネントです。

配置した（ToolBar1）には、自動的に画面の上部に配置されます。

を配置します。

ブラウザアプリケーションを作成したときと同様、「構造」ペインの親子関係に注意します。Button1 が ToolBar1 の子項目として表示されていることを確認してください。

次に、Button1 の Align プロパティを使って、ボタンをツールバーの中央に配置します。Align プロパ
ティの考え方はコンポーネントと同じですが、マルチデバイスに対応するため、設定できるプロパ

ティの値に違いがあることに注意してください。

で始めるビジュアルプログラミング

ここでは、次のようにプロパティを設定します。
Button1
項目

値

Align

CenterStyleLookup プロパティを使うと、スマートフォンなどでよく見かけるアイコンボタンに変更できます。
によって異なる外観は、スタイルによって自動的に設定されます。次のように、cameratoolbuttonを指定すると、カメラ風のアイコンになります。
Button1
項目

値

StyleLookup

cameratoolbutton

で始めるビジュアルプログラミング

撮影した写真を表示するためにを配置します。ツールバーの下の画面全体に写真が表示されるよ

うに、Align プロパティも設定します。
Image1
項目

値

Align

Client

ご覧のように（Image1）は、からっぽです。これは初期画像を割り当てていないからで、このままではアプリを起動しても何も表示されず味気ないでしょう。そこで、初期画像を割り当てておくことにします。
何らかの画像を用意したら、次の手順で Image1 に画像を割り当てます。
「構造」ペインで、Image1 下の MultiResBitmap をダブルクリックします。表示された項目「0 Empty」を選択し、「オブジェクト インスペクタ」の「プロパティ」タブで、Bitmap プロパティの値列をダブルクリックしてビットマップエディタを開きます。

で始めるビジュアルプログラミング

ビットマップエディタが表示されたら、「読み込み」をクリックして任意の画像を選択し、初期画像に設定します。ビットマップエディタに画像が表示されたら、［］をクリックします。

を使おう
カメラアイコンのボタンを押したときの処理は、カメラを起動するだけの単純なものです。

には、「デバイスのカメラから写真を取得する」というような一般的な処理が、「アクション」として定義されています。アクシ
ョンを使うには、コンポーネントを使います。

は、ユーザーインターフェイスを持たない非表示のコンポーネントです。設計画面では、選択しやすいようにアイコンが表示されますが、実行時には見えなくなります。

で始めるビジュアルプログラミング

では、作成中のカメラアプリにも、を追加してみましょう。ツールパレットから、をドラッグ＆ドロップします。フォーム上に表示されたアイコンを右クリックして、［アクションリストの設定］メニューを選択します。すると、アクションリストの編集画面が開きます。
アクションリストの編集画面で、メニューバー左端の▼をクリックし、［標準アクションの新規作成］
メニューを選択します。

「標準アクションクラス」ウィンドウが表示されるので、「メディアライブラリ」の中から「 TTakePhotoFromCameraAction 」 を 選 択 し て ［］ を ク リ ッ ク し ま す 。 す る と 、 TakePhoto-

FromCameraAction1 という名前のアクションが、アクションリストの編集画面に追加されます。

ここに追加されたアクションには、他のコンポーネントと同様にプロパティやイベントがあります。
「構造」ペインで、TakePhotoFromCameraAction1 を選択した状態で「オブジェクト インスペクタ」を見ると、いくかのプロパティやイベントがリストされていることが分かります。
は、カメラで写真を撮影し、アプリに写真を渡します。
OnDidFinishTaking イベントは、撮影が終わり、写真がアプリに渡されるタイミングで発生します。このイベントハンドラを記述すれば、配置したとができます。

（Image1）に、写真を表示するコードを記述するこで始めるビジュアルプログラミング

TakePhotoFromCameraAction1 の OnDidFinishTaking イベントの値列をダブルクリックし、次のようにコードを記述します。
procedure TForm1.TakePhotoFromCameraAction1DidFinishTaking(Image: TBitmap);
begin
Image1.Bitmap.Assign(Image);end;

最後に、Button1 の Action に TakePhotoFromCameraAction1 を割り当てます。
ーションの作成では、OnClick イベントでコードを記述しました。

ブラウザアプリケを使うと、のAction プロパティを設定するだけで、ボタンとアクションを結びつけることができるのです。
Button1 を 選 択 し 、 Action プ ロ パ テ ィ の 値 列 で ド ロ ッ プ ダ ウ ン リ ス ト を 表 示 し 、TakePhotoFromCameraAction1 を選択します。

向けの追加実装や設定を行う
アプリケーションが、デバイスのカメラ、センサー、写真、メール、アドレス帳などに対してアクセスすることは、セキュリティやプライバシーの問題があり、ユーザーの承認が必要です。

では、このアプリケーションで使用するカメラや内部ストレージへのアクセスに対して、承認を行うための実装と使用する権限に対して設定を行なう必要があります。

実行時パーミッションリクエストを実装する
アプリケーションの実行時にユーザーの承認を求める処理（実行時パーミッションリクエスト）の実装
では、uses 節に、実行時パーミッションリクエストを行うために必要な System.Permissions と、ダイ
アログメッセージを表示するために必要な FMX.DialogService を追加します。

で始めるビジュアルプログラミング

uses
System.SysUtils, System.Types, System.UITypes, System.Classes, System.Variants,
System.Permissions, FMX.DialogService,
FMX.Types, FMX.Controls, FMX.Forms, FMX.Graphics, FMX.Dialogs, FMX.StdCtrls,
FMX.Controls.Presentation, System.Actions, FMX.ActnList, FMX.Objects,
FMX.StdActns, FMX.MediaLibrary.Actions, FMX.Platform;

実行時パーミッションリクエストは、実際に使用するタイミングで行うのが望ましく、このアプリケー
ションでは、起動時のイベントで、カメラ・ストレージに対し承認を行います。
設計フォームで Form1 を選択し、OnShow イベントに次のように実装します。

procedure TForm1.FormShow(Sender: TObject);
begin{$IFDEF ANDROID}
PermissionsService.RequestPermissions(['android.permission.CAMERA','android.permission.WRITE_EXTERNAL_STORAGE'],
procedure(const APermissions: TArray<string>;
const AGrantResults: TArray<TPermissionStatus>)
begin
if (Length(AGrantResults) <> 2)or (AGrantResults[0] <> TPermissionStatus.Granted)or (AGrantResults[1] <> TPermissionStatus.Granted)
thenTDialogService.ShowMessage('カメラ・ストレージへアクセスするための承認が必要です')
end);{$ENDIF}
end;
この実装は

向けですので、{$IFDEF ANDROID}～{$ENDIF}で囲みます。

での開発は基本

的にすべてのプラットフォーム向けに共通の単一コードベースとなりますが、特定プラットフォームに依存する実装には、$IFDEF を用いた条件コンパイルを活用します。

で始めるビジュアルプログラミング

資格リストを設定する
カメラで撮影した画像をメディアライブラリに保存する処理では、Secure File Sharing を使用します。
これはプロジェクトオプションの「資格リスト」で設定します。これを行うには、［プロジェクト
オプション

｜

］を選択し、［アプリケーション｜資格リスト］で［ターゲット］に［すべての構成
ビットプラットフォーム］を選択し、Secure File Sharing 項目を True に設定します。

作成したアプリをスマホで動かそう
以上でアプリは完成です。

では、作成したアプリをスマートフォンやタブレットなどの実機に直接転送して実行することができます。
の場合、を起動しているにケーブルでデバイスを接続することで、転送可能になります。デバイス側は、あらかじめ「開発者モード」を有効にしておく必要があります。
デバイスを使用するための詳しい設定方法については、ビデオ「設定を行う」（https://youtu.be/RHPPD594ljw）をご覧ください。

向けアプリ開発の環境

で始めるビジュアルプログラミング

の場合、

や

などの

デバイスのほかに、を使用するための詳しい設定方法については、ビデオ「マシンが必要になります。
デバイス、

デバイス

向けアプリ開発の環境設定を行う」（https://youtu.be/r9vgMLSzloU）をご覧ください。
デバイスの準備ができたら、ターゲットプラットフォームを確認して、［実行｜デバッガを使わずに実行］メニューを選択します。プログラムがコンパイル／ビルドされ、アプリが実機に転送されます。
画面右の「プロジェクト マネージャ」には、「ビルド構成」という項目があります。デフォルトのビル
ド構成は「Debug」になっています。作成したアプリには、デバッグに必要な情報が含まれており、サイズがかなり大きくなります。アプリを実行するだけなら、サイズの小さい「Release」を選択しておくといいでしょう。

で始めるビジュアルプログラミング

デバイスに転送されたアプリを実行すると、次のように写真を撮影することができます。

このアプリは、ターゲットプラットフォームをに切り替えることで、やでも実行できるようになります。もちろん、各プラットフォーム向けにそれぞれネイティブコードが生成されます。
画面サイズや画面の向きが異なったり、ごとにユーザーインターフェイスの設定が異なる場合でも、と呼ばれるカスタマイズ機能を用いることで、最小の労力でデバイスごとの最適化ができます。

で始めるビジュアルプログラミング

データベースを利用してみようの名前は、古代ギリシアのデルファイ神殿に由来します。
からも分かるように、は元々も古代ギリシアに由来すること

データベースにアクセスするアプリケーションの開発を想定して開発されたと言われています。このような所以から、データベースアクセスは、が最も得意とする分野のひとつです。
最新バージョンでは、と呼ばれるマルチデバイス対応の共通データベースアクセスフレームワー

クが用意されており、多様なデータベース（
、

、

、

、

、

、

、

など）に高速かつ直接、ネイティブアクセスできます。

今回は、ご覧のような「魚図鑑」データベース（古くから
を使って、

、

のサンプルとしておなじみのものです）

によるデータアクセスの方法を紹介します。他のデータベースを使う場合も、基本的な手順は変わりません。
などの古いデータベースアクセスの方法をご存じの方は、おなじみのデータベースを利用するアプ
リケーションの作成を通して、最新の手順を理解できると思います。

でどのようにデータアクセスを行うのか、その基本的なで始めるビジュアルプログラミング

データベース接続を定義する［ファイル｜新規作成｜

アプリケーション –］を選択し、新規アプリケーションを作成します。
ツールパレットから、カテゴリにある、コンポーネントをフォーム上にドラッ

グ ドロップします。

配置した（FDConnection1）をダブルクリックすると、れるので、「ドライバ」項目で、接続するデータベースを選択します。今回は、「IB」（

を選びます。

接続エディタが表示さ）で始めるビジュアルプログラミング

ドライバを選択すると、選択したドライバに応じて必要な設定パラメータが表示されます。

の場合、この中で設定が必要となるのは、Database、User_Name、Password、CharacterSet です。

Database には、データベースファイルの場所を指定します。

をインストールする際にサンプルフ

ァイルもインストールしていると、デフォルトで以下の場所に、今回使用するファイルが保管されています。
C:\Users\Public\Documents\Embarcadero\Studio\21.0\Samples\Data\dbdemos.gdb
各項目は以下のように設定します。

項目

値

Database

C:\Users\Public\Documents\Embarcadero\Studio\21.0\
Samples\Data\dbdemos.gdb

User_Name

sysdbaPassword

masterkey

CharacterSet

UTF8のデータベース

で始めるビジュアルプログラミング

設定が完了したら、［テスト］ボタンをクリックして接続テストを行います。接続に成功すれば、設定は完了です。［］をクリックして、接続エディタを閉じます。

このほかに、FDConnection1 に対して、いくつかのプロパティを設定します。

FDConnection1
項目値

Connected

True

LoginPrompt

False

これで、ユーザー名／パスワードを入力するログインプロンプトを表示することなく、アプリケーショ
ン起動と同時にデータベースに接続します。

を使ってテーブルのデータセットを呼び出す
データベースのテーブルを扱うのは、があります。
トを取得する点が異なります。

コンポーネントです。同じようなコンポーネントには、テーブルではなく、クエリー（

文）によってデータセッ

で始めるビジュアルプログラミング

ツールパレットから、コンポーネントを選択し、フォーム上にドラッグ ドロップします。

オブジェクト インスペクタで、配置した（FDTable1）に対して、次のようにプロパティを設定します。

FDTable1
項目値

TableNameBIOLIFE

ActiveTrue

を 配 置 し た と き に 、 こ の コ ン ポ ー ネ ン ト の Connection プ ロ パ テ ィ は 、 自 動 的 に
FDConnection1 に設定されているはずです。これにより、TableName プロパティを設定しようとすると、テーブルの一覧を取得し、下図のようにドロップダウンリストでテーブルの一覧を表示します。

で始めるビジュアルプログラミング

ユーザーインターフェイスを設計する
データセットの準備ができたら、次にユーザーインターフェイスを作成していきます。データセットを表形式で表示、編集できる便利なグリッドコンポーネントを使いましょう。
ツールパレットから配置したを選択し、フォーム上にドラッグ ドロップします。

（DBGrid1）に対して、以下のように Align プロパティを設定します。

DBGrid1
項目

値

Align

alRight

Align プロパティを alRight に設定することで、フォーム左側の残りの部分に詳細データを表示するための領域を確保できました。ただ、ウィンドウの大きさによって、データの表示可能領域は変わってきてしまいます。そこで、左右の表示領域の大きさをユーザーが自由に変更できるようにしようと思います。
これを実現するのが、コンポーネントです。

ウス操作で自由に変更できます。

を使えば、左右の表示領域の分割位置をマ

は、フォームの一方の端に接しているコントロールと、それ以外のクライアント領域を占めているコントロールとの間に配置されます。ユーザーがスプリッタを移動すると、フォームの端に接しているコントロールのサイズが変化します。これによって、このフォームのクライアント領域が変化し、それに応じてクライアント領域の残りの部分を占めるコントロールのサイズが変化します。

で始めるビジュアルプログラミング

ツールパレットから配置されたを選択し、フォーム上にドラッグ ドロップします。

（Splitter1）の Align プロパティを次のように設定します。

Splitter1
項目

値

Align

alRight

これで、Splitter1 は、右側のコントロール（DBGrid1）にくっつきました。
Splitter1 の左側にはを配置します。最終的には、この上にいくつものて、詳細データを表示するようにします。ツールパレットからドロップします。

コントロールを配置しを選択し、フォーム上にドラッグで始めるビジュアルプログラミング

配置した（Panel1）のプロパティを次のように設定します。

Panel1
項目

値

Align

alClient

ShowCaption

False

以上で分割線（スプリッタ）を持つユーザーインターフェイスが作成できました。後は詳細データを表示するコントロールの配置です。これには、データベースのフィールドデータに関する便利な機能を使ってみましょう。

データフィールド設定
がデータベースのテーブルを表すのに対し、テーブルの各フィールド（列）は、びその派生クラス）によって表されます。

（およは、２種類の方法で作成できます。



静的フィールド：設計時に「フィールドエディタ」を使って定義する



動的フィールド：実行時に自動生成（

およびその他のデータセットの Fields プロパティ

や FieldByName メソッドを使ってアクセス）
設計時に「フィールドエディタ」を使って定義すると、各フィールドのプロパティやイベントを定義することができます。例えば、Alignment プロパティを使ってデータの整列方法を変更したり、OnChange
イベントを使って、フィールドデータが変更された時の処理を記述することができます。
「フィールドエディタ」では、フィールドを定義するだけでなく、定義したフィールドデータを表示するコントロールをドラッグ＆ドロップで簡単にフォーム上に配置することができます。今回は、この方法で、詳細データを表示するコントロールを配置することにします。

で始めるビジュアルプログラミング

フォーム上の FDTable1 を選択し、右クリックして［フィールドエディタ］メニューを選択します。

「フィールドエディタ」が表示されるので、右クリックしてメニューを表示し、［すべてのフィールドを追加］を選択します。

すると、次のように BIOLIFE テーブルのすべてのフィールドが追加されます。

「フィールドエディタ」または「構造」ペインで、フィールドを選択すると、そのフィールドのプロパ
ティやイベントが、「オブジェクト インスペクタ」に表示されます。これらの値を設定することで、設計時にフィールドに関する設定やカスタマイズが可能になります。

で始めるビジュアルプログラミング

さて、ここからがマジックのようですが、「フィールドエディタ」にリストされているフィールドをすべて選択し、設計フォーム右側に位置する Panel1 の上にドラッグ ドロップしてください。

たったこれだけの操作で、各フィールドに対応するラベル（
（

）、画像（

るための

）と入力ボックス（）、メモ）が追加されます。これらのコントロールとデータセットをリンクす

も、DataSource1 として追加されます。

とはドラッグ＆ドロップで配置したコントロールには、データベースの実データが表示されています。このように、設計時に実データを表示できるのもの特長のひとつです。いちいちアプリケーションを実行しなくても、データを表示するのに最適なレイアウトを選べますから便利ですね。
さて、先に配置した DBGrid1 には、まだデータが表示されていません。その理由は、DataSource プロパ
ティが 設定 され ていな いから です 。 DataSource プロパ ティ には、 データ セッ トと の仲介 を 行 う
を指定します。今回は、テーブルを表す FDTable1 に DataSource1 が結びつけられています（DataSource1 は、先ほどのドラッグ＆ドロップ操作で自動生成されました）。

で始めるビジュアルプログラミング

DBGrid1 の DataSource プロパティにも、同じ値を設定します。

DBGrid1
項目値

DataSource

DataSource1

レコードの移動と操作
グリッドとは異なり、詳細データでは、現在のレコードの情報のみが表示されます。レコードを移動させたり、データの更新などを行うには、データセットに対して、レコードの移動や更新を行うメソッドを呼び出す必要があります。
こうした処理をボタンに割り当て、イベントハンドラやアクションをいちいち定義するのは面倒です。
そこで、データセットの主要な操作をまとめたボタンセットのコンポーネントを用いれば、データセットにリンクされた操作を実装できます。

を使います。

を指定するだけで、上記のようなで始めるビジュアルプログラミング

ツールパレットからを選び、フォーム上の DBImage1 画像の下あたりに配置します。

次のようにプロパティを設定すれば、ボタンが動作します。

DBNavigator1
項目

値

DataSource

DataSource1

データにコードからアクセスするにはでは、ビジュアルコンポーネントとデータアクセスコンポーネントを結び付け、ユーザーインターフェイスとデータをリンクし表示させることができます。コードを記述する必要がまったくないことに驚かれたかもしれません。
しかし、実際のプログラムでは、データを操作したり、複雑な処理を実装する必要があるでしょう。
のコンセプトは、簡単でありながらも高度なことも実現できるようにすること。実は、ここで使用してきたデータアクセスコンポーネントについても、コードによって直接操作できるのです。この手法を用いれば、プログラム内で直接レコードのデータを取得したり、操作することもできます。
ここでは、データアクセスコンポーネントをプログラムコードによってアクセスし、表示中の画像を、ファイルとして保存できるようにしてみましょう。

で始めるビジュアルプログラミング

ファイル保存用のダイアログを用意する
まずは保存ダイアログコンポーネントを配置します。ツールパレットの「」からを選び、フォーム上の DBImage1 画像の下あたりに配置します。

配置した（SaveDialog1）のプロパティを次のように設定します。

SaveDialog1
項目値

DefaultExt
Filterbmp
ビットマップファイル|*.bmp

Options[ofOverwritePrompt,ofHideReadOnly,ofEnableSizing]ofOverwritePrompt：既存のファイルを上書きするかどうかを尋ねます
ofHideReadOnly：ダイアログから［読み出し専用ファイルとして開く］
チェック ボックスを削除します
ofEnableSizing：ダイアログのサイズを更できるようにします

画像を保存するコードの実装
画像のダブルクリックに応答して画像ファイルを保存するイベントハンドラを実装します。DBImage1 を選択し、オブジェクトインスペクタで「」イベントを設定します。

で始めるビジュアルプログラミング

イベントハンドラのコード全体は次のように記述します。

procedure TForm1.DBImage1DblClick(Sender: TObject);var
FileName : String;begin// レコードから項目を取得し、SaveDialog にファイル名として設定する
FileName := FDTable1.FieldByName('COMMON_NAME').AsString;
SaveDialog1.FileName :=FileName;// ダイアログを表示して、画像の保存先を指定する
if SaveDialog1.Execute = true thenbegin// 画像ファイルを保存する。
DBImage1.Picture.SaveToFile(SaveDialog1.FileName);
end;
end;

このコードでは、レコードから画像ファイルと画像ファイル名を取得し保存しています。
'COMMON_NAME'フィールドから値を取得して保存先のファイルとし DBImage1 のプロパティのメソッドを呼び出せば、SaveDialog1 で指定した保存先に画像が保存されます。
この結果、レコードから取得したデータをローカル保存先に画像として保存することができました。

スタイルの画面にしてみよう
以上で「魚図鑑」アプリケーションは完成ですが、最後にウィンドウの表示スタイルをカスタマイズしてみましょう。

には、スタイルと呼ばれるスタイル変更のしくみが用意されており、あらかじめ用意されたスタイルを切り替えるだけで、表示をモダンなイメージにしたり、ダークで落ち着いた感じにしたりと、カスタマイズできます。
今回は、スタイルを適用してみましょう。メインメニューから［プロジェクト｜オプション］

を選択し、「プロジェクト オプション」ダイアログを表示します。

で始めるビジュアルプログラミング

ここで、左側のツリーから「アプリケーション」下の「表示」を選択します。そして「カスタムスタイ
ル」項目で「［」を選択し、その下の「デフォルトスタイル」で「」を選択します。

］ボタンをクリックして、ダイアログを閉じます。［実行｜実行］メニューを選択してアプリケー

ションを実行すると、次のようにスタイルでが表示されます。

レコードの移動、データの更新などができることを確認してみましょう。

、ロゴならびにすべてのエンバカデロ・テクノロジーズ製品またはサービス名は、の商標または登録商標です。その他の商標はその所有者に帰属します。