みなさんこんにちは、だいそんです。
今回はAirtableの紹介になります。
Googleスプレッドシート のような直感的な操作性で簡単にデータベースを作れるノーコードサービスです。
データベースというと一般的には「データベースサーバーを用意して、スキーマを定義して、サーバーサイドアプリケーションを作成して、SQLを叩いて…etc」と、まぁまず非エンジニアの方にとっては導入のハードルが高すぎて使いこなせるはずがありません。
Airtableはそこのハードルをグッと下げてくれ、非エンジニアの方でも比較的簡単に簡データベースが作れるようになっています。
ではさっそく触っていきましょう！
目次
何はともあれサインアップ
画面右上に Sign up for fee とあると思うのでそちらからサインアップをしてください。もちろん無料ですしクレジットカードなどの登録も不要なので1分で完了します。
Workspaceを作る
AirtableにはWorkspaceという概念があります。従来の「データベース」のような概念かと思います。そのWorkspaceの中に「テーブル」を複数作っていくイメージです。
初めての人向けにテンプレートも用意されています。下記画像の「Start with templates」の部分ですね。「Product roadmap」, 「Bug tracker」, 「Product launch」, 「User research」が選べます。テーブルやデータが既に入ったWorkspaceができるので気になる人は試してみると良いと思います。
今回は1から触ってみようと思うので「Start from scratch」の方から作っていきましょう。「Create Base」をクリックします。
するとこのような画面が表示されます。Workspace名はなんでも良いですが今回は「TODO」にすることにします。
テーブルを作っていく
デフォルトで既に一つ「Table1」というテーブルが作られていますね。
カラムも「Name」「Notes」「Attachments」「Status」が用意されています。
このテーブルをいじっていくでも良いですし新しく作るでも良いですが、いったんまずはこのテーブルに何かデータを追加していきましょう。
データを追加していく
セルの部分をクリックしてデータを登録していきましょう。
Name・・・山田太郎
Notes・・・山田です。
Attachment・・・何か適当に画像をアップロード
Status・・・TODO (TODOってなんだって感じですがチュートリアルなのでご容赦ください）画像もドラッグ&ドロップできて便利ですね。
Statusはセレクトボックスのようにあらかじめ用意された選択肢の中から選ぶ形になります。
このようにフリーテキストではない項目も用意できるのは嬉しいですね。
この時点でもうGoogle スプレッドシート を凌駕してるような気がします。単なるテキストだけではなく画像のアップロードや セレクトボックスがこれだけ簡単にできます。
別のテーブルを作ってみる
せっかくなのでデフォルトで作られたテーブルだけではなく新しく自分でも作ってみましょう。
画面左上の「Add table」を押します。
テーブル名は「Task」にしましょうか。
カラム名もカスタマイズしていきます。既存のカラムはそのままで、新しく追加していきましょう。カラム名の右端に「+」マークがあるのでそこから追加できます。
まずはフィールドのタイプを選択する必要があります。
いくつかメジャーどころを紹介しておきます。
Link to another record ・・・ 他のテーブルのデータと関連づけができる
Single line text ・・・ 一行テキスト
Long text ・・・ 長文のテキスト
Attachment ・・・ 画像などのファイル。複数選択も可能。
Checkbox ・・・ チェックボックス 。おそらく「広告メールの受信を許可する」などの項目などに使えそう
Multiple select ・・・ 複数選択できる項目。
Single select ・・・ 一つだけ選択できる項目。
Date ・・・ 日付
Created time ・・・ データが作成された日時が自動的に入る
Last modified time ・・・ データが最後に更新された日時が自動的に入る
Created by ・・・ データを作成したユーザーの情報が入る。Airtableのアカウントの情報ですね。ちなみにパブリック公開したフォーム経由でデータを登録すると匿名を表すAnanymousになったりします。詳しくは公式を参照してください。
https://support.airtable.com/hc/en-us/categories/360003084953-Fields
今回は「Multiple select」「Single select」「Date」「Link to another record」を使ってみます。
Multiple select
まずは「Multiple select」フィールドを作っていきましょう。フィールド名は任意項目なので入力してもしなくてもOKです。今回は何も入力せずに進めていきます。
この項目はあらかじめ選択肢を用意する必要があるので「Add an option」から適当に3つほど選択肢を追加しておきます。「aaa」, 「bbb」, 「ccc」を追加しました。
Single select
次に「Single select」フィールドを作っていきます。
この項目もあらかじめ選択肢を用意する必要があるので、「zzz」, 「yyy」, 「xxx」を作っておきましょう。
Date
次は日付の入力フィールドである「Date」です。
フォーマットを選んで保存してください。
Link to another record
この項目は他のテーブルと関連づける際に使うフィールドになります。
先ほど作ったTable1を選択しましょう。
そしてCreate fieldをします。
そうすると次に「Table1テーブルのどの項目を参照するか」を選ばされます。
今回「山田太郎」などの名前を画面上に表示できるとわかりやすいと思うので「Name」を選択しましょう。
これでテーブルの定義は完了です。
直接セルをいじってデータを入れてみてください。直感的に操作できますよね。
View
最後にViewについても紹介します。
今見ているExcelのような画面は「Grid view」と言われるものです。Airtableにはの他にもたくさんの表示形式が用意されています。
今回は「Form」について少し触れておきます。
画面左下の「Form」をクリックしてください。そうすると今までは「Grid view」しかなかったところに「Form」が追加されているはずです。（画面左上）
Formをクリックしてみるとこのようにフォーム形式で表示されます。どうでしょうか非常に直感的ですね。
「Link to another record」フィールドに関しては自動で追加されないようなので画面左側の「Table 1」をクリックしてフォームに追加しておきましょう。
このフォームは実はそのまま外部公開することもできて、そこからデータを登録することも可能になっています。
画面上部に「Share form」という箇所があるのでそちらをクリックしましょう。
そこから「Preview」を押すと実際にフォームが表示されます。
こんな形で一般的なフォームができてます。
諸々入力して「Submit」すると…
しっかりGrid viewのところに反映されてますね！！！
まとめ
触りだけとはいえ、非常に簡単にデータベースが作れましたね。
Googleスプレッドシート でも似たようなことはできるとは思いますが、Google App Scriptを駆使したりする必要があります。一方でAirtableの場合は今のところ一行もコードは書いていません。
さらにさらにAPIもしっかりと用意されているので少しプログラムをかじったことがある人であればそのAPIを叩いてデータを取得したりデータの作成ができたりします。
最近私はNext.jsというフロントエンド技術のキャッチアップをしているのですが、このAirtableと組み合わせればそれなりに本格的なアプリケーションが作れそうでわくわくしています！
ぜひみなさんもAirtableを触ってみてください！では！