Matsubo Tech Blog
99 文字
1 分
Railsの404エラーページをコマンド1発でクールにする
Ruby2017-02-15
Railsのエラーページがかっこ悪い！
ググっても欲しいテンプレが見つからない！ってことで、作りました。
以下のコマンドを1発叩くだけでマシなテンプレートになります。
curl https://gist.githubusercontent.com/matsubo/1fc73d7632dc45a6ecb6d75edfc7764d/raw/b2363a18e001c07f2288f4a90c50c0edbb12a90e/main.sh | shスクリーンショット
ソースコード
適当に作っただけなので、もっとかっこよくしたい場合はForkどうぞ。
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!DOCTYPE html> | |
| <html lang="en"> | |
| <head> | |
| <meta charset="utf-8"> | |
| <meta http-equiv="X-UA-Compatible" content="IE=edge"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1"> | |
| <!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags --> | |
| <title>The page you were looking for doesn't exist (404)</title> | |
| <!-- Latest compiled and minified CSS --> | |
| <link href="https://cdn.jsdelivr.net/npm/bootstrap@5/dist/css/bootstrap.min.css" rel="stylesheet" crossorigin="anonymous"> | |
| <style type="text/css" media="screen"> | |
| body { | |
| background-color: #f1f1f1; | |
| font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; | |
| } | |
| .container { margin-top: 10%; } | |
| a { color: #4183c4; text-decoration: none; } | |
| a:hover { text-decoration: underline; } | |
| h1 { font-size: 60px; font-weight: 100; margin: 0px 0 50px 0; text-shadow: 0 1px 0 #fff; } | |
| p { color: rgba(0, 0, 0, 0.5); margin: 20px 0; line-height: 1.6; } | |
| </style> | |
| </head> | |
| <body> | |
| <div class="container text-center"> | |
| <h1>404</h1> | |
| <p><strong>File not found</strong></p> | |
| <p> | |
| The site configured at this address does not | |
| contain the requested file. | |
| </p> | |
| </body> | |
| </html> |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!DOCTYPE html> | |
| <html lang="en"> | |
| <head> | |
| <meta charset="utf-8"> | |
| <meta http-equiv="X-UA-Compatible" content="IE=edge"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1"> | |
| <!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags --> | |
| <title>The change you wanted was rejected (422)</title> | |
| <!-- Latest compiled and minified CSS --> | |
| <link href="https://cdn.jsdelivr.net/npm/bootstrap@5/dist/css/bootstrap.min.css" rel="stylesheet" crossorigin="anonymous"> | |
| <style type="text/css" media="screen"> | |
| body { | |
| background-color: #f1f1f1; | |
| font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; | |
| } | |
| .container { margin-top: 10%; } | |
| a { color: #4183c4; text-decoration: none; } | |
| a:hover { text-decoration: underline; } | |
| h1 { font-size: 60px; font-weight: 100; margin: 0px 0 50px 0; text-shadow: 0 1px 0 #fff; } | |
| p { color: rgba(0, 0, 0, 0.5); margin: 20px 0; line-height: 1.6; } | |
| </style> | |
| </head> | |
| <body> | |
| <div class="container text-center"> | |
| <h1>422</h1> | |
| <p><strong>The change you wanted was rejected.</strong></p> | |
| <p> Maybe you tried to change something you didn't have access to. </p> | |
| <p>If you are the application owner check the logs for more information.</p> | |
| </div> | |
| </body> | |
| </html> |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!DOCTYPE html> | |
| <html lang="en"> | |
| <head> | |
| <meta charset="utf-8"> | |
| <meta http-equiv="X-UA-Compatible" content="IE=edge"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1"> | |
| <!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags --> | |
| <title>We're sorry, but something went wrong (500)</title> | |
| <!-- Latest compiled and minified CSS --> | |
| <link href="https://cdn.jsdelivr.net/npm/bootstrap@5/dist/css/bootstrap.min.css" rel="stylesheet" crossorigin="anonymous"> | |
| <style type="text/css" media="screen"> | |
| body { | |
| background-color: #f1f1f1; | |
| font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; | |
| } | |
| .container { margin-top: 10%; } | |
| a { color: #4183c4; text-decoration: none; } | |
| a:hover { text-decoration: underline; } | |
| h1 { font-size: 60px; font-weight: 100; margin: 0px 0 50px 0; text-shadow: 0 1px 0 #fff; } | |
| p { color: rgba(0, 0, 0, 0.5); margin: 20px 0; line-height: 1.6; } | |
| </style> | |
| </head> | |
| <body> | |
| <div class="container text-center"> | |
| <h1>500</h1> | |
| <p><strong>We're sorry, but something went wrong</strong></p> | |
| <p> | |
| If you are the application owner check the logs for more information. | |
| </p> | |
| </body> | |
| </html> |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| curl https://gist.githubusercontent.com/matsubo/1fc73d7632dc45a6ecb6d75edfc7764d/raw/1d964d6da9c11a4fe930f5dc2284994b29cd219c/404.html > public/404.html | |
| curl https://gist.githubusercontent.com/matsubo/1fc73d7632dc45a6ecb6d75edfc7764d/raw/1d964d6da9c11a4fe930f5dc2284994b29cd219c/422.html > public/422.html | |
| curl https://gist.githubusercontent.com/matsubo/1fc73d7632dc45a6ecb6d75edfc7764d/raw/1d964d6da9c11a4fe930f5dc2284994b29cd219c/500.html > public/500.html |
関連記事
この記事が役に立ったら
GitHub Sponsorsで応援できます