🙆
お経の動画に合わせて字幕を表示するアプリ「お経クラウド」を開発しました。

2025/01/11に公開
AWS
こんにちは。大学生エンジニアの豆太郎です。
今回は、個人開発でなんやかんやあって2か月ほど開発して完成した「お経クラウド」について、私の開発の振り返りも兼ねて、このアプリを紹介したいと思います。

 アプリの説明
このアプリでは、以下の２つのことができます。
お経の動画や音声に合わせて、お経の字幕（意味や読み方）を見ることができる
葬式などの式典で配られる経本（お経がかかれた冊子）をアプリで代用できる
アプリでは動画を再生するとお経の意味や読み方が表示され、中国語で書かれているお経の意味を日本語で理解することができます。
また、仏教の葬式では経本（お経がかかれた冊子）が配られるのですが、このアプリを使用して葬式で使うお経を登録しておき、その日に読まれるお経の一覧ページのQRコードを式典の参列者に読み取ってもらうことで、和尚さんが葬式で配る経本を準備する手間を減らし、紙の消費量を削減することで環境に役立出せることができます。
このアプリは、以下のような人に向けて作られたアプリとなっています。
仏教について理解を深めたい人
和尚さん
葬式や式典の参列者

 作ったきっかけ私がこのアプリを作ろうと思ったきっかけは、仏教のお経に対する理解のしづらさの解決と、より信仰心を高めれるようなアプリを作りたいと思ったからです。
健康について関心のあった私は、いくつかの研究にて宗教の信仰心を高めることが、元々喫煙していた人が禁煙することと同等の健康的な効果があると知ってからは、それまでに宗教に対して私は「怪しい」「うさんくさい」などの抵抗があったものの、何らかの宗教を信仰しようとすぐに思い立ちました。
そして日本で生まれ育ち、幼いころからなじみの合った仏教について深く学んで実践しようと思いました。しかし、中国語で書かれて、読み方は日本で書かれたお経をいざ読んでみるものの、まったく意味が分かりませんでした。
仏教ではお経をただ読むだけで功徳があるという宗派もあるそうなので意味を理解せずに唱えることが一概に悪いこととは言えないものの、英語の文章を何も分からないまま、ただ音読しているだけで勉強した気になっている中学生のころの私と同じく、意味を理解せずにお経を読んでいても、仏教の本質を理解することはできず、仏教の信仰心を高められることはなかなかできないと思いました。
そのため、お経を読みながら、意味も理解できるようにYoutubeでお経の日本語訳での字幕がついた動画を探したのですが、思いのほか見当たりませんでした。そこで、お経の動画や音声ファイルを再生すると同時に、お経の意味や読み方を表示するアプリを作ろうと思いました。

 アプリの開発期間約２か月
大学で行われている期末テストやレポート、正月休みなども重なり、なかなか集中的に行うことができず、開発を始めてから２か月かかってようやく完成することができました。ですので実際に作業をした期間では4週間(160時間)くらいだと思います。

 技術スタック以下は、このアプリ開発で使用した技術スタックの一覧です。

 アプリの技術スタック
 バックエンドRuby(3.1.2)

RailsAPI(7.0.4)

 主なGemDevise
ActiveStorage
Rspec
FactoryBot
rubocop

 フロントエンドTypescript(5.3.3)
React(18.3.1)
Next.js(15.0.1) PageRouter

 主なライブラリMaterial-UI(5.14.7)
ESlint(8.48.0)
pretter(3.0.3)

 データベースMySQL(8.0.32)

 CI・CDGithubActions

 ソースコード管理Github

 インフラ開発環境：
Docker(24.0.5)
Ubuntu(22.04.3 LTS)
本番環境：
AWS（ECS,ECR,VPC,ALB,IAM,S3等）
zeroSSL(SSL証明書発行)
ドメイン取得（お名前ドットコム）
Gmail SMTP(メール送信)

 その他開発ツールGoogleChrome
Talend API Tester(API動作確認)
Chrome検証機能(フロントエンド動作確認)
VisualStudioCode

 ネットワーク構成図

 アプリの各機能・画面紹介
 ホーム画面ホーム画面では、お経の一覧を見ることができます。
※ホーム画面で使用されている背景には、私が過去に登ってきた山梨県の鳳凰三山から撮ってきた雲海を使用しています。お経クラウドの「クラウド」と雲海の「雲」を掛け合わせました。

 お経の詳細画面ホーム画面の各お経をクリックすると、お経の詳細ページに遷移します。
この画面では、お経の動画または音声ファイルを再生することができ、それに合わせて、お経の字幕（読み方や意味）が表示されます。

 和尚さんのログイン画面・サインアップ画面ヘッダーの右側にある「和尚さんログイン」と書かれたボタンをクリックすると、ログイン画面に遷移します。
ここでは、和尚さんがログインを行うことができます。アプリの機能上は誰でもログインを行うことができるのですが、ログインをして行うことができる機能としては、以下の
お経の編集
式典の作成、式典で使うお経の登録
となるので、お経に詳しく、式典を行う和尚さんが主にログインを行うようになります。
ここで、アカウントを持っていない人（和尚さん）は、サインアップ画面に行ってアカウントを作成することができます。
ここでは、メールアドレスやパスワード、ユーザ名などの一般的なアカウント新規作成に必要な情報の登録に加えて、宗派も設定できるようになっています。
アカウント登録時に宗派を登録してもらう理由としては、後ほど紹介するお経の編集画面にて、お経を編集する人を、そのお経が読まれている宗派の人だけに限定するためです。
この理由としては、同じお経だとしてもが各宗派ごとに異なる読み方をするために、各宗派ごとにお経の作成と編集を可能にしたいという理由と、宗派ごとのお経の読み方や意味を編集できるのはその宗派の人だけとすることで、お経の読み方や意味の信頼性を担保するためです。

 お経の一覧画面（ログインユーザ向け）ログインを行うと、ログインしているユーザのみが閲覧できるお経の一覧画面に遷移します。ここではお経の一覧を閲覧することができ、ログインしているユーザが所属している宗派で読まれているお経には、「編集」ボタンが表示されています。

 お経の新規作成画面ホーム画面の「新しいお経を作成」ボタンをクリックすると、お経の新規作成画面に遷移します。
ここでは、以下のフォームを入力することでお経の情報を登録することができます。
お経の名前
そのお経の説明
記事のURL
宗派（そのお経を編集することができる宗派）
動画ファイルまたは音声ファイル（現在はMP4,MP3のみに対応）

フォームを入力後に、「作成」ボタンをクリックすると、新しくお経が作成されてお経の編集画面に遷移します。

 お経の編集画面お経の編集画面では、先ほどお経の新規作成ページのフォームで入力した
お経の名前
そのお経の説明
記事のURL
宗派（そのお経を編集することができる宗派）
動画ファイルまたは音声ファイル（現在はMP4。MP3のみに対応）
上記のフォームの項目に加えて、
公開・非公開のラジオボタン
お経で読まれる各フレーズの追加・編集・並び替え
上記の項目の編集を行うことができます。
なお、お経フレーズの編集では、各フレーズごとにカードが作成されており、

「編集」ボタンをクリックすると、フォームとなってお経の読み方や意味、またそのフレーズが出現する動画の再生開始・終了時間を入力することができます。
本来は、生成系AIなどを使って、お経の動画を読み込ませて自動でお経のフレーズや意味、再生時間を入力させたかったのですが、いくつかの生成系AI（chatgpt,Gemini等）を使っても動画の読み込みが上手くいかずに正しい結果が返ってこなかったため、手動でお経のフレーズについて入力することになりました。
またフレーズを編集して順番を間違えて追加してしまったときに、お経の各フレーズが書かれたカードはドラック＆ドロップすることで、順番を入れ替えることができるような機能を作りました。
このドラッグアンドドロップを使って順番を入れ替える機能は今回かなりこだわったポイントです。フォームで1,2,3などの順番を入力する方法と比較して、上から並んでいる順番にカードが表示されているため、順番が直感的に分かりやすく、またドラッグ＆ドロップで入れ替えもしやすくなっています。

 式典・葬式一覧画面ヘッダーの右側にあるユーザのアイコンをクリックして、「式典・葬式の一覧画面へ」のリンクをクリックすると、式典・葬式一覧画面に遷移します。
ここでは、ログインしている和尚さんが読経することが予定されている葬式・式典の一覧を見ることができます。

 式典・葬式詳細画面式典・葬式一覧画面に表示されている各式典の「詳細」ボタンを押すと、その式典で読まれるお経の一覧を見ることができルページに遷移します。
ログインしているユーザが読経する式典である場合には、画面上部にQRコードが表示されます。
QRコードは、読み取るとこのページにリダイレクトされるようになっています。

このQRコードの具体的な使いかたとしては、以下のようになっています。
ログインしているユーザ（和尚さん）が、式典で参列者の方にQRコードを提示する。
参列者の方が提示してもらったQRコードを読み取ることでこのページに遷移して、式典で使われるお経の一覧を閲覧する。
上記の流れで、式典で配られる経本（お経の書かれた冊子）のペーパーレス化を実現することができます。

 本アプリの開発で頑張ったこと工夫したこと本アプリは、私が個人開発で作成したアプリのなかで一番時間と労力をかけて作ったものとなりました。
過去に作ったアプリではチュートリアルを見てその実装の仕方を見て一通りの実装だけを考えることが多かったのですが、本アプリの開発ではチュートリアルから離れてオリジナルで作っている機能や設計があり、色々な実装方法を記事を調べてセキュリティや計算量、実装コストなどを考慮して実装することが多かったです。
以下では、本アプリにおいて私が特に考え抜いて実装した機能や設計にについて紹介します。

 各お経のフレーズの順番を管理するデータ構造についてこのアプリではお経に登場する各フレーズの順番を並べ替えしたり、順番に表示したりするためのデータ構造を考える必要がありました。
そこで、以下の記事を参考にしました。
並べ替えできるデータをデータベースに保存する方法_zenn_Nakamura
この記事では並び替えについてさまざまな方法が記載されていますが、実装コストや計算量も含めて、方法1 (レコードに自身の順番を持たせる)と、方法6 (レコードの順序を配列として保存する)が最終的な選択肢になり、どちらを実装するかについて計算量や実装の容易さで、迷いました。
方法1(レコードに自身の順番を持たせる)では、お経のフレーズを管理するテーブル(OkyoPrase)について、

順番を管理する属性orderを追加することになり、orderでお経の登場する順番を管理することになります。
その場合のテーブルは以下のようになります。


id
name
order


1
照見五蘊皆空
3

2
観自在菩薩
1

3
行深般若波羅蜜多時
2

また、方法6 (レコードの順序を配列として保存する)では、

各お経のお経フレーズの順番を扱う配列を格納できる新たなテーブルを作成することになります。

ここで順番を扱う配列には、そのお経のお経フレーズ(OkyoPhrase)のidが登場する順番に要素として格納されます。
方法６のテーブル(Okyo_phrase_order)は以下のようになります。


okyo_id
okyo_phrase_order


1
[2,3,1]

2
[7,9,8]

ここで、okyo_phrase_orderがお経フレーズの順番を扱う配列となっていて、配列の中身は登場するお経フレーズ(OkyoPhrase)のidが順番に並んでいます。

Okyo_phrase_orderテーブルの一つ目のレコードはokyo_idが1で、okyo_phrase_orderが[2,3,1]であるため、okyo_idが1に対応するお経のお経フレーズの順番は、2(観自在菩薩),3(行深般若波羅蜜多時),1(照見五蘊皆空)で管理されていることなります。
最終的に方法1と方法6のパターンが候補に上がったのですが、方法6であると新しいテーブルを作ったり、テーブルの結合をする手間がでてくるために、方法1(レコードに自身の順番を持たせる)を選択しました。とくに方法6で、配列型の要素として、その他のテーブルのIDを扱う場合はテーブルの結合にとくに実装コストがかかるために、きっぱりと断念して方法1を選択しました。

 AWS S3への動画・音声ファイルのアップロード今回のアプリではお経の動画や音声ファイルを扱うために

デプロイしたアプリが動画や写真を参照できるよう、アクセス可能なストレージサービスに写真や動画をアップロードする機能が必要でした。

今回はアクセス可能なストレージサービスとして、AWSS3を使用しました。
動画や音声ファイルをS3にアップロードする方法は様々あり、

フロントエンド（Next.js）から直接アップロードするべきか、バックエンド(Rails)でActiveStorageを使用してアップロードするべきか等を検討する必要がありました。
RailsをバックエンドとしたSPAでのファイルアップロード機能の作り方に悩んだ話
Active Storage の概要_Railsガイド
【Rails+Nuxt】RailsのActive Storage ダイレクトアップロード機能を Nuxt から使う_ラジコード
上記のブログ記事を参考にした結果、一番楽に実装できそうなRailsのGemのActiveStorageを使用し、フロントエンドではformDataを使って動画をS3にアップロードする方法にたどり着きました。
実際にこの実装だと、バックエンドに関しては数行程度の変更を加えるだけで実装することができました。
ただ、RailsのGemであるActiveStorageに頼りきりな所があり、アプリのバックエンドを別のフレームワークにリプレースすることになった場合に、フロントエンドの実装も変える手間がかかってしまいます。
今回は個人開発なのでリプレイスの問題とかは無いのですが、時間があったら、フロントエンドからS3にダイレクトアップロードをする機能を作って、バックエンドに依存しない実装を行ってみたいです。

 感想本アプリ開発では、まだ以下のように
Youtubeの埋め込み表示が上手くいかずに後回しにしたため、Youtube上にあるお経の動画の再生ができない
生成系AIが読み込んだ動画の字幕や再生時間を正確に出力できないため、手動で字幕や再生時間を設定する必要がある。
といった不便さが残り、一通り完成した後も歯がゆい感じが少し残りますが、最後まで完成することができ、私自身おおむね達成感を感じています。
このアプリを開発するにあたって、zennにて辻野さんが公開されている【独学ポートフォリオ開発応援】実務未経験から学べる！Rails×Next.js×AWSハンズオン解説がとても役に立ちました。
個人開発をしていて様々な記事を参考にすると開発をすると、各記事のバージョンや環境の違いによってエラーが多発したり、同じ技術スタックやバージョンで開発している記事を見つけるのに時間がかかったりして、開発どころでは無くなることが多いです。
ただ、この本を使うことで、一つのバージョンや環境に絞って開発～インフラ構築までを行うことができ、一人でもつまづくことなく、スムーズに開発することができます。
ですので、Rails,Next.js,AWSの技術スタックでフルスタックで開発をしてみたい人には最初の一歩としてこの本はすごくおすすめです。
また、それ以外の技術スタックでフルスタック開発をしてみたい人は、この本のように開発からインフラまで一連の開発工程をまとめて提供している記事や本を、まずは当たってみると良いと思います。
以上、読んでいただきありがとうございました。