1.概要
Unifinityアプリケーションは、ラベルコントロールなどを活用して画像を表示し、また表示した画像をデータベースに保存することができます。
この記事では、インターネット経由で取得した画像ファイルや、リソース登録した画像を直接表示したり、それらをデーターベースに保存し、保存した画像をデータベースから読み込んで再び画面に表示したりする方法を解説します。
以下のようなケースに対応できますので、ぜひご覧ください。
- インターネットからダウンロードした画像ファイルを表示したい
- リソースに定義した画像ファイルを表示したい
- 画像をデータベースに保存したい
- データベースに保存した画像を表示したい
解説で使用しているサンプルプロジェクトは、以下よりダウンロードすることができます。ぜひご活用ください。
2.動作イメージ
3.実装方法（重点事項のみ解説）
3-1.画面の作成
以下の要領で新規に画面を作成し、ボタンやラベルのコントロール、データテーブルの内容を表示するための表コントロールを配置します。
①ボタン
②ラベル
③表
3-2.テーブルの作成
画像を保存するためのテーブルの作成および設定を行います。画像の名称と画像データを保存できるように項目を追加します。画像データの型式はバイナリー型を選択してください。
3-3.ダウンロードロジックの作成
ダウンロードに使用するロジックを作成し、ダウンロードボタンにロジックを登録します。
ダウンロードに使用するロジックは以下となります
#1 ネットワークからファイルをダウンロードするロジックです。
画像ファイルのURIに対してHTTP通信を行い、ファイルをダウンロードします。
ダウンロードされたファイルは、「logo.png」としてアプリ領域に保存されます。
#2 画像ファイルを読み込みます。上記#1で取得した「logo.png」をファイルとして読み込みます。
作成したロジックは、「ダウンロード」ボタンに登録します。
3-4.リソース呼出しロジックの作成
リソース画像を呼び出すためのロジックを作成し、ボタンに設定します。あらかじめリソースに画像を登録しておく必要があります。
リソース画像は、「プロパティー」＞「リソース」から「キーワード」を設定して登録します。キーワードは、リソースを呼び出す場合に使用します。
リソース読込に使用するロジックは以下となります。
#1 リソースから画像を呼出します。「リソースKEY」パラメーターに、先ほど設定したキーワードを指定します。
作成したロジックは、「リソース」ボタンに登録します。
3-5.データベース保存ロジックの作成
画像データを取得した後にデータベースに保存するロジックを作成します。保存する際のロジックは以下となります。
#1 上記3-3で作成されたダウンロードロジックで生成されたlogo.pngを取得します。
#2 #1で取得したlogo.pngを3-2で作成したデータテーブルに書き込みます。
#3 ３－４で登録したリソース画像を、キーワードを指定して取得します。
#4 #3で取得したリソース画像を２で作成したデータテーブルに書き込みます。
保存されたデータは、テーブルに書き込まれます。DB設計機能の「格納データ」から以下のようにデータを確認できます。「Reload」ボタンを押すと、テーブルのデータが最新の状態に更新されます。
作成したロジックは、「データベース保存」ボタンに登録します。
3-6.画像データ取り出しロジックの作成
テーブルに保存された画像の名称を指定して、画像データを取り出します。
ここでは、ポップアップで表示されたリストから、画像の名称を指定できるように設定します。必要なロジックは以下のとおりです。
#1は、 テーブルに格納されている画像の名称を選択するポップアップを表示するロジックです。パラメーターは以下のように設定します。
「フィールド キー」は、画像を保存するフィールド、「フィールド 値」はポップアップの選択肢として表示するフィールドを指定します。
作成したロジックは、「データベース選択」ボタンに登録します。
画像をダウンロードしてデータベースに保存する設定は、以上で完了です。
メニューアイコンの「実行」ボタンからアプリを実行して正しく動作するか確認してみましょう。
「ダウンロード」と「リソース」ボタンからそれぞれの画像を表示させたうえで、「データベース保存」ボタンを押して、表示されている画像データをデータベースに書き込みます。「データベース選択」ボタンから保存したデータを呼び出して、データがきちんと保存されていることを確認してください。