Go to Qiita Advent Calendar 2024 Top
LoginSignup
16
19

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 1 year has passed since last update.

@dnpds-satou-hin株式会社DNPデジタルソリューションズ

オープンソースなローコードプラットフォーム

Last updated at Posted at 2022-09-13

社内でローコード／ノーコードに関するトピックが多くなってきまして、どんなツールを使用してそれを実現するのかといった場合、プロプライエタリまたは商用ライセンスのプラットフォームの名前があがっておりました。

なにからどう始めたらよいかわからない場合、初めの足がかりや、技術サポートなどを考えるとその選択肢も理解できます。

では、オープンソースでそれを実現する場合に、どんな選択肢があるのか？というところで気になったので試してみました。

OSSなローコードプラットフォーム

ローコードツールと表現しないようなものも含みますが、いろいろな系統がありますのでざっと紹介します。
基準としては、GitHubのスターが多いものや、ニュースで聞いたことがあるものを選びました。

  • Budibase https://github.com/Budibase/budibase ⭐13820

    内部ツールと言われる位置づけのツール。内部ツールとは、集客やコンシューマに向けた外向けの画面ではなく、内部だけで使うような管理ツール、ダッシュボード、CRUD画面の作成を目的としたツールを指します。既存のDBと接続可能なタイプ

  • convertigo https://www.convertigo.com/ ⭐139

    Eclipseをベースにした開発ツールでconvertigoサーバと通信しながら開発するスタイル。
    Eclipse Foundationに加盟というニュースを見て、触ってみましたがチュートリアルは完走しませんでした。

  • Appsmith https://github.com/appsmithorg/appsmith ⭐18934

    内部ツール系。既存のDBと接続可能なタイプ

  • ToolJet https://github.com/ToolJet/ToolJet ⭐11344

    内部ツール系。既存のDBと接続可能なタイプ

  • strapi https://github.com/strapi/strapi ⭐45768

    headless CMS系。ヘッドレスCMSとは、バックエンドの機能だけを持ち、見た目やUIを作るフロントエンドは持ちません。
    フロントエンドの自由度が高くなり、好きなやり方でフロントエンド開発に集中できます。

  • supabase https://github.com/supabase/supabase ⭐34598

    BaaS(Backend as a Service)系。 Google Firebaseの代わりを目的としたようなツール。こちらも見た目やUIを作るフロントエンドは持ちません。
    ユーザ管理、認証、CRUD API、ストレージなどの機能を提供します。
    まだパブリックベータ版の段階ですが人気の高さがうかがえます。

  • Hausa https://github.com/hasura/graphql-engine ⭐27222

    DBを統合したGraphQLサーバ。どの権限にたいしてどのテーブルの、どの列を更新/挿入許可するかなどを管理画面で定義してGraphQL APIを作成できます。
    見た目やUIを作るフロントエンドは持ちません。フロントエンドにGraphQLを利用した開発が可能なチームであれば、これほどラクなことはないでしょう。人気です。

上記のツールは、クラウドサービス化されているものもありますが、すべてローカル、オンプレなどでセルフホスティング可能なものとなります。

Webを作成してみる

試しにBudibaseで、外部APIとの連携を想定したニュースリーダーを作ってみます。
完成イメージとしては以下のような、スポーツとITという部分がタブで切り替えられるようなものです。

screencapture40.png

Budibaseを選んだ理由としては、Microsoft, Apple, LOUIS VUITTON, P&G, NFL, googleなどの利用実績がありそうだったので選びました。
BudibaseはBudibase Cloud(https://budibase.com/) を使用して作成するか、Docker、Kubernetes、などを使用してアプリをセルフホストできます。今回はdockerを使用します。
データベースはPostgreSQL、Rest API、MS SQL、MySQLなどのデータソースに接続することも、Budibaseの組み込みデータベース（CouchDBの上に構築されたBudibase DB）でゼロから始めることもできます。

環境

Windows 10のWSL(Ubuntu20.04)にインストールしたdockerで構築してみます。

$ docker -v
Docker version 20.10.14, build a224086
$ docker-compose -v
Docker Compose version v2.4.1

budibase CLI のインストール

Buidibaseはコマンドラインインターフェイスを使用してセットアップ用docker-composeファイルを作成したり、アプリを起動/停止できます。


$ mkdir budi-sample
$ cd budi-sample
$ wget https://github.com/Budibase/budibase/releases/latest/download/cli-linux
$ chmod +x cli-linux
$ mv cli-linux budi
$ ./budi help
Usage: budi [command]
…

初期設定

初期設定でポートなどを指定すると、docker-compose.ymlと.envファイルが作成されます。
※コマンドラインツールは外部通信が行われるため、proxy環境ではエラーとなるようでした。

$  ./budi hosting --init
? This will create multiple files in current directory, should continue? (Y/n) Y
? Please enter the port on which you want your installation to run:  10000
Configuration has been written successfully - please check .env file for more details.

作成されたdocker-compose.ymlは以下のようになります。
コピペして保存し、.envファイルで環境変数を設定することで、コマンドラインツールがなくても、docker-compose upで起動も可能です。

version: "3"

# optional ports are specified throughout for more advanced use cases.

services:
  app-service:
    restart: unless-stopped
    image: budibase.docker.scarf.sh/budibase/apps
    container_name: bbapps
    environment:
      SELF_HOSTED: 1
      COUCH_DB_URL: http://${COUCH_DB_USER}:${COUCH_DB_PASSWORD}@couchdb-service:5984
      WORKER_URL: http://worker-service:4003
      MINIO_URL: http://minio-service:9000
      MINIO_ACCESS_KEY: ${MINIO_ACCESS_KEY}
      MINIO_SECRET_KEY: ${MINIO_SECRET_KEY}
      INTERNAL_API_KEY: ${INTERNAL_API_KEY}
      BUDIBASE_ENVIRONMENT: ${BUDIBASE_ENVIRONMENT}
      PORT: 4002
      JWT_SECRET: ${JWT_SECRET}
      LOG_LEVEL: info
      SENTRY_DSN: https://a34ae347621946bf8acded18e5b7d4b8@o420233.ingest.sentry.io/5338131
      ENABLE_ANALYTICS: "true"
      REDIS_URL: redis-service:6379
      REDIS_PASSWORD: ${REDIS_PASSWORD}
    depends_on:
      - worker-service
      - redis-service

  worker-service:
    restart: unless-stopped
    image: budibase.docker.scarf.sh/budibase/worker
    container_name: bbworker
    environment:
      SELF_HOSTED: 1
      PORT: 4003
      CLUSTER_PORT: ${MAIN_PORT}
      JWT_SECRET: ${JWT_SECRET}
      MINIO_ACCESS_KEY: ${MINIO_ACCESS_KEY}
      MINIO_SECRET_KEY: ${MINIO_SECRET_KEY}
      MINIO_URL: http://minio-service:9000
      APPS_URL: http://app-service:4002
      COUCH_DB_USERNAME: ${COUCH_DB_USER}
      COUCH_DB_PASSWORD: ${COUCH_DB_PASSWORD}
      COUCH_DB_URL: http://${COUCH_DB_USER}:${COUCH_DB_PASSWORD}@couchdb-service:5984
      SENTRY_DSN: https://a34ae347621946bf8acded18e5b7d4b8@o420233.ingest.sentry.io/5338131
      INTERNAL_API_KEY: ${INTERNAL_API_KEY}
      REDIS_URL: redis-service:6379
      REDIS_PASSWORD: ${REDIS_PASSWORD}
    depends_on:
      - redis-service
      - minio-service
      - couch-init

  minio-service:
    restart: unless-stopped
    image: minio/minio
    volumes:
      - minio_data:/data
    environment:
      MINIO_ACCESS_KEY: ${MINIO_ACCESS_KEY}
      MINIO_SECRET_KEY: ${MINIO_SECRET_KEY}
      MINIO_BROWSER: "off"
    command: server /data
    healthcheck:
      test: ["CMD", "curl", "-f", "http://localhost:9000/minio/health/live"]
      interval: 30s
      timeout: 20s
      retries: 3

  proxy-service:
    restart: unless-stopped
    ports:
      - "${MAIN_PORT}:10000"
    container_name: bbproxy
    image: budibase/proxy
    depends_on:
      - minio-service
      - worker-service
      - app-service
      - couchdb-service

  couchdb-service:
    restart: unless-stopped
    image: ibmcom/couchdb3
    environment:
      - COUCHDB_PASSWORD=${COUCH_DB_PASSWORD}
      - COUCHDB_USER=${COUCH_DB_USER}
    volumes:
      - couchdb3_data:/opt/couchdb/data

  couch-init:
    image: curlimages/curl
    environment:
      PUT_CALL: "curl -u ${COUCH_DB_USER}:${COUCH_DB_PASSWORD} -X PUT couchdb-service:5984"
    depends_on:
      - couchdb-service
    command: ["sh","-c","sleep 10 && $${PUT_CALL}/_users && $${PUT_CALL}/_replicator; fg;"]

  redis-service:
    restart: unless-stopped
    image: redis
    command: redis-server --requirepass ${REDIS_PASSWORD}
    volumes:
      - redis_data:/data

  watchtower-service:
    restart: always
    image: containrrr/watchtower
    volumes:
      - /var/run/docker.sock:/var/run/docker.sock
    command: --debug --http-api-update bbapps bbworker bbproxy
    environment:
      - WATCHTOWER_HTTP_API=true
      - WATCHTOWER_HTTP_API_TOKEN=budibase
      - WATCHTOWER_CLEANUP=true
    labels:
      - "com.centurylinklabs.watchtower.enable=false"

volumes:
  couchdb3_data:
    driver: local
  minio_data:
    driver: local
  redis_data:
    driver: local

サーバ群の立ち上げ

$ ./budi hosting --start
…
Creating bbproxy                       ... done
Services started, please go to http://localhost:10000 for next steps.

サーバにサインイン

http://localhost:10000 を開きます。 メール認証はされないので適当なメールアドレスを設定します。

email : test@example.com
Password: test

localhost1.jpeg

ログインできました。
localhost2.jpeg

アプリテンプレートが充実しています。
screencapture2.png

アプリケーションの作成

青いボタンの "Start from scratch" から始めます。気合でスクラッチ。

screencapture3.png

適当な名前を付けます。

screencapture4.png!

データソースを選択します。"REST"を選択します。RSSフィードのXMLをREST APIと想定します。

screencapture5.png

データの作成

左上のBBアイコンをクリックし、いったんトップーページに戻ります。

screencapture7.png

Appsを選択し、アプリケーションの一覧から作成した"My RSS"を選びます。

screencapture8.png

"Edit"をクリックします。

screencapture9.png

アプリケーションの大まかなメニュー構成は、アプリケーションで利用するデータ(Data)、アプリケーションのページ(Design)、アプリケーションのアクション、バッチ処理など(Automate)があります。

screencapture10.png

データを設定します。RESTの設定画面から"Add Query"を選びます。

screencapture11.png

今回はデータとなるRSSフィードに本社であるDNPのフィードを使用してみます。
yahooなどいろいろなRSSがあるので探してみてください。

DNP 大日本印刷 ニュースリリース
http://www.dnp.co.jp/rss_cms/news_jp.xml

※RSSおよびRSSのリンク先に掲載している個々の文章、写真、その他一切の著作物の著作権は、DNPグループまたは原著作者その他の権利者に帰属します。

アドレスを入力し、"Send"ボタンをクリックして一度データが取得できるか確認します。
正常に取得できると、JSONタブに、XMLから変換されたJSONデータが表示されます。
※Proxy環境下のPCではエラーになる場合があるのでご注意ください。
screencapture12.png

データとしては、テーブルのように配列データとしたいので、Transformerタブで、取得したい部分の配列データに絞り込みます。

return data.channel.item

screencapture13.png

再度 "Send"ボタンを押すと一行分のデータが認識されました。

screencapture14.png

Schemaタブでも記事の各フィールドが認識されていることが確認できます。

screencapture15.png

適当な名前をつけて保存します。
screencapture17.png

同様に"Add Query"からDNPトピックスも登録します。

DNP 大日本印刷 トピックス
http://www.dnp.co.jp/rss_cms/topics_jp.xml

screencapture11.png

DNPトピックスも登録が完了したら、2つのデータが登録されていることを確認します。

screencapture18.png

これでデータの準備ができました。

画面の作成

画面は、designタブを選択して作成してきます。ツールバーからDataProviderを選択します。

screencapture19.png

DataProviderと、先ほど作成したRESTデータを紐づけます。

screencapture20.png

DataProviderの下に繰り返しとなるRepeaterを追加します。

screencapture21.png

Repeaterの下にCardを追加します。Cardは、タイトル、画像、サブタイトル、説明、リンクがセットになったようなコンポーネントです。

screencapture22.png

Cardのタイトルに、データのタイトルを紐づけます。

screencapture23.png

そのほかの項目SubTitleに記事の日時を紐づけます。

screencapture24.png

記事のページにリンクするボタンを追加します。

screencapture25.png

レイアウトを軽く調整します。

screencapture26.png

プレビューボタンで確認してみましょう。

screencapture27.png

ページの追加

ニュースページが作成できましたので、次にトピックページを追加します。
まずはメニューを追加するため、Layoutsを開き、Configure Linksをクリックします。

screencapture28.png

リンクを追加し、URLのパスを仮に/topicとして設定し保存します。

screencapture29.png

Screenタブに戻り、先ほど作成したニュースのスクリーンを複製します。

screencapture30.png

先ほど仮に設定したパスを入力しDuplicateをクリックします。

screencapture31.png

複製されたスクリーンの、DataProviderのデータを変更すると、下位のコンポーネントへもある程度自動的に反映されます。ついでに各コンポーネントの名称もそれっぽく変更します。

screencapture32.png

いったんプレビューしてみましょう。

screencapture33.png

※RSSおよびRSSのリンク先に掲載している個々の文章、写真、その他一切の著作物の著作権は、DNPグループまたは原著作者その他の権利者に帰属します。

デプロイ

動作に問題がないようであれば、右上のPublishボタンを押してデプロイします。

screencapture34.png

発行先のリンクを確認します。

screencapture35.png

ニュースリーダーが完成しました。

screencapture36.png

※RSSおよびRSSのリンク先に掲載している個々の文章、写真、その他一切の著作物の著作権は、DNPグループまたは原著作者その他の権利者に帰属します。

認証 / アクセス権限

作成したアプリケーションに外部や、別のブラウザでアクセスすると認証画面が表示されます。
これは、アプリケーションを作成したスクリーンや、データプロバイダが、認証付きの設定になっているためです。

認証を外すには、各データソースのAccessLevelをPublicに変更し、再デプロイします。

screencapture37.png

screencapture38.png

認証をそのままにアカウントを追加したい場合は、BudibaseのUsersメニューからユーザを追加します。

screencapture39.png

運用

実際の運用を想定すると、任意のドメインを設定したリバースプロキシ、またはロードバランサをフロントに構え http://localhost:10000/app/my-rss へつなぐように構成するなどが検討されます。
またスケーリングまで想定すると、Kubernetesによる構成での運用が必要になると思います。
詳細は公式ドキュメントが充実していますので、興味ある方はチェックしてみてください。

https://docs.budibase.com/docs

さいごに

商用/クラウドサービスのローコードプラットフォームもいろいろあるので、ツール選びには苦労するかと思いますが開発を始める場合のポイントとしては、

  • ある程度簡単に使えるか

    • UIがわかりづらい、設定が多いなどは、本末転倒

  • 要件をそのプラットフォームで満たすことができるか

    • ドキュメントをよく読み、機能や操作感を覚える
    • なるべく簡単なチュートリアルからはじめて、徐々にやれることを覚えていく
    • コーディングによって拡張することができる範囲を理解しておく

機会があれば他のツールなども試していきたいと思います。
こっちのほうが人気だよとかあれば教えてくれると嬉しいです。

16
19
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
Sign upLogin
16
19

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?