※この記事は前回からの続きものです。前回の記事で作った環境を前提としますのでまだの方はそちらをご参照下さい。

今回は前回HANA CloudのBLOB型カラムに格納した画像データをAppGyverアプリで呼び出して表示させる部分の解説です。

AppGyverアプリへの追加開発

ページの追加

今回は画像IDの一覧を表示して、それをタップすると画像を表示するという機能を作りたいと思います。同じページで作っても良いでしょうが、この機能のページを別に追加したいと思います。

GetImageというページを新規に追加します。

ついでにNavigationの機能でナビゲーションメニューにこの新しく追加したページを追加します。

これでスマートフォンの場合画面下部に表示されるナビゲーションメニューでこの新しく追加したページに移動できるようになります。

データリソースの追加

現状のAppGyverの仕様と思われる現象があり、前回定義したOData Integrationリソースでは思うようなデータを取得することが出来ませんので新規にREST API Direct IntegrationリソースとしてBlobTestのODataサービスを追加します。

今回は「GETBLOBTEST」という名前でREST API Direct Integrationリソースを追加します。ResourceURLはOData Integration リソースの時と違い、メタデータではなく/incident/BlobTestという実際のサービスを行うところまで入力する必要があります。

今回使用するのはGET COLLECTION(GET)だけです。

Resource key pathにはvalueと設定することを忘れないで下さい。(ODataリソースをREST APIリソースとして設定する場合は必要です。）そして

Query parameterとして$selectを追加します。これは

Is staticはTrueでValueとしてIDを設定して下さい。これでURLに?$select=IDが付与されて実行されることになります。IDカラムだけを取得するということになります。

TESTで実行してみましょう。

そしてSET SCHEMA FROM RESPONSEをクリックします。

最終的に設定されるスキーマは以下のようになります。

これでデータリソースの設定は完了です。

余談：REST API Direct Integrationで設定した理由

前回設定したODataリソースを使用しようとしたのですが、以下の理由で今回は断念しています。
・$selectによるフィルタが現状のODataリソースでは出来なかった。
　IDの一覧表示の場合はIDカラムだけのデータが欲しかったのですが、ODataリソースの場合この設定が出来ませんでした。

このためREST APIとして設定して回避しています。これは今後改善されると思われますのでこのブログ公開時点のものと考えて下さい。
テスト機能では$select指定が出来るのですが、実使用の際に引数を与えられないのが謎ですね。

変数の設定

この画面にPage variablesを設定します。

このようにテキスト型でImagedataとmimetypeを設定します。これはODataから受け取った同名のカラムの値を保持するものとして使用します。

画面とロジックの開発

画面は以下のようにシンプルな構成とします。

Scroll Viewの中にScrollable Basic Listを配置します。その下にはImageを配置します。

一応Scroll Viewは高さ30%固定にし、仮に表示されるリストが多くなった場合はそこでスクロール表示されるようになります。

Scrollable Basic Listの設定は

自動的にデータをリフレッシュさせたいのでRefresh data?をTrueに、Refresh rateは5000msとしています。

List Resourceで設定している内容は

今回必要なのはIDだけですので、上記のように設定します。contentとlabelはFormulaで空文字列を与え、何も表示させないようにしています。

このScrollable Basic Listには下記のロジックを設定します。

このScrollable Basic Listはtappeditem.idという便利なプロパティが存在します。これは（最後に）タップしたアイテムのID値を返すというものです。このID値というのはプロパティのList Resourceでidに割り当てた値です。つまりは、今回の場合tappeditem.idを参照するとそこに表示されているIDの値を取得できることになります。

この機能を利用してまずGet record（Get record collectionではないですよ！）では

IDにこのtappeditem.idを指定します。これでODataとしては/incident/BlobTest(<tappeditem.id>)と呼び出されることになり、そのIDのデータのみを取得することになります。

後続のset page variablesではこのGet Recordから返ってきたImagedataとmimetypeをそれぞれのPage variableに割り当てます。

ScrollViewの下部に配置したImageは

このように式を用いて設定します。

今回の記事のポイントですが、実はここでSourceとして与える引数はデータURI形式でも設定することが出来ます。ここはFormulaとして下記のように設定します。

"data:image/"+ pageVars.mimetype + ";base64," + REPLACE_ALL(REPLACE_ALL(pageVars.Imagedata, '_', '/'), '-', '+')

ODataで送られてくるBase64文字列はURLのためのBase64データ形式とでも言うのでしょうか？正式な名称はわかりかねるのですが、本来「/」のところが「_」に、「+」のところが「-」になった形式で送られてきます。これを元の形式に戻し、データURI形式に整形します。（このためにmimetypeで拡張子を取得しました。）

この式は入力時に赤色のエラー表示となりますが、そのまま保存して下さい。

さて、ロジックも組み立て終わりましたのでテストをしたいと思います。

画面下部のナビゲーションメニュのGetImageボタンをタップするとページが変わります。

ロジックに問題がなければ上記のように登録した写真のID一覧が表示されるはずです。
リストから表示したい写真のIDをタップします。

このように登録した写真が表示されれば成功です。

いかがでしたでしょうか？この方法は他にも応用が効くと思いますので是非試して下さい。