AppSuiteのAPIを使った1件データの取得(get_data) #02
前回までは・・・
皆様こんにちは。
つい先日、私の生息地では、近年では珍しく大きな地震があり、更に久しぶりに大型の台風が近づいてきたこともあり柄にもなくヒヤヒヤした日々を過ごしていますが、皆様はいかがお過ごしでしょうか？
何でも100年から150年周期で南海トラフ地震が発生しているらしく、前回の南海トラフ地震の発生が1946年とのことで、今後20年前後には南海トラフ地震が発生するだろう、と予想されているとのこと。改めて日頃からの備えをしたほうがいいんだなぁと感じました。思えば、今はミネラルウォーターを数本、しかも備蓄用ではなく普段使い用に備えているだけなので、避難セットやなんかもちゃんと準備しよう！と思いました。
さて、それでは関係のない話はこれくらいにして・・・
前回は、AppSuiteのAPIを使って一覧データの取得を行いました。
まだお読みでない方は、ぜひご一読ください。
前回に引き続き、ということで、開発環境や準備などについては割愛させていただきますが、ご興味を持っていただけたら、とても簡単ですのでぜひとも#01をご一読いただき開発環境の準備など取り組んでみてください！
今回は！
さて、それでは今回は、#01で作成した一覧データ取得のサンプルアプリを改造して、１件データの取得API（データ参照API）を使ってみたいと思います。
１件データの取得をするためには、元となるデータのID（データを指し示す識別番号）が必要になります。このため、前回の一覧取得アプリケーションをもとに、このIDを一覧表示して、対象のIDのデータの詳細を表示する。といったサンプルアプリケーションにしてみたいと思います。
今回も、前回同様、あまり複雑なものではありませんので、ぜひ最後までお付き合いください。
事前準備
それでは、実際の手順に進んでいきます。
Visual Studio Codeにて、#01で作成したサンプルアプリケーションのフォルダを開くか、新たに作成してください。
前回同様、プロジェクトを実行すると、AppSuieから取得した一覧データが表示される状態になっているかと思います。
前回のままでは見た目もあれですし、取得したデータを扱いにくいので、ちょっと見た目を整えて小綺麗にしてみましょう。
まずは、上部<template>パート内の記述を以下のように修正します。
※ここでは、取得したデータを一覧形式で表示するように修正しています。
次に<script>内の記述を以下のように修正します。
これは、取得データを再構築し、一覧形式で表示できるように修正しています。
最後に、一覧の見た目を整えるために、スタイルシートを追加します。
この状態で実行すると、ブラウザには以下のように表示されると思いますので、これで準備完了です。
ちょっと小綺麗になりましたね！なりましたよね！？
ちょっと効率の悪い処理をしていたりもしますが、今回の目的はJavaScriptの効率的な開発ではないので、とりあえず動いていればOKとしましょう。（もちろん、こだわって効率の良い作りにしていただいて何も問題ありませんし、そのほうが後々楽かもしれませんので、お好みで修正してみてください。）
それでは準備もできましたので、今回のお題の「1件データの取得APIの使用」に進んでいきましょう！
1件データ取得（データ参照）APIの使用方法
AppSuiteのAPIを使ってデータを取得するためのサンプルコードをコーディングしていきます。
ちなみに、AppSuiteの1件データ取得のAPIは、以下のページに詳細説明がありますので、お使いいただく前にぜひご一読ください。
それでは、「事前準備」で修正したコードに、更に手を加えていきます。
事前準備のコードでは、一覧データ取得APIで取得したデータを整形して一覧形式で表示するようにしましたので、そこから１件データ取得APIを使用して取得したデータを表示するための処理を実装していきます。
<template>パートの一覧形式の「氏名」項目を以下のように修正しましょう。
<template>
<v-container fluid>
ここにAPIで取得したデータを表示します。<br />
<table>
<thead>
<tr>
<th v-for="head_item in list_header" :key="head_item.value">{{ head_item.text }}</th>
</tr>
</thead>
<tbody>
<tr v-for="list_item in data_list" :key="list_item.data_id">
<td>{{ list_item["data_id"] }}</td>
<!-- ↓ここにハイパーリンクを設置 -->
<td><a href="#" @click="dispDetail(list_item)">{{ list_item["name"] }}</a></td>
<td>{{ list_item["address"] }}</td>
<td>{{ list_item["tel"] }}</td>
<td>{{ list_item["age"] }}</td>
<td>{{ list_item["kind"] }}</td>
</tr>
</tbody>
</table>
<br />
<br />
<!-- ↓ここに変数表示エリアを追加 -->
{{ detail_data }}
</v-container>
</template>「名前（name）」を表示している列にハイパーリンク（aタグ）を設置しました。「氏名」のハイパーリンクをクリックしたら"dispDetail"という関数がコールされるように修正してあります。また、テーブルの下部に、"detail_data"という変数を表示するためのエリアを設けています。
次に、<script>パートに"detail_data"変数を追加し、"dispDetail"関数を実装していきます。
まずは"detail_data"変数を追加します。<script>パート内のdata()セクションに変数宣言を追加します。
<script>
import axios from "axios";
export default {
data() {
return {
app_id: "list_data_sample",
access_key: "「アクセスキー」を記述します。",
appsuite_url: "desknet's NEOのURLを記述します。/dneo/appsr.exe 例)http://localhost/scripts/dneo/appsr.exe",
list_header: [
{ text: "ID", value: "data_id" },
{ text: "氏名", value: "name" },
{ text: "住所", value: "address" },
{ text: "電話番号", value: "tel" },
{ text: "年齢", value: "age" },
{ text: "区分", value: "kind" },
],
data_list: [],
detail_data: null, // ← この変数を追加
};
},次に、"dispDetail"関数を追加します。<script>パート内のmethodsセクションに関数定義を追加します。
// 取得したデータを格納
self.data_list = data_list;
})
.catch(error => {
console.log(error);
});
},
// ↓新たに追加した関数
dispDetail: function(item) {
let self = this;
self.detail_data = item;
},
それでは、ここまでで一度動作を確認してみましょう。
dispDetail関数は、ハイパーリンクからコールされる際に、"list_item"データ（一覧の１件のデータ）を引数として、"item"関数変数に格納しますので、それをそのまま<template>パートと<script>パートに新たに追加したdetail_data変数に格納しています。
このため、一覧の「名前」ハイパーリンクをクリックすると、クリックしたデータの内容が一覧の下部に表示されます。
表示されれば正しく修正できています。
ではいよいよ、１件取得のAPIを使ってみたいと思います。
先ほど追加したdispDetail関数からAPIをコールして、詳細を取得して内容を表示する、といった流れにしてみましょう。dispDetail関数を以下のように修正します。
dispDetail: function(item) {
let self = this;
const params = new URLSearchParams();
params.append("app_id", "@" + self.app_id);
params.append("access_key", self.access_key);
params.append("action", "get_data");
params.append("data_id", item["data_id"]);
// データ取得
axios.post(self.appsuite_url, params)
.then((response) => {
let data = response.data;
// 取得したデータを格納
self.detail_data = data;
})
.catch(error => {
console.log(error);
});
},
修正後、実行すると、今度はテーブル下部には以下のように表示されるようになります。
ちょっと、あれですね・・・サンプルアプリがあまりいいサンプルではないためか、修正前に表示していた一覧形式のデータと大差ない内容しか表示されませんね。これでは面白くない・・・というかわかり難いですね。
ということで、差をわかりやすくするため、AppSuiteのアプリをちょっと修正してみました。
修正箇所としては、データの詳細に「表部品」を追加して、サンプルデータも登録してみました。
この状態でAPIを実行して違いを比較してみます。
違いが分かるように、上部に一覧取得API（list_data）を使って取得した３件のデータを表示し、下部にデータ参照API（get_data）を使って取得した１件のデータを表示してみます。
比較してみると、データ参照APIで取得したデータには、新たに追加した「表部品」のデータが含まれていることがわかりますね。
尚、一覧取得APIで取得できるデータ（部品）は、AppSuite機能の一覧で使用できる部品とも同じのようですので、使用目的に応じてデータ参照APIで取得する、といった対応が必要になりますね。
※desknet's NEO & AppSuite V8.5時点で、一覧取得APIで取得できない部品は「表部品」と「参照データ一覧」のようです。各APIで使用できる項目タイプの詳細については以下のページをご参照ください。
いかがでしょうか？
さらっと流してしまいましたが、データ参照API（get_data）を使って参照データを取得するサンプルでした。
データ参照API（get_data）の使い方、というよりは、一覧取得APIとの違いみたいになってしまいましたが、使用方法としては、２つのAPIはそれほど大きな違いはなく、データ参照APIでは、取得対象とするデータのID（識別子）を指定することが必須となる、あとは取得できるデータに多少の違いがある、くらいですね。
前回同様、今の段階では、取得したデータをそのまま表示しているだけですので、使い道もありませんが、また次回整形して表示したり、データの追加を行ったりしてみたいと思っていますので、また次回もお付き合いいただければ幸いです。
それではまた！
ここで使用したサンプルコードと、AppSuiteのサンプルアプリをダウンロードできるようにしてみましたので、必要であればお使いください。
ここから先は
¥ 100
この記事が気に入ったらサポートをしてみませんか？