webflow(ウェブフロー)でサイトをパブリッシュした際にChatworkに通知させる

2023-09-30

Webflow 応用編

webflowはノーコードツールとして有名ですが、開発者向けにAPIも公開されています。

WebflowAPIs

今回はwebflowAPIを使って、webflowでサイトをパブリッシュした際にChatworkに通知させるようにしたいと思います。

APIの実行環境はGAS(Google App Script)を使用します。

Apps Script

設定は以下の流れで行います。

ChatworkのAPIトークンとルームIDを取得
GASの設定、デプロイ
webflowでwebhookのURLを設定

1. ChatworkのAPIトークンとルームIDを取得

まずは、下記の公式の手順に沿ってAPIトークンを取得します。

APIトークンを発行する

次に下記の公式の手順に沿ってルームIDの取得をします。

ルームIDを確認する

APIトークンとルームIDは以降の手順で使うので、どこかに書き留めておいてください。

2. GASの設定、デプロイ

以下の流れでGASの設定を行っていきます。

プロジェクトの作成
コード貼り付け
スクリプトプロパティの設定
デプロイ

1. プロジェクトの作成

以下のリンクにアクセスして新しいプロジェクトを作成をクリックします。

Apps Script

2. コード貼り付け

コードの編集画面で下記のコードを貼り付けます。

最初からあるmyFunction()は不要なため削除してください。

const CHATWORK_BASE_ENDPOINT = 'https://api.chatwork.com/v2/rooms/';

function doPost(e) {
    try {
        // payloadの取得とバリデーション
        const payload = getValidatedPayload(e);
        const domains = formatDomains(payload.payload.domains);
        const displayName = payload.payload.publishedBy.displayName;
        
        // メッセージの送信
        sendNotificationToChatwork(domains, displayName);
    } catch (error) {
        Logger.log(error.message);
    }
}

function getValidatedPayload(e) {
    const payload = JSON.parse(e.postData.contents);
    if (!payload || !payload.payload || !payload.payload.domains || !payload.payload.publishedBy || !payload.payload.publishedBy.displayName) {
        throw new Error("Invalid payload format");
    }
    return payload;
}

function formatDomains(domains) {
    return domains.join('\n');
}

function sendNotificationToChatwork(domains, displayName) {
    const chatworkToken = PropertiesService.getScriptProperties().getProperty('CHATWORK_TOKEN');
    const chatworkRoomId = PropertiesService.getScriptProperties().getProperty('CHATWORK_ROOM_ID');
    
    if (!chatworkToken || !chatworkRoomId) {
        throw new Error("Chatwork token or room ID not found");
    }
    
    const endpoint = `${CHATWORK_BASE_ENDPOINT}${chatworkRoomId}/messages`;
    const message = `Webflowでサイトがパブリッシュされました！\nPublished by: ${displayName}\n${domains}`;
    
    const options = {
        'method': 'post',
        'headers': {
            'X-ChatWorkToken': chatworkToken
        },
        'payload': {
            'body': message
        }
    };

    const response = UrlFetchApp.fetch(endpoint, options);
    if (response.getResponseCode() !== 200) {
        throw new Error("Failed to send message to Chatwork");
    }
}

‍

保存ボタンをクリックしてプロジェクトを保存します。