はじめに
はじめまして、25卒上智大学経済学部のAkiraです。
今回初めてQittaに記事を書くので、お手柔らかに見ていただけると助かります笑。
僕は、(当時大学1年)2021年6月からプログラミングの勉強をはじめ、POSSEという大学生プログラミングコミュニティで運営しつつ学習しながらハッカソンやチーム開発を行ってきました。
POSSEとは？今回は割愛させていただきますが、気になる方のためにリンクを載せておきます。
公式HP：https://posse-ap.com/
Twitter：https://twitter.com/posse_program
Instagram：https://www.instagram.com/posse_programming/
僕は、このPOSSEというプログラミングコミュニティでテック局として運営にも務めさせてもらっています。今日まで約1年間ほど務めてきましたが、運営をする中である業務を効率化したいと考え、今回「GASとLINE Messaging APIで、スプシの情報をLINEで確認できるアプリ」というものを発案し開発しました。
制作期間は2日でした。(慣れてない技術を使った割には早くできた方かもしれません。)
今回その課題定義の詳しい背景と、システムの構成を解説していきます。
・GASやLINE Messaging APIについて興味がある方
・技術で課題解決してみたい方
・エンジニア学生
・個人開発をしてみたい方
・ぶっちゃけ誰でもOK笑
目次
開発目的
開発目的はズバリ、、
「テック局の業務効率化」＆「メンバーが自身のカリキュラム進捗状況を確認しやくする」
ためです！！
(メンバーとは、POSSEコミュニティでプログラミングを学習している大学生メンバーのことを指します。※現在(2023/02)およそ100人程度)
解決したい課題
普段、コミュニティ運営の業務として、メンバーのカリキュラム進捗を管理しているスプレッドシートを確認し、カリキュラムに遅れている人がいたらその遅れている人にLINEでリマインドするということをしていました。
⇨ 正直なかなか大変な事務作業です。。今後このコミュニティが運営される中で、次の運営世代にバトンが代わる時、この事務作業はやらせたくない、、！
コミュニティ運営をする中である程度の事務作業は付きものですが、本来はもっとそれ以外の「仕組み化」や「新規企画の立案」などにリソースを割けるのが運営の本質だと考えています。
普段、メンバー自身が自分のカリキュラムの進捗状況を把握する機会があまりないため、結果的に気づいたら「カリキュラムに遅れていた」という状況に陥りやすいです。また、毎回スプシを開いて自分のカリキュラム進捗を確認する手間がいつも大変そうでした。
⇨そこで、誰もが毎日使っている「LINE」で自身のカリキュラムの状況を瞬時に「色付きカード」という視覚的に把握することで、モチベや焦りも同時に実感できる。
どのように
メンバーのカリキュラムの進捗状況を管理しているスプレッドシートから、必要な値だけGASで取得して処理し、LINEのMessageing API機能で各メンバーに自身のカリキュラム進捗状況を送信する。
リポジトリ
GASのコードだけ載せています。
技術選定
技術スタック：
- Google Apps Script (GAS)
- LINE Messaging API
- LINE Flex Message Simulator (見た目を作る際に使用)
メンバーの学習カリキュラムの進捗は、いつもGoogleスプレッドシートで管理していたため、それを操作するには必然的にGASが最適と考えました。
また、メンバー自身が手軽に自分のカリキュラムの進捗状況を確認しやすくするためには、誰もが使っている「LINE」でトーク画面にメッセージを送るだけという環境を実現するべくLINE Messaging APIを使用しました。
※ 両方とも、初めて使った技術なので最初は使い方に戸惑いましたが、Youtubeでチュートリアル的なのを30分見たらすぐに使いこなせました！
システム構成図
システム構成図はこんな感じです。
※ 赤文字は、初期設定の登録時の流れを表しています。
システムの流れ (主にGASの動きの説明)
- 各メンバーが「テック局 ラボ」というLINEアカウントを追加する。追加後、初期設定の方法と使い方が送られてくる。
- 初期設定の登録として、LINEのトーク画面に自分の名前を「漢字フルネーム」で送信する。
- GASが送られてきた名前がスプシに載っている名前のリストにあるかどうかを検索する。
- ある場合、その名前の行のA列に送られてきたLINE IDを登録し、初期設定の登録が完了する。登録できると、「初期設定の登録完了」というメッセージが送られる。
- 登録後、メンバーが「確認する」というメッセージを送信する。
- 送られてきたLINE IDで登録済みの列を参照し、見つけたら、その行から「インプット教材残数」,「ミニドリル残数」,「POSSE課題残数」の値をそれぞれ取得し、GASの中で生成した関数で処理する。
- 処理後、三枚の色付きカードで、メンバー自身のカリキュラム進捗状況を送信する。
※ その他の機能
・自身がすでに登録済みの場合に、自分の名前を送信すると、「あなたはすでに登録済みです」と返信される。
・他人がすでに登録済みの場合に、他人の名前を送信すると、「他人がすでに登録済みです」と返信される。
（他人のは見れない設計にするため。← 地味に工夫した点です笑）
デモンストレーション&説明動画
↓ デモンストレーションした説明動画（Youtube）※ 動画編集しました
見ると一番わかりやすいです！笑
↓主な機能部分だけgifで紹介
-
初期設定の登録（名前を漢字フルネームで送信）
-
「確認する」とメッセージを送信すると、スプシからデータを取得し、カリキュラムの進捗状況が返ってくる。
-
初期設定の登録時、裏側ではスプシにLINEIDが付与される。
表示画面＆見方
〜進捗管理に使っているスプレッドシート(ここではテスト用のシート)〜
※ IDはダミーです。
〜実際の表示画面〜
スプレッドシートから値を取得し、以下のカードのように表示させています。
カードの見方（色は条件分岐で切り替えてます。）
青色：カリキュラムに遅れていない。
赤色：カリキュラムに遅れている。
灰色：今フェーズでは使わない。
％(数値&ゲージ)：カリキュラム完了までの達成度。
進捗：完了した数 / カリキュラムの総数
遅れ：完了した数 から遅れの基準値を引いた数 (遅れていない場合、マイナスになる)
POSSEコミュニティでは、カリキュラムの進捗に対して基準値を設けているため、その基準値より上か下かで「遅れ」の判定を行なっています。基準値は日数が進むことに変動します。
色分けで、視覚的に進捗の状況をわかりやすくしました！
ちなみに、この三枚のカードを表示させることがなぜか一番詰まって大変でした、、！
特に、このカードを作ったLINEのFlex Message Simulatorの使い方はしっかり理解する必要がありました。このFlex Messageはjson形式で作成されため、少しでも書き方をミスると表示されずにエラーが起こりました。
（「carouselで3つのbubbleを横並びにする」という実装で3,4時間戦ってました、、！🥲）
今回実装できなかったこと
今回、もう一つ実装しようとした機能が、GASのトリガーを用いて、GAS側から定期的にカリキュラムの進捗状況のカードを送信することでした。
しかし、元々関数の引数にはReplyAPIを用いているため、replyが返ってこない限り、関数の値を返すことができず、自発的に送信することができませんでした。
解決方法がわかる方、コメントで教えて頂けると幸いです笑
感想
今まで僕は、プログラミングをハッカソンやチーム開発といったイベントごとでしか発揮したことがありませんでした。もちろんそれも楽しいのですが、今回は、「ある課題に対してプログラミングで解決する」という開発体験を積むことができ、非常に楽しかったですし完成した時は嬉しかったです！😳
それからLINE Messaging APIがかなり優秀すぎて感動しました。いろんな課題を解決するために今後も役立ちそうです！
記事をご覧いただいてありがとうございました。🤗
追記 LINE DC LT大会に登壇