Single Select, Multiple Select の作成更新方法

選択肢に振られた id または選択肢の名前を指定する。

const record = {
    Single: { id: "recXXXXXX" },
    Multiple: [
        { name: "ごはん" },
        { name: "パン" },
    ],
}
const recordId = await table.createRecordAsync(record)

Attachment の作成更新方法

内容として URL を指定するしか方法がなさそう。

const record = {
    Attachments: [
        { url: "https://..." },
        { url: "https://..." },
    ],
}
const recordId = await table.createRecordAsync(record)

Extension からファイルをアップロードしたい場合、外部にアップロード用のサーバを用意し、そこで生成された URL を渡すことになる。<input type="file"> から読み取ったファイルをデータURIにして渡すとエラーになる。

Attachment の URL

How Airtable’s Blocks SDK Handles Attachment URLs | Airtable Support

レコードから取得した URL は使用する際に record.getAttachmentClientUrlFromCellValueUrl() で変換する必要がある。

開発と本番で別のベース、アカウントを使う

ベースの情報はプロジェクトディレクトリの .block/remote.json, アカウント情報は ~/.config/.airtableblocksrc.json に保存されている。

それぞれ適当なシェルスクリプト等で切り替えるようにする。

localStorage と sessionStorage

Extension は https://block---(random).alt.airtableblocks.com というオリジンで（開発時は https://devblock-...）実行される。

Chrome の場合、localStorage や sessionStorage を使用するためにはサードパーティの Cookie が有効になっている必要がある。

Single select, multiple select の選択肢を取得する

const base = useBase()
const table = base.getTableByName('テーブル名')
const choices = table.getFieldByName('カラム名').options.choices
// => [{ id: 'selXXXXXXXX', name: '選択肢1', color: 'blueLight2' }, ...]

外部リソースのCORS処理

前述の通り、次のオリジンからのアクセスを許可する。

• https://block---(random).alt.airtableblocks.com
• https://devblock---(random).alt.airtableblocks.com (開発時)

パーソナルアクセストークンの発行と使用

2023年1月にAPIキーの廃止が発表され、2024年2月1日に廃止された（2月20日までは使えていた）。今後はパーソナルアクセストークンを使用する。

発行

Personal Access Token を開き、新しいトークンを作成する。

• Name: Extensionのリリース用であることが分かりやすい名前
• Scopes: block:manage
• Access: Extensionをリリースしたいブロックを全て選択

使用

パーソナルアクセストークンはAPIキーのときと同じように block set-api-key TOKEN で設定できる。

このとき、Blocks-cliのバージョンは最新版（現在2.0.4）にしておく。v2.0.1では旧形式のキーにしか対応していないためエラーとなる。

OpenAPIを使ってAPIスキーマを作る

次のリポジトリをcloneし、Custom Extensionを作成する。

• TheF1rstPancake/AirtableOpenAPICustomBlock

そのままではBufferが定義されていないと実行時エラーになるので、index.js に次のように Buffer を定義してやる。

window.Buffer = function Buffer () {};

Extensionを実行したら、 ボタンをクリックするとスキーマをJSON形式で表示・コピーできる。

フィールド名のマッピング

テーブル名やフィールド名にASCII英数字以外を含むとOpenAPI Generatorがうまくコードを生成できない。そこでスキーマを次のように書き換える。

{
  "schemas": {
    "User": {
      "properties": {
        "name": { // ← “氏名” から変更
          "type": "string",
          "description": ""
        },

そして生成されたコードの attributeMap に元のカラム名を設定する (PHPの場合はそれで上手くいく)。

class User implements ModelInterface, ArrayAccess, \JsonSerializable
{
  protected static $attributeMap = [
    'name' => '氏名',
    ...
  ];
}

APIからは name, json_encode() などでシリアライズすると 氏名 のように取得できる。

$apiClient = new OpenAPI\Client\Api\UserApi($guzzle, $config);
$result = $apiClient->app12345678UserGet();
foreach ($result->getRecords() as $record) {
  $record->getFields()->getName();
}