はじめに
フロントエンドエンジニアを目指してプログラミングを学習しています。
トンテキと申します。
プログラミング学習のアウトプットとして自作のWebサービス-SHAKYO-を制作、公開しました。
この記事では-SHAKYO-の概要や制作過程について説明します。
URL
リンク先はこちら- SHAKYO -
目的
・フルスクラッチ開発を行うことでWebアプリの基本的な構成、動作を知る
・自作のWebアプリで同じ初学者の方の役に立つサービスを提供したい
スペック
使用言語 / HTML５/ CSS3 / Javascript / PHP
DBMS / MySQL
開発環境 / MacOS Mojave 10.14.6
バージョン管理 / SourceTree(3.0.15)
本番環境 / xserver
主な機能
ユーザー管理機能
・ユーザー登録機能
・ユーザーログイン機能
・ユーザー編集機能
・ユーザー削除機能
LPサイト登録管理機能
・LPサイト登録
・LPサイト編集
・LPサイト詳細
・LPサイト一覧（ページネーション）
・LPサイト検索機能（難易度選択機能）
LPサイト詳細機能
・LPサイト詳細表示
・LPサイトへのリンク
・お気に入り機能
・掲示板機能（メッセージ投稿）
概要
-SHAKYO-は、写経・模写用のLPサイトを紹介するWebサービスです。
私自身LP写経・模写に挑戦する際、まずサイトを探すのに時間がかかったり、いざ初めて見ると難しく挫折しそうになっていました。
LPを集めたサイトはあるけれど、模写に適した初心者向けのLPだけを集めたサイトは無いな、あったらいいなと考えていました。
そしてPHP学習のアウトプットとして同じプログラミング初学者の時間短縮になればと思いこのWebサービスを作りました。
・誰でも気軽に利用できるようにゲストログイン機能の実装
・LP模写について進め方のコツや感想の情報交換ができるようにコメント機能を実装しています
開発手順
1.データベース設計
実装させたい主な機能から必要な項目を洗い出し、サンプルとしてExcelに必要なDB情報を書き出していきました。
洗い出した情報を元にテーブルを作成します。
Excel一例
2.AdobeXDデザインカンプ作成
プログラミング学習者の多くは20代〜30代前半と想定
キーワードは、ノマドフリーランス、モダンな会社
イメージとして若い人が使う、オシャレで無○良品のようにシンプルな雰囲気の仕上がりを目指しました。
3.モバイルファーストに合わせたレスポンシブ対応
またモバイルファーストに従いレスポンシブ対応させています。
プログラミングの学習報告はTwitter上での発信も多く、LPの写経や模写はSNSユーザーの間で認知されている学習方法です。
Twitterの報告ではユーザーの80％以上はモバイル端末からTwitterにアクセスしているとあります。
※ 補足：Twitter内部データ
https://business.twitter.com/ja/targeting/device-targeting.html
スマートフォンからの閲覧が大多数であればレスポンシブ化は必須と判断し、作成当初よりレスポンシブ対応で制作を進めていきました。
公開後、実装したGoogleアナリティクスによる分析でアクセス元の77％はスマートフォンデバイスからという結果が得られレスポンシブ対応は必須であったことが証明されました。
4.コーディング
デザインカンプを元に画面モックを作成
その後裏側の機能を実装していきます
5.xserverデプロイ
ドメインをxserverで取得
ローカル環境からDBのエクスポート
xserverのMySQLへインポート
公開後のテストを行いました
セキュリティ対策
バリデーションチェック
サーバーサイド(PHP)側
☑︎未入力チェック
☑︎最大、最小文字数チェック
☑︎半角英数字チェック
☑︎正規表現を使用したemail型式チェック
☑︎正規表現を使用したURL型式チェック
☑︎同値チェック
それぞれ関数を作成し各フォームで判定を行なっています。
以下一部抜粋です
フロントエンド(HTML)側
URL型式チェックでは入力フォームをtype="url"とすることでHTMLで型式チェックができるようにしています。
なりすまし対策について
セッションハイジャックによるなりすまし対策としてsession_regenerate_id関数を使用しています。
session_regenerate_id関数は、現在のセッションのデータを保持したまま、セッションIDを新しく生成してくれます。
パスワードのハッシュ化について
パスワードをDBで登録する際は開発環境から見えてしまうのでセキュリティ上よくありません。
SHAKYOではpassword_hash関数でパスワードをハッシュ化してDB登録しています。
ログイン時には、
password_verifiを使用し、ハッシュ化されたパスワードを確認しています。
このとき$passはフォームからpostされたパスワード
DBから配列形式で取り出した情報を$resultに詰め
array_shiftを使って先頭から要素を一つ取り出し第二引数としています。
SQLインジェクション対策
DB接続時は、プレースホルダーを利用しSQL文を作成。
プリペアードステートメントを使うことでSQLインジェクション対策を行なっています。
XSS（クロスサイトスクリプティング）対策
画面へ文字列や数値を出力する際は、htmlspecialchars関数を使いエスケープ処理を行なっています。
エスケープ処理とは特殊な文字を無害な文字に強制的に置き換える方法です
第二引数のエスケープにはいくつか種類がありますが最もエスケープ文字数の多いENT_QUOTESを使用しています。
※エスケープ処理のためのhtmlspecialcharsの使い方
※PDOで接続、SELECT、プリペアドステートメントとは（PHPでMySQLに接続）
スパムメール対策
お問合せフォーム経由からのスパムメール対策にreCAPTCHA v3を実装しています。
reCAPTCHA v3から[私はロボットではありません]のチェックボタンがなくなりユーザーの負担なくセキュリティチェックを行うことができます。
※PHPでGoogle reCAPTCHA v3を使ってみる
-SHAKYO-で出来ること
①LPサイトの登録・編集・マイページ機能
LPサイトの登録ページでは、LPサイトの名前、難易度、URL、詳細コメント、LPの画像の登録が可能です。
画像登録にはjQueryを利用しドラック&ドロップでInputされるよう設定しています。
登録完了後はマイページに遷移し、きちんと登録できたことが確認できるようメッセージが表示されます。
マイページでは自身が登録したLPサイトの閲覧、編集、プロフィール編集、お気に入り登録したLPサイトの閲覧が可能です。
②LPサイト詳細画面に、Ajax処理によるお気に入り登録機能、掲示板機能を実装
お気に入り機能について
LPサイト詳細画面では、LP画像右上のハートアイコンを押すことで
マイページのお気に入り一覧にLPサイトを登録できます。
こちらはAjaxを用いて実装しています。
掲示板機能について
LPサイトの進め方について気軽に質問できるように
掲示板機能を各詳細ページに実装しています。
1対1ではなく複数人で書き込めるようにしました。
まず掲示板自体が存在するかDB情報を確認。
無ければ新規作成します。
もし既に掲示板情報があればメッセージのみ追加できるよう条件分岐させています。
また、アイコン表示もLPサイト登録者なら左にメッセージを表示、質問者は右側に表示するようにしています。
アイコンの表示は３パターン用意しました。
ユーザーが自分でアイコンを登録していた場合。
ユーザーアイコンが登録されていなかった場合。
ゲストログインの場合も親しみやすい人型アイコンを登録してあります。
③LP一覧・検索機能
LP一覧ページにはページネーション、カテゴリ選択による難易度選択機能を実装しました。
ゲストログイン機能
SHAKYOでは誰でも気軽にLPサイトの閲覧ができるようにゲストログイン機能を実装しています。
トップページのゲストログインボタンを押すことでguestuser.phpに遷移。
そこで予め登録しておいたゲストユーザーIDをセッションに詰め、有効期限をデフォルトの1時間に設定。
その後LP一覧ページへ飛ぶように設定しています。
また、ゲストユーザーアカウントではプロフィール編集機能・パスワード変更機能・退会機能を使えないようにしています。
見た目でもわかるようにボタンを押せないよう設定しています。
課題点
・掲示板機能にAjaxを実装し画面遷移を潤滑にする
・twitterアカウントでログイン機能を実装
・スマートなコードに書き換える
・Webマーケティングを学習し多くの人に利用、LP登録しもらえるよう改善する
以上です。
今後も学習を続け、より良いコードを書く、良いサービスを提供できるよう精進します。
フロントエンドエンジニアとして働きたいです！よろしくお願いします！