【個人開発】韓国語の文法を復習するアプリ「サクッと作文 韓国語」のデモ版をリリースしました

はじめに

韓国語の学習を楽にするアプリを開発しました。

アプリの概要

簡単な日本語を韓国語作文することで韓国語を学習するアプリケーションです。

ログインなしに問題を解くことが可能です。
ユーザー登録をしてログインして問題を解くと、間違えた問題を記録し、あとから間違えた問題を復習することができます。
一つの文法項目につき、5問の作文問題が出題されます。

• URL: https://ko.sksk.fun/
• GitHubリポジトリ: https://github.com/yuri-otms/sksks_ko

制作のきっかけ

• 韓国語を学ぶのに、なかなか理想的な文法問題集を見つけられなかった
• 基本情報技術者試験・応用情報技術者試験の勉強に「過去問道場」というサイト(基本情報技術者過去問道場｜基本情報技術者試験.com、応用情報技術者過去問道場｜応用情報技術者試験.com）を利用した時、そのあまりの便利さに感動し、「こんな感じで外国語を学びたい！」と考えた

注意

現在、このアプリはデモ版です。使われている韓国語を素人の運営者が作成しているため、間違っている可能性があります。
デモ版はあくまでも操作確認を行うものとして考えていただけると幸いです。
将来的には韓国語に詳しい方・ネイティブの方にチェックしていだき、修正作業を行った上で正式なリリースを考えています。

アプリの使い方

ログインしないで問題を解く

このアプリはログインせずに使うことができます。
トップページを下にスクロールし、「スタート」をクリックします。

問題を解く項目を選択します。級（現在はハン検5級のみ）を選び、項目のグループを選択すると、該当する項目が表示されます。項目をクリックすると問題が出題されます。

ユーザー登録、ログインして問題を解く

ユーザー登録をすることで、学習が記憶されます。間違えた問題を後から復習することができます。

アプリの特徴

ユーザーの使える機能

ヒントの表示

わからない単語がある場合、「ヒント」の該当の日本語をクリックすると、韓国語の単語が表示されるため、辞書などで調べる手間がはぶけます。

解答の合成音声

「答え合わせ」をクリックすると解答が表示されます。音声ボタンをクリックすると、Google Text-to-Speechによる解答の合成音声を聞くことができるので、発音の確認ができます。

間違えた問題の復習

ログインして解いた問題については、間違えた問題を復習することができます。

問題製作者の使える機能

入力した問題の確認

入力した問題文（日本語）の韓国語訳、解答文（韓国語）の日本語訳が表示されるので、誤りがないかの確認ができます。

問題文からヒントの登録

登録された問題文（日本語）・解答文（韓国語）を形態素解析し、文から名詞・動詞・形容詞・副詞の原型を抽出し、それらをクリックすることで問題文の単語のヒントを登録できるようにしました。

問題文の確認依頼・確認作業

問題製作者が作った問題を、問題確認者に確認依頼をする機能があります。

問題製作者が確認依頼を作成すると、問題確認者が問題文を確認し、内容が正しければ確認完了、修正が必要なら再提出の依頼をします。

問題文の合成音声の作成

問題確認者によって確認が完了した問題は、合成音声を作成することができるようになります。

問題文の公開

確認・合成音声の作成が完了した問題は、そのままでは公開されませんので、公開作業を行います。

使用技術

• Python 3.9.16
• Flask 2.2.3
• MySQL 8.0
• HTML/CSS/JavaScript
• jQuery 3.7.8
• Bootstrap 5.2.3
• Docker 23.0.3/Docker Compose 1.29.2
• Gunicorn 20.1.0
• nginx 1.23

API

翻訳

問題編集画面、ヒント登録画面で使用している翻訳APIはPapagoの「Neural Machine Translation」を使用しています。
Neural Machine Translation - INTRO (Papago)

合成音声作成

解答の韓国語の音声は、Google Cloud Text-to-Speechを利用して作成しています。
Text-to-Speech AI: 自然な音声合成  |  Google Cloud

形態素解析

日本語と韓国語の形態素解析を、MeCabとHanDicを使用して行いました。
詳細: DockerでMeCabとHanDicを使用して韓国語の形態素解析(Python) - Qiita

インフラ構成図

さくらのVPS上でDocker Composeを使用しコンテナを起動しています。今後、複数のWebアプリやサイトを同じVPS上でサブドメインで増やしていくための構成です。
メモリが1GBの契約のためMySQLのコンテナを複数起動することが非現実的なので、一つのMySQLコンテナを複数のアプリケーションで使うことにしました。

参考

• DockerでFlask+Gunicorn+Nginxの環境構築 - Qiita
• 複数のWebアプリを1サーバーのDockerを使ってSSL対応のサブドメインで簡単に運用する | QUARTETCOM TECH BLOG

ER図

dbdiagram.io - Database Relationship Diagrams Design Toolを使用して作成

今後について

将来実装したい機能

各項目の達成度の表示

現在、どの項目をどれだけ解いたのかの表示が無いため、どこまで解いたのかがわかりません。これは継続した学習をする際にわかりづらいので、早急に実装したいです。

韓国語の確認

解答の韓国語が正しいかを、韓国語に熟練されている方や、将来的にはネイティブの方に確認してもらい、おかしいものは修正を行いたいです。

別言語版の開発

今後、「サクッと作文」シリーズとして、別言語版も開発する予定です。今のところ次に作る予定なのは英語です。その次は私の学習具合によってドイツ語か中国語になるでしょう。
別言語の形態素解析をするのは怖いようであり楽しみです。日本語はすんなりできましたが、韓国語の形態素解析は日本語・英語で得られる情報が少なくまあまあ手こずったので。

使用したツール等

• Visual Studio Code - Code Editing. Redefined
  コードエディタ
• GitHub
  ソースコード管理
• さくらのVPS
  アプリケーションの公開
• Storyset | Customize, animate and download illustration for free
  アプリのトップページの画像
• Favicon Generator for perfect icons on all browsers
  ファビコンの作成
• Keynote - Apple（日本）
  インフラ構成図の作成
• dbdiagram.io - Database Relationship Diagrams Design Tool
  ER図の作成
• 「PicGIF Lite」をMac App Storeで
  アニメーションGIFの作成

おわりに

初めて自分以外の人が使うことを想定したアプリケーションを開発してみて、苦労もありましたが非常に楽しかったです。

今まで自分用のアプリケーションを使っていた頃は、特にデザインの面で手抜きをしていましたが（CSSすら使わずHTMLのみでデザイン、色は白と黒）、今回はBootstrapを使用し見やすく使いやすいデザインを心がけました。

自分で使用してみての感想は非常に満足していますが、「今後について」でも書いた通り、達成度の表示がないためどこまで解いたか分からないのは大きな欠点ですので、なるべく早くに実装にとりかかりたいです。

また、このアプリの致命的な欠点は、韓国語のチェックを受けておらず、解答に信頼性がないところです。韓国語の確認を受けて修正し、「デモ版」ではない正式版をリリースしたいです。それが終わったら、多言語版も開発していきたいです。