SAP AppGyver - 画像データの取り扱い 書き込み編

[NaotoSakai]

さて、SAP AppGyverの記事です。
本日は画像データの取り扱いについて解説したいと思います。画像は。。。。賛否両論ありますが、HANA CloudのBLOB型に格納することにしましょう。

前提

今回は写真を撮ってHANA CloudのBLOB型カラムに格納するアプリケーションの作成について解説します。（次回は保存したデータを呼び出して表示するというアプリケーションを作成しようと思います。）

カメラを使うのでスマートフォンにSAP AppGyver Previewアプリをインストールしてアプリを実行できるようにしておく必要があります。Web Previewでは実行できません。

前準備

Maxime SimonがCAPでSAP HANA CloudのテーブルをODataサービスとして公開するというブログを書いています。この解説の環境を利用することにします。まずは彼のブログの通り環境を作成し、ODataでデータを公開できることを確認して下さい。そして彼の解説に以下のエンティティを追加します。

schema.cds



entity BlobTest : cuid {

imagedata : LargeBinary;

mimetype : String(100);

}

incidentService.cds



entity BlobTest as projection on cloud.BlobTest;



をservice IncidentService {....} 内に追加

また、今回SAP AppgyverからこのODataサービスを使用しますので、CORSを許可するために、srvディレクトリの下にserver.jsというファイルを作成し、下記を記述して下さい。

"use strict";



const cds = require("@sap/cds");

const cors = require("cors");

cds.on("bootstrap", app => app.use(cors()));



module.exports = cds.server;

※BAS上でnpm install corsをしないとデプロイ時にエラーが発生するかもしれません。

これでビルドし、デプロイを行い、BlobTestテーブルが公開されていることを確認して下さい。

AppGyverアプリの作成

ODataデータリソースの作成

それではまずデータリソースを作成していきます。今回はOData Integrationのリソースを1つ作成します。

今回はOData Integrationデータリソースはエンティティ名のBlobTestで作成します。

テストを行って正常に応答が返ることを確認して下さい。

画面の作成

まず、Page variableとしてpathとmimetypeというテキスト型変数2つを設定します。

画面の設計としてはシンプルです。ButtonとImageとButtonの3つです。

スナップショットではImageが見えませんが、ボタン2つに挟まれている状態だと思って下さい。（右下のPAGE LAYOUTに注目）

これはこのImageのSourceとして割り当てている変数が原因です。このImageのSourceには最初に作ったPage variableのpathを割り当ててあります。
この割当は型の問題で単純には出来ないことに注意して下さい。スナップショットのようにFormulaを使用してそこから割り当てます。またその際もエラー表示になりますが、無視して良いです。

それでは上の「Take a photo」ボタンのロジックの解説です。このボタンは文字通り写真を撮るという機能を割り当てます。ロジックの全貌は以下のとおりです。

ボタンタップのイベントを「Take photo」フローにつなぎ、それの一番上の丸から2つのSet Page variableフローに接続します。このSet page variablesフローで先に定義したApplication variable "path"と"mimetype"に値を設定します。

pathには

Take photoの出力に含まれるpathを設定します。

mimetypeにはFormulaを使って設定します。

mimetypeという拡張子ですが、設定するのはファイルの拡張子です。
本来は「Take photo」フローの出力のmimetypeにmimetype情報が出力されるはずなのですが、現状出力されていないようです。そこで、ファイルの種別を取得するためにAssigned valueはFormulaとして以下のように設定します。

LAST_ITEM(SPLIT(outputs["Take photo"].photoFile.name, "."))

 

nameにはファイル名が出力されていますので、それを「.」で分割しその最後の項目を取得しています。これで拡張子を取得しています。

（この拡張子をどのように使用するかは次回）

ちょっとテスト

ここまででちょっとテストしてみましょう。スマートフォンのSAP AppGyver Previewアプリで開発したアプリを起動し、「Take a photo」ボタンをタップするとカメラモードになります。そこでCaptureボタンをクリックすると写真が撮られ、その写真は２つのボタンの間に配置したImageに表示されるはずです。

ここまで正常に動作していることを確認したらUpload to BTPボタンのロジック開発に移ります。

BTP（HANA Cloud）へのアップロードロジックの開発

「Upload to BTP」ボタンのロジックは以下のような形です。

アップロードを行うロジックであるためアップロード中はスピナーを表示するようにしています。ロジックの概要としては「Convert file to base64」フローで撮影した画像をBASE64方式にエンコーディングし、そのデータをOData経由でBTPのHANA Cloudにアップロード（＝挿入）します。

「Convert file to base64」フローのSource file URLにはPage variableのpathを指定します。

Create RecordのResource nameにはOData Integrationデータソースとして作成したBlobTestを指定します。

RecordにはFormulaを用いて下記のように設定します。

{ imagedata: outputs["Convert file to base64"].base64, mimetype: pageVars.mimetype}

imagedataに「Convert file to base64」でBase64変換されたデータを、mimetypeにはpage variableとして設定していたmimetypeを割り当てます。

このBlobTestにはエンティティとしてIDも存在しますが（cuidの指定で自動的に作られます）、IDは自動採番されるため指定する必要はありません。むしろ、IDの指定がOData送信文字列中に存在するとエラーになります。そのためここではMappingなどの機能は使わずFormulaを指定して送信文字列を組み立てる必要があります。なお、割り当てられたIDはこの「Create Record」フローの出力として取得できます。もし後続の処理で必要であればここで忘れず取得しておいて下さい。私はとりあえず「Create Record」の正常応答からつながるAlertダイアログにIDを表示するようにしました。

テスト

ではアプリをテストしてみましょう。

「Take a photo」ボタンで撮影した後「Upload to BTP」で画像をアップロードします。

正常応答に設定したAlertダイアログが表示されれば成功です。

一応ODATAサービスにブラウザからアクセスして確認してみましょう。

BLOB型の表示ですのでわけのわからないデータが表示されますね。でも出ていれば成功です。

これでSAP AppGyverからHANA CloudのBlob型カラムに画像データを格納することが出来ました。次回はこのデータをAppGyverアプリで見る部分の解説をしたいと思います。