【ポートフォリオ】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）のダウンンロード
   • 生成されたシークワーズの解答をダウンロードする機能です。
   • 与えられた単語＋形態素解析で見つけた名詞を解答としているので、変な名詞が含まれている可能性があります。そのため、このアプリを使用して作成したシークワーズを使用する際は、解答として使用する単語を吟味することをお勧めします。

使用技術

技術スタック

• Frontend
  • TypeScript（TSに挑戦したかったから）
  • Vue3（開発速度の向上のために使用）
    • Vite（デプロイをしやすくするために使用）
    • Pinia（画面間の情報共有に使用）
    • html2canvas（htmlを画像に変換するために使用）
    • jspdf（PDFの生成のために使用）
    • seedrandom（乱数生成器をメルセンヌツイスタにするために使用）
    • axios（APIとの通信に使用）
• Backend【Web API】
  • Python（開発速度の向上のために使用）
    • fastapi（PythonでAPIを作るために使用）
    • uvicorn（FastAPIの実行のために使用）
    • pydantic（型宣言を取り入れるために使用）
    • mecab-python3（形態素解析のために使用）
    • unidic-lite（mecabの辞書として使用）

デプロイ環境

• Vercel
• Render

工夫点

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

今後の課題

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

感想

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