大学生が数式を入力できる数学Q&Aサイトを作った話 (機能編)

2024/09/22に公開
3

はじめに

現在、独学でReactを勉強している大学2年です。
今回Latexで数式を入力できる数学質問サイトをリリースしたので紹介します。

開発したサイト

開発したサイトは以下の「UI Math」というサイトです。
トップページ
https://www.ui-math.site/

開発のきっかけ

数式をきれいに表示できるQ&Aサイトがなく、Latexでの入力やソフトウェアキーボードで数式を入力できるサイトがあったら便利だと思い開発しました。

サイトの紹介

質問の投稿

質問はメニューの質問するから投稿できます。
ログインしていない場合はログイン画面にリダイレクトされます。
質問は投稿後に編集することはできませんが、回答がない場合に限り削除できます。

数式の入力方法

数式は投稿フォームの右上にある「(x)」から入力できます。
最初にクリックした場合はソフトウェアキーボードでの入力モードになりますが、右上の矢印ボタンでLatex入力に切り替えることができます。
また、Latexを$マークで挟むことで、フォームに直接入力することもできます。

画像の添付

画像は、投稿フォームの右上にある写真アイコンから添付できます。

ベストアンサー

ベストアンサーは、質問の投稿者が詳細ページで選択することができます。
ベストアンサーを決定せずに解決済みにすることもできます。

質問に回答する

質問への回答は質問詳細ページから行えます。
このページでは、以下の3つのパターンで回答フォームの表示が異なっています。

  • 質問の投稿者 -> 補足情報、回答者へのコメントを投稿できます
  • すでに回答した人 -> 自分の回答にコメントを投稿できます
  • 回答していない人 -> 回答のみ投稿できます

回答があった場合の通知

投稿した質問に回答/コメントされた場合や回答者が質問の投稿者にメンションされた場合は、通知が送信されます。
通知はメニューのベルアイコンから確認できます。

質問を探す

質問はカテゴリ検索やキーワード検索で探すことができます。

カテゴリ分類

カテゴリ検索は、メニューのカテゴリで行えます。
数学向けのサイトのため、カテゴリは中学1年から大学までの数学分野にしました。

検索

キーワード検索は、メニューの検索やトップページで行えます。
キーワードを入力して確定後にEnterを押すとタグに変換されます。
検索したクエリはURLにも反映されるためブックマークにも対応しています。

必要ないかもしれませんが、数式で検索することもできるようにしました。

マイページ

マイページではユーザーのアクティビティを確認したり、アカウント情報を変更したりすることができます。
ステータスには質問数や回答数、いいねの数などが表示されます。

ユーザーランキング

ランキングはユーザーの一覧画面となります。
一覧を表示するだけでは面白くないため、質問数や回答数などから計算したスコアに基づいて並べています。
ユーザーをクリックすることで詳細画面に遷移し、質問数などが確認できるようになっています。

おわりに

長くなってきたので、開発過程や技術スタックについては後日投稿しようと思います。
ここまで読んでいただき、ありがとうございました。
ぜひサイトにアクセスして見ていただけると嬉しいです。
https://www.ui-math.site/

Discussion

ポテトポテト

ダークモードのときに文字が背景と同化して見えづらいので修正したほうがいいかもです

マスカットマスカット

ダークモードの記述が残っているコンポーネントがあり、見えづらくなっていました。
ご指摘ありがとうございました。