前途の通り、Airtableでのメディア管理・リッチコンテンツ作成・Markdownプレビューなど、長文コンテンツを作る上での機能が成熟するには時間がかかると思われる。これに関しては仕方がない。

しかし、妻から「Airtableだと長文が書きづらくて、esaで下書きしてる。Markdownはesaが一番良い。」と言われたもんで、それならばesaに書いた長文をAirtableで引っ張れれば解決じゃないかと考えた。

esaは記事を新規作成する度にユニークIDが number として生成される。

それをAirtable側に入力して引き当てる作戦。

まずは、gatsby-source-esa を入れる。モダンなフレームワークであるGatsbyとesaをつないだmottox2さん最高👏！！

• gatsby-source-esa - npm
• mottox2/gatsby-source-esa

アクセストークン発行して env に書いたり、NetlifyのBuild environment variables入れるなど、初期設定をやっておく。

Airtable側の入力データを変数にしてesaデータを呼ぶ必要があるため、gatsby-node.js の context に number を設定。

• gatsby - How do you pass variables to pageQuery - Stack Overflow

ページを作るテンプレートでesaの number を引き当てる。

export const query = graphql`
  query GetPage($slug: String!, $number: Int) {
    post: airtable(table: { eq: "posts" }, data: { slug: { eq: $slug } }) {
      data {
        title
        published
        slug
        number
      }
    }
    esa: esaPost(number: { eq: $number }) {
      number
      body {
        childMarkdownRemark {
          htmlAst
          excerpt(truncate: true)
        }
      }
    }
  }
`

これで、esaに書いたMarkdownを呼び出してコンテンツを生成できた。画像はesaにドラッグ&ドロップしたものがそのまま表示できる。

Airtable × esaに限らず、Gatsbyでは複数のソースを変数で照合して繋げられることが実証できた。色々と応用が効くだろう。

今回は、Airtableの弱い部分である長文作成をesaに委ねる目的で実装したけれど、本当は1つのコンテンツを複数のCMSに振り分けるのは心苦しい。とりあえず、Airtableが成長するまでの暫定策ということで。

やはり、入力箇所が複数のサービスに別れていることで、どこに何を書いたのか把握しづらくなってきた。そのため、連携を解除してAirtableのみで完結させる方法に戻り。

ただ、画像のMarkdown貼り付けに関しては、CopittaというChrome拡張を開発して効率化したため、以前よりは取り回しが楽になっている。