Upgrade to Pro — share decks privately, control downloads, hide ads and more …

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

Aec90cc511d3fbfd15afc8e5df81f892?s=47 もも
December 12, 2020

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

2020.12.12 PHP Conference Japan 2020 Re:born

Aec90cc511d3fbfd15afc8e5df81f892?s=128

もも

December 12, 2020
Tweet

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!