エンジニアでもできる簡単親切エラーUI

2020.12.12 PHP Conference Japan 2020 Re:born

Transcript

1. 2020.12.12 PHP Conference Japan 2020 Re:born エンジニアでもできる 簡単親切エラーUI エンジニアでもできる 簡単親切エラーUI エンジニアでもできる 簡単親切エラーUI
2. 桃井 亮介 Ryosuke Momoi
3. エンジニアでもできる簡単親切エラーUI エラーチェックとは エラーの伝え⽅ PHPのエラーハンドリング
4. エンジニアでもできる簡単親切エラーUI エラーチェックとは エラーの伝え⽅ PHPのエラーハンドリング
5. はじめに 突然ですが バリデーションはお好きですか？
6. はじめに 突然ですが エラーチェックはお好きですか？
7. エラーチェックの⽬的 ' OR 1 = 1; -- それはシステムを正常に稼働させる為 なぜエラーチェックを⾏うのか？
8. エラーチェックの⽬的 ⼊⼒値をDBに登録できるか ⼊⼒値の名前はユニークで識別できるか ⼊⼒値のメールアドレスに送信できるか システムが正常に動かない値を拒否する必要がある etc
9. エラーチェックの⽬的 でもそもそもシステム (サービス) を作る⽬的は？ システム サービスが正しく稼働するように 不正な操作は拒否したい サービス サービスで⽬的を達成してもらい ユーザーに満⾜してもらいたい
10. エラーチェックの⽬的 ユーザーに正しく使ってもらい⽬的を達成してもらう システム サービスが正しく稼働するように 不正な操作は拒否したい サービス サービスで⽬的を達成してもらい ユーザーに満⾜してもらいたい
11. エラーチェックの⽬的 どのようにエラーチェックを⾏うのが良いか？ 使ってもらいたい！けどエラーの値は拒否したい！
12. エラー対応の例 お名前 電話番号 住所 〒 ex.申込書の住所を書き忘れて提出してしまった！
13. エラー対応の例 お名前 〇〇　△△ 電話番号 xxx - xxxx - xxxx 住所 〒 ex.申込書の住所を書き忘れて提出してしまった！
14. エラー対応の例 お名前 〇〇　△△ 電話番号 xxx - xxxx - xxxx 住所 〒 住所は必須項⽬です。 なんかそっけない……
15. エラー対応の例 お名前 〇〇　△△ 電話番号 xxx - xxxx - xxxx 住所 〒 住所を記⼊してください。 どう直すか教えてくれたら親切ですよね
16. エラーチェックの考え⽅ ユーザーの⾏動にリアクションを返し それは対⼈でもシステムを使っていても同じ ⼀緒に⽬的達成を⽬指すコミュニケーション
17. エラーチェックは応援 必須項⽬です。 形式が違います。 ××の状態です。 ⼊⼒してください。 半⾓英数で⼊⼒してください。 〇〇の状態にしてください。 ユーザーの⾏動を否定せずにアドバイスし応援する
18. ログイン画⾯は例外 ユーザー情報を参照するフォームはエラーを曖昧に エラーが不正ログインのヒントになる可能性も！ パスワード ******** ログインID admin ログインIDとパスワードをご確認ください !
19. エラーチェック サービスは使ってもらうことが⽬的 エラーチェックでユーザーの⽬的達成を応援 メッセージは否定ではなくアドバイス ユーザー情報を参照するフォームは例外
20. エンジニアでもできる簡単親切エラーUI エラーチェックとは エラーの伝え⽅ PHPのエラーハンドリング
21. エラーの表⺬ でもエラーに気付いて直せないと意味がない ユーザーに親切なメッセージを設定した！
22. エラーのスタイル エラー⽤の⾊をつけましょう ⾊を⾒分けにくい⼈もいるので⾊以外の⽬印も⼤事 お名前 お名前を⼊⼒してください !
23. エラーの表⺬箇所 どこにエラーがあるかわかりやすくしましょう 該当箇所の近くに出して直す場所を迷わせない お名前 お名前を⼊⼒してください !
24. リアルタイムエラーチェック リアルタイムでエラーを出すのは親切ですが その項⽬の⼊⼒が完了したタイミングで出しましょう パスワード
25. リアルタイムエラーチェック パスワード 2 8⽂字以上使⽤してください ! 英数字両⽅含めてください ! リアルタイムでエラーを出すのは親切ですが その項⽬の⼊⼒が完了したタイミングで出しましょう
26. リアルタイムエラーチェック パスワード 2020P 8⽂字以上使⽤してください ! リアルタイムでエラーを出すのは親切ですが その項⽬の⼊⼒が完了したタイミングで出しましょう
27. リアルタイムエラーチェック パスワード 2020PHPC リアルタイムでエラーを出すのは親切ですが その項⽬の⼊⼒が完了したタイミングで出しましょう
28. リアルタイムエラーチェック リアルタイムで⼊⼒内容をチェックする場合は パスワード 8⽂字以上使⽤してください 英数字両⽅含めてください 基準を達成したことを表⺬しましょう
29. リアルタイムで⼊⼒内容をチェックする場合は パスワード 2020P 8⽂字以上使⽤してください 英数字両⽅含めてください 基準を達成したことを表⺬しましょう リアルタイムエラーチェック リアルタイムで⼊⼒内容をチェックする場合は 基準を達成したことを表⺬しましょう
30. リアルタイムで⼊⼒内容をチェックする場合は パスワード 2020PHPC 8⽂字以上使⽤してください 英数字両⽅含めてください 基準を達成したことを表⺬しましょう リアルタイムエラーチェック
31. エラーの⾒せ⽅ エラーのスタイルで存在に気付きやすくする 何を直せばいいか迷わせない リアルタイムのチェックは⼊⼒完了時に実施
32. エンジニアでもできる簡単親切エラーUI エラーチェックとは エラーの伝え⽅ PHPのエラーハンドリング
33. PHPのエラーハンドリング ファイルアップロード(⼤容量データ)の注意 PHPConferenceなのでそろそろPHPの話を
34. PHPのエラーハンドリング POSTデータが消える 500エラーが出⼒される ファイルサイズのエラーが出⼒される ⼤容量ファイルをPOSTするとどうなるでしょうか？ ex.8Mまでのサーバーで10Mのファイルをアップロード
35. PHPのエラーハンドリング 正解は2番⽬！POSTデータが消えちゃいます！ POSTデータが消える 500エラーが出⼒される ファイルサイズのエラーが出⼒される
36. フォームに関する設定 MAX_INPUT_VARS ⼀度にPOSTできる パラメータ数の上限 POST_MAX_SIZE ⼀度にPOSTできる データの最⼤サイズ UPLOAD_MAX_FILESIZE アップロードできる 1ファイルの最⼤サイズ
37. POSTの罠 POSTデータがPOST_MAX_SIZEより⼤きい場合
38. POSTの罠 なんと丸ごとPOSTデータは空になってしまいます！
39. POST初期化時の⾒分け⽅ この挙動を意識せずに実装すると という判定をしてしまうことも POSTがない = GETアクセス(直アクセス)
40. POST初期化時の⾒分け⽅ $_SERVER[' CONTENT_LENGTH' ] POSTの中⾝は消えてしまいますが でPOSTのサイズを取得可能！ つまりPOSTが送られてきたかわかります！
41. Sample Code 1 // リクエストのサイズ $contentLength = $_SERVER['CONTENT_LENGTH']; // 受け取る POST サイズの上限 $postMaxSize = ini_get('post_max_size'); $postMaxSize = convertToBytes($postMaxSize); if ($contentLength > $postMaxSize) { // ERROR POST Deleted }
42. Sample Code 2 function convertToBytes($size) { $unit = substr($size, -1); // 単位を取得 switch (strtolower($unit)) { case 'm': // 単位 M の場合 $size *= 1024; case 'k': // 単位 M もしくは K の場合 $size *= 1024; } return $size; }
43. PHPのエラーハンドリング ファイルアップロードするフォームは要注意 POSTは設定値以上で消えてしまうことあり $_SERVER[' CONTENT_LENGTH' ]でPOSTサイズ取得
44. エンジニアでもできる簡単親切エラーUI エラーチェックとは エラーの伝え⽅ PHPのエラーハンドリング
45. まとめ エラーチェックはユーザーの応援 エラーメッセージはポジティブにアドバイス エラーの存在を気付きやすくして教える POSTデータのサイズにはご注意を
46. Thank You!