コンテンツにスキップ
Vell docs

Preview Tutorial

Node.jsの場合、プレビュー画面を開くためのUIはユーザーが用意する必要があります。

ここでは、フロントにReactを使う想定でプレビューの設定例をガイドします。

Node.JS

const SEACRET_KEY = "SEACRET_KEY";


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 getDraft = async (request) => {
    const apiKey = request.headers.get("API-KEY");
    if(apiKey !== SEACRET_KEY){
        return new Response("error")
    }
    const url = new URL(request.url);
    const contentId = url.pathname.substring(url.pathname.lastIndexOf('/') + 1)
    const draft = /// contentIdを使ってデータベースから下書きを取得する。payloadと同じ型だとする
    return new Response(JSON.stringify(draft))
}
  1. まずはVellでプレビュー タブを開き、Add Newを押してCustomを選択します。
  2. 追加された項目を選択し、Headersに、キーがAPI-KEY、Valueが上記のSEACRET_KEYのヘッダーを追加します。Endpointに、上記のgetDraftを処理するためのエンドポイントを入力します。
  3. VellからNode.js側には以下のようなURLでアクセスし、下書きを取得します。
    https://your-service.com/<contentId>
    Endpointにはhttps://your-service.comの部分を入力してください。

React

const PREVIEW_ID = /// VellからコピーしたPreview ID


const contents = [
    { id: "123", subject: "Cool Subject"},
    { id: "456", subject: "Good Subject"},
    { id: "789", subject: "Super Subject"},
]


export default function Contents() {
    return contents.map((content) => {
        return <a href={`https://vell-letter.com/preview/${content.id}?previewId=${PREVIEW_ID}`}>
            <div>
                {content.subject}
            </div>
        </a>
    })
}
  1. Vellでプレビュー タブを開き、Node.jsを設定する項目を選択します。
  2. Preview IDの値をコピーし、上記のPREVIEW_IDにセットします。
  3. contentのリンクを開くとVellのプレビュー画面が立ち上がり、Node.js側にアクセスし下書きを取得後、画面に表示します。