AppSuiteのAPIを使った一覧データの取得(list_data) #01

はじめに

皆様まじめまして。今回、初めての投稿となります。
初めに簡単ですが自己紹介をさせていただきますね。
（拙い文書になっている箇所も多々あるやもしれませんが、どうぞ温かい目で見守ってやってください。）

私は、過去に横浜にあるソフトウェア開発会社で約30年、ソフトウェア開発に携わっていた人間で、現在はとある地方の金融機関で仕事をしています。
金融機関で仕事をしいるとはいえ、私自身ができることは、倍返しではなく、ソフトウェア開発なので開発業務を行っていますが、いかんせん地方の金融機関では、思うように社内のシステム化や、いわゆるDX化（それ以前にデジタル化も怪しい）が進んでおらず、じれったい日々を送っています。

そんな中、desknet's NEOというグループウェアに搭載されている「AppSuite」というアプリケーションのAPIを使って、様々なことができることを知り、「これはイイ！」と思い、投稿することにしました。
「システム開発したいんだけど、開発会社に頼むと高くつくよなぁ・・・」
「簡単なシステムを作ってみたい！」
「今後、仕事で使うアプリを開発してみたい！」

と思われている方がいらっしゃれば、ぜひ「AppSuite」を使って、一緒にシステム開発をしてみませんか！？

AppSuiteとは？

さて、それでは早速ですが、「AppSuiteとは？」ですが、「AppSuite」とは、株式会社ネオジャパン社製のグループウェア「desknet's NEO」に搭載されている、今流行りの
ノーコードでアプリを作れる！
機能です。

ネオジャパンとは、神奈川県横浜市に本社を置くソフトウェア開発会社で、様々なパッケージを提供し、同社製日を軸にしたクラウドサービスなど、幅広い事業を展開する会社です。

株式会社ネオジャパン 公式企業サイト

ところで、「ノーコードでアプリを作るってなんよ？」と思われる方もいらっしゃるかもしれませんが、ざっくりと書かせていただくと、「プログラムを書かずにほしい機能を開発することができる」アプリケーションのことです。

「え？プログラムを知らなくても機能開発ができるの？」

と思われるかもしれませんが、まさしくその通りでして、マウスを動かしてカチカチすると、アプリケーション（機能）が出来上がってしまうのです！
さすがにあまりにも複雑なことはできませんが、簡単な業務や面倒だけど毎日やらなければいけない事務作業などをシステム化することが可能なツールです。
そしてなんと、現在はdesknet's NEOの「ワークフロー」機能などともシームレスに連携しており、申請が終わったデータをAppSuite上で管理する、といった使い方もできるようです。（2024年8月現在）
今後、さらに連携機能が増えていき、便利なツールになることが想像できますね。

期待しています！ネオジャパンさん！！

詳しくは、株式会社ネオジャパンのAppSuiteサイトなどをご参照ください。

AppSuite 業務改善のアプリは現場でつくる | ノーコード業務アプリ作成ツール

ちなみに、今回の記事では、
desknet's NEO
AppSuite
Vue（JavaScript）
の構成でサンプルコードを説明していますので、ご興味ある方はぜひ最後までご一読ください！

事前準備

それでは、実際の手順に進んでいきます。
まずは何よりも、今回の開発ではAppSuiteを使用するために、お手元のPCに「desknet's NEO」がインストールされている必要があります。

desknet's NEOには、サイト上に「オンラインデモ」の環境もあるのですが、このオンラインデモの環境は、１時間ごとのデータがリセットされているようで、せっかく作成したデータがリセットされてしまいます。なので可能であればご自分のPCなどに、トライアル版のdesknet's NEOをインストールすることをお勧めします。

パッケージ版 60日間無料お試し│グループウェア desknet's NEO

desknet's NEOとAppSuiteの実行環境が整いましたら、次に、AppSuiteに今回使用するサンプルアプリを作成する必要があります。
今回は、「一覧データの取得」APIを使用するためのものですので、どのようなアプリでも結構ですが、次章に、AppSuiteにインポートできるテンプレートも用意していますので、必要に応じてお使いください。

今回は、以下のような設定でAppSuiteのアプリを作成しました。
以下の内容は、アプリケーション管理のアプリの設定から「API設定」ページを表示すると参照することができます。

AppSuiteアプリの「API設定」

アプリには、APIで取得するサンプルデータを数件登録しておいてください。

サンプルデータはこんな感じ

それでは次に、このアプリにアクセスするためにユーザーの「アクセスキー」を取得しておきます。
desknet's NEOの個人設定内の「アクセスキー設定」ページを表示します。

個人設定「アクセスキー設定」メニュー

以下の画面が表示されますので、「発行」ボタンをクリックして、アクセスキーを発行し、控えておいてください。

アクセスキー設定

次に、AppSuiteのAPIを使用してデータを取得する、いわゆる「クライアント」に当たる環境を構築します。
今回は、Vue言語を使ってAppSuiteのAPIにアクセスし、データを取得してみます。
ちなみに、今回はVue言語を使用していますが、どの言語でも問題ありません。ご自分の得意な言語でトライしていただければと思います。

Vue.js

ここで以下のツールが必要となりますので、まだインストールされていない方は、これを機にインストールすることをご検討ください。

• Visual Studio Code

• node

Visual Studio Code – コード エディター | Microsoft Azure

Node.js — Run JavaScript Everywhere

次に、今回の開発で使用する「Vue」を使うための環境を構築します。
Visual Studio Codeを起動し、「コンソール」を開いたら、以下のコマンドを入力し、Vueを使うためのコマンド群をインストールします。

npm install -g @vue/cli3.7.0

次に、Vueの開発環境のためのプロジェクトを作成します。
任意のフォルダを開き、以下のコマンドを実行します。

vue create list_data

"list_data"は、作成するプロジェクト名ですので、任意の名称で問題有りません。
実行すると、以下のような選択肢が表示されますので、"default"を選択し実行すると、プロジェクトの作成が始まります。

? Please pick a preset:
> default (babel, eslint)
  Manually select features 

プロジェクトの作成が終わったら、以下のような表示になります。

作成されたプロジェクトのフォルダに移動し、以下のコマンドを実行してみましょう。

npm run serve

正しく実行できたら、URLが表示されますので、ブラウザで表示されたURLを開いてみてください。
URLは通常
http://localhost:8080
にアクセスすることになります。
プロジェクトが正常に作成されていたら、ブラウザに以下のような画面が表示されますので、正しく表示されれば次章に進みましょう。

Vueプロジェクトのスタートページ

データ一覧取得APIの使用方法

それでは、AppSuiteのAPIを使ってデータを取得するためのコードを説明します。
ちなみに、AppSuiteの一覧データ取得のAPIは、以下のページに詳細説明がありますので、ぜひご一読ください。

AppSuite（付録）

では、まずは前章で作成したVueのプロジェクトが以下の状態になっていると思いますので、対象のファイルを削除します。

赤枠で囲っているファイルが削除するファイルです

次に、対象のフォルダに新たにファイルを作成します。
このとき、Visual Studio Codeのターミナルにはエラーが表示されますが、まだ気にしなくて問題ありません。

ちょっと名前長いけど作成したファイル

新たに作成したファイルに以下の内容を記述してください。

<template>
    <v-container fluid>
        ここにAPIで取得したデータを表示します。
    </v-container>
</template>

<script>
export default {
    data() {
        return {

        };
    },

    methods: {

    },
};
</script>

これで準備は完了です。
次に、実際にこの新たに作成したvueファイルをロードできるように修正を加えます。
作業中のプロジェクトフォルダ内のsrcフォルダに存在するApp.vueファイルを開いて、以下の画像のように編集しましょう。

App.vueの編集箇所

ブラウザの表示が以下のように変われば正しく編集できています。
Visual Studio Codeのターミナルのエラーも表示されなくなっているはずです。

App.vue編集後のブラウザ表示

それでは、実際にAPIを使ったコーディングをしていきます。
まずは、APIをコールするために使用するライブラリを追加インストールします。実行中のVueプロジェクトを、いったん停止します。
ターミナル上で、Ctrl＋Cキーを実行すると停止することができます。

使用するライブラリは"axios"というものになります。axiosとは、NodeからHTTPアクセスをするためのライブラリで、今回のようにAppSuiteに対してHTTPでAPIをコールする場合に必要になるライブラリです。
詳細は"Axios"のページをご参照ください。

Axiom 入門 | Axios Docs

ターミナルに以下のコマンドを入力し、必要なライブラリ（axios）をインストールします。

npm install --save axios

次に、先ほど作成したappSuiteApiSample.vueファイルを以下の内容に変更します。

appSuiteApiSample.vueの修正

すると、ブラウザが以下のような表示になるはずです。
”ここにAPIで取得したデータを表示します。”のメッセージの下部にJSONデータが表示されていれば取得成功です。

AppSuiteから取得したデータが表示される

どうですか？簡単じゃないですか？
ただ、これだけだとAppSuiteと同じ一覧を表示するために手間をかけただけになりますので、何のメリットもありませんが・・・
ここからさらにAppSuiteにはない機能を追加して、使う人が便利になるようにしていく必要がありますね。
取得したデータを加工し、お好みの形式で表示すればオリジナルのアプリが開発できます。

今回は、Vue言語を使って、desknet's NEO＋AppSuiteから、簡単にデータを取り出す方法を紹介しました。
次回以降、１件単位のデータ取得や、データの追加・変更・削除など、ご紹介できればと思っています。

それではまた次回、近いうちに！

ここで使用したサンプルコードと、AppSuiteのサンプルアプリをダウンロードできるようにしてみましたので、必要であればお使いください。