teableを使ってみた

# teable is 何❓️
![Teable-Postgres-Airtable-Fusion-11-26-2024_12_57_PM.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/14268/6c4d19a5-2603-818b-67b1-0f6de5897c1f.png)

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

https://github.com/teableio/teable?tab=readme-ov-file

>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](https://railway.app/) などの PaaS（Platform as a Service）へもすぐにデプロイできるようになってます。

- [About | Teable Help](https://help.teable.io/)
- [Templates - Teable](https://template.teable.io/)
- [デモ(100万行データあり)](https://app.teable.io/share/shrVgdLiOvNQABtW0yX/view)

## ローカルで試す
[Docker composeでも起動できる](https://help.teable.io/deployment/docker-compose#docker-compose)とのことだったので、そちらで動かしてみました。
EE(Enterprise Edition) と CE(Community Edition) があり、最初は戸惑いましたが CEを利用するべきとドキュメントを見て理解し、そちらで試してます。
RedisなしとRedisありで推奨は後者です。

### docker-compose.yml

```yaml: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

```bash:.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}
```

### 実行
```bash
$ docker-compose pull

$ docker-compose up -d
```


## ログイン画面
![スクリーンショット 2024-11-26 16.14.08.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/14268/e4f7f1e0-14a0-619e-fa25-b7ce30dc8541.png)

## ユーザ登録するには画面右上のタブを「登録」に切り替えて登録で可能
![スクリーンショット 2024-11-26 16.14.20.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/14268/ff060e35-3e0a-3330-d5fc-7adeee97f7f9.png)

## ログイン後の画面
### 使い方をチュートリアルしてくれます。スペース👉️ベース👉️テーブルの構成みたいですね :eyes:
![すべてのスペース-11-26-2024_04_15_PM.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/14268/22a82942-d81e-8fc1-602c-6af0d8d296b1.png)

![スクリーンショット 2024-11-26 16.15.46.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/14268/0575d644-67b4-4ae6-0f77-d3b0d0e9a95f.png)
![スクリーンショット 2024-11-26 16.16.48.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/14268/03ffb693-7ca3-5574-5e63-303147d46ac7.png)

## テーブルを作成してみましょう
### 今回は「空のテーブルを作成する」を選択しました。
![スクリーンショット 2024-11-26 16.17.00.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/14268/0720a457-adbc-efdf-c499-e957cdb7c989.png)

### 空のデータベースが作成され、ビューの使い方やフィルターなどの機能説明をチュートリアルされ、APIも使えるそうですがスルー
![スクリーンショット 2024-11-26 16.17.17.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/14268/cef50ae3-e993-2210-66e2-7b7f0f08b5b9.png)
![スクリーンショット 2024-11-26 16.17.24.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/14268/2879a037-21db-3448-880e-60d349658327.png)
![スクリーンショット 2024-11-26 16.17.29.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/14268/45b0c41a-49f4-0b76-1f4b-97f38c4a3b7a.png)
![スクリーンショット 2024-11-26 16.17.35.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/14268/5f5cab50-25d1-4037-7592-a45926e76430.png)
![スクリーンショット 2024-11-26 16.17.43.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/14268/c648d807-4bef-3105-489e-0df7e9804581.png)

### 作成されたテーブルへデータを入力
#### 下記の構造のテーブルができました。
- **ラベル：テキスト**
- **番号：数値(number)**
- **ステータス：単一プルダウン(Todo,進行中,完了)**

![スクリーンショット 2024-11-26 16.18.16.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/14268/b3573867-416d-dc57-6a9f-a73c1f8a34ec.png)
![スクリーンショット 2024-11-26 16.18.45.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/14268/0e91900a-e7c4-6ef9-041b-06914abf1342.png)
![スクリーンショット 2024-11-26 16.18.50.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/14268/1b80d130-9231-d175-47ec-cf4d3bd7d8ba.png)
![スクリーンショット 2024-11-26 16.18.55.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/14268/1b5d8eec-5b12-03f0-e260-052cae9ae40c.png)
![スクリーンショット 2024-11-26 16.19.08.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/14268/b903ab1e-5145-f082-06f9-26aae2db4d97.png)

### テーブルへフィールドを追加も可能（日時や式、チェックボックスや添付ファイルなどいろいろあり便利そう❗️🤔）
![スクリーンショット 2024-11-26 16.27.58.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/14268/56225008-b136-643c-08fe-00b5302050bb.png)

### 実行日を日時で追加してみました。
![スクリーンショット 2024-11-26 17.35.57.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/14268/d73a4138-0987-2f60-9e5e-889b6e656bc8.png)

### ギャラリービューで表示したり、、、、
![スクリーンショット 2024-11-26 17.36.35.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/14268/287ffc93-5055-4a5e-f288-7c2eeecbbdf4.png)

### カンバンビューや・・・
![スクリーンショット 2024-11-26 17.36.51.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/14268/af9196c9-a9ec-ae85-cc13-5e3583bf35ab.png)

### テーブルへデータ登録を自動でやるフォームを作成する機能もありました❗️😲
![スクリーンショット 2024-11-26 17.38.08.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/14268/94c595dc-8eed-42e3-d1cd-5b953ab2939d.png)
![スクリーンショット 2024-11-26 17.39.37.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/14268/2e5f10ef-1b10-518c-bfc6-8defe71a0708.png)
![スクリーンショット 2024-11-26 17.42.17.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/14268/95b979cc-8afe-7f2c-942a-68caf5f37d16.png)
![スクリーンショット 2024-11-26 17.42.34.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/14268/49f0c560-3236-3374-9619-dac7b0006840.png)

### テーブルのレコードの履歴も確認できます❗️
![スクリーンショット 2024-11-26 17.40.58.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/14268/971e99d1-b462-5628-9ea5-dc0f6785aa52.png)

### その他機能（Automation、権限マトリクスはComing Soonでした💦残念）
![スクリーンショット 2024-11-26 17.44.58.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/14268/7e080b87-1b28-7d55-ce08-e156aaf90d35.png)
![スクリーンショット 2024-11-26 17.45.05.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/14268/f90e7696-7fb5-9ab4-74b5-500b28debc35.png)

### ここで気づいたんですが、UIがNext.jsっぽいなーと思い、Wappalyzerで見てみると、当たってました❗️🙌
![スクリーンショット 2024-11-26 17.49.27.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/14268/1ce36288-bd5a-3052-7dba-cb15373e6df3.png)

### 設定画面においてはテーブル名の変更やフィールドの変更などが画面から可能でした（直接DBを更新できてしまうので、本番環境とかで触ってしまうと危険そうｗ）
![localhost-3000-base-bseGtlgnA1uTmRSxBup-tbllLSqNdmJXyOWG3yh-design-11-26-2024_08_30_PM.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/14268/38bb0370-2e90-ee2e-6052-30bfa7d6c231.png)

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