【個人開発】卍 漢文学習アプリ界隈の覇道を進む予定のWebサービス 卍

https://www.kanbun-shugendo.com

このサイトが使われても使われなくても、これから1年以上運用していきます。
来年、結果を記事にできたらいいですねー

# はじめに
### このパンダが超かわいい
サイトのマスコットキャラクターです（激推し）
友人に「滝行してるパンダ」をお願いして書いてもらいました。
プロが書いたかと思った。マジかわ。
![w200.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1311883/848cdbd8-4642-c629-b77b-65734058c0b9.png)

::: note
パンダの名前募集中。
上野動物園かて。
:::

# サイトはコチラ
高校生向け漢文学習サイトです

https://www.kanbun-shugendo.com

β版ということで問題数めちゃ少ないです。
これからワタシが運営していくワケ。
レッツサービス開始～～～～～～覇権取るぞ～～

# 目次
1. [なぜ「漢文」とかいうマイナー科目の学習Webサイト作ったのか](#なぜ「漢文」とかいうマイナー科目の学習Webサイト作ったのか)
2. [開発の歴史](#開発の歴史)
3. [使用技術](#使用技術)
4. [苦労した点](#苦労した点)
5. [工夫を凝らした点](#工夫を凝らした点)
6. [1～2年後までの目標](#1～2年後までの目標)
7. [マーケティング](#マーケティング)
8. [まとめ](#まとめ)


# なぜ「漢文」とかいうマイナー科目の学習Webサイト作ったのか
### 「漢文なんて将来役に立たんやろ！」
近年、漢文なんか高等教育にいらないと言われていますが、それは我々の生きる身近な日常的な感覚であって、学問的には漢文は歴史学や古典等に繋がる重要な学問であるため、なんやかんや重要だと思ってます。
実際、竹島の領土問題では古文書に昔から日本が竹島を占有していたという根拠があるから日本は「日本固有の領土である」と、国際法に基づいて主張ができています。

<b><font color="red">古文・漢文の研究が無かったらこの主張はできなかったワケですねーすごい。</font></b>

という感じで歴史研究の発展には重要な科目であります。
日常で役に立つか立たんかちゃうねん。学問の発展に必要なんや。

受験科目としても、学習量と点数のコスパがいいので、さらにコスパを良くしていくことも兼ねてWebアプリを作りました。

# 開発の歴史
2022年7月25日　開発開始
2022年12月7日　β版リリース

# 使用技術
<b>バックエンド</b>
Laravel 9.x
PHP 8.1.10
Livewire 2.x

<b>フロントエンド</b>
Blade
Alpine.js 3.x

<b>インフラ</b>
ConoHa VPS（Ubuntu 22.04)

<b>データベース</b>
MySQL



# 苦労した点
## 1、Livewireの仕様の理解
日本語での情報が少ないので結構しんどかった。

「stdClassのオブジェクトはlivewireのpropsに渡せない」とか、「foreachでlivewireコンポーネントを出力する時にはwire:keyを設定しないと変な挙動になる」とか。後者はReactを学んでたおかげでたまたま勘付いたからいいよかったんですけど、React知らなかったら多分迷走していました。

　↑ 公式ドキュメントには書いているので、あらかじめドキュメントに目を通すことが大事だと痛感しもうした。

## 2、デザイン面

ありとあらゆるサイトを漁って、どんなデザインが良さそうかを考えました。
デザインの知識はほぼ無いに等しいので、まずは<b><font color="red">良いデザインと思えるサイトを探し回って良いデザインをドンドン摘まみ出していきました。</font></b>
この摘まみ出したデザインを元に、独自のサイトデザインをしていきました。

しかし今のUIはイマイチすぎるので、今後UIの改善が必要です。


## 3, 仮想専用サーバーの設定
ConohaVPSでLinux(Ubuntu)のサーバーを借りました。
元々はAWSにしようかと思ってましたが、円安ですしそもそもConoHaVPSよりりょうきん高いのでやめました。

サーバーの設定で学んだ知識がコチラ
①Linuxコマンド＆ディレクトリ構造・操作権限の理解
②ローカルPCからサーバーへのSSH接続
③サーバーへ必要なパッケージの導入(aptを使用)
④サーバーソフトウェアの理解(Apacheを使用)
⑤Apacheの設定方法
⑥SSL証明書の取得＆設定
⑦ドメインの取得
⑧GitHubActionsで自動デプロイの設定

サーバーの設定に時間はかけたくなかったのですが、<b><font color="red">少なくとも2~3週間近くかかりました。</font></b>
でも覚えてしまえば次からは時間短縮できると思うのでコレデヨシ！

# 工夫を凝らした点
## 1、出し惜しみをしない
2つの主要な機能はなるべく目に付くようにしました。
### ①トップページにクソデカ出題ボタンを設置
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1311883/72e70830-b572-92be-6965-74b258c8d560.png)
↑言うほどデカくない

まず使ってもらわないとお話にならないので、目立つように設置してます。

### ②紹介したい機能を見えるところに配置

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1311883/7cc55de5-99c6-3549-1a13-a839e2117744.png)
 ↑ 学習履歴が使えることをしれっとアピール

本当はもっとデカデカしたかったが、サイトが見にくくなってしまうのでこの文字サイズになりました。
<b><font color="red">「文字サイズ」と「サイトの見やすさ」はトレードオフになったってワケ。</font></b>

クリックするとこれが開きます。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1311883/e5a557c0-ff6a-ef53-5d5f-68b055b9321f.png)

とにかくこれを見せたかった。


## 2、ユーザー登録⇒ログインまで30秒

ユーザー登録に必要なのはID・パスワードの設定だけです。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1311883/42bb3d55-d9df-f959-7309-794f3bdad89c.png)

登録に必要な情報は2つに絞りました。

::: note
<b>登録に必要な情報を少なくした理由　２つ</b>
①「楽曲のイントロが飛ばされる」「YouTubeは倍速視聴が当たり前」などなど、今のサービスにはスピード感がないと使ってもらえないと判断したから
②ただの学習アプリなので個人情報は最小限にしたいから
:::


## 3、個人情報は最小限

高校生が使うことを想定していますが、今やITリテラシーの教育がチョイチョイ行われているわけで、個人情報を多く登録するようなサイトはちょっと懸念されてしまう可能性があるかなーと思いました。

だからユーザー登録に必要なのは「ID・パスワード」にして、メールアドレスの登録は任意としました。


# 1～2年後までの目標
目標の基準は収益で考えています。
学習サイトでお金の話をするのは気が引けますが許して。

個人開発してマネタイズまで考えるのは初なので、かなり控えめな目標です。

### ①黒字化
今後GoogleAdsenceで広告を掲載して黒字化を目指したいと思います。
ConoHaVPSは月1000円ぐらいで使えているので、ワンチャンいける。

### ②ユーザー数100人
まずは3桁に乗せたい。
そっから一気に漢文学習アプリ界隈の覇道を征く卍


# マーケティング
どうやってマーケティングしていこうかと頭を悩ませております。
なんせターゲット層が高校生かつ文系というクソムズターゲットです。正式リリースまで色々考えてみます。



# まとめ
1年後、このサイトがどうなったかの記事を書きます。
目標達成するために頑張ります！