LAMP開発の学習のため、WEB上で旅のしおりページを作れるサービスを制作しました。
どんなサービスか
サイトはこちら → http://oshitabinote.com/main.php
- WEB上に旅のしおりページが作成でき、ページ内では旅程と参加メンバーのプロフィールが自由に登録・編集・表示ができます
- 旅ごとにユニークなURLが発行され、リンクを知っていれば誰でもアクセスができるので、仲間と気軽にページのシェアができます
- 一般的な旅行＋オタクの方々の遠征に使ってもらいたいので、ちょっとしたオタ活特化要素があります
開発リポジトリ
制作目的
- これまで学習したフロント・バックエンドの実装やLAMP環境開発の実践練習をすること
- HTML / CSS の基礎
- Bootstrap4を使ったデザイン
- DB書き込み、読み込み、操作
- Dockerを使った開発環境での実装
- VPSホスティング
- 実際に実生活で利用できて、周りの人にも気軽に試用・フィードバックしてもらえる物を作ること
- ちょうどプロトタイプができたころ、趣味の野球観戦で札幌に遠征したので、同行した友人と一緒に使ってみてユーザーレビューもしてもらいました
使用した技術
フロントエンド
- Bootstrap4
- html / cssのフレームワーク
- モーダルが簡単に作れました
- JavaScript
- URLコピー機能のところでちょっとだけ
- Font Awesome
- 各UIのアイコンに使用
- Google Fonts
バックエンド
- PHP 7.3
DB
- MySQL 5.7
開発環境
- Docker
インフラ
- conoha VPS
開発にかかった期間
- プロトタイプに2w程度
- デバッグ、改修で3w程度
※1dあたり1～2hほど
機能の紹介
旅の登録
- メインページで旅を登録します。
- 日数は開始～終了日から自動算出せえよ！！って突っ込まれること間違いなしですがうまく実装できず断念しました。や、移動時間長いと3泊5日とかあるし..（苦しい言い訳←）
URLの生成
- 旅の登録に成功すると、その旅ページ固有のURLが発行されます
- その場でCopyボタンでみんなにシェアできます
- コピーボタン実装は簡単なJavascriptのサンプルコードがごろごろ転がっていたので拝借いたしました
- topページのリンクに、旅情報INSERT時に発行されるユニークなクエリ文字列をGETに付加して識別。「調整さん」の動作を参考にさせて頂きました
メンバープロフィールの登録・閲覧
- トップページでは旅のメンバーのプロフィールが登録できます
- 登録済みのプロフィールは編集や削除が可能です
- ※「推し」：オタクは隙あらば己の推しを語り推しの情報にアンテナを貼っている生き物なので、同行者間で互いの推しの情報を把握しておくことは非常に重要
- 画像のアップロード処理は未だ十分に習得できておらず、環境やデータ依存で動作が安定していないので今後改修していきたい箇所です
旅程プランの登録・閲覧
- 同じくトップページにて旅程を追加し、日程ごとに開始時間順に並べて表示できます
- 登録済みの旅程は編集や削除が可能です
- 開始終了日時はdatetime-local型で指定しており、スマホブラウザだけvalueの初期値設定がうまく効かずわりと困っています。
- 旅程一覧はスマートフォンではこんな表示になります
- お店のホームページなど、関連する外部Linkを設定しておくことができます
- 開始終了日時はdatetime-local型で指定しており、スマホブラウザだけvalueの初期値設定がうまく効かずわりと困っています。
制作工程
個人開発では大体いつも同じ工程を踏んでいます
- 手描きでワイヤーフレームを作る
- DBの設計
- 実装・デバッグ
- α版くらいの完成度で友人に触ってもらう
- 改修やバグ修正
- 拡散力を高めるための改修
1. 手描きでワイヤーフレームを作る
- 大まかなレイアウトイメージや実装要素をノートに描き起こしました。死ぬほど雑で見苦しいのでここには貼れません（）
- ざっくりDB設計も考えながら配置に起こすので、各要素ごとにどのテーブルのどんなデータを出したり追加したりするかもカラム名ベースでメモ（イメージできる範囲で）
2. DBの設計
- 必要なテーブルと設計を書き出ししました
- オンラインスクール時代に教わったフォーマットをまだ使っています。便利
3. 実装・デバッグ
- いつもメインページフロント→メインページバックエンド→サブページフロント→サブページバックエンド といった順序で実装
- Docker環境の導入により、細かなエラー修正や調整をマメにチェックしながらゴリゴリ進められて大変助かりました
4. α版くらいの完成度で友人に触ってもらう
- 「基本機能がとりあえずそれっぽく動く」「致命的なバグがない」状態まで制作してから、一旦本番にデプロイして友人に触ってもらいました
- この時点で以下の機能まで実装
- 固定URLでトップページが表示できる ※この時まだユニークURL生成の実装が間に合わなかったため
- プロフィールが追加・表示・削除できる
- 旅程が追加・表示・削除できる
- 前述のとおりちょうど札幌遠征旅行のタイミングでαリリース出来たので、リアタイで旅のしおりとして使ってもらい、あれこれ感想や改修要望をもらう機会を作れました
- この時点で以下の機能まで実装
- 「友人レビュー」にはいろんなメリットがあり開発・改修の糧として非常に有効
- 開発者ではないユーザー視点で触ってもらえる
- 忌憚のない意見を詳細にもらえる
- どんなにしょうもない出来でも「こんなの作れるの！すごいじゃん」ってある程度ほめてもらえる（←）
5. 改修やバグ修正
- 4.のレビュー結果を踏まえて改修しました。今回この過程で直した項目は大まかに以下でした
- 登録済みのプロフィールや旅程を編集・更新できるようにする
- 旅ごとのユニークURLで情報を表示する構造に変更
- mainページからURLの生成
- リンク内のパラメータを読み込んで該当の旅のレコードだけをtopページに読みこむ
- sessionの読み書きの処理を追加
- web初心者がやりがちな「フォームsubmit後、リロードすると多重にsubmitされてしまうアレ」の対策
- topページにサムネイルが任意設定できる機能の廃止
- 画像データ処理の動作安定性のわりに需要がなく、ユーザーとしてもめんどくさい機能なのでオミット
- 視認性の向上のため、表示情報を最低限必要なものだけに削減
- 旅程の日時を
yyyy年MM月dd日 hh:mm→mm/dd hh:mmにするなど
- 旅程の日時を
- URLの表示・コピー機能をtopページにも追加
- 参考サービスの調整さんがそうしていて便利だと思ったから
6. 拡散力を高めるための改修
- ここまでで多少「それっぽいもの」になるので、SNS等でアピールできるようにしました
- OGP画像の作成と設定
- 表示レイアウトの細かな調整
- まだBootstrapの扱いに慣れておらず、機種依存の表示崩れが多発して苦戦しました
- より多くの友人とか職場の人に共有して更なるレビュー収集
制作中に気を付けたこと
- 必要機能やレイアウトは既存のしおり系アプリやページシェア系サービスを複数見て、少々しっかり目に参考にしました
- 既に世に選ばれているサービスは多くのユーザーの評価を受けて改修しながら最適化されてきており、あるべき機能がきちんと揃っているため
- その上でほんの少しのオリジナリティとしてオタク向け特化要素を足しました
- 周囲におたくが多いので、先述の「友人レビュー」や拡散協力を受けやすい（個人開発において、テストユーザーをなるべく多く捕まえる手段は重要と思います）
- 「それなりに動くもの」をまずは目指し、優先度の低い機能はスパッと諦めながら進めました
- 各優先度はざっくり
ユーザー需要 > 実装工数 > 安定性の軸で振るようにしていました
- 各優先度はざっくり
今後改修したいところ
- 脆弱性対策とエラー処理の堅牢化
- まだ不正な通信やイレギュラー動作への対応ができていません
- プロフィールのサムネ画像アップロード処理を安定化
- 環境や画像データのサイズ、種別によって正しく動かない
- 情報登録時、旅の日程数を開始終了日時から自動算出→submitできるよう修正
- 編集モーダルで登録済みの日時や画像データを取得し初期値に正しく設定されるよう修正
- レスポンシブデザインの改修
- Bootstrap4の扱いが習得しきれておらず見よう見まねでエイヤな実装が多かったので、もう少し学んで精度と汎用性の高いデザインにしたい
- そもそもの全体のcss調整
- だいぶいけてないので（）
おわりに
Web開発の基本の基であり超ベーシックな部分の復習として作ったものの、何度も苦戦して自身のポンコツ度合いを思い知りました。
まだ要修正点が多いため、学習しながらアップデートは継続していきたいです。
レビューに協力してくれた友人たちに大感謝
過去には更にレベルが低く役立たずでお遊び要素 というどうしようもないミニアプリも制作しているので、同様に記事にまとめていきたいと思います（←）