清水理史の「イニシャルB」
CSVファイルをもとに3分でウェブアプリ完成！ NASでも動くローコード開発環境「Budibase」
2023年1月10日 06:00
「Budibase」は、各種データベースやREST APIなどのソースからデータを集め、それを操作するためのGUIを簡単に作成できるオープンソースのプラットフォームだ。
CSVからデータを取り込んで、そのデータを操作（閲覧／追加／編集／削除）するGUIを自動的に生成してウェブアプリを作る、といったことが数分もあれば可能になる。Power AppsやKintoneのような環境をオープンソースで実現したソリューションと考えると分かりやすいだろう。クラウドでも利用可能だが、今回はNASで利用する方法を紹介する。
内部ツール作成プラットフォーム
最近では、「ローコード」よりも「社内ツール／内部ツール（Internal Tools）」という呼び方が一般的になりつつあるようだが、プログラミング経験がないユーザーでも、簡単に社内で利用するアプリを作成できるプラットフォームが人気を集めつつある。
国内でも馴染みがあるものとしては、先述したPower AppsやKintoneなどが挙げられる。オープンソースのソリューションでも「appsmith_」が有名だし、最近では「ToolJet」などの存在感も大きくなってきている。
今回取り上げるBudibaseも、同様のソリューションだ。PostgreSQLやMongoDB、Amazon S3、REST API、Googleスプレッドシートなど、さまざまなソースからデータを取得し、そのデータをもとにした「CRUD（Create Read Update Delete）」を実現するGUIを簡単に作成できるようになっている。
プラットフォームによっては、コードの記述が求められるものもあるが（ToolJetなどがそう。むしろ開発経験者向き）、Budibaseは、独自のルールを覚える必要はあるものの、コードの記述がほとんど必要ない。
また、オートメーションも強く意識しており、例えばソースにデータが追加されたら、DiscordやSlack、メールに通知を送信したり、JavaScriptやBash Scriptを実行したり、データ追加や削除といった操作をしたりと、アプリや外部ツールの動作をきっかけに自動的に処理を実行する機能も備えられている。これにより、承認などのワークフローも簡単に作れる。
クラウドサービスとしても利用可能（Freeプランあり）だが、セルフホスト用としてDockerで動かすことも可能だ。
▼参考
・Budibase
・セルフホスティング向けドキュメント
たとえば、以下のようなアプリを作成できる。筆者が学習を兼ねて数日かけて作った経費精算アプリだが、ホーム画面で自分の申請や承認を確認できたり、領収書の画像（スマホで撮影し、スマホのウェブブラウザーからアップロードできる）を添付したり、明細登録画面で日付などを簡単に選んだり、オートメーション機能を使って承認ワークフローを組み込んだりしている。
NASにBudibaseをインストールする
今回は、このようなBudibaseをSynologyのNAS（DS716+）上のDockerで動作させ、簡単なアプリを動作させるところまでを紹介する。前述したようにクラウドサービスを利用する方が簡単だが、無料プランは作成可能なアプリ数が制限されているうえ、動作がかなり重いので、セルフホスティングをおすすめする。
まずは、NASで動くように設定しよう。
Step1：Dockerを準備する
SynologyのNASにパッケージセンターからDockerをインストールしておく（DockerはIntel CPUを搭載した機種が対象）。なお、BudibaseのDockerイメージは、WindowsやmacOSのDocker環境でも動作するうえ、Arm環境でも利用可能だ。詳しくはドキュメントを参考のこと。
Step2：イメージをダウンロードする
レジストリから「budibase/budibase」を検索してイメージをダウンロードする。容量は2GBほど。
Step3：コンテナを作成する
ダウンロードしたイメージをダブルクリックしてコンテナを作成する。構成は、基本的に標準のままでOK。次のステップのポートとディレクトリのマウントの設定のみ変更すればいい。
Step4：ポートを割り当てる
割り当てが必要なポートは、外部からBudibaseにアクセスするための80番のみ。これをローカル側の適当なポート（Budibaseのドキュメントは10000。今回は10088）に割り当てておく。ほかのポートが表示された場合は、削除しておく。
Step5：フォルダをマウントする
コンテナ側の「/data」をNASの適当なフォルダ（今回は/docker/budibaseを作成）にマウントしておく。これで、NASからBudibaseのファイルを扱えるようになり、バックアップなどが容易になる。
Step6：コンテナを起動する
設定が完了したらコンテナを起動する。最初はデータベースの作成などが実施されるため、起動に2～3分かかる。しばらく待って、CPU負荷がおさまったら「http://［NASアドレス］:10088」と、Step4で割り当てたポートを利用してアクセスするとBudibaseが起動する。
CSVから3分でアプリを作る
さて、Budibaseが起動したら、実際にアプリを作成してみよう。
今回は、例として次のような顧客管理台帳をアプリ化してみる。Budibaseは、CSVからデータベースを作成できるため、現在、Excelなどで管理しているデータがある場合は、CSVとして出力することで、簡単にアプリ化できる。
Budibaseは、内部にCouchDBベースのデータベースを搭載しているため、別途、データベースを用意する必要がないのもメリットだ。
Step1：新規作成を始める
Appsページからアプリを新規作成する。Budibaseは日本語に対応していないので、アプリ名やデータベース名、テーブル名、列名などは英数字を使うのが無難。アプリのタイトルや見出し、データとして格納される情報に関しては日本語でも問題ない。
Step2：データソースを選択する
利用するデータソースを選択する。さまざまなデータベースやREST APIが利用できるが、今回は内蔵の「Budibase DB」を利用する。
Step3：テーブルを作成する
データを格納するテーブルを作成する。今回はCSVをベースに作成するので、名前を付けてから、CSVファイルをアップロードする。
Step4：データの型を指定する
CSVを読み込むと、先頭行が見出しとして認識される。それぞれの列にどのようなデータを格納するのか型を選択しよう。今回は、全て「Text」だが、数値なら「Number」を選択。ほかに日付やリレーション、関数なども設定可能だ。
Step5：データを確認する
取り込まれたデータを確認する。データビューのままでかまわないなら、このまま共有して、Airtableのようなウェブデータベースとして利用することも可能。列や行などを追加することも簡単にできる。
Step6：アプリのデザインを作成する
上部のタブで「Design」に切り替え、アプリの画面をデザインしていく。手動で作成することもできるが、今回は自動生成する。
Step7：画面が完成した
自動生成によって、データ一覧表示用、データ編集用、データ新規登録用の3つの画面が自動生成された。1つのテーブルにデータを登録していくだけのシンプルなアプリなら、これだけで作業は完了だ。
Step8：アプリをプレビューする
プレビューでアプリの動作を確認可能。実際にアプリを利用するには発行操作でURLを発行する必要がある。
より複雑な操作も可能だが、ルールを覚えるのが大変
このように、元のデータがあれば、数分でアプリを作れるBudibaseだが、もちろんもっと複雑な操作が必要な場合は、それなりの作り込みが要る。
冒頭でも触れた通り、Budibaseは、ほぼコードを記述する必要がない（慣れているならJavaScriptを利用可能）。計算などが必要な場合でも、内部に用意された関数やモジュールを利用することで対応できる。
たとえば、テーブルを複数用意してリレーションを設定できるうえ、テーブル内でデータを計算したりしたい場合、ヘルパーから関数を選択して「{{ sum （pluck Item “Amount”） }}（テーブルのリレーションしたデータの合計値を求める関数）」のように記述することができる。
また、GUI画面でデータを扱う際に、「DataProvider」モジュールを使ってデータに接続したり、「Repeater」モジュールを使って配列から繰り返しデータを取り出したりできる。
これらの関数やモジュールは、画面上で選ぶことで簡単に利用できるが、問題は何がどのような役割で、どう記述すればいいか、どのような階層構造で配置すればいいか（これが結構大事）、というルールを頭に入れる必要があることだ。
ドキュメントやサンプルを見れば、使い方を理解するのは難しくはないが、残念ながら、文書も動画も現状は英語のみなので、使い方を理解するのはそれなりに時間がかかる。
ただ、これも最初だけだ。慣れてしまえば戸惑うこともなくなる。動画の学習教材なども用意されているので、しっかり基礎を頭に入れることが重要だ。
なお、アプリはレスポンシブデザインで構成されるようになっており、ウェブブラウザーの画面サイズやデバイスを問わず表示できる。
また、スマホのカメラを活用することも可能で、「Image」で写真をアップロードしたり、「Barcode/QR Sccaner」でコードを読み取ったりすることも可能だ。
これにより、冒頭で紹介したように経費精算アプリで領収書を撮影してアップロードできるようにしたり、在庫管理アプリでコードを読み取るだけで商品を認識させたりできる。慣れれば、小規模な店舗の販売管理システムくらいはできそうだ。外部サービスとの連携もできるので、AIを使って領収書の文字を読み取ったり、天気データを取得して販売データと連携させたりもできる。
日本語のドキュメントとコミュニティがあれば……
以上、内部ツール制作プラットフォームとなるBudibaseを取り上げた。機能的には、非常に完成度が高く、しかもセルフホストならコストもかからず多くのアプリを作成できるため、かなり面白い製品となっている。
今回、筆者は既存のクラウドサービスの画面をまねて経費精算アプリを作ったが、慣れてしまえば、同様に請求書アプリも作れそうだし、行先掲示板や日報くらいなら、ささっと作れてしまいそうだ。
とはいえ、日本語のドキュメントとコミュニティがあれば、さらに多くの人にとって使いやすくなると思われる。今後の発展を期待したいところだ。
最後に1つ注意点を。セルフホスト環境でGoogleスプレッドシートをソースとして利用する場合は、Google Cloud Platformとの連携が必要になる（ドメイン設定やAPIキー登録）。こうした設定も、英語と格闘しながらの作業となるので、現状は、こうした作業を「楽しい」と思える人におすすめしておく。
製品レビューなど幅広く執筆しているが、実際に大手企業でネットワーク管理者をしていたこともあり、Windowsのネットワーク全般が得意ジャンル。最新刊「できるWindows 11」ほか多数の著書がある。