今回はデプロイが苦戦しているポートフォリオの紹介記事です。
コンセプト、ユーザーインターフェイス、機能について画像を踏まえて説明していきます。勉強期間は４ヶ月と数日で作ったものです。
１、コンセプト
初めて作ったポートフォリオを共有しようという目的で作りました。
作ろうと思ったきっかけは、スクールに通っていたときから、未経験の人がどんなポートフォリオを作っているのかが気になったからです。また、今後、この業界を目指す人にとってもあったら便利かなと思い作りました。
２、ユーザインタフェース（UI）
改良する前は、コンセプトも適当で、画面もとりあえず、見えればいい程度に思っていたので、それを改良しました。
トップページ①
トップページ②
トップページ③
トップページ④（レスポンシブ対応）
トップページ⑤（レスポンシブ対応）
以上が簡単なUIの紹介です。基本的にはどのページの構成も同じです。
・工夫した点
デザインを日本人が好む青ベースにしたこと、余白の統一、文字列の余白を加える、ボタンに色をつける。色には原色を使わない。色の比率などにこだわって作りました。
・機能一覧
・非会員の場合
- 会員限定ではないニュースとポートフォリオの閲覧のみ可能
・会員の場合
- 会員限定のニュース、ポートフォリオ記事の閲覧が可能
- ポートフォリオ 記事の投稿、編集、削除が可能
- ポートフォリオ 記事は下書き、会員限定、公開の三つで選択でき、見せる人を限定できる。（下書き：書いたユーザーのみ、会員限定：会員のみ、公開：会員登録していない全てのユーザー）
- ポートフォリオ に画像とつけることができ、画像の順番を変えられる。
- 会員のプロフィールを編集できる
- 会員を名前で検索できる機能
- いいねを押すことができる。
・管理者の場合
- ニュースの投稿、編集、削除機能
- ニュースには時間により自動で表示されなくすることもできる
- 会員の登録、編集、削除
- 会員を名前で検索できる機能
- ポートフォリオ記事の作成、編集、削除機能
- ポートフォリオ記事は会員と同じく見せる対象を制限できる
具体的な機能は動画を見るとわかりやすいです。
ログインしたところから解説します。
会員の機能
１、ポートフォリオ投稿機能
・ポートフォリオは、タイトル、内容が空欄では投稿できない様なバリデーションをつけています。
・状態の部分で、下書き、会員限定、公開の3つに分けて、閲覧できるユーザーを分けることができます。
２、いいね機能
ポートフォリオ記事に「いいね！」することができる。
３、会員検索と詳細確認
検索機能では、会員名とスクール名で検索可能、データベースで、会員とスクールにindexをつけている。
また、URLには外部のサイトに飛べる様に設定してある
４、ポートフォリオ記事に画像投稿も可能
上記はポートフォリオ記事詳細のページです。
５、アカウント編集機能
プロフィールの画像選択には、一定の形式でないと登録できない様にバリデーションを設定。
ユーザー名には最小文字数を設定
メールアドレスは空欄は可ただし、入力する場合はメルアドの構文チェックを行う。
性別はデータベースでデフォルト値をつけ、デフォルトで男性がチェックされる様に設定
６、パスワード変更
説明は不要だと思いますが、パスワードを変更します。
現在のパスワードを間違えた場合や新しいパスワードと確認が一致していなければ登録できません。
以上が会員の機能になります。
管理者側の機能紹介
上記が管理者画面のトップページです。管理者のみ、会員の新規登録とニュースの投稿編集、削除ができます。
右端に、編集と削除の項目が管理者のみ設定されています。
先ほどのアカウント編集ページとほぼ一緒なのですが、登録する際に、会員番号が数値でないと登録できない点が異なります。
バリデーションはタイトルと本文の空欄での登録は不可としています。
また、掲載終了日時を設定し、自動で消える様にも設定しています。
加えて、ニュースの公開を会員限定かそうでないかを選択できます。
以上がポートフォリオの主な機能の説明です！
因みに、管理者でない人にはメニューバーにはポートフォリオと会員一覧しか見ることができない様になっています。
以下が管理者のメニュー
以下が会員のメニュー
以下が会員でない人のメニュー
以上になります。
非常にわかりづらいかと思いますが、簡単に説明するとこの様なポートフォリオになっています。
今後の課題しては、ポートフォリオ記事にコメントをつけたりできる機能をつけたり、動きのあるサイトにしていこうかと思っています。
ポートフォリオとは直接的には関係ないが、Githubの管理の仕方にも問題があり、修正がすごく手間であること、ターミナル上でのコードの編集が出来ていないことなど問題が山済みであったため、そちらを修正するのが先だなと現在は思っているところ…
コメントを残す