ローコードツールAppsmithで社内向けWebアプリを爆速で構築した話

ここでは、Ｓｋｙ株式会社の社内でDX推進の一環として、Excelに依存した情報共有をWeb化するローコードツール「Appsmith」を活用した事例について説明しています。Appsmithの特徴や導入手順、使用感、利点と課題点を紹介しています。

はじめに

こんにちは！
社内の有志で集まってDX推進を行っています。
活動の一環としてExcelに依存した社内情報の共有をWeb化にチャレンジしました。
Web化にあたってはローコードツールを活用することでスピーディーに実現できたため、今回はそのツールについてご紹介します。

活動にあたって、ローコードツールを以下の観点で選定しました。

無償で利用可能であること
クラウド版ではなくセルフホスト版が提供されていること
自社内に限定されたプライベートなネットワーク環境で運用可能なこと
構築が容易であること
使い勝手が良く、モダンでおしゃれなUIであること

上記の観点をもとにツールを選定し、Appsmithというローコードツールを採用しました。

Appsmithとは

Appsmithは、オープンソースのローコードツールです。
ドラッグ＆ドロップ操作により簡単にWebアプリを作成できます。
以下に、Appsmithの主な特徴を挙げます。

オープンソース：Apache License 2.0ライセンスで提供されており、誰でも自由に利用できます。
ローコード開発：広範なコーディングを必要とせず、ドラッグ＆ドロップでUIを構築し、アプリケーションを迅速に開発できます。
データソースとの統合：PostgreSQL、MySQL、MongoDB、Amazon S3、REST APIなど、さまざまなデータソースと統合することができます。
カスタマイズ可能：JavaScriptを使用してビジネスロジックを記述し、アプリケーションの動作を細かく制御することができます。
チーム開発：チームでの開発をサポートしており、メンバーごとにアクセス権限を設定することができます。Git連携も可能であり、共同編集も容易です。
デプロイの簡便さ：ワンクリックでアプリケーションをデプロイすることができ、編集モードと表示モードを切り替えて作業できます。

自社内の簡単なビジネスソフトウェアを構築する目的にマッチしたツールと言えます。

環境構築

クラウド版も提供されていますが、今回はセルフホスト版を利用しました。
Docker環境があれば以下の手順で簡単に構築可能です。

1.　docker-compose.ymlに以下を記載する

services:
  appsmith:
    container_name: appsmith
    image: appsmith/appsmith-ce
    ports:
      - "80:80"
      - "443:443"
    volumes:
      - ./stacks:/appsmith-stacks
    environment:
      TZ: Asia/Tokyo
    restart: unless-stopped

docker compose up -dを実行する
起動したAppsmithにWebブラウザからアクセスする

Webアプリを作成

Appsmith上でWebアプリを作成します。
サンプルとしてDBで管理されている月ごとのお問い合わせ件数をグラフ／テーブルで表示するアプリを作成します。

1. Appsmith⇔DBの接続

Appsmith上のコンソール画面でDBへの接続情報を入力します。

2. テーブルUIの作成

DBへの接続が完了した後、テーブル一覧から操作したいテーブルを選択します。
Generate new pageをクリックすると該当テーブルの閲覧・編集が可能なUIが自動で生成されます。

3. グラフの作成

クエリ一覧からSelect文を表示します。
ChartをクリックするとSelectクエリに連動したグラフが自動生成されます。

4. UIの調整

ドラッグ＆ドロップで位置の調整をしたり、プロパティを変更して見た目を整えれば完成です！

実際に使用してわかったこと

良い点

基本的な機能は揃っていて、目的のアプリを効率的に作成することができました。

使いやすくUIがきれい
ドラッグ＆ドロップでUIを配置できるのは直感的でGoodです。
チャートもApache EChartsと連携しており、グラフにアニメーションが付いているなど表現が豊かで良い感じです。
DBとの連携が優秀
SQL文からテーブルUIを自動生成できるのでDBのクエリ結果との親和性が高いです。
共同編集が強力
複数人で同じプロジェクトを同時に編集可能です。
Git連携も可能で、ブランチ運用も可能です。
更新スピードが早い
Appsmithの新バージョンが週次で定期的にリリースされており、アップデートがあることへの安心感があります。

課題点

便利なツールですが、いくつか課題もありました。

細かい表示位置の調整はできない
UIのデザインに関しては文字サイズや背景色など思ったより柔軟に変更が効きますが、表示位置にくせがありました。
ドラッグ＆ドロップでUIを配置できますが、UI同士の重ね合わせができません。
これによりUI同士の押し合いになって余計なマージンが生まれることがあります。
どうしてもUIをカスタマイズしたい場合は、CustomウィジェットやIframeウィジェットを活用して自作UIを表示して回避します。
DBの構築が必須
Appsmithは内部のDBを持ちません。
そのため、Appsmith単体で運用しようとするとグラフやテーブルに表示するデータはハードコーディングになります。
DB連携自体は容易なので、PostgreSQLなどを別途構築して利用すれば問題はありません。
Git連携のフル機能が有償版での提供
無償版では1ワークスペースあたり3つのプロジェクトまでしかGit連携できない制約があります。
ワークスペースを分けることで回避できますが、ワークスペースごとに権限管理が必要です。
ログイン認証周りの連携機能が有償版での提供
OIDCやSAMLといった認証連携が無償版では利用できません。
無償版でもGitHub OAuthなど一部の認証連携機能は利用可能でしたが、社内ポリシーに合わなかったため断念しました。
運用するユーザーは限定的であれば、デフォルトの認証方式でも運用可能です。