Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
エンジニアでもできる簡単親切エラーUI
Search
もも
December 12, 2020
Programming
0
340
エンジニアでもできる簡単親切エラーUI
2020.12.12 PHP Conference Japan 2020 Re:born
もも
December 12, 2020
Tweet
Share
More Decks by もも
See All by もも
自分好みのWebサイトが作れる!誰でも簡単baserCMSのススメ
momofff
1
940
メジャーバージョンアップ直前!baserCMS次期バージョン開発の舞台裏
momofff
0
350
エンジニアが成長できるbaserCMSの開発コミュニティ
momofff
0
410
Other Decks in Programming
See All in Programming
The Past, Present, and Future of Enterprise Java
ivargrimstad
0
450
Things You Thought You Didn’t Need To Care About That Have a Big Impact On Your Job
hollycummins
0
250
フロントエンド開発のためのブラウザ組み込みAI入門
masashi
7
3.5k
TransformerからMCPまで(現代AIを理解するための羅針盤)
mickey_kubo
7
5k
技術的負債の正体を知って向き合う
irof
0
240
alien-signals と自作 OSS で実現する フレームワーク非依存な ロジック共通化の探求 / Exploring Framework-Agnostic Logic Sharing with alien-signals and Custom OSS
aoseyuu
2
550
kiroとCodexで最高のSpec駆動開発を!!数時間で web3ネイティブなミニゲームを作ってみたよ!
mashharuki
0
900
Go言語の特性を活かした公式MCP SDKの設計
hond0413
1
490
Goで実践するドメイン駆動開発 AIと歩み始めた新規プロダクト開発の現在地
imkaoru
4
890
SwiftDataを使って10万件のデータを読み書きする
akidon0000
0
240
Pythonに漸進的に型をつける
nealle
1
120
Foundation Modelsを実装日本語学習アプリを作ってみた!
hypebeans
1
120
Featured
See All Featured
Large-scale JavaScript Application Architecture
addyosmani
514
110k
Code Review Best Practice
trishagee
72
19k
Connecting the Dots Between Site Speed, User Experience & Your Business [WebExpo 2025]
tammyeverts
10
610
Faster Mobile Websites
deanohume
310
31k
A Tale of Four Properties
chriscoyier
161
23k
CoffeeScript is Beautiful & I Never Want to Write Plain JavaScript Again
sstephenson
162
15k
Making Projects Easy
brettharned
120
6.4k
Cheating the UX When There Is Nothing More to Optimize - PixelPioneers
stephaniewalter
285
14k
How To Stay Up To Date on Web Technology
chriscoyier
791
250k
What’s in a name? Adding method to the madness
productmarketing
PRO
24
3.7k
Typedesign – Prime Four
hannesfritz
42
2.8k
[Rails World 2023 - Day 1 Closing Keynote] - The Magic of Rails
eileencodes
37
2.6k
Transcript
2020.12.12 PHP Conference Japan 2020 Re:born エンジニアでもできる 簡単親切エラーUI エンジニアでもできる 簡単親切エラーUI
エンジニアでもできる 簡単親切エラーUI
桃井 亮介 Ryosuke Momoi
エンジニアでもできる簡単親切エラーUI エラーチェックとは エラーの伝え⽅ PHPのエラーハンドリング
エンジニアでもできる簡単親切エラーUI エラーチェックとは エラーの伝え⽅ PHPのエラーハンドリング
はじめに 突然ですが バリデーションはお好きですか?
はじめに 突然ですが エラーチェックはお好きですか?
エラーチェックの⽬的 ' OR 1 = 1; -- それはシステムを正常に稼働させる為 なぜエラーチェックを⾏うのか?
エラーチェックの⽬的 ⼊⼒値をDBに登録できるか ⼊⼒値の名前はユニークで識別できるか ⼊⼒値のメールアドレスに送信できるか システムが正常に動かない値を拒否する必要がある etc
エラーチェックの⽬的 でもそもそもシステム (サービス) を作る⽬的は? システム サービスが正しく稼働するように 不正な操作は拒否したい サービス サービスで⽬的を達成してもらい ユーザーに満⾜してもらいたい
エラーチェックの⽬的 ユーザーに正しく使ってもらい⽬的を達成してもらう システム サービスが正しく稼働するように 不正な操作は拒否したい サービス サービスで⽬的を達成してもらい ユーザーに満⾜してもらいたい
エラーチェックの⽬的 どのようにエラーチェックを⾏うのが良いか? 使ってもらいたい!けどエラーの値は拒否したい!
エラー対応の例 お名前 電話番号 住所 〒 ex.申込書の住所を書き忘れて提出してしまった!
エラー対応の例 お名前 〇〇 △△ 電話番号 xxx - xxxx - xxxx 住所
〒 ex.申込書の住所を書き忘れて提出してしまった!
エラー対応の例 お名前 〇〇 △△ 電話番号 xxx - xxxx - xxxx 住所
〒 住所は必須項⽬です。 なんかそっけない……
エラー対応の例 お名前 〇〇 △△ 電話番号 xxx - xxxx - xxxx 住所
〒 住所を記⼊してください。 どう直すか教えてくれたら親切ですよね
エラーチェックの考え⽅ ユーザーの⾏動にリアクションを返し それは対⼈でもシステムを使っていても同じ ⼀緒に⽬的達成を⽬指すコミュニケーション
エラーチェックは応援 必須項⽬です。 形式が違います。 ××の状態です。 ⼊⼒してください。 半⾓英数で⼊⼒してください。 〇〇の状態にしてください。 ユーザーの⾏動を否定せずにアドバイスし応援する
ログイン画⾯は例外 ユーザー情報を参照するフォームはエラーを曖昧に エラーが不正ログインのヒントになる可能性も! パスワード ******** ログインID admin ログインIDとパスワードをご確認ください !
エラーチェック サービスは使ってもらうことが⽬的 エラーチェックでユーザーの⽬的達成を応援 メッセージは否定ではなくアドバイス ユーザー情報を参照するフォームは例外
エンジニアでもできる簡単親切エラーUI エラーチェックとは エラーの伝え⽅ PHPのエラーハンドリング
エラーの表⺬ でもエラーに気付いて直せないと意味がない ユーザーに親切なメッセージを設定した!
エラーのスタイル エラー⽤の⾊をつけましょう ⾊を⾒分けにくい⼈もいるので⾊以外の⽬印も⼤事 お名前 お名前を⼊⼒してください !
エラーの表⺬箇所 どこにエラーがあるかわかりやすくしましょう 該当箇所の近くに出して直す場所を迷わせない お名前 お名前を⼊⼒してください !
リアルタイムエラーチェック リアルタイムでエラーを出すのは親切ですが その項⽬の⼊⼒が完了したタイミングで出しましょう パスワード
リアルタイムエラーチェック パスワード 2 8⽂字以上使⽤してください ! 英数字両⽅含めてください ! リアルタイムでエラーを出すのは親切ですが その項⽬の⼊⼒が完了したタイミングで出しましょう
リアルタイムエラーチェック パスワード 2020P 8⽂字以上使⽤してください ! リアルタイムでエラーを出すのは親切ですが その項⽬の⼊⼒が完了したタイミングで出しましょう
リアルタイムエラーチェック パスワード 2020PHPC リアルタイムでエラーを出すのは親切ですが その項⽬の⼊⼒が完了したタイミングで出しましょう
リアルタイムエラーチェック リアルタイムで⼊⼒内容をチェックする場合は パスワード 8⽂字以上使⽤してください 英数字両⽅含めてください 基準を達成したことを表⺬しましょう
リアルタイムで⼊⼒内容をチェックする場合は パスワード 2020P 8⽂字以上使⽤してください 英数字両⽅含めてください 基準を達成したことを表⺬しましょう リアルタイムエラーチェック リアルタイムで⼊⼒内容をチェックする場合は 基準を達成したことを表⺬しましょう
リアルタイムで⼊⼒内容をチェックする場合は パスワード 2020PHPC 8⽂字以上使⽤してください 英数字両⽅含めてください 基準を達成したことを表⺬しましょう リアルタイムエラーチェック
エラーの⾒せ⽅ エラーのスタイルで存在に気付きやすくする 何を直せばいいか迷わせない リアルタイムのチェックは⼊⼒完了時に実施
エンジニアでもできる簡単親切エラーUI エラーチェックとは エラーの伝え⽅ PHPのエラーハンドリング
PHPのエラーハンドリング ファイルアップロード(⼤容量データ)の注意 PHPConferenceなのでそろそろPHPの話を
PHPのエラーハンドリング POSTデータが消える 500エラーが出⼒される ファイルサイズのエラーが出⼒される ⼤容量ファイルをPOSTするとどうなるでしょうか? ex.8Mまでのサーバーで10Mのファイルをアップロード
PHPのエラーハンドリング 正解は2番⽬!POSTデータが消えちゃいます! POSTデータが消える 500エラーが出⼒される ファイルサイズのエラーが出⼒される
フォームに関する設定 MAX_INPUT_VARS ⼀度にPOSTできる パラメータ数の上限 POST_MAX_SIZE ⼀度にPOSTできる データの最⼤サイズ UPLOAD_MAX_FILESIZE アップロードできる 1ファイルの最⼤サイズ
POSTの罠 POSTデータがPOST_MAX_SIZEより⼤きい場合
POSTの罠 なんと丸ごとPOSTデータは空になってしまいます!
POST初期化時の⾒分け⽅ この挙動を意識せずに実装すると という判定をしてしまうことも POSTがない = GETアクセス(直アクセス)
POST初期化時の⾒分け⽅ $_SERVER[' CONTENT_LENGTH' ] POSTの中⾝は消えてしまいますが でPOSTのサイズを取得可能! つまりPOSTが送られてきたかわかります!
Sample Code 1 // リクエストのサイズ $contentLength = $_SERVER['CONTENT_LENGTH']; // 受け取る
POST サイズの上限 $postMaxSize = ini_get('post_max_size'); $postMaxSize = convertToBytes($postMaxSize); if ($contentLength > $postMaxSize) { // ERROR POST Deleted }
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; }
PHPのエラーハンドリング ファイルアップロードするフォームは要注意 POSTは設定値以上で消えてしまうことあり $_SERVER[' CONTENT_LENGTH' ]でPOSTサイズ取得
エンジニアでもできる簡単親切エラーUI エラーチェックとは エラーの伝え⽅ PHPのエラーハンドリング
まとめ エラーチェックはユーザーの応援 エラーメッセージはポジティブにアドバイス エラーの存在を気付きやすくして教える POSTデータのサイズにはご注意を
Thank You!