🍣寿司打チャレンジ！効率化＆楽しさ満載のGAS＆Slack連携🚀

🚀イントロダクション🚀

エックスポイントワンでは、タイピング力向上のために寿司打を活用しています。
寿司打とは、日本語タイピングのスキルを競うオンラインゲームです。

以前、メンバーが寿司打の取り組みについて紹介した記事がありますので、そちらもぜひご覧ください。

本記事では、エックスポイントワンの寿司打取り組みの具体的な内容を紹介します。

寿司打に興味がある方や、社内での取り組み事例として参考になれば幸いです！

💡結論💡

まずは結論からお伝えします。
この寿司打の取り組みを通して、社内でのスコア共有が効率的かつ見やすくなりました。

👇以前は、Slackで個々のスコアがバラバラに共有されていた状況でした。

👇しかし、取り組みの結果、スコアがグラフ化され、自動でSlackに投稿されるようになりました。

青い線の人（私です）のスコアが段々落ちているのが気になるところではございますが、スコアの推移や他メンバーとのスコアの上下関係の見通しがよくなっていることがわかります。

📈課題解決の段階と取り組み📈

取り組みにはいくつかの段階がありました。それぞれの段階で、

1. 目的
2. 解決された課題
3. 新たな課題の発見

これらの点について、順を追って詳しく解説していきます。

ステージ0.5: slackチャンネルの作成、情報の集積

• 目的: 寿司打の結果を一つのチャンネルに集約する
• 解決: メンバーの記録が一覧できるようになり、寿司打への意識が促進された
• 課題: 特定のメンバーの記録の推移が追跡しずらい状態

寿司打の結果がバラバラのチャンネルに投稿されていたため、#times_sushida チャンネルを作成して結果を集約しました。
これにより他のメンバーの記録と比較しやすくなりましたが、特定のメンバーの記録の推移はまだ追跡しにくい状態でした。

ステージ1: スプレッドシートでのスコア管理📝

• 目的: 特定のメンバーの記録の推移を追跡しやすくする
• 解決: スプレッドシートに記録をまとめ、グラフ化することで個々の進捗がわかりやすくなった
• 課題: スコア入力の手間が大きいため、参加者が限られる

代表の久保から「いい感じにスコアを記録できて良い感じにグラフ化されるようにしてほしい」という非常に整理された、明快かつ仕様が詳細に定まっているリクエストをありがたいことに頂戴し、寿司打のスコアを管理し、個々の進捗がわかりやすくなるようにグラフ化しました。

👇入力画面
　

👇出力画面

これにより、スコアの推移が可視化され、他のメンバーとの相対的なスコアも明確になりました。
しかし、スコアの登録が手入力で面倒であることが課題が残りました。

ステージ2: Twitter共有とGoogleフォームの活用🎯

• 目的: スコア入力の手間を削減する
• 解決: Twitter共有画面のURLや投稿文言をGoogleフォームにコピペすることで、手間が大幅に削減された
• 課題: グラフがスプレッドシート上で更新・表示されるため、メンバーがスコアを確認するために都度スプレッドシートを開く必要がある

寿司打のリザルト画面のTwitter共有ボタンを利用して、スコアを簡単に取り出す方法を開発しました。Twitter共有画面のURLや投稿文言をGoogleフォームにコピペして送信することで、スプレッドシートに自動的に反映されるようになりました。

twitter共有ボタンを押す

👇ログインされている場合はスコアの文言が出るのでこれをコピーする

👇ログインされていない場合、URLにスコアの情報が記載されているのでこれをコピーする

👇コピーした文言をgoogle formで送信する

この方法により、スコア入力の手間が大幅に削減され、多くのメンバーが寿司打に挑戦するようになりました。

ステージ2.5: twitter共有文言がURLだったときの対応

• 目的: URLエンコーディングされた文字列からスコアを取得する方法を確立する
• 解決: GAS上で変換するような関数を定義し、それをセル上から呼ぶことで変換した
• 課題: 処理が重く、この時点では問題ないレベルではあったが、後の処理自動化時に課題が顕在化した

Twitterのログイン状況によって、共有文言が異なります。ログイン時は日本語で記述されており、適切にスクレイピングでスコアを取得できますが、ログアウト時はURLエンコーディングされた文字列で届きます。

URLデコードはセルの関数には存在しないため、GASで変換する関数を定義し、セルから呼び出して変換を実現しました。

function decodeURI2(uri) {
	return decodeURI(uri);
}

ステージ3: Google Apps Scriptでの自動化⚙️

• 目的: グラフを見るためにスプレッドシートをを開く必要がある手間を削減する
• 解決: GASを用いてスプレッドシートからスコア情報を取得し、グラフを自動生成し、Slackに投稿する機能を実装した
• 課題: URLデコードの方法が重く、自動処理に間に合わないケースが発生した

効率化を目指し、Google Apps Script (GAS) を使ってスプレッドシートからスコア情報を取得し、グラフを自動生成し、Slackに投稿する機能を実装しました。
以下の手順で動作します。

1. google formでスコアが送信される
2. gasのトリガーがformの送信をキャッチし、処理が発火する
   
3. スプレッドシートからグラフを取得
4. 取得したグラフをGoogleドライブに保存
5. Googleドライブのダウンロード用URLを取得
6. 受け取ったスコアや投稿者の情報を表示するテキストの形に整形し、グラフのURLを追記してSlackに送信
7. Incoming Webhookで受け取ってSlackに投稿

この機能により、手間が削減されました。ただし、URLデコードの方法が重く、自動処理に間に合わないケースが発生する課題が残りました。

ステージ3.5: URLデコードの方針変更🔄

• 目的: URLデコードの処理を軽くし、自動処理に間に合うように改善する
• 解決: GASの一連の処理の中でURLデコードするように変更し、処理速度が向上した
• 課題: なし（取り組みが完成し、スムーズな寿司打の記録と共有が可能になった）

ステージ2.5でGAS上で定義した関数をセル上から呼び出してURLデコードを行っていましたが、この方法は非常に動作が重く、フォームを受け取り、グラフを作成し、Slackに共有するまでの自動処理に間に合わないケースがありました。そこで、フォームを受け取って発火するGASの一連の処理の中でURLデコードするように変更しました。

これにより、寿司打をプレイし終えた後はTwitter共有ボタンを押してコピー＆ペーストするだけで、スコアがグラフ化されてSlackに表示されるようになりました。寿司打の取り組みが活発化し、効果が実感できるようになりました。

🏆取り組みの成果🏆

本記事では、弊社の寿司打取り組みにおける課題解決の過程を紹介しました。
その瞬間のスコアとして点で共有されていた寿司打の取り組みを集積・可視化することでメンバーのモチベーションを高め、またグラフで他メンバーとの相対的な位置がわかることでゲーム性のある楽しさが見いだされ参加メンバーのすそ野が拡大したことが素直に嬉しいです。
とはいえこのような取り組みが今でも実行されているのは、寿司打に取り組み、スコアをこの何か月で劇的に改善し、きっと業務の効率も比例して向上してくれているメンバーのみなさんのおかげです。
この取り組みに参加してくださったメンバーの皆さんへ、心から感謝の気持ちを伝えたいと思います。皆さんの熱意と努力に深く敬意を表します。
今後も一緒に取り組みながら、タイピング速度を速めていき、いざというときのレスバで絶対に負けないようになりましょう💪