こんにちは、エンジニアのみーや（@miiya387）です。
今回は先日開催された「WP HACK DAY」の第4回でチームで取り組んだ内容のレポートをしようと思います。
チームメンバー全員で終始楽しく取り組んだので、当日の様子からエンジニアの雰囲気などが伝わったら嬉しいです。
また、解決する手段としてSlackワークフローやGoogle Apps Script(以下: GAS), Redmine APIなどを活用したので、Slackワークフローを用いて資料の作成や通知周りを一本化したいと思っている方の参考にもなればと思います。
目次
WP HACK DAYについて
WP HACK DAYは、ウエディングパークエンジニアチームの技術力向上と一体感醸成のための1dayハッカソンです。
今回実施した第4回目では「業務課題を解決するプロダクト開発」をテーマに3人1チームのチーム開発形式で実施しました！
取り上げた課題
私たちのチームが取り上げた課題は「障害対応時にやることが多く複雑」ということです。
システム障害が発生した際に、対応者が行うことがたくさんあること、さらに行う順番や方法が複雑化してきていることが課題でした。もう少し掘り下げると、障害対応の中でも対応に入る前に行う「一次報告」に時間と手間がかかってしまうことが課題でした。
障害対応は、復旧までの時間をいかに短くできるかが重要で、時間との勝負な作業である一方で復旧対応以外のタスクに手間がかかってしまうことに着目し、一次報告をする作業を簡潔にすることで本質的な復旧作業に割ける時間を増やそうと考えました。
設定したゴール
3人で話し合う中で、対応に慣れているメンバーもいれば、初めてのメンバーもいることや、エンジニアメンバー以外が一次報告を担当することもあることに気づきました。
課題や実際に使っていただく状況も考慮した上で、「誰でも簡単に障害対応の一次報告までを行える機能」を作ることに決めました。
取り組む内容が決まったところで、話し合った課題や要件、実装方法などをシートにまとめ、当日の役割分担やスケジュールを事前に決めておきました。
当日の様子
今回実装する機能のフロー図と当日のタイムスケジュールは以下のようになっています。
当日は事前に設計しておいた実装方法で実際に機能を作成するところから始まります。
3人のチームなので作業を分担して効率よく進めても良かったのですが、チームになったメンバーが普段一緒に開発をする機会の少ない組み合わせだったので、あえてすべての作業を3人一緒に行うことにしました。一緒に実装することで、ワイワイ話し合いながら楽しく実装すること、実装がうまく行った時の達成感などを共有したかったからです。
実際に一つの画面を3人で囲みながらの開発は、WP HACK DAYならではの贅沢なモブプロ時間になりました。
成果物
今回作成したものは以下の5つです。
- Slackのワークフロー/Webhook URL（手動作成）
- 障害対応した内容が一覧表示されるスプレッドシート（手動作成/GASを書くのはここです）
- Googleドキュメント（GASで作成）
- RedmineのISSUE（GAS上でRedmine APIを使って作成）
- メール（GASでGmail送信）
Slackワークフローの作成
作成手順は公式に載っている通りです。
今回は一覧管理するスプレッドシートと連携してワークフロー申請時にスプレッドシートに入力した内容が出力されるようにしました。
スプレッドシート側にGASの設定をし、Slackのワークフローで入力された内容をもとに、以下の作成をします。
- Googleドキュメント
- RedmineのISSUE
作成された2つをもとにスプレッドシートの行を再度更新して情報を補足します。
最後に作成した2つのURLと一緒に、調査・対応開始の報告としてメールとSlackに通知が来るようにしました。Slackへの通知はincoming Webhookを利用して行いました。
これで、一次報告者はSlackの指定のチャネルからワークフローを出すだけで必要な資料や通知が済まされる状態になりました。今までは手作業ですべて行なっていたので時間にすると15分ほどかかっていた作業が2分ほどで完了する改善となりました。
今回作成したGASの中身は以下になります。対象のスプレッドシートに行が追加されたタイミング（変更）をトリガーに動作するように設定して使っています。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 151 152 153 154 155 156 157 158 159 160 161 162 163 164 165 166 167 168 169 170 171 172 173 174 175 176 177 178 179 180 181 182 183 184 185 186 187 188 189 190 191 192 193 194 195 196 197 198 199 200 201 202 203 204 205 206 207 208 209 210 211 212 213 214 215 216 217 218 219 220 221 222 223 224 225 |
// メディア別関係者アドレス一覧 const mailLists = { "メディア1": ['test1@gmail.com', 'test2@gmail.com'], "メディア2": ['test3@gmail.com', 'test4@gmail.com'], "メディア3": ['test5@gmail.com', 'test6@gmail.com'], } function main() { let data = formatData(); // RedmineのISSUEがすでにある場合は何もしない if (data['ticketUrl']) { return } let {document, docUrl} = createDoc(data); let {ticketId, ticketUrl} = createTicket(data, docUrl); // スプレッドシートのデータ整形 let ss = SpreadsheetApp.getActiveSpreadsheet(); let sheet = ss.getSheetByName('障害管理一覧'); // 報告書URL追加 sheet.getRange(data['target'], 9).setFormula('=HYPERLINK("' + docUrl + '","' + data['title'] + '")'); // チケットURL追加 sheet.getRange(data['target'], 10).setFormula('=HYPERLINK("' + ticketUrl + '","' + ticketUrl + '")'); // 報告者名整形 sheet.getRange(data['target'], 3).setValue(data['name']); // No追加 sheet.getRange(data['target'], 1).setValue('=ROW()-4'); // タイトルを更新 document.setName('【#' + ticketId + '】' + data['title']); // メール通知 sendGmail(data, docUrl, ticketUrl); // slack通知 post_slack(data, docUrl, ticketUrl); } /** * データ整形 */ function formatData() { // シートから題名取得 let ss = SpreadsheetApp.getActiveSpreadsheet(); let sheet = ss.getSheetByName('障害管理一覧'); let lastRow = sheet.getLastRow(); // 最終行 let response = []; // 対象行 response['target'] = lastRow; // 報告者 const realName = sheet.getRange(lastRow, 3).getValue() response['name'] = realName.replace(/^.*-/, ''); // 発見者 response['discoverer'] = sheet.getRange(lastRow, 7).getValue() // 報告Q response['quarter'] = sheet.getRange(lastRow, 2).getValue(); // メールアドレス response['email'] = sheet.getRange(lastRow, 4).getValue(); // 報告日 response['date'] = sheet.getRange(lastRow, 6).getValue(); // メディア response['media'] = sheet.getRange(lastRow, 8).getValue(); // 題名 response['title'] = sheet.getRange(lastRow, 9).getValue(); // チケット response['ticketUrl'] = sheet.getRange(lastRow, 10).getValue(); return response; } /** * 報告書作成 */ function createDoc(data) { let fileName = '【#チケット番号】障害報告書'; // コピー元となるドキュメントファイルのID // IDはドキュメントを開いたときのURLから取得可能 // 例：https://docs.google.com/document/d/AAAAAA/edit // この場合は"AAAAAA"がID let fileId = 'AAAAAA'; // ファイル名が全角で打てないので全角変換 // ファイル名を全角にする必要がなければ削除 fileName = fileName.replace(/[A-Za-z0-9]/g, function(s) { return String.fromCharCode(s.charCodeAt(0) + 0xFEE0); }); // コピー元のファイルを開く let f = DriveApp.getFileById(fileId); let folder = f.getParents().next(); // 格納先ディレクトリがあるか（Q） const targetQFolder = data['quarter'].replace(' ', ''); let quaterFolder = folder.getFoldersByName(targetQFolder); if (! quaterFolder.hasNext()) { // ない場合は作成する quaterFolder = folder.createFolder(targetQFolder); } else { quaterFolder = quaterFolder.next(); } // 格納先ディレクトリがあるか（月） let targetMonthFolder = Utilities.formatDate(data['date'], "JST", "M月"); let monthFolder = quaterFolder.getFoldersByName(targetMonthFolder); if (! monthFolder.hasNext()) { // ない場合は作成する monthFolder = quaterFolder.createFolder(targetMonthFolder); } else { monthFolder = monthFolder.next(); } // コピーを作成。作成したコピーを参照。 f = f.makeCopy(fileName, monthFolder); // コピー後のファイルの中身を書き換える // ドキュメントの中身を取得 let body = DocumentApp.openById(f.getId()).getBody(); // 報告日 body.replaceText('報告日：yyyy年MM月dd日', '報告日：' + Utilities.formatDate(data['date'], "JST", "yyyy年MM月dd日")); // メディア body.replaceText('所 属：メディア1', '所 属：' + data['media']); // 氏名 body.replaceText('氏 名：担当者名を記載', '氏 名：' + data['name']); // 題名 body.replaceText('XXXXXXXXXXX障害', data['title']); return {document: f, docUrl: f.getUrl()}; } /** * チケット作成 */ function createTicket(data, url) { // チケット内容 const payload = { "issue": { "project_id": "XXX", "subject": data['title'], "custom_field_values": { "20": data['quarter'], "56": data['discoverer'], "22": Utilities.formatDate(data['date'], "JST", "yyyy-MM-dd"), "23": data['media'], "55": url } } }; let redmine_url = 'https://{所有グループのRedmineURL}/issues.json'; let api_key = 'abcdefg'; // RedmineのAPI key を入力 let headers = { 'X-Redmine-API-Key': api_key, 'Content-Type': 'application/json', }; let options = { 'method': 'POST', 'contentType': 'application/json', 'headers': headers, 'payload': JSON.stringify(payload), }; let response = UrlFetchApp.fetch(redmine_url, options); let id = JSON.parse(response).issue.id; return { ticketId: id, ticketUrl: 'https://{所有グループのRedmineURL}/issues/' + id }; } /** * 関係者に一次報告メール送信 */ function sendGmail(data, docUrl, ticketUrl) { const recipient = mailLists[data['media']].join(','); const subject = '【障害報告】' + data['media'] + '_' + data['title']; const body = '障害が発覚したので調査・対応を始めます。\n\n障害報告書: ' + docUrl + '\nチケット: ' + ticketUrl; const options = { name: data['name'], from: 'test_user@gmail.com' // fromアドレス入力 }; GmailApp.sendEmail(recipient, subject, body, options); } /** * チャネルに一次報告チャット送信 */ function post_slack(data, docUrl, ticketUrl) { // SlackのWebhookURL const slack_webhook_url = ''; // webhook url入力 // SlackのWebhook URLに投稿するデータをまとめる const json = { 'username': '障害報告', 'icon_emoji': ':smiley:', 'text': '<!here>障害が発覚したので調査・対応を始めます。\n\n報告者: ' + data['name'] + '\nメディア: ' + data['media'] + '\n題名: ' + data['title'] + '\n報告書: ' + docUrl + '\nチケット: ' + ticketUrl }; // SlackのWebhook URLに送信するデータをJSONに変換する const payload = JSON.stringify(json); // UrlFetchAppで使用するメソッドやコンテントタイプを指定 const options = { 'method': 'post', 'contentType': 'application/json', 'payload': payload }; // Slackに送信 UrlFetchApp.fetch(slack_webhook_url, options); } |
まとめ
今回は、先日開催された「WP HACK DAY」の第4回にチームで行った取り組みを紹介させていただきました。普段一緒に開発をする機会の少ないメンバーとの開発はとても楽しく、1日という短い時間であっても互いに学び合える時間となりました。
今回作成した機能は現段階ではプロトタイプレベルなので、これから本運用で日々の障害対応時に使えるように調整していこうと思います。
