作品投稿サイト『 DROP FROG 』

サイトURL：https://drop-frog.com

PHPフルスクラッチで構築した作品です。

■作業時間

企画〜画面設計：　全36画面　20h　

テーブル設計：　全21テーブル　8h　

画面モック：　全24画面　60h

機能構築〜デプロイ：　230h

合計：　318h

■概要

『DROP FROG』は様々な駆け出しクリエイターが作品を展示し評価してもらえるコミュニティーサイトです。

–自身の作品を公開し、評価し合うことで新たな気づきを見つけたい

–様々な分野の作品に触れてみたい

–趣味で作ったはいいが、公開する所がない

そんな駆け出し達の憩いの場になればと思い、作成しました。

■使用言語

HTML・CSS（SCSS）・JavaScript（jQuery）・PHP

■実装前定義・設計

このBLOGにてまとめています。

https://dewdropblog.com/2023/07/02/tech/post-128/

■GitHub

https://github.com/num33dewdrop/drop-frog

■評価してもらえるコミュニティーサイトのためのリアルタイムコメント機能

各コンテンツに付随する掲示板にてコメントの閲覧、投稿が可能です。チャットのようなリアルタイムでのコメント投稿の閲覧が可能です。コンテンツに対するアドバイスや、質問等様々な会話を通して、クリエイター同士の繋がりを広げられるように考案しました。また、マイページの掲示板一覧にて、発言したコンテンツの掲示板を管理でき、いつでも交流可能です。

■様々なクリエイターが作品を展示するための画像アップロード、詳細、URL記載機能

自身の作品を投稿し、紹介することができます。画像を5枚まで登録。説明文、苦労した事、コンセプトなどを記載可能。サンプルサイト・サービス・アプリ・ゲームなどを他の利用者に実際に触れてもらうため、URLを記載できるようにしています。また、GitHub公開リポジトリも登録可能です。ソースコードも含めた様々な会話ができると良いと思い考案しました。まだ公開したくない場合は、公開設定により、下書き状態に留めておくことが可能です。公開設定はいつでも変更可能です。

■個人の作品の公開する所を提供する公開マイページ

個人のTwitterアカウント、BLOG、GitHubアカウントを登録し、公開できます。自身の紹介文で簡単な経歴や、スキルも紹介できます。公開済みの投稿作品も全て、このページに表示され、クリックすると作品詳細ページに遷移します。このため、簡易なポートフォリオサイトとしても利用できれば良いと思い作成したページです。

■その他機能使用技術

・ログイン、ログアウト等基本的なWEBサービスの機能全般・各種データ処理（DB接続、データの入出力、バリデーション等）・ajax（マイページの画面切り替えの非同期処理等）・GETパラメータ操作（検索画面の管理等）・API（都道府県データの郵便番号での自動表示）・セキュリティを考慮したサニタイズ、ハッシュ化

■苦労点・まとめ

企画から、機能の洗い出し、画面設計、データベーステーブル設計・構築、実装全て一人で行いました。実装前の段階では、特に、慣れないワイヤーフレームや画面デザイン面で苦戦しました。様々なサイトを参考に、レイアウトを考え、実装してみてはやり直しの連続で時間が大幅に取られました。今後はデザイン面も学習していきます。今回、設計段階で実装方法が不透明な部分が何機能かありながら進めた結果、見事に全て詰まってしまいました。実装までの段階で、脳内でどう実装するのか、どういうSQLを書くのかが大凡思い描けているべきであり、どんな作業も先を見る力、想像力が重要と学びました。次はもっと緻密に計画・設計をし、スムーズな開発を心がけます。