8
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

teable is 何❓️

Teable-Postgres-Airtable-Fusion-11-26-2024_12_57_PM.png

Airtableという、表計算ソフトとデータベースの機能を併せ持つ、クラウドベースのデータベースとして利用できるツールがありますが、
それのOSS版として開発されています。現在はまだβ版リリースのようですが、使いやすいのかなと思い、触ってみました。

Teable is a Super fast, Real-time, Professional, Developer friendly, No-code database built on Postgres. It uses a simple, spreadsheet-like interface to create complex enterprise-level database applications. Unlock efficient app development with no-code, free from the hurdles of data security and scalability.

Teableは、Postgres上に構築された超高速、リアルタイム、プロフェッショナル、開発者に優しいノーコードのデータベースです。シンプルなスプレッドシートのようなインターフェースを使用して、複雑な企業レベルのデータベースアプリケーションを作成します。データのセキュリティやスケーラビリティの障害から解放され、効率的なアプリ開発を実現します。

使ってみる

利用にあたりドキュメントサイトやサンプルとなるテンプレートなどもあり、使い始めるにあたっては障害もなさそうです。
Railway などの PaaS(Platform as a Service)へもすぐにデプロイできるようになってます。

ローカルで試す

Docker composeでも起動できるとのことだったので、そちらで動かしてみました。
EE(Enterprise Edition) と CE(Community Edition) があり、最初は戸惑いましたが CEを利用するべきとドキュメントを見て理解し、そちらで試してます。
RedisなしとRedisありで推奨は後者です。

docker-compose.yml

docker-compose.yml
version: '3.9'

services:
  teable:
    image: ghcr.io/teableio/teable:latest
    restart: always
    ports:
      - '3000:3000'
    volumes:
      - teable-data:/app/.assets:rw
    env_file:
      - .env
    environment:
      - NEXT_ENV_IMAGES_ALL_REMOTE=true
    networks:
      - teable
    depends_on:
      teable-db-migrate:
        condition: service_completed_successfully
      teable-cache:
        condition: service_healthy
    healthcheck:
      test: ['CMD', 'curl', '-f', 'http://localhost:3000/health']
      start_period: 5s
      interval: 5s
      timeout: 3s
      retries: 3

  teable-db:
    image: postgres:15.4
    restart: always
    ports:
      - '42345:5432'
    volumes:
      - teable-db:/var/lib/postgresql/data:rw
    environment:
      - POSTGRES_DB=${POSTGRES_DB}
      - POSTGRES_USER=${POSTGRES_USER}
      - POSTGRES_PASSWORD=${POSTGRES_PASSWORD}
    networks:
      - teable
    healthcheck:
      test: ['CMD-SHELL', "sh -c 'pg_isready -U ${POSTGRES_USER} -d ${POSTGRES_DB}'"]
      interval: 10s
      timeout: 3s
      retries: 3

  teable-db-migrate:
    image: ghcr.io/teableio/teable-db-migrate:latest
    environment:
      - PRISMA_DATABASE_URL=postgresql://${POSTGRES_USER}:${POSTGRES_PASSWORD}@${POSTGRES_HOST}:${POSTGRES_PORT}/${POSTGRES_DB}
    networks:
      - teable
    depends_on:
      teable-db:
        condition: service_healthy

  teable-cache:
    image: redis:7.2.4
    restart: always
    expose:
      - '6379'
    volumes:
      - teable-cache:/data:rw
    networks:
      - teable
    command: redis-server --appendonly yes --requirepass ${REDIS_PASSWORD}
    healthcheck:
      test: ['CMD', 'redis-cli', '--raw', 'incr', 'ping']
      interval: 10s
      timeout: 3s
      retries: 3

networks:
  teable:
    name: teable-network

volumes:
  teable-db: {}
  teable-data: {}
  teable-cache: {}

.env

.env
# replace the default password
POSTGRES_PASSWORD=replace_this_password
REDIS_PASSWORD=replace_this_password
SECRET_KEY=replace_this_secret_key

# replace the following with a publicly accessible address
PUBLIC_ORIGIN=http://127.0.0.1:3000

# ---------------------

# Postgres
POSTGRES_HOST=teable-db
POSTGRES_PORT=5432
POSTGRES_DB=teable
POSTGRES_USER=teable

# Redis
REDIS_HOST=teable-cache
REDIS_PORT=6379
REDIS_DB=0

# App
PRISMA_DATABASE_URL=postgresql://${POSTGRES_USER}:${POSTGRES_PASSWORD}@${POSTGRES_HOST}:${POSTGRES_PORT}/${POSTGRES_DB}
BACKEND_CACHE_PROVIDER=redis
BACKEND_CACHE_REDIS_URI=redis://default:${REDIS_PASSWORD}@${REDIS_HOST}:${REDIS_PORT}/${REDIS_DB}

実行

$ docker-compose pull

$ docker-compose up -d

ログイン画面

スクリーンショット 2024-11-26 16.14.08.png

ユーザ登録するには画面右上のタブを「登録」に切り替えて登録で可能

スクリーンショット 2024-11-26 16.14.20.png

ログイン後の画面

使い方をチュートリアルしてくれます。スペース👉️ベース👉️テーブルの構成みたいですね :eyes:

すべてのスペース-11-26-2024_04_15_PM.png

スクリーンショット 2024-11-26 16.15.46.png
スクリーンショット 2024-11-26 16.16.48.png

テーブルを作成してみましょう

今回は「空のテーブルを作成する」を選択しました。

スクリーンショット 2024-11-26 16.17.00.png

空のデータベースが作成され、ビューの使い方やフィルターなどの機能説明をチュートリアルされ、APIも使えるそうですがスルー

スクリーンショット 2024-11-26 16.17.17.png
スクリーンショット 2024-11-26 16.17.24.png
スクリーンショット 2024-11-26 16.17.29.png
スクリーンショット 2024-11-26 16.17.35.png
スクリーンショット 2024-11-26 16.17.43.png

作成されたテーブルへデータを入力

下記の構造のテーブルができました。

  • ラベル:テキスト
  • 番号:数値(number)
  • ステータス:単一プルダウン(Todo,進行中,完了)

スクリーンショット 2024-11-26 16.18.16.png
スクリーンショット 2024-11-26 16.18.45.png
スクリーンショット 2024-11-26 16.18.50.png
スクリーンショット 2024-11-26 16.18.55.png
スクリーンショット 2024-11-26 16.19.08.png

テーブルへフィールドを追加も可能(日時や式、チェックボックスや添付ファイルなどいろいろあり便利そう❗️🤔)

スクリーンショット 2024-11-26 16.27.58.png

実行日を日時で追加してみました。

スクリーンショット 2024-11-26 17.35.57.png

ギャラリービューで表示したり、、、、

スクリーンショット 2024-11-26 17.36.35.png

カンバンビューや・・・

スクリーンショット 2024-11-26 17.36.51.png

テーブルへデータ登録を自動でやるフォームを作成する機能もありました❗️😲

スクリーンショット 2024-11-26 17.38.08.png
スクリーンショット 2024-11-26 17.39.37.png
スクリーンショット 2024-11-26 17.42.17.png
スクリーンショット 2024-11-26 17.42.34.png

テーブルのレコードの履歴も確認できます❗️

スクリーンショット 2024-11-26 17.40.58.png

その他機能(Automation、権限マトリクスはComing Soonでした💦残念)

スクリーンショット 2024-11-26 17.44.58.png
スクリーンショット 2024-11-26 17.45.05.png

ここで気づいたんですが、UIがNext.jsっぽいなーと思い、Wappalyzerで見てみると、当たってました❗️🙌

スクリーンショット 2024-11-26 17.49.27.png

設定画面においてはテーブル名の変更やフィールドの変更などが画面から可能でした(直接DBを更新できてしまうので、本番環境とかで触ってしまうと危険そうw)

localhost-3000-base-bseGtlgnA1uTmRSxBup-tbllLSqNdmJXyOWG3yh-design-11-26-2024_08_30_PM.png

まとめ

  • Notionのデータベースを触ってるような感覚で、簡単に使えてべんりそう
  • CSVから取り込んでテーブルを作ることも可能なので、実際のアプリのDBに接続してCSV取り込みとかもできちゃうかも❓️
  • テーブルの変更履歴が勝手に取られてるのはあとから調査するのにも便利ですね❗️
  • Slack連携とか色々とツール連携できるともっと便利そうだなー・・・
8
0
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
8
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?