【ポートフォリオ】SeekWords Creator

はじめに

こんにちは！
第35回高専プロコン奈良大会後もデスマをしたアヤノです。
今回は、授業の一環で開発した「SeekWords Creator（失語症患者のリハビリテーション教材作成支援のためのWebアプリ）」を紹介します。

今までは開発したものを紹介してこなかったのですが、開発した時の思いが風化するのが嫌で今回から記事として記録を残すことにしました。今後もこのような記事を投稿すると思いますが、温かい目で見守って下さい m(_ _;)m

概要

SeekWords Creatorは、失語症患者のリハビリテーション教材作成支援のためのWebアプリです。

このアプリでは、与えられた単語を用いたシークワーズを生成し、生成したモノをダウンロードできます!!!

また、シークワーズの特性上、与えられた単語以外にも名詞が出てくるため、それも認識して解答データとしてダウンロードできるようにしました!!!

開発したきっかけ

授業の課題で出されたので開発した

（以下、授業で話された開発背景/目的）
失語症とは、脳卒中や外傷などによって言語機能が損なわれることで生じる高次機能障害で、適切なリハビリテーションを通じて言語機能の回復を図ることができるそうです。そのため、言語機能の訓練ツールとして「シークワーズ」というゲームの利用を考えました。

そもそも、「シークワーズ」とは、正方形に並べられた文字列の中から、固有名詞や指定された単語を縦・横・斜めの方向に探し出すゲームで、語彙力や認識力の強化に繋がるとされています。そこで、シークワーズを用いて失語症患者が楽しみながら言語能力のリハビリテーションが行えると思い開発しました。

開発期間

このアプリは、一週間程度で開発しました。

開発は個人で行い、企画から設計、UI/UXデザイン、実装、テスト、そしてデプロイに至るすべての工程を行いました。実装段階では、私がコーディングし、その後、ChatGPTを活用してバグの原因を特定したり、コードの可読性を向上させるための添削を行いました。

機能一覧

ホーム画面（/）

ホーム画面では、シークワーズの生成に必要な情報を入力します。
シークワーズの生成には、単語（ひらがな）が書かれたtxtファイル、シークワーズのサイズの2つの情報が必要です。

1. テンプレートファイル（.txt）のダウンンロード
   • シークワーズの生成に使用する単語（ひらがな）を書くtxtファイルの見本をダウンロードする機能です。
   • ダウンンロードされる「template.txt」の中身は以下のようになっていています。アプリ側が単語として認識するものは、2～5文字のひらがな＋改行の形式だけです。（プログラムをいじれば、単語の認識の仕組みは変更できます！）

   改行で単語として認識！
   りんご
   ごりら
   らっぱ
   ぱんつ
   つくえ
   

2. txtファイルの読み込み
   • シークワーズの生成に使用する単語が書かれたtxtファイルを読み込む機能です。
   • 読み込まれたtxtファイルの中身は、画面中央に表示されます。ですが、アプリ側がシークワーズの生成に使用する単語は、2～5文字のひらがなだけです。（同じ単語がある場合は、一度だけ使用されます）
3. シークワーズのサイズ指定
   • シークワーズのサイズ（n×nのn）を指定する機能です。
   • サイズの指定は、7～9となっています。
4. シークワーズの生成
   • 与えられた情報からシークワーズを生成するための決定ボタンです。
   • このボタンを押すと、与えられた情報を基にシークワーズを生成します。

シークワーズ生成画面（/create）

シークワーズ生成画面では、生成されたシークワーズと、その解答の確認・ダウンロードを行います。

1. シークワーズ（.pdf）のダウンロード
   • 生成されたシークワーズをダウンロードする機能です。
2. 解答（シークワーズ内にある単語, .txt）のダウンロード
   • 生成されたシークワーズの解答をダウンロードする機能です。
   • 与えられた単語＋形態素解析で見つけた名詞を解答としているので、変な名詞が含まれている可能性があります。そのため、このアプリを使用して作成したシークワーズを使用する際は、解答として使用する単語を吟味することをお勧めします。

使用技術

技術スタック

以下の技術を作成して開発しました。

開発領域	開発言語	使用ライブラリ/モジュール	用途
フロントエンド	Vue3 (3.5.11), TypeScript	vite	Web開発環境の構築
		pinia	ページ間共通の変数管理
		html2canvas	PDFの生成
		jspdf	PDFの生成
		seedrandom	乱数の生成
		axios	APIとの通信
バックエンド	Python (3.12.7)	fastapi	API開発環境の構築
		uvicorn	fastAPIの実行
		pydantic	型宣言の導入
		mecab-python3	シークワーズの形態素解析
		unidic-lite	形態素解析の辞書

デプロイ環境

• Vercel
  • Frontendのデプロイに使用した。
• Render
  • Backendのデプロイに使用した。

工夫点

• フロントエンド、バックエンド共に型安全を取り入れた点
• 形態素解析をするライブラリを吟味し、Mecabを採用した点
  • APIを使用するか、Frontendの技術で実装するか、WebAsenblyを使用するか等のライブラリ・仕組みの速度や精度比較をやった結果、Mecabが早くて高精度だったので、使用した。
  • ここの作業が開発期間の大多数を占めた。

今後の課題

• サイト内で、シークワーズを遊べるようにする
  • 問題と解答をjson化し、アプリ側に提供することでシークワーズを遊べるようにしたい

感想

• 1週間での開発はもう二度としない（睡眠時間が足りない...）
• 普段からもっと技術を勉強する（技術の選定や勉強に時間を割きすぎた）