クイックスタート

共通の設定

Vellにサインアップ後に、ダッシュボードに移動します。
アカウント タブを開き、Auth Keyの値をコピーし控えておきます。

ここではNode.jsの設定例をガイドします。

バージョン18.0以降を前提としています。

Node.js側の設定

ここでは最小構成の一例だけ記載します。

payloadの型はこちらを参照してください。sendを実行するとpayloadの内容でメールが送信されます。実際に試してみる場合、toは自分のメールアドレスに置き換えて実行してください。

const payload = {
    subject: "Cool Subject",
    body: "# Headline\n This is a **Markdown** text\n ![](https://picsum.photos/500/300)",
    to: [
            { email: "[email protected]" },
            { email: "[email protected]", name: "John Adams" },
        ]
    };

const KEY = /// 先ほどコピーしたAuth Key

const send = async () => {
    const headers = new Headers();
    headers.append("auth-key", KEY);

    const response = await fetch("https://vell-letter.com/api/send/v1",
    {
        method: "POST",
        body: JSON.stringify(payload),
        headers: headers
    })

}

ここではPostmanでの設定例をガイドします。

Postmanに移動し、ワークスペースを開きます。
下記の画像のインポートを開き、URLをペーストする欄に以下のURLをペーストします。
```
https://docs.vell-letter.com/openapi.yaml
```
Vell APIのエンドポイントやスキーマがインポートされます。変数のタブでapiKeyの値に先ほどコピーしたAuth Keyを入力します。
ボディにはスキーマが設定されているので、各フィールドを入力後に送信を押すと、下部のレスポンスに結果が表示されます。

ここではヘッドレスCMSのmicroCMSの設定例をガイドします。

microCMS側の設定

microCMSに移動しましょう。アカウントは作成済みとします。
サービス管理画面でサービスを追加します。1から作成するを選び、サービス名はemailとしましょう。後から変更できます。
APIを作成します。自分で決めるを選び、API名はメール、エンドポイントはemail、APIの型はリスト形式にしましょう。
APIスキーマを定義します。ひとまずsubjectとbodyとhtml_to_mdだけ定義して保存します。
カスタムフィールドを作成します。名前とIDはaddressにします。そしてemailとnameフィールドをそれぞれテキストフィールドで定義して保存します。レイアウトはどちらでもいいので、とりあえず1カラムにしましょう。
APIスキーマを設定する画面に戻り、toフィールドを作りましょう。種類は繰り返しにし、先ほど作ったaddressを選択します。そして変更を保存します。
ではメールを作成します。コンテンツの追加を選び、編集画面に移動します。まずはhtml_to_mdをオンにして、あとは自由に入力してください。 toのemailに入力したメールアドレスにメールが届きます。とりあえず自分のメールアドレスを入力して下書き保存を選択します。
API設定の画面に移動し、Webhookを選択します。追加を選び、種類はカスタム通知にしましょう。
POSTリクエストを送信するURLにhttps://vell-letter.com/api/push/v1/を入力します。その下のカスタムリクエストヘッダーにふたつのヘッダーを追加します。ひとつはKeyはauth-key、Valueは先ほどVell側で控えたAuth Keyを入力します。ふたつ目はKeyにcontent-path、Valueにはcontents.new.publishValueと入力します。これは送信されるリクエストボディ内でのコンテントの位置を表します。
最後に、先ほどの編集画面に戻り、公開を押します。入力したメールアドレス宛にメールが届けば成功です。到着までに長ければ数分かかる場合があります。

ここではヘッドレスCMSのNewtの設定例をガイドします。

Newt側の設定

Newtに移動しましょう。アカウントは作成済みとします。
スペースを追加します。スペース名とIDは自由につけてください。スペースを作成後に管理画面を開きます。
まずは「APPを追加」を選択します。そして「タイプを選択して追加」を選び、最後に「CMS App」を選んで「追加」を押します。
App名とApp UIDを入力します。両方ともemailにして作成しましょう。
モデルを作成します。モデル名とUIDはとりあえずschemaにして作成します。
ではフィールドを定義します。まず右上のテキストを選び、subjectを追加します。
次にマークダウンを選び、名前とIDをbodyにして追加します。
次にチェックボックスを選び、名前とIDをhtml_to_mdにして追加します。
次に右下のカスタムフィールドタイプの追加ボタンを押します。名前とIDはaddressにします。そしてemailとnameフィールドをそれぞれテキストで定義して保存します。
追加されたaddressを選び、toフィールドを作りましょう。このように設定して追加します。
右上の「保存」を押してここまでの操作を保存しましょう(これをしないと保存されないので) ではメールを作成します。左上の戻る矢印アイコンを押して、先ほどのemailApp画面に戻ります。投稿を追加を選び、編集画面に移動します。まずはhtml_to_mdをオンにして、あとは自由に入力してください。 toのemailに入力したメールアドレスにメールが届きます。とりあえず自分のメールアドレスを入力して保存を選択します。
スペース設定の画面に移動し、Webhookを選択します。Webhookを作成からスクラッチで作成を選びます。
名前は自由につけてください。次にPOSTリクエストを送信するURLにhttps://vell-letter.com/api/push/v1/を入力します。 通知対象のリソースは先ほど作ったemailのschemaを選びましょう。イベントは公開にします。その下のシークレットヘッダーにふたつのヘッダーを追加します。ひとつ目にKeyはauth-key、Valueは先ほどVell側で控えたAuth Keyを入力します。ふたつ目はKeyにcontent-path、Valueにはdataと入力します。これは送信されるリクエストボディ内でのコンテントの位置を表します。最後に、ペイロードには{"data": "{content}"}と入力して保存しましょう。
最後に、先ほどの編集画面に戻り、公開を押します。入力したメールアドレス宛にメールが届けば成功です。到着までに長ければ数分かかる場合があります。