PoCの初期段階におけるノーコードツールを使う意義や、CorDappをノーコードツール「Budibase」で展開するためのサンプル実装及び構築手順が学べます。
本記事にはR3公式Docからの手順の引用はありません。 筆者の構築した簡易的なフロントエンドの構築手順の紹介になります。
2024年「ブロックチェーンビジネス・アドベントカレンダー企画」８日目の記事です。 関連企業の皆様にも記事を書いていただく予定ですので、是非お立ち寄りください！
はじめに
Corda5のクイックスタートガイドの記事の続編です。今回は「構築したローカル環境でフロントエンドを通じてサンプルCorDappを操作できること」をゴールに、フロントエンドの構築手順について触れていきます。
本来は分散的にノードは各主体で運用しますが、Corda5では「漸進的な分散化」ができるように仮想ノードという仕組みを採用しており、今回は、試用目的でローカル環境上にCorda5基盤を一つ立ち上げ、その中で仮想ノード同士でやり取りを行っています。
ノーコードツールの使う背景
1. PoCから始めることが非常に多いので、”スピード感を重視したい”
企業向けブロックチェーンを導入する際には、その実効性を確認するために、PoC（実証実験）を実施することが一般的です。例えば、他の企業はどのくらい巻き込めそうか？、ビジネスメリットは確認できるか？、技術的に本当にやりたいことができるのか？などビジネス面・技術面の両面で検証すべき事項が多いです。
特に他の企業を巻き込んでいく上で、PoC段階とはいえフロントエンドの構築は必要不可欠です。ブロックチェーン上のアプリケーションでは、「取引履歴を追える、価値データが移転できる等、付加価値を実際に画面を通じてユーザーに体験してもらうこと」が、とても大事です。
そこで、PoC初期段階ではスピード感を意識し、さっと画面を作れてユーザーにブロックチェーンの価値を伝えるための手段として、最小・最短のコストで実装できるノーコードツールが良いのでは？と考えていました。
2. フロントエンドは、”エンジニア以外でも実装できると嬉しい”
Corda5ではCorda基盤及びCorDappの操作が、全てREST APIで行えるように通信プロトコルの仕様が統一されました。見方をかえると、「アプリケーションの開発において、バックエンドとフロントエンドの役割分担がより明確になった」ともいえるでしょう。
例えば、
- 「アプリケーション」を実装し「API仕様」を固めるのはバックエンド側
- 「アプリUI」と「SwaggerへのAPIリクエスト部分」を実装するのはフロントエンド側
と明確にタスク分担することができるでしょう。
そこで、PoC初期段階では、アプリケーション実装はエンジニアに専念してもらい、ユーザーのフィードバックを聞く立場の人間（PMなど）が、直接、フロントエンド実装を担当すればスピード感を持った取り組みになるのでは？そして、そのためにはノーコードツールが良いのでは？と考えていました。
もちろん、プロジェクトが進むにつれてフロントエンドをしっかりと作り込むことが必要ですが、上記のような理由から、PoC初期段階の有用性を踏まえ、ノーコードツールを試してみることにしました。
3. フロントエンドのノーコードツール選定
しかし、時代はノーコード（ローコード）戦国時代です。ざっと調べてみるだけでも、情報量が多過ぎて胃が痛くなりました・・。例えば、以下表のうち1. ~ 4.の、Webサイトやアプリ関連のツールだけでも豊富に選択肢があります。（画像の引用元）
今回は、「①実際に動くフロントエンドを簡単に作れること」を要件のため、.Bubble, pLasmic, Builder.io, Webflow, TeleportHQ, Budibase, AWS amplify studioあたりが候補に上がりました。それぞれ触ってみた上、「②SaaSではなくセルフホストできること」「③REST APIが使えること」を追加要件として選定した結果、Budibaseを今回採用することにしました。
Budibaseでは、簡単なアプリケーション自体も実装できますが、今回はフロントエンドとREST API連携用のツールとして使っていきます。他にも、ドキュメント・動画が充実している点や、ある程度機能が揃ったオープンソース版を公開している点が魅力的でした。セルフホストできるので、ローカル環境上での試用もできそうです。
Budibase導入手順
さて、前置きが長くなりましたがここからBudibase導入手順を解説していきます。
前回の記事では、ローカル環境上でCorda5環境を構築しましたが、その環境に合わせDockerを用いてBudibaseを導入していきます。
はじめに説明したゴールをもう少し詳細化すると「前回記事で立ち上げたCorda5基盤上にいる各仮想ノード（Alice,Bob,Charlie,Dave）に対してフロントエンドを用意して、ノード間でのサンプルチャットアプリ上で互いにチャットをやり取りする」までを今回、解説していきます。
※青文字が手順を示します。
前提
- 前回記事の構築手順に完了していること
- Docker DesktopおよびCorda5基盤、CorDappが稼働状態であること
- （
startCordaとvNodeSetupのタスクを実行できていればOKです） - Budibase公式ドキュメント：dockerによる導入がベースの手順を適宜ご参考ください。
- サンプルのフロントエンドは筆者が準備した以下の資材を使用します
手順１：構築済docker NWに参加する形でBudibaseをインストール
Corda基盤とBudibaseは両方同じ名前のdocker networkに参加している必要があります。
- ターミナル（プロンプト）を開き、以下のコマンドを実行
startCordaを実行すると、自動で「corda-cluster_default」というdocker networkが生成されているはずなので、そのNWに参加する形でbudibaseのコンテナをインストールdocker network psコマンドで確認可能- ボリュームマウントは任意のディレクトリを指定
docker run -d -t \
--name=budibase \
-p 10000:80 \
--network=corda-cluster_default \
-v <任意のディレクトリパス> \
--restart unless-stopped \
budibase/budibase:latest（🙋このコマンドだけでBudibaseが立ち上がります。嬉しい！！）
手順２：Budibase初期設定とサンプルアプリのインポート
- Webブラウザを開き、以下のポートにアクセス
- 管理者用のID, PWを設定（IDはメールアドレス指定ですが、架空のアドレスでOKです）
- 作成するフロントエンドのアプリ名を入力
- Apps > import appを開き、事前にダウンロードした DAppsのフロントエンドをノーコードで作ってみた - chatCordappSample20241208.tar.gz の資材を選択してインポート
手順３：フロントエンドのアカウントを作成する
各ユーザーがアプリにログインするための、フロントエンド用のアカウントを作成します。
- TOP画面 > Users > Add userボタン から、権限を
App userに設定したBudibaseアカウントを作成 - Generate passwardの方式を選択するとPWを自動発行されるので、メモ帳に控えておく。
- 上記画面で、各アカウントの氏名設定もできるので先に入力しておく
- TOP画面 > サンプルアプリ編集 > ヘッダー > Users 移動して、作成したアカウントに対して
Can use as App userの権限を付与 - Data > App Usersテーブルが以下内容になれば設定完了
手順４：アプリテーブルで仮想ノードとフロントアカウントを紐づける
先ほど作ったBudibaseアカウントとCordaの仮想ノードの情報を紐付けます。
- Data > Budibase DB > userInfoテーブルを準備しているので、
Accountカラムに先ほど作成したBudibaseアカウントを紐づける
- 前回記事でメモに控えておいた、shortHashを
ID_shortHashカラムに入力して完了
手順５：アプリを公開する
Aliceなどの他のBudibaseアカウントでアプリにアクセスできるように、アプリを公開します。
- TOP画面 > サンプルアプリ編集 > ヘッダー > Publish からPublishボタンを押します。
以上で、アプリ導入は完了です。
最後に、画面を触ってみよう！
- 別のブラウザを立ち上げて、以下URLにアクセス
- 作成したBudibaseアカウントのID,PWを入力
- ぜひ触ってみてください。
DEMO動画
こちらのテーブルでカラーコードを定義することで、ログインする人によって色を変えてます。
さいごに
今回、配布したサンプルアプリの実装については、公式Docを読みながら筆者が実装したものになります。ノーコードと言いつつ若干コード設定している箇所もあったり、少し足りなく感じる機能もありますが、ユーザーフレンドリーで使いやすいツールだと思いました。Budibase自体に興味があればサンプルアプリと公式Docの両輪でキャッチアップしていただければ幸いです。
