PHPのフレームワーク「FuelPHP」の勉強がてら、日本語教育書籍に特化した「Nihongo Books」というサービスを作りました。
ということで、開発のメモとしてサービスの概要やら、構築手順やらをメモとして残しておきます。
目次
サービス概要
「Nihongo Books」は冒頭でも書いてとおり、日本語教育書籍に特化した本のレビューサービスです。
閲覧者は会員登録なしで、誰かが書いたレビューを見ることができます。
レビューを投稿したり、編集したい場合は会員登録が必要になります。
このサービスを作った経緯
元々僕が日本語教育に携わっていることもあり、日本語教育に関する何かを作ろうと思いました。
また、以前から一度レビューサービスのような物を作ってみたいと思っていたこともあり、日本語教育に関連するレビューサービスは何かと考えた末、「日本語教育書籍のレビューサービス」を作るに至りました。
他にも案として「日本語学校のレビュー」もありましたが、こちらはサービスは作れても、データを集めるのが難しそうだったため却下しました。
競合サービスはあるか？
書籍のレビューサービスはたくさんあります。また、レビューサイトでなくても、最近のオンラインショップには標準でレビュー機能もついていることが多いです。
しかし、日本語教育書籍に特化した書籍のレビューサービスはありません。
よって、本サービスを作ることで日本語教師の方が欲しい本を見つけやすくなるのではないかと考えました。
サービスのターゲット
- 日本語教師
- 日本語教師に興味がある人
マネタイズ方法
Amazonや楽天のアフィリエイトサービスを利用します。
サービス構築の流れ
機能一覧の洗い出し
今回、作成した機能は以下。
- 書籍一覧
- 書籍詳細
- レビュー投稿・編集・削除
- レビュー 一覧
- ログイン
- ログアウト
- パスワードリマインド
- プロフィール編集
- パスワード変更
- 退会
本を登録するための管理者機能は作っていません。
というのも、管理者は私一人なのと、日本語教育書籍に特化しているため書籍の数が知れているため、工数を考え不要だと判断しました。
デザイン設計
画面のデザイン紙に手書きでワイヤーフレームを書いた後に、Photoshopを使ってデザインカンプを作成しました。
普段、写真の加工ぐらいにしか使っていないため、かなり時間がかかりました。
サイトの色に関しては、「本」のサイトということもあり、茶系の色をメインカラーとして採用しています。
テーブル設計
デザインカンプを元に、必要なテーブルや項目を洗い出し、Googleスプレッドシートにまとめました。
この内容をもとにphpMyAdminを使ってテーブルを作りました。
コーディング
デザインカンプを元にまずは画面だけを作成し、その後サーバーサイド側の処理を構築しました。
構築中につまづいたところ
1. FuelPHPの使い方
そもそものFuelPHPの使い方がきちんと理解できていないので、今回はここが一番苦労しました。
POSTしているのに、データが送信できていなかったり、リンクを貼っているのにうまくリンクできていなかったり、ページの遷移やデータの送受信のところで結構つまずき、時間を使ってしまいました。
このあたりについては以下の記事で紹介しているサイトや本が参考になるので、同じように困っている人がいれば参考にしてください。
また、次回以降FuelPHPを使うときに苦労しないように、つまづいたポイントや使い方について当ブログでもまとめています。
2. ajaxの通信の実装
今回は初の試みとして、モーダルウィンドウを多用し、なるべく画面の遷移を減らしています。
具体的にはログイン、新規会員登録、レビュー投稿・編集・削除で実装しており、この実装にかなり苦労しました。
というのも、単なるajaxだけならそこまで苦労はしなかったと思いますが、FuelPHPを使っていることもあり、若干通常の書き方と異なってきます。
しかも、公式ドキュメントにはあまり詳しく書いておらず、FuelPHPに関する記事もインターネット上にはあまりありません。
なので、「なんとかくこう書いたらいけるかなー、あ、エラーだ・・・。」とトライ＆エラーを繰り返しなんとか実装しました。
FuelPHPを使ったajaxの書き方は当ブログでもまとめているので、同じようにつまづいている人が入れば参考にしてみてください。
【PHP + jQuery】Ajaxを使ってメール送信機能を実装する方法
参考になったサイトや書籍
Vue.jsのツボとコツがゼッタイにわかる本
(2024/04/18 10:56:46時点 Amazon調べ-詳細)
書籍一覧画面では、こちらの本に書かれているソートや絞り込み機能を使っています。
FuelPHP入門
(2024/04/18 02:44:38時点 Amazon調べ-詳細)
FuelPHPの基本的な使い方を学ぶのに利用しました。
Qiita
レビュー登録の星の機能を実装するのに、こちらの記事を真似しました。
参考
口コミサイトの星(★★★☆☆)をCSSだけで実装してみたQiita
今後のアップデート予定
実は、レビュー機能一覧はまだ中途半端な状態で止まってます。
なので、ここを完成させたいです。
あとは、プロフィール写真も現在固定になっているので、これを自由に変更できるように改修する予定です。
