画像共有サイトを作ってみた

こんにちは！

練習で画像共有サイトを作ってみましたので、
備忘録としてポイントをまとめていきたいとおもいます。

開発情報

今回開発に使った言語や環境等の説明

開発言語等
フロントエンド：HTML/CSS
サーバサイド：PHP
データベース：MySQL

開発環境
OS:Windows10
開発ツール:Atom,Xampp
開発環境はWindowsですが、本番稼働はLinuxを想定

想定利用環境
今回は、スマートフォン向けサイトとしてリリースすることを
想定した開発となります。開発はWindowsPCで行いますが、
テストはiPhone6で行っています。

トップページと会員登録

トップページでは、次の画像のように現在アップされている画像を
左上が最新になるように並べて表示しています。
こちらは調整は少し大変ですが、HTMLとCSSであらかたできるので
特に説明する要素はありません

会員ページの作成
今回は会員制サイト開発ですので、新規会員登録フォームと
ログインフォーム、会員専用ページを用意していきます。
会員登録時入力する情報はログインIDとパスワード、
そしてニックネームのみのシンプルなものになります。
また、会員登録後にニックネームとアイコンを変更できるような
システムにしておきます。

ログイン画面
IDとパスワードを入力することでログインができる仕組みで、
会員登録していない場合は、ここから新規会員登録に進む
今回はパスワード忘れた時の対象方法がないものの、
メールアドレスを登録しておけば対処可能

新規会員登録フォーム
会員登録時ニックネーム、ログインIDとパスワードを登録し、
ここで入力したIDとパスワードで、ログインフォームよりログインします。
このページとログイン画面についてはセキリュティを重点的に実装しています。

会員専用ページと会員のみできること

ログインしてマイページに進むと次のようなページになります。
ここでは以前投稿した画像一覧と新規投稿をすることができます。
以下投稿リストと新規投稿の機能及び会員のみが使える機能です。

投稿リスト
以前投稿した画像の一覧が表示されます。
評価された数とタイトル及び説明が表示され、
投稿した画像を削除することができます。
1ページに10枚表示され、アップされた画像が10枚より多い場合
次のページに古い順で移動します。

新規投稿
タイトルと内容を入力して画像を選択し、投稿ボタンを押すことで
新規投稿をすることができます。投稿の際、HTMLタグが含まれる場合
タグは無効化される仕組みとなっています。（セキリュティ対策）

投稿された画像の評価
会員のみがすでに投稿された画像を評価することができ、
自分が評価したもののみ評価を取り消すことができます。
評価は1アカウント1回のみ有効となります。
また、下限は0となり、上限は特にありませんが、
ユーザー数＝上限数になるかと思われます。

改善点など

Twitter連携機能の追加
Twitter経由でもログインする機能を追加予定です。
APIの利用申請や基本的なphpでの連携は実装済みですので、
残るはテストのみとなります。

新規投稿と投稿リストの分離
こちらは時間かかりそうなものの１つになります。
ただ、利便性もあるのでやりたい項目の１つになります。

課金システムの導入
こちらも基本的な実装部分はクリアしていますが、
どのコンテンツに適用するかで迷い中です。
濃厚な部分としては、優先表示機能等を課金などを考えています。

まとめ

まだまだ改善点が多いですが、この改善点は次回のアプリ開発に
生かして実装していく予定です。また今回紹介したサイトは
実際には開発しましたが、リリースはしていませんのでご注意ください
好評な場合はリリースする可能性があります。

お問い合わせ先

間違いや不適切な点がある場合はお手数ですが、
下記までお問い合わせいただけますと幸いです。

かぴそふと問い合わせフォーム
https://www.kapysoft.com/Contact/Contact/index.php