この記事は新歓ブログリレー29日目の記事です。

作ったもの

traPへの質問箱サービス「Questions」を作りました。
https://questions-ui-silk.vercel.app

フロントエンド：https://github.com/mehm8128/questions-UI
バックエンド：https://github.com/ikura-hamu/questions

できること

• 質問を投稿する。
  
  

• 質問が投稿されたら部内SNSに通知する。
  

• traP部員が質問に回答する。
  

• 回答済み質問の一覧が見れる
  

経緯

3月8日、前期合格発表の前夜の僕(ikura-hamu)のtraQ（部内SNS）の投稿が始まりです。

新歓の時期はいろんなサークルが質問箱を設置して新入生からの質問に答えています。traPも同様に質問箱のリンクを固定ツイートにして、たまに来る質問に答えています。

このサイトは非常に便利なのですが、大量の広告が出てくるのが困ります。また、これは広報の担当者が管理していましたが、質問が来たら部内SNSに通知するようにすれば負担が軽くなりそうだと思いました。この投稿の時点では「こまるなー」ぐらいの軽い感覚だったのですが、投稿に「チャンス」スタンプがたくさんついたので、「この人たち気軽に『作れ』って言ってる」と思い、ちょっとイラついたので、作りました。

時間を見ていただくとわかると思いますが、翌日の朝2時半です。普段は寝てる時間だったので少しきつかったですが、頑張りました。

自分はバックエンドしか経験が無かったので、とりあえずバックエンドだけ仮で作りました。するとmehm8128さんがフロントエンドを作ると言ってくれました。

その後、フロントで必要な情報をAPIのレスポンスに含めたり、質問への回答をtraP部員からのみできるようにしたりして、とりあえず完成しました。

フロントエンド

Vueで作りました。の予定だったのですが、デプロイしたときのルーティングが上手くいかない部分があって、途中でNext.jsに書き換えました。デプロイはVercelでやってます。
デザインを全然考えずに作っていたのでWindi CSSでCSSをつけているのですが、それでもデザインをいい感じにできなかったので、今流行りのChatGPTとやらに頼んでみました。サービスについての簡単な説明とページのコードを貼り付けて、「このコードのclassNameを修正していい感じのデザインにしてください」って言ったらいい感じにしてくれました。

サーバーと同じくかなり基本的なサービス構成だったので、認証(と上で述べたルーティング周り)以外の部分は割とすんなりいきました。実用的なサービスを短期間で完成させるということを最近あんまりやっていなかったので楽しかったです。

バックエンド

Goです。webフレームワークはEchoを使っています。サーバーは部内のPaaS基盤「Showcase」を使っています。(Showcaseについてはこちらの記事から https://trap.jp/post/846/)データベースはMariaDBです。

質問箱の部分の仕組み自体はめちゃくちゃシンプルで、質問の取得と質問・回答の投稿しかAPIはいらないので、すぐにできました。データベースのテーブルは一個しかなく、そこに質問と回答の情報を全部詰め込んでいます。

苦労したのはtraP部員の認証部分です。traQはOAuth2の認証を提供しているので、それを使いました(OAuthについてはこちらの記事から https://trap.jp/post/1007/)。難しかったので、@Rasさんが作ってくれたtraq-oauth2を使いました。かなり簡単になりました。CORSやCookieでかなり躓きましたが、この部分を実装する中でセッションやCookieのについての知識を得ることができたので良かったです。

また、質問箱でよくある、回答をTwitterに投稿する機能を実装しようとしてTwitter APIの使用申請を出したのですが、なかなか返ってこなかったのであきらめました。最近TwitterのAPIは有料化の話でごたごたしていましたが、どうなったんでしょうか。許可が返ってきたら実装するかもしれません。

おわり

Twitterで投稿する機能が実装できていたら公式に使えるかなと思っていたのですが、実装できなかったので、この質問箱サイトは非公式です。一応部員は質問を見ているので、質問を投げてみたら返ってくるかもしれません。

ちゃんと作れて楽しかったです。

明日の新歓ブログリレー担当は @s9 さんです。