diff --git a/docs/_basic/ja_listening_modals.md b/docs/_basic/ja_listening_modals.md new file mode 100644 index 000000000..952b7a7d5 --- /dev/null +++ b/docs/_basic/ja_listening_modals.md @@ -0,0 +1,55 @@ +--- +title: モーダルビューでの送信のリスニング +lang: ja-jp +slug: view_submissions +order: 11 +--- + +
+モーダルビューのペイロードが入力のブロックを含む場合、その入力値を受け取るために view_submission のイベントをリスニングする必要があります。view_submission イベントをリスニングするためには、組み込みの view() メソッドを使用します。 + +view() メソッドは、文字列型または RegeExp型 の callback_id を必要とします。 + +input ブロックの値は state オブジェクトを参照することで取得できます。state 内には values というオブジェクトがあり、これは block_id と一意な action_id に紐づける形で入力値を保持しています。 + +より詳細な情報は API ドキュメントを参照してください。 +
+ +```javascript +// モーダルビューでのデータ送信イベントを処理します +app.view('view_b', async ({ ack, body, view, context }) => { + // モーダルビューでのデータ送信イベントを確認 + ack(); + + // 入力値を使ってやりたいことをここで実装 - ここでは DB に保存して送信内容の確認を送っている + + // block_id: block_1 という input ブロック内で action_id: input_a の場合の入力 + const val = view['state']['values']['block_1']['input_a']; + const user = body['user']['id']; + + // ユーザーに対して送信するメッセージ + let msg = ''; + // DB に保存 + const results = await db.set(user.input, val); + + if (results) { + // DB への保存が成功 + msg = 'Your submission was successful'; + } else { + msg = 'There was an error with your submission'; + } + + // ユーザーにメッセージを送信 + try { + app.client.chat.postMessage({ + token: context.botToken, + channel: user, + text: msg + }); + } + catch (error) { + console.error(error); + } + +}); +``` diff --git a/docs/_basic/ja_listening_responding_options.md b/docs/_basic/ja_listening_responding_options.md index ae7ac006b..c67c292a5 100644 --- a/docs/_basic/ja_listening_responding_options.md +++ b/docs/_basic/ja_listening_responding_options.md @@ -2,7 +2,7 @@ title: オプションのリスニングと応答 lang: ja-jp slug: options -order: 9 +order: 12 ---
@@ -10,7 +10,7 @@ order: 9 `external_select` メニューには `action_id` を使用することをお勧めしますが、ダイアログはまだ Block Kit をサポートしていないため、制約オブジェクトを用いて `callback_id` でフィルタリングする必要があります。 -オプションリクエストに応答するためには、適切なオプションを指定して `ack()` を実行する必要があります。[external_select の応答の例](https://api.slack.com/reference/messaging/block-elements#external-select)も[ダイアログ応答の例](https://api.slack.com/dialogs#dynamic_select_elements_external)も API サイトで参照できます +オプションリクエストに応答するためには、適切なオプションを指定して `ack()` を実行する必要があります。[external_select の応答の例](https://api.slack.com/reference/messaging/block-elements#external-select)も[ダイアログ応答の例](https://api.slack.com/dialogs#dynamic_select_elements_external)も API サイトで参照できます。
```javascript diff --git a/docs/_basic/ja_opening_modals.md b/docs/_basic/ja_opening_modals.md new file mode 100644 index 000000000..2dcc7ac91 --- /dev/null +++ b/docs/_basic/ja_opening_modals.md @@ -0,0 +1,79 @@ +--- +title: モーダルビューのオープン +lang: ja-jp +slug: creating-modals +order: 9 +--- + +
+ +モーダルビューは、ユーザー情報を収集したり、情報の動的な表示を実現するためのインタフェースです。モーダルビューは、適切な trigger_id と ビュー部分のペイロード を組み込みの API クライアントによる views.open メソッドの呼び出しに渡すことでオープンすることができます。 + +trigger_id はコマンド、ボタンの押下、メニューの選択などによって Request URL に送信されたペイロードの項目として入手することができます。 + +モーダルビューの作成についてのより詳細な情報は API ドキュメントを参照してください。 +
+ +```javascript +// コマンド起動をリッスン +app.command('/ticket', ({ ack, payload, context }) => { + // コマンドのリクエストを確認 + ack(); + + try { + const result = app.client.views.open({ + token: context.botToken, + type: 'modal', + // 適切な trigger_id を受け取ってから 3 秒以内に渡す + trigger_id: payload.trigger_id, + // view の値をペイロードに含む + view: { + // callback_id が view を特定するための識別子 + callback_id: 'view_1', + title: { + type: 'plain_text', + text: 'Modal title' + }, + blocks: [ + { + type: 'section', + text: { + type: 'mrkdwn', + text: 'Welcome to a modal with _blocks_' + }, + accessory: { + type: 'button', + text: { + type: 'plain_text', + text: 'Click me!' + }, + action_id: 'button_abc' + } + }, + { + type: 'input', + block_id: 'input_c', + label: { + type: 'plain_text', + text: 'What are your hopes and dreams?' + }, + element: { + type: 'plain_text_input', + action_id: 'dreamy_input', + multiline: true + } + } + ], + submit: { + type: 'plain_text', + text: 'Submit' + } + } + }); + console.log(result); + } + catch (error) { + console.error(error); + } +}); +``` \ No newline at end of file diff --git a/docs/_basic/ja_updating_pushing_modals.md b/docs/_basic/ja_updating_pushing_modals.md new file mode 100644 index 000000000..a0edfb35b --- /dev/null +++ b/docs/_basic/ja_updating_pushing_modals.md @@ -0,0 +1,62 @@ +--- +title: モーダルビューの更新と多重表示 +lang: ja-jp +slug: updating-pushing-views +order: 10 +--- + +
+モーダルビューの表示は、複数のビューをスタックとして保持する場合があります。`views.open` という API を呼び出すと、まずルートのモーダルビューが生成されます。その最初の呼び出しの後で、`views.update` によって動的にそのビューを書き換えたり、`views.push` で新しいビューをその上に積み重ねて表示したりといったことができます。 + +views.update
+モーダルビューを更新するには組み込みの API クライアントを使って views.update を呼び出します。この API 呼び出しにはそのビューをオープンしたときに生成された view_id と、書き換えられた blocks の配列を渡します。ユーザーが既存のビューの中にある要素とインタラクションを行なったことをきっかけにビューを更新する場合は、そのリクエストの body に view_id が含まれています。 + +views.push
+ビューのスタックに新しいビューを積み重ねるには、組み込みの API クライアントを使って views.push を呼び出します。この API 呼び出しには、適切な trigger_id と新しく生成する ビュー部分のペイロードを渡します。`views.push` の引数は ビューをオープンするときと同様です。最初のモーダルビューをオープンした後、その上にさらに二つまで追加のビューをスタックに積み重ねることができます。 + +より詳細な情報は API ドキュメントを参照してください。 +
+ +```javascript +// action_id: button_abc のボタンを押すイベントをリッスン +// （そのボタンはモーダルビューの中にあるという想定） +app.action('button_abc', ({ ack, body, context }) => { + // ボタンを押したイベントを確認 + ack(); + + try { + const result = app.client.views.update({ + token: context.botToken, + // リクエストに含まれる view_id を渡す + view_id: body.view.id, + // 更新された view の値をペイロードに含む + view: { + // callback_id が view を特定するための識別子 + callback_id: 'view_1', + title: { + type: 'plain_text', + text: 'Updated modal' + }, + blocks: [ + { + type: 'section', + text: { + type: 'plain_text', + text: 'You updated the modal!' + } + }, + { + type: 'image', + image_url: 'https://media.giphy.com/media/SVZGEcYt7brkFUyU90/giphy.gif', + alt_text: 'Yay! The modal was updated' + } + ] + } + }); + console.log(result); + } + catch (error) { + console.error(error); + } +}); +``` diff --git a/docs/_basic/updating_pushing_modals.md b/docs/_basic/updating_pushing_modals.md index 8404360dd..aca436c69 100644 --- a/docs/_basic/updating_pushing_modals.md +++ b/docs/_basic/updating_pushing_modals.md @@ -6,7 +6,7 @@ order: 10 ---
-Modals contain a stack of views. When you call `views.open`, you add the root view to the modal. After the initial call, you can dynamically update a view by calling `views.update`, or stack a new view on top of the root view by calling `views.push`. +Modals contain a stack of views. When you call `views.open`, you add the root view to the modal. After the initial call, you can dynamically update a view by calling `views.update`, or stack a new view on top of the root view by calling `views.push`. views.update
To update a view, you can use the built-in client to call views.update with the view_id that was generated when you opened the view, and the updated blocks array. If you're updating the view when a user interacts with an element inside of an existing view, the view_id will be available in the body of the request.