[ポートフォリオ]　エンジニア専用書籍サービス EggBook について【FWなし。素のphpで作成しました】

##はじめに
はじめまして
現在、転職活動を行なっている なおと です。
まずは、ご覧いただきありがとうございます。

この記事では
ポートフォリオとして使用している「Eggbook」について説明していきます。

##ポートフォリオのURL
[Eggbook](https://eggbook.marucoblog.com/)

![May-12-2019 15-50-54.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/352124/42fa5ca8-b736-aed5-6364-b736baf2105c.gif)


（ユーザー登録機能を行うと、書籍登録やお気に入り機能が使えるようになります。
登録を行わなくとも、大半の機能は使用可能です）

##主な機能
◯フレームワークを使わないPHPを用いたユーザー管理機能
　・ユーザー登録機能
　・ユーザー編集機能
　・ユーザー削除機能
　・ユーザーログイン機能

◯フレームワークを使わないPHPを用いた商品（書籍）管理機能
　・書籍登録
　・書籍詳細
　・書籍一覧（ページネーション）
　・書籍編集
　・書籍削除
　・書籍検索機能（カテゴリー（言語）/ランク（習得難度）の検索）
　・書籍ソート機能（ページ数/金額のソート）

◯商品詳細機能
　・書籍詳細表示
　・お気に入り機能
　・Amazonへのリンク
　・掲示板機能（メッセージ投稿）

◯その他機能
　・

##ポートフォリオ概要
エンジニアの中で**良本**とされている参考書。
しかし、相手のレベル感との違いで、オススメされた参考書が難しすぎることも...

そこで、
**ページ数の検索**により、参考書の分量の推測に役立てるだけでなく
参考書の**難易度を３段階で分類**し、検索可能にできるようにすることで

新しい言語を学びたての人や、
すでに使いこなしているが＋αの情報が欲しい中・上級者向けの書籍を
見つけやすくするサービスです。

##具体的な機能の詳細について
それでは詳しく見ていきましょう。

###①書籍登録では書籍のタイトル、ランク、カテゴリー、書籍画像、ページ数、書籍URL、詳細・説明を入力し、投稿可能。

![May-12-2019 16-30-10.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/352124/cc051e61-b79d-619c-32ac-934cca880ccd.gif)

商品登録の画像のライブプレビューはjQueryを用いて実装しています。
CSSでopacityを0とし、選択範囲を広げ、ドラックアンドドロップでInputされるように設定しています。

また、画像を入力した後は、Inputされた画像はData URLを用いて
.attrでsrcを変更することで動的に画像表示しています。

![スクリーンショット 2019-05-12 18.16.11.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/352124/a0757941-c464-2dad-765f-0435359c2c74.png)

また書籍の登録と編集に関しては同一のhtmlを条件分岐行うことで使い分けています。
そのためログインを行わないと登録できないようにし、
DBのデータの有無でDBにINSERTを行うのか、UPDATEを行うのかを決定しています。
![スクリーンショット 2019-05-12 20.06.53.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/352124/99f264f3-fd0d-939a-eb65-910ab069f402.png)

バリデーションチェックでは、PHP側で行い、
　・未入力チェック
　・同値チェック
　・文字数チェック
　・半角チェック
　・最大、最小文字数チェック
などを正規表現を使用しつつ、判定を行いました。

![スクリーンショット 2019-05-12 20.07.59.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/352124/95b531a2-8a44-7c26-68bd-e398e355e4f3.png)

![スクリーンショット 2019-05-12 20.08.23.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/352124/9a77f70a-e236-262e-17ce-ce28cdeb834a.png)


###②書籍一覧画面では、書籍検索機能、ソート機能、ページネーション機能の実装

表示件数を動的に変更するように設定し、
DBのデータを読み込む順序とデータ量を変化させることで、
検索・ソート機能を実装しました。

ソート・検索機能
![May-12-2019 16-48-15.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/352124/ddbade61-80cd-88f6-6262-c350c903f1e9.gif)

![スクリーンショット 2019-05-13 14.44.45.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/352124/633a174b-405c-474e-7bcc-5aac723fae78.png)

総書籍数と表示数からページ数を算出し、
総ページ数と残りのページ数から条件分岐を行うことで

現在のページを起点として±２ページを表示する
動的なページネーションを実装しました。

ページネション機能の実装
![May-12-2019 16-47-19.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/352124/3c14a947-ff62-fe1d-9886-3bff693b41eb.gif)

![スクリーンショット 2019-05-13 14.48.46.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/352124/c6d08a8a-0f4d-3b4e-77d2-77417af43dbe.png)



###③書籍詳細画面では、Ajax処理によるお気に入り機能の実装や掲示板機能の実装

商品詳細画面では、右上のハートマークを押すことで
お気に入りに追加できる機能をAjaxを用いて実装。


Amazonへのリンクを設置。
商品一覧へ戻った際も検索して表示している場合は
GETで検索条件を渡し、検索していた画面を表示するように設定しました。

Ajax処理によるお気に入り機能や掲示板機能
![May-12-2019 16-52-29.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/352124/fe63dc6d-c865-2edf-31cf-99c25e3f567f.gif)

お気に入り機能
![スクリーンショット 2019-05-13 15.01.23.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/352124/f8274931-7c5e-26e6-7579-8996d3315f8e.png)

掲示板機能では、
LINE風の見た目に変更し、親しみやすさと使いやすさを向上させています。

掲示板機能
![スクリーンショット 2019-05-13 15.02.09.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/352124/4725a7c6-ac35-2827-53a2-f0c9d73e685f.png)



###④ログイン機能では、ユーザー登録・削除・編集、パスワードリマインダー機能を実装

ユーザー登録時やログインのバリデーションチェックは
　・未入力チェック
　・Email形式チェック（正規表現）
　・Email重複チェック（DBと連携）
　・同値チェック
　・固定長チェック
　・最大、最小文字数チェック
　・半角チェック（正規表現）
　・電話番号形式チェック（正規表現）
　・郵便番号形式チェック（正規表現）
を行いました。


パスワード保存時には　password_hashによるハッシュ化を行い
セッションのリミットは1時間とし、login_limitとしてセッション内に埋め込みました。

![スクリーンショット 2019-05-13 15.20.57.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/352124/a901582a-b7ef-9035-2a5c-191654ccb755.png)

ログイン時には、 
password_verifiを使用し、ハッシュ化されたパスワードを確認。
セッションの制限時間を更新・延長を行い、マイページへ遷移させるようにしています。

![スクリーンショット 2019-05-13 15.24.39.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/352124/0696ad70-c7c9-fd93-8db2-2b6607dcb1de.png)


###⑤ユーザー画面では、お気に入りした書籍や登録した書籍を閲覧可能

マイページでは、user_idを元に
自身がお気に入りした書籍や、登録した書籍を閲覧できるようになっています。

![May-12-2019 16-56-17.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/352124/4589f285-0f5c-23d4-b693-30267af78dc9.gif)

###⑥セキュリティ面の対策として、なりすまし防止、SQLインジェクション対策、サニタイズを実装。

セッション管理によるなりすまし防止
![スクリーンショット 2019-05-15 11.58.20.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/352124/347a6056-fd49-4244-2614-1b34ced5ae5f.png)

DB接続時は、プレースホルダーによるSQLインジェクション対策
![スクリーンショット 2019-05-15 12.00.10.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/352124/4db57cdb-32a8-acc5-bbd7-62b15b3217be.png)

サニタイズ関数も使用

![スクリーンショット 2019-05-15 12.04.09.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/352124/abf20e7f-4bb3-e1da-cd97-e744457f1e43.png)


この他に④でも述べていますが
パスワード管理にはハッシュ化を行って管理しています。


##どうやって作成したのか

1.構想：　必要な機能を洗い出し
　その機能を実現するために必要なテーブルの整理（第1,2正規化）。

２.準備：　ワイヤーフレームを作成

３.制作：　各ページの作成
　書籍一覧ページとマイページの主要なページ2つから作り込み、機能を拡張を繰り返す。

４.デバッグ: console.logやdebug(),print_r()等を繰り返し行い
　値が取れていないない場合、なぜ取れていないのか仮説と検証を繰り返す。

##制作期間
　学習時間を随時アップしているTwitter（https://twitter.com/190131start ）から算出
　
　約32日　計104.7時間ほど

##このアプリの課題
　・ユーザーが登録したくなるような動機付け 
　・コメント機能・検索機能のAjax化
　・書籍登録方法の簡便化（API）
　・表示の高速化

##スペック/DB
　・HTML5
　・CSS３
　・jQuery 2.2.2
　・ローカル環境 MAMP 5.3 /MySQL 7.3.1 
　・本番環境　WordPress/MySQL 7.2.6
  
##最後に
　　Twitter：https://twitter.com/190131start

見込みがあると思った企業の方へ。
是非連絡お待ちしております！！！！！！