💬

Goで作るSlack Modal Applicationサンプルコード 2/4

26 min read

本記事は、著者のブログからの転載です

長くなったので、STEP別に4つの記事に分割しています

STEP2 お店情報のModalを送付

このSTEPでは、トリガーメッセージ内のボタンが押された際に飛んでくるリクエストを受けとって、対応するお店の注文Modalを送付します。

完成イメージはこんな感じ。

ざっくりとやることは、

  • リクエストの認証(自分のWorkspaceからのリクエストかどうか)
  • リクエストをStructにマッピング
  • リクエストタイプを判別して、適切なhandlerにDispatch
  • どのお店が選択されたかの情報取得
  • Modalを作成して送信

の5つです。リクエストの認証は、STEP1と同様なので、説明省きます。

先に述べた通り、STEP2〜4は、すべて同じURLにリクエストが送られてきます。今回は、途中でリクエストタイプを判別して、handlerを分岐させる作りとしてみました。

コアとなるhandlerのソースはこちら。(各関数の実装含めた完全版は、GitHub参照)

var(
    reqButtonPushedAction          = "buttonPushedAction"
	reqOrderModalSubmission        = "orderModalSubmission"
	reqConfirmationModalSubmission = "confirmationModalSubmission"
	reqUnknown                     = "unknown"
)

func handleInteractiveRequest(ctx context.Context, request events.APIGatewayProxyRequest) (events.APIGatewayProxyResponse, error) {
	// Verify the request.
	if err := verify(request, signingSecret); err != nil {
		log.Printf("[ERROR] Failed to verify request: %v", err)
		return events.APIGatewayProxyResponse{StatusCode: 200}, nil
	}

	// Parse the request
	payload, err := url.QueryUnescape(request.Body)
	if err != nil {
		log.Printf("[ERROR] Failed to unescape: %v", err)
		return events.APIGatewayProxyResponse{StatusCode: 200}, nil
	}
	payload = strings.Replace(payload, "payload=", "", 1)

	var message slack.InteractionCallback
	if err := json.Unmarshal([]byte(payload), &message); err != nil {
		log.Printf("[ERROR] Failed to unmarshal json: %v", err)
		return events.APIGatewayProxyResponse{StatusCode: 200}, nil
	}

	// Identify the request type and dispatch message to appropreate handlers.
	switch identifyRequestType(message) {
	case reqButtonPushedAction:
		res, err := handleButtonPushedRequest(message)
		if err != nil {
			log.Printf("[ERROR] Failed to handle button pushed action: %v", err)
			return events.APIGatewayProxyResponse{StatusCode: 200}, nil
		}
		return res, nil
	case reqOrderModalSubmission:
		res, err := handleOrderSubmissionRequest(message)
		if err != nil {
			log.Printf("[ERROR] Failed to handle order submission: %v", err)
			return events.APIGatewayProxyResponse{StatusCode: 200}, nil
		}
		return res, nil
	case reqConfirmationModalSubmission:
		res, err := handleConfirmationModalSubmissionRequest(message)
		if err != nil {
			log.Printf("[ERROR] Failed to handle confirmation modal submission: %v", err)
			return events.APIGatewayProxyResponse{StatusCode: 200}, nil
		}
		return res, nil
	default:
		log.Printf("[ERROR] unknown request type: %v", message.Type)
		return events.APIGatewayProxyResponse{StatusCode: 200}, nil
	}
}

// identifyRequestType returns the request type of a slack message.
func identifyRequestType(message slack.InteractionCallback) string {

	// Check if the request is button pushed message.
	if message.Type == slack.InteractionTypeBlockActions && message.View.Hash == "" {
		return reqButtonPushedAction
	}

	// Check if the request is order modal submission.
	if message.Type == slack.InteractionTypeViewSubmission && strings.Contains(message.View.CallbackID, reqOrderModalSubmission) {
		return reqOrderModalSubmission
	}

	// Check if the request is confirmation modal submission.
	if message.Type == slack.InteractionTypeViewSubmission && strings.Contains(message.View.CallbackID, reqConfirmationModalSubmission) {
		return reqConfirmationModalSubmission
	}

	return reqUnknown
}
func handleButtonPushedRequest(message slack.InteractionCallback) (events.APIGatewayProxyResponse, error) {
	// Get selected value
	shop := message.ActionCallback.BlockActions[0].Value

	switch shop {
	case "hamburger":
		// Create an order modal.
		// - apperance
		modal := createOrderModalBySDK()

		// - metadata : CallbackID
		modal.CallbackID = reqOrderModalSubmission

		// - metadata : ExternalID
		modal.ExternalID = message.User.ID + strconv.FormatInt(time.Now().UTC().UnixNano(), 10)

		// - metadata : PrivateMeta
		params := privateMeta{
			ChannelID: message.Channel.ID,
		}
		bytes, err := json.Marshal(params)
		if err != nil {
			return events.APIGatewayProxyResponse{StatusCode: 200}, fmt.Errorf("failed to marshal private metadata: %w", err)
		}
		modal.PrivateMetadata = string(bytes)

		// Send the view to slack
		api := slack.New(tokenBotUser)
		if _, err := api.OpenView(message.TriggerID, *modal); err != nil {
			return events.APIGatewayProxyResponse{StatusCode: 200}, fmt.Errorf("failed to open modal: %w", err)
		}

	case "sushi":
		// ...
	case "ramen":
		// ...
	}

	return events.APIGatewayProxyResponse{StatusCode: 200}, nil
}

では、ポイントです。

リクエストをStructにマッピング

slack-go/slackに、Interactive messageをマッピングできる構造体「InteractionCallback」が用意されているので、それを使います。
bodyの先頭に余分な「payload=」がついてしまってるので、トリムしてからUnmarshalしましょう。

// Parse the request
payload, err := url.QueryUnescape(request.Body)
if err != nil {
    log.Printf("[ERROR] Failed to unescape: %v", err)
    return events.APIGatewayProxyResponse{StatusCode: 200}, nil
}
payload = strings.Replace(payload, "payload=", "", 1)

var message slack.InteractionCallback
if err := json.Unmarshal([]byte(payload), &message); err != nil {
    log.Printf("[ERROR] Failed to unmarshal json: %v", err)
    return events.APIGatewayProxyResponse{StatusCode: 200}, nil
}

リクエストタイプを判別して、適切なhandlerにDispatch

つづいて、マッピングしたmessageの中身をみて、STEP2〜4のどのリクエストなのかを判別します。

// identifyRequestType returns the request type of a slack message.
func identifyRequestType(message slack.InteractionCallback) string {

    // Check if the request is button pushed message.
    if message.Type == slack.InteractionTypeBlockActions && message.View.Hash == "" {
        return reqButtonPushedAction
    }

    // Check if the request is order modal submission.
    if message.Type == slack.InteractionTypeViewSubmission && strings.Contains(message.View.CallbackID, reqOrderModalSubmission) {
        return reqOrderModalSubmission
    }

    // Check if the request is confirmation modal submission.
    if message.Type == slack.InteractionTypeViewSubmission && strings.Contains(message.View.CallbackID, reqConfirmationModalSubmission) {
        return reqConfirmationModalSubmission
    }

    return reqUnknown
}

この部分は、どんなModal、メッセージを実装したかに依存するため、適宜修正ください。

以下で判断できる、と覚えておくと便利です。

判別したい内容 判別方法
BlockAction(=ボタン押下やリスト選択)かModal Submissionか message.Typeの値
メッセージに紐づくBlockActionか、Modalに紐づくBlockActionか message.View.Hashが空か
どのModalからのリクエスト可 message.View.CallbackIDの値

どのお店が選択されたかの取得

ボタンが押された場合、Slackからは「block_action」タイプのリクエストが飛んできます(後述しますが、ModalのSubmissionを押した場合は、view_submissionで飛んできます)。

block_actionの場合は、actionCallbackに選択された値が格納されているので、以下のように取り出してください。

// Get selected value
shop := message.ActionCallback.BlockActions[0].Value

Modalを作成して送信

最後に、Modalを新規作成して送信します。
作り方は

  • SDKで部品を生成して組み合わせる
  • JSONを読み込む

の2通りです。

使い分けは、

  • 動的に項目を変える必要があれば、SDK
  • 決めうちの項目でよければ、JSON読み込み

がよいかなと。GUIツールのおかげで、ほぼコピペで作れるので、できるだけJSON読み込みに寄せるのがおすすめです。

サンプルコードでは、両方用意しています。

SDKでイチから生成版

// createOrderModalBySDK makes a modal view by using slack-go/slack
func createOrderModalBySDK() *slack.ModalViewRequest {
    // Text section
    shopText := slack.NewTextBlockObject("mrkdwn", ":hamburger: *Hey! Thank you for choosing us! We'll promise you to be full.*", false, false)
    shopTextSection := slack.NewSectionBlock(shopText, nil, nil)

    // Divider
    dividerBlock := slack.NewDividerBlock()

    // Input with radio buttons
	optHamburgerText := slack.NewTextBlockObject("plain_text", burgers["hamburger"] /*"Hamburger"*/, false, false)
	optHamburgerObj := slack.NewOptionBlockObject("hamburger", optHamburgerText)

	optCheeseText := slack.NewTextBlockObject("plain_text", burgers["cheese_burger"] /*"Cheese burger"*/, false, false)
	optCheeseObj := slack.NewOptionBlockObject("cheese_burger", optCheeseText)

	optBLTText := slack.NewTextBlockObject("plain_text", burgers["blt_burger"] /*"BLT burger"*/, false, false)
	optBLTObj := slack.NewOptionBlockObject("blt_burger", optBLTText)

	optBigText := slack.NewTextBlockObject("plain_text", burgers["big_burger"] /*"Big burger"*/, false, false)
	optBigObj := slack.NewOptionBlockObject("big_burger", optBigText)

	optKingText := slack.NewTextBlockObject("plain_text", burgers["king_burger"] /*"King burger"*/, false, false)
	optKingObj := slack.NewOptionBlockObject("king_burger", optKingText)

    menuElement := slack.NewRadioButtonsBlockElement("action_id_menu", optHamburgerObj, optCheeseObj, optBLTObj, optBigObj, optKingObj)

    menuLabel := slack.NewTextBlockObject("plain_text", "Which one you want to have?", false, false)
    menuInput := slack.NewInputBlock("block_id_menu", menuLabel, menuElement)

    // Input with static_select
    optWellDoneText := slack.NewTextBlockObject("plain_text", "well done", false, false)
    optWellDoneObj := slack.NewOptionBlockObject("well_done", optWellDoneText)

    optMediumText := slack.NewTextBlockObject("plain_text", "medium", false, false)
    optMediumObj := slack.NewOptionBlockObject("medium", optMediumText)

    optRareText := slack.NewTextBlockObject("plain_text", "rare", false, false)
    optRareObj := slack.NewOptionBlockObject("rare", optRareText)

    optBlueText := slack.NewTextBlockObject("plain_text", "blue", false, false)
    optBlueObj := slack.NewOptionBlockObject("blue", optBlueText)

    steakInputElement := slack.NewOptionsSelectBlockElement("static_select", nil, "action_id_steak", optWellDoneObj, optMediumObj, optRareObj, optBlueObj)

    steakLabel := slack.NewTextBlockObject("plain_text", "How do you like your steak?", false, false)
    steakInput := slack.NewInputBlock("block_id_steak", steakLabel, steakInputElement)

    // Input with plain_text_input
    noteText := slack.NewTextBlockObject("plain_text", "Anything else you want to tell us?", false, false)
    noteInputElement := slack.NewPlainTextInputBlockElement(nil, "action_id_note")
    noteInputElement.Multiline = true
    noteInput := slack.NewInputBlock("block_id_note", noteText, noteInputElement)
    noteInput.Optional = true

    // Blocks
    blocks := slack.Blocks{
        BlockSet: []slack.Block{
            shopTextSection,
            dividerBlock,
            menuInput,
            steakInput,
            noteInput,
        },
    }

    // ModalView
    modal := slack.ModalViewRequest{
        Type:   slack.ViewType("modal"),
        Title:  slack.NewTextBlockObject("plain_text", "Hungryman Hamburgers", false, false),
        Close:  slack.NewTextBlockObject("plain_text", "Cancel", false, false),
        Submit: slack.NewTextBlockObject("plain_text", "Submit", false, false),
        Blocks: blocks,
    }

    return &modal
}

JSON読み込み版

// createOrderModalByJSON makes a modal view by using JSON
func createOrderModalByJSON() (*slack.ModalViewRequest, error) {

	// modal JOSN
	j := `
{
	"type": "modal",
	"submit": {
		"type": "plain_text",
		"text": "Submit",
		"emoji": true
	},
	"close": {
		"type": "plain_text",
		"text": "Cancel",
		"emoji": true
	},
	"title": {
		"type": "plain_text",
		"text": "Hungryman Hamburgers",
		"emoji": true
	},
	"blocks": [
		{
			"type": "section",
			"text": {
				"type": "mrkdwn",
				"text": ":hamburger: *Hey! Thank you for choosing us! We'll promise you to be full.*"
			}
		},
		{
			"type": "divider"
		},
		{
			"type": "input",
			"block_id": "block_id_menu",
			"label": {
				"type": "plain_text",
				"text": "Which one you want to have?",
				"emoji": true
			},
			"element": {
				"type": "radio_buttons",
				"action_id": "action_id_menu",
				"options": [
					{
						"text": {
							"type": "plain_text",
							"text": "Hamburger",
							"emoji": true
						},
						"value": "hamburger"
					},
					{
						"text": {
							"type": "plain_text",
							"text": "Cheese Burger",
							"emoji": true
						},
						"value": "cheese_burger"
					},
					{
						"text": {
							"type": "plain_text",
							"text": "BLT Burger",
							"emoji": true
						},
						"value": "blt_burger"
					},
					{
						"text": {
							"type": "plain_text",
							"text": "Big Burger",
							"emoji": true
						},
						"value": "big_burger"
					},
					{
						"text": {
							"type": "plain_text",
							"text": "King Burger",
							"emoji": true
						},
						"value": "king_burger"
					}
				]
			}
		},
		{
			"type": "input",
			"block_id": "block_id_steak",
			"element": {
				"type": "static_select",
				"action_id": "action_id_steak",
				"placeholder": {
					"type": "plain_text",
					"text": "Select ...",
					"emoji": true
				},
				"options": [
					{
						"text": {
							"type": "plain_text",
							"text": "well done",
							"emoji": true
						},
						"value": "well_done"
					},
					{
						"text": {
							"type": "plain_text",
							"text": "medium",
							"emoji": true
						},
						"value": "medium"
					},
					{
						"text": {
							"type": "plain_text",
							"text": "rare",
							"emoji": true
						},
						"value": "rare"
					},
					{
						"text": {
							"type": "plain_text",
							"text": "blue",
							"emoji": true
						},
						"value": "blue"
					}
				]
			},
			"label": {
				"type": "plain_text",
				"text": "How do you like your steak? ",
				"emoji": true
			}
		},
		{
			"type": "input",
			"block_id": "block_id_note",
			"label": {
				"type": "plain_text",
				"text": "Anything else you want to tell us?",
				"emoji": true
			},
			"element": {
				"type": "plain_text_input",
				"action_id": "action_id_note",
				"multiline": true
			},
			"optional": true
		}
	]
}`

	var modal slack.ModalViewRequest
	if err := json.Unmarshal([]byte(j), &modal); err != nil {
		return nil, fmt.Errorf("failed to unmarshal json: %w", err)
	}

	return &modal, nil
}

さて、これで見た目は整いましたが、ここからさらにちょこっとカスタムします。
3つのメタデータ「CallbackID」「ExternalID」「PrivateMetadata」を追加しておきましょう

CallbackID

Modalの種類ごとの識別コードのイメージです。今回はリクエストタイプの判別に利用しています。

// - metadata : CallbackID
modal.CallbackID = reqOrderModalSubmission</code>

ExternalID

こちらは種類ごとではなくて、表示されたModal1つ1つの識別コードのイメージ。Workspace内で一意にしておく必要があります。

おすすめは、ユーザー名+タイムスタンプ。
これだと、よほどのことがない限り被らず安心です。

// - metadata : ExternalID
modal.ExternalID = message.User.ID + strconv.FormatInt(time.Now().UTC().UnixNano(), 10)

Private Metadata

任意の値をStringで保存しておける便利なフィールドです。

Modalの通信はすべてステートレスのため、なにか次の画面に引き継ぎたい情報がある場合は、このフィールドに保管しておくのがよいと思います。

Goで利用する場合は、専用のStructを定義して、marshalして渡しておくと、のちのち使い勝手がよくおすすめ。

// - metadata : PrivateMeta
params := privateMeta{
    ChannelID: message.Channel.ID,
}
bytes, err := json.Marshal(params)
if err != nil {
    return events.APIGatewayProxyResponse{StatusCode: 200}, fmt.Errorf("failed to marshal private metadata: %w", err)
}
modal.PrivateMetadata = string(bytes)

ここでは、メッセージが送信されたチャンネルのIDを保管しています。

しれっとやってますが、ここが結構大事なポイントで、どのチャンネルから送信されたメッセージを起点にやりとりがはじまったかは、一番初めに送られてきたメッセージにしかついていません。

なので、のちのち通知をしたい(=チャンネルIDが必要)場合は、チャンネルIDを忘れずにPrivate Metadataとして保管して、後続に渡してあげる必要があります。

ここまでできれば、あとは送るだけ。以下のコードで送信しましょう。

// Send the view to slack
api := slack.New(tokenBotUser)
if _, err := api.OpenView(message.TriggerID, *modal); err != nil {
    return events.APIGatewayProxyResponse{StatusCode: 200}, fmt.Errorf("failed to open modal: %w", err)
}

ここまでで、STEP2は終了です!

本記事は、著者のブログからの転載です

長くなったので、STEP別に4つの記事に分割しています

Discussion

ログインするとコメントできます