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

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!