BlogRELATIONS株式会社の開発ブログです。BoltでTODOアプリを作ってみましたSlackこんにちは。最近RELATIONSにジョインしました鍋山です。RELATIONSではSlackを連絡手段として使っていて、エンジニアや大多数を占める非エンジニア全員で活発にやりとりしてます。僕自身がSlackに入門して1ヶ月ほど経ちましたので、どんなことができるのかを試してみる目的でとりあえずTODOアプリを作ってみました。tabというBeta版(2019/11/11時点)でリリースされた、Slack上で表示できるWEBアプリライクな機能です。実際に便利なものだと思っているのですが、Beta版なので今後どうなるかはわかりません。tabとは従来はアプリのアカウントを選択すると、DMができるようになっていました。同じページで「ホーム」タブが追加されるようになります。Homeの設定をオンにする必要があります。Preview」を選択することができます。tab用のblockを構築していくことができます。BoltでTODOアプリを作ってみる今回はNode.jsでBoltというSlackのアプリを開発しやすくしたライブラリを使って開発してみました。Boltについては公式ドキュメント(https://slack.dev/bolt/ja-jp/tutorial/getting-started)を参考にしています。完成したアプリの動作はこちらのようになりました。完成後のコードはこちらになります。github.com今回はmacOSで開発しています。tabを使う為の設定Boltを使用する為なのか、botのscopeが必要となりますが、今回のTODOアプリでは対話は発生しません。今回の最低限の設定はこちらのようになりました。KitというのはSlackアプリのUIフレームワークとのことです。blockはSlackアプリを構築する際に機能する再利用可能なコンポーネントです。tabで表示するUIを作ると、実際のコードに埋め込む為のオブジェクトが生成されていますのでコピーして使用することができます。参考ページ:https://api.slack.com/tools/block-kit-builder?mode=appHomeサインインしないと見られない可能性がありますTODOアプリでは固定された部分と、動的に変化する一覧部分がありましたので二つに切り分けて作りました。固定されたblock部分。内容を仮とした動的に変化するblock部分。tabのviewを表示するここからは具体的なコードを示しますが、より全体を見たい方はGitHubのリポジトリ(https://github.com/relationslab/slack-home-todo)をご覧ください。本記事では要所要所のみ切り取って紹介させていただきます。tab内容を表示します。tab用のイベントのようです。tabを表示する際にviews.publishメソッドを使用していますが、更新する場合も同じようにviews.publishメソッドを使います。tab用のblockを作ったように、モーダル用のblockを作ります。Preview」に切り替えるようにする必要があります。tabから「TODOを作る」ボタンをクリックした際に、そのアクションを受け取り、モーダルを表示させます。tabのblockのaction_idにアクションIDを埋め込んでいます。「TODOを作る」のblockにはhome_todo_addというアクションIDを埋め込みましたので、そのアクションをキャッチする必要があります。tabのTODO一覧を更新します。モーダルの場合は、モーダルのblockに埋め込んだcallback_idをイベント名としてキャッチする必要があります。新規TODOの作成のモーダルにはmodal_todo_add_doneというcallback_idを埋め込みましたので、そのイベントをキャッチします。tabのTODO一覧を更新します。tabの「完了」のアクションIDにはhome_todo_completeを埋め込んでいますので、それをキャッチします。});完成!ワークスペース単位で管理するTODOアプリが完成しました!完成後のコードはこちらになります。github.com本記事に載せていないコードもありますので、実際に試してみたい方はGitHubのリポジトリを見てみてください。試してみた感想だいぶエンドユーザーに寄り添った機能だと思いました。tab機能が出てきました。これはすごいかも!試してみよう!と思ったことが今回のTODOアプリを作ったきっかけでした。Beta版としてのリリースということからかモバイルアプリでは使用できない機能ですが、まだ機能拡張があるのではないかと今後の様子を注視したいと思いました。こんにちは...2019-08-07Slackのリアクションに反応するアプリをGASで作ってみた話こんにちは。RELATIONS株式会社の大川です。SONI...2019-03-27Webエンジニアがスマホアプリをリリースするまでに学んだ32のコト(後編)こんにちは。RELATIONS株式会社の久原です。最近はAtomicDesig...2019-02-05Webエンジニアがスマホアプリをリリースするまでに学んだ32のコト(前編)こんにちは。RELATIONS株式会社の久原です。はてなブログProRELATIONS株式会社のエンジニアメンバーによる開発ブログです。reserved.スターをつけました引用をストックしましたストック一覧を見る閉じる引用するにはまずログインしてくださいログイン閉じる引用をストックできませんでした。再度お試しください閉じる限定公開記事のため引用できません。