LoginSignup
20
14

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 5 years have passed since last update.

@kane-hiro(博明 金子)in株式会社ピー・アール・オー【公式】

Slackアプリで勤怠アプリを作ってみる①

Last updated at Posted at 2019-12-24

はじめに

この記事は 株式会社ピーアールオー（あったらいいな！を作ります） Advent Calendar 2019 の23日目の記事です。
前回(Slackアプリのチュートリアルをやってみた)に続き、最終目標である勤怠アプリ作成のための練習として、ホーム画面とモーダルの表示をやっていこうと思います。

できたもの

モーダルとアプリホームで、勤怠登録・集計をでやれてるっぽく動くSlackアプリ。
キャプチャー3.gif

やってみよう！

それではやってみようと思います！
今回以下の内容を実施していこうと思います。

  • ホーム画面に勤怠登録用のボタンを作成
  • モーダルを表示して勤怠を登録(node-json-db)
  • 登録内容をホーム画面に表示
  • 集計結果をホーム画面に表示

最終的にはFirestoreに登録、AngularやReactなどのSPAで集計結果をパッと見えるような画面を作れればなーと思っています。
とりあえず今回は勤怠してるっぽく動くものを作ることを目標とします！

前提知識(使ったもの)(前回と同じ)

glitch
無料でNodeなどのウェブアプリを公開できるサービスを利用しました。
色々な方が記事を書いていると思いますので、以下などを参考にしてください。
ブラウザだけで完結するウェブアプリ作成環境 Glitch

モーダルのUIを作る

まずはモーダルUIを作成します！
SlackアプリはBlock Kit BuilderというUI作成ツールがあるので作るのは簡単です。
使い方はイジればわかると思うので省略します。
サイドバーで組み合わせたい要素を設定して、右側に表示されるJSONをコピペで完了です。

今回は以下で作成しようと思います。
※実際にはやりたいことができなかったので色々変更しました。できなかった理由は最後に書きます。

image.png

Block Kit Builder URL

モーダルを呼び出して表示させる

モーダルを呼び出して表示させます。
呼び出しに関してはチュートリアルと同じです。
Home画面に設定したボタンが押された際に発行される、「action_id:add_data」を条件にモーダルを表示させます。

ホーム画面ボタン要素部分
  let blocks = [
    {
      type: "section",
      text: {
        type: "mrkdwn",
        text: "*作業時間を登録!*"
      },
      accessory: {
        type: "button",
        action_id: "add_data",
        text: {
          type: "plain_text",
          text: "登録",
          emoji: true
        }
      }
    },
    {
      type: "divider"
    }
  ];
add_data検知部分
app.post('/slack/actions', async(req, res) => {
  const { token, trigger_id, user, actions, type, container, view } = JSON.parse(req.body.payload);

  // ホーム画面 追加ボタン押し時
  if(actions && actions[0].action_id.match(/add_data/)) {
    modal.openModal(trigger_id);
  } 
}

modal.openModal(trigger_id)部分でUI用のJSON生成とリクエストを投げていきます。
SlackAPI「/views.open」にUI用のJSONを投げることでモーダルが表示されます。

モーダル関連に関しては「/views.open」の他に、更新や追加などもあるようです。

  • views.open: モーダルの表示
  • views.update: モーダルの更新
  • views.push: モーダルの追加

詳細は以下を参考にしてください。
Slack API 参照：ペイロードの表示
Slack API 参照：Slackアプリでのモーダルの使用

modal.openModal
const openModal = async trigger_id => {
  const args = {
    token: process.env.SLACK_BOT_TOKEN,
    trigger_id: trigger_id,
    view: JSON.stringify(createForm())
  };

  const result = await axios.post(`${apiUrl}/views.open`, qs.stringify(args));
  // console.log(result.data.view.id);
};

createForm()でモーダルのUI用のJSONを作成しています。

Block Kit Builderで作成したJSONをベースに作成していますが、日付の設定やオプションの値など別処理で整形しているので、細切れにして繋いでいます。
個人的なポイントとしては、block_idとaction_id部分です。
どちらもBlock Kid Builderでは項目自体生成されません。

ですが、モーダルをSubmitした際に設定した値を取得するためのパスとして利用することになると思うので、必要だと思います。

ソース(BlockKitBuilderで作ったJSONを少し加工しているのみ&長いため折りたたみ)
createForm()
const createForm = () => {
  let now = new Date();

  // タイプとタイトル
  var base = {
    type: "modal",
    title: {
      type: "plain_text",
      text: "Create a stickie note"
    },
    submit: {
      type: "plain_text",
      text: "Create"
    },
    blocks: []
  };

  // 報告日付部分
  base.blocks.push(
    {
      type: "input",
      block_id: "projDate",

      element: {
        type: "datepicker",
        action_id: "content",
        initial_date: now.toFormat("YYYY-MM-DD"),
        placeholder: {
          type: "plain_text",
          text: "Select a date",
          emoji: true
        }
      },
      label: {
        type: "plain_text",
        text: "報告日時",
        emoji: true
      }
    },
    {
      type: "divider"
    }
  );

  // 案件設定部分
  base.blocks.push(
    // 案件設定部分
    {
      type: "input",
      block_id: "projId",
      label: {
        type: "plain_text",
        text: "案件設定",
        emoji: true
      },
      element: {
        type: "static_select",
        action_id: "content",
        placeholder: {
          type: "plain_text",
          text: "Select an item",
          emoji: true
        },
        options: createProjOption()
      }
    },
    
    // 作業時間部分
    {
      type: "input",
      block_id: "projTime",
      label: {
        type: "plain_text",
        text: "作業時間",
        emoji: true
      },
      element: {
        type: "static_select",
        action_id: "content",
        placeholder: {
          type: "plain_text",
          text: "Select an item",
          emoji: true
        },
        options: createProjTime()
      }
    },

    // 作業内容部分
    {
      type: "input",
      block_id: "projText",
      label: {
        type: "plain_text",
        text: "作業内容",
        emoji: true
      },
      element: {
        type: "plain_text_input",
        action_id: "content",
        multiline: true
      },
      optional: true
    }
  );

  // その他部分
  base.blocks.push(
    {
      type: "input",
      block_id: "otherText",
      label: {
        type: "plain_text",
        text: "その他",
        emoji: true
      },
      element: {
        type: "plain_text_input",
        action_id: "content",
        multiline: true
      },
      optional: true
    }
  );

  return base;
};

少し動かしてみる

少し動かしてみます。
以下のようにモーダルが表示されます。

image.png

要素ごとに必須バリデーションなどの設定ができるようなので便利です！
image.png

Submitボタンを押してDBに保存する

次にSubmitボタン押し後の作成です。
前半部分は先ほどの追加ボタン押し時のソース。「view_submission」以降が登録時のソースです。
だいたいチュートリアルのソースと一緒です。

モーダルSubmit時「view_submission」タイプ送られてくるので判定します。
ペイロードにモーダルに設定された値が入っているので、取得します。

参照先のパスですが、私は「view.state.values」をconsole出力してちまちま探しました。

SlackAPI 参照：相互作用ペイロード
SlackAPI 参照：イベントペイロードの表示

app.post('/slack/actions', async(req, res) => {
  // console.log(JSON.parse(req.body.payload));

  const { token, trigger_id, user, actions, type, container, view } = JSON.parse(req.body.payload);

  // ホーム画面 追加ボタン押し時
  if(actions && actions[0].action_id.match(/add_data/)) {
    modal.openModal(trigger_id);
  } 
  
  else if(type === 'view_submission') {

    const ts = new Date();
    const { user, view } = JSON.parse(req.body.payload);
    
    // db登録用
    const data = {
      timestamp: ts.toLocaleString(),
      user : user.name,
      projDate : view.state.values.projDate.content.selected_date,
      projId : view.state.values.projId.content.selected_option.text.text,
      projTime : view.state.values.projTime.content.selected_option.text.text,
      projText : view.state.values.projText.content.value !== undefined ? view.state.values.projText.content.value:"",
      otherText : view.state.values.otherText.content.value !== undefined ? view.state.values.otherText.content.value :""

    }
    
    appHome.displayHome(user.id, data);
  }
});

先ほど整形したデータをdbに登録。
updateView(ホーム画面UI整形処理(DB値で表示内容変化))でホーム画面UIを作成し、ホーム画面を更新するよう(/views.publish)にリクエストを投げます。
SlackAPI views.publish

const displayHome = async (user, data) => {
  if (data) {
    // Store in a local DB
    db.push(`/data[]`, data, true);
  }

  const args = {
    token: process.env.SLACK_BOT_TOKEN,
    user_id: user,
    view: await updateView(user)
  };

  const result = await axios.post(
    `${apiUrl}/views.publish`,
    qs.stringify(args)
  );

  try {
    if (result.data.error) {
      console.log(result.data.error);
    }
  } catch (e) {
    console.log(e);
  }
};

ホーム画面の作成

ホーム画面を作成していきます。
前述の「updateView(ホーム画面UI整形処理(DB値で表示内容変化))」部分です。

内容としては、画面表示用のUIをDBの値を参照して、表示する内容を制御しているのみになります。
特に新しいことは無いので省略します。

ソース(長いので折りたたみ)
ホーム画面表示
const updateView = async user => {
  // Intro message -

  let blocks = [
    {
      type: "section",
      text: {
        type: "mrkdwn",
        text: "*作業時間を登録!*"
      },
      accessory: {
        type: "button",
        action_id: "add_data",
        text: {
          type: "plain_text",
          text: "登録",
          emoji: true
        }
      }
    },
    {
      type: "divider"
    }
  ];

  let newData = [];

  try {
    const rawData = db.getData(`/data/`);
    newData = rawData.slice().reverse();
  } catch (error) {
    //console.error(error);
  }

  var cnt = 0;

  var sumMap = new Map();
  let noteBlocks = [];

  if (newData) {
    for (const data of newData) {
      // 集計
      if (!sumMap.has(data.projId)) sumMap.set(data.projId, 0);
      sumMap.set(data.projId, sumMap.get(data.projId) + Number(data.projTime));

      // 表示件数を超過した場合はブロック表示しない
      if (cnt++ <= max) {
        // 登録履歴テキスト作成
        var text = "*" + data.projId + "* ";
        text += data.projTime + "h \n ";
        text += "作業内容: \n ";
        text += data.projText ? data.projText + "\n " : "";
        text += "その他: \n ";
        text += data.otherText ? data.otherText + "\n " : "";
        text += data.timestamp + " " + data.user;

        const note = [
          {
            type: "context",
            elements: [
              {
                type: "mrkdwn",
                text: text
              }
            ]
          },
          {
            type: "divider"
          }
        ];

        noteBlocks = noteBlocks.concat(note);
      }
    }
  }

  // 集計
  var sumText = "*集計結果* \n";
  var first = true;
  sumMap.forEach(function(value, key) {
    if (first) {
      first = false;
    } else {
      sumText += "\n";
    }
    sumText += "*" + key + "* : " + value + "h";
  });

  // 集計ブロック作成
  let sumBlocks = [
    {
      type: "context",
      elements: [
        {
          type: "mrkdwn",
          text: sumText
        }
      ]
    },
    {
      type: "divider"
    }
  ];

  // 集計、直近の登録順に設定
  blocks = blocks.concat(sumBlocks, noteBlocks);

  let view = {
    type: "home",
    title: {
      type: "plain_text",
      text: "regist data"
    },
    blocks: blocks
  };

  return JSON.stringify(view);
};

完成

ということで動かしていきます！

キャプチャー3.gif

登録〜画面表示、集計まで上手く動きました！
ちなみに、別ユーザの勤怠もちゃんと集計されます。

image.png

感想(困ったこと)

書き込み途中の内容ってどうやって引き継げばいいんだろう？
私の技術力的な問題だと思いますが、モーダル内の入力欄に値を設定した状態でアクションを起こした時に、設定中の情報拾うことができなかったです。

具体的には、モーダルに勤怠記載途中に「プロジェクト追加ボタン」を押して「view.update」で入力欄を増やそうとしたのですが、アクション実行時のペイロードに設定中の情報が含まれていなかった(見逃しかもしれませんが)ので、更新後の画面に引き継ぐことができませんでした。
んー、今後色々調べて見ようと思います。

ソース

ソースの全量です。興味のある方は参考にしてください。
※全く綺麗にしていないです！今後タイミングの良い時に綺麗にしてきます。(2019/12/25時点)
https://glitch.com/~admitted-inspiration

最後に

とりあえず勤怠アプリっぽく動かしてみました。
まだまだやることはありますが、今回はここまでです。

今後、以下をやっていく予定(たぶん)です。

  • DB関連全般(DBをfirestoreとかに...)
  • データ更新関係(同一ユーザ・日付・プロジェクトのデータに対して更新とかさせてないんですよね...)
  • 集計関係(現状全ての期間の合算値を出しているので月単位とかに...)
  • 現状、一度の登録で複数のプロジェクトを登録できないのでUIでなんとかする

初めGOのtviewでTUIでfirebaseのプロジェクト選択とかビルド環境ポチポチ選んでデプロイできるツール作りかけていたのですが、途中で「あれ？別にTUIの必要なくない？nodeでスクリプト作ればよくない？」とか思い始め、急に熱が冷めて記事を書き直したのでギリギリになりました。
アペンドカレンダー期間中に間に合ってよかったー。

株式会社ピーアールオー（あったらいいな！を作ります）Advent Calendar 2019

Day 23
20
14
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
Sign upLogin
20
14

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?