feature image

2023年4月6日 | ブログ記事

質問箱を作った

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

作ったもの

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

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

できること

経緯

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 さんです。

ikura-hamu icon
この記事を書いた人
ikura-hamu

SysAd班、ゲーム班 いろいろやりたい

mehm8128 icon
この記事を書いた人
mehm8128

21B JC。SysAd班で色々やってます

この記事をシェア

このエントリーをはてなブックマークに追加
共有

関連する記事

2023年4月17日
ポケモンを飼いたい夢を叶える
tqk icon tqk
2023年4月25日
【驚愕】作曲4年目だった男が大学3年間ゲームサウンドに関わった末路...【ゲームサウンドのお仕事について】
tenya icon tenya
2023年3月20日
traPグラフィック班の活動紹介(Ver.2023)
NABE icon NABE
2021年8月12日
CPCTFを支えたWebshell
mazrean icon mazrean
2021年5月19日
CPCTF2021を実現させたスコアサーバー
xxpoxx icon xxpoxx
2024年6月21日
ハッカソン参加記 4班"Slide Center"
Alt--er icon Alt--er
記事一覧 タグ一覧 Google アナリティクスについて 特定商取引法に基づく表記