CakePHPを使い、DB設計、ページ遷移、デザインまで１から考えたオリジナルアプリです。
制作期間:
2ヶ月
背景：
スキー場サイトでゲレンデの紹介はあるものの、コース上にある様々な自然にできた地形（ハーフパイプのように登れそうな壁、コブ、小さなジャンプ台のような山）は特に掲載されていない。
こう言った情報をゲレンデに行く前に知れたら、普通に滑るだけじゃなく、自然の地形でも遊んだり、ウィンタースポーツの遊びの幅が広がり、楽しめるのではないかと考え、このアプリを制作しました。
目的:
投稿のシェアと評価を互いにし合う事を目的としたアプリ。
工夫した箇所:
CakePHPにあるページネーション 機能とソート機能を使って、ツイートを並び替えることができるようにしました。
各投稿の詳細、編集、削除の選択項目はモーダル画面を用意し、スマホ等のPC以外のデバイスの際にユーザーが選択しやすい様にしました。
このアプリの目的に対して、必要な機能と、必要ない機能を取捨選択し、必要な機能を行うためのDB設計を意識して制作しました。
工夫の一つとして、ページ遷移図も制作しつつ、アプリを制作していましたが、書き方がいまいち分からず、以下の様なフローチャート形式で作りました。
ただ、かなりゴチャゴチャしてしまい、見やすく作る方法を今後さらに勉強していきます。
取扱説明:
1.アカウント作成
ログイン画面の緑のボタンからアカウント作成画面へ移動し、入力欄に各項目を入力して、createボタンを押してください。
createボタンを押して暫くしても反応がない場合は、既に存在する名前やメールアドレスなどが使われている可能性がありますので、お手数ですが別の物を入力して再度お試しください。上手く登録された場合はログイン画面へリダイレクトします。
※実際のお名前、メールアドレスはご遠慮ください。架空の物で登録をお願い致します。
2.ログイン
アカウント作成画面からログイン画面へ戻ってきましたら、先ほど登録した名前とパスワードを入力してloginボタンからログインしてください。
3.All Tweets画面
上に並んだナビバーのAdd Tweetをクリックし、移動できます。アプリを利用している全ユーザーの投稿が並んでいます。
4.Follower Tweets画面
上に並んだナビバーのFollower Tweetをクリックし、移動できます。自分がフォローしたユーザーの投稿が並んでいます。
5.My Page画面
自分のアカウント情報やフォローしたユーザーなどの情報が確認できます。
6.Like Tweets画面
上に並んだナビバーのLike Tweetをクリックし、移動できます。自分が「いいね」したツイートが並んでいます。
7.Add Tweet画面(ツイートの投稿)
上に並んだナビバーのAdd Tweetをクリックし、ツイートの入力画面に移動しますので、そちらから投稿してください。
8.My Messages画面
上に並んだナビバーのMy Messagesをクリックし、移動します。自分または他のユーザーのツイートに対して書いたメッセージが一覧で表示されます。吹き出しマークをクリックすると、メッセージを書いたツイートの詳細画面へ移動できます。
9.ツイート詳細画面
各ページで並んでいるツイートの右にある矢印マークをクリックすると投稿の具体的な中身を表示する画面へ移動できます。
10.ツイート編集・削除
自分の投稿のみ編集・削除が可能です。各ページで並んでいるツイートの右にある矢印マークをクリックすると選択肢にedit(編集)・delete(削除)が出ますので、そちらから各操作を実行してください。
11.フォローする
各ページで並んでいるツイートのユーザー名をクリックするとそのユーザーの詳細ページに移動します。青いFollowボタンを押すとフォローできます。
※フォローしているユーザーの場合はボタンの文字がUnFollowとなります。フォローしていないユーザーの場合はボタンの文字がFollowになります。
12.いいね
各投稿に表示されているサムズアップ(親指を立てている手のマーク)をクリックするとできます。いいねしているツイートはマークが白く塗りつぶされて表示されます。いいねしていない場合はマークが塗りつぶされていない状態で表示されます。
使用言語：
html
CSS
JQuery
PHP
webアプリケーションフレームワーク:
Cake PHP(MVC: Model View Controller)
ログイン機能(CakePHP)
ログイン機能はCakePHPにある「Auth」という認証コンポーネントを利用しています。
CRUD機能（CakePHP）
Create（生成）・Read（読み取り）・Update（更新）・Delete（削除）
ユーザー/投稿/メッセージ/いいね/フォローの各CRUD機能は、CakePHPのbakeを使って作成しています。
モーダル画面(jQuery)
View側でPHPを使って繰り返し処理を行なっている各投稿に対応したモーダル画面の実装をJQueryで行なっています。
レスポンシブ時のハンバーガーメニュー（jQuery）
CSSのtransrateプロパティの付け外しとflexboxをrowからcolumnへと切り替えを行い、実装しています。
画面左側にあるスライド式のソートメニュー(jQuery)
ハンバーガーメニューと同様の操作により、実装しております。
herokuを使った公開方法
以下の方法を参考に設定しております。
—作品ページへは以下からアクセス可能です—
こちらはheroku環境を使用して公開しており海外サーバーへの接続になりますので、少し読み込みに時間がかかるかもしれません。
QRコード
