[制作者向け] 404 NOT FOUNDページにみるレクサスのおもてなし精神、その他の自動車メーカーの404ページもまとめてみた

「404 – ページが見つかりませんでした」というページってどんなアナウンスしていますか?

リクエストしたURLにコンテンツが存在しなかった場合に表示される、404ページ。皆さんはどのように表示させていますか?

ちなみこのサイトでは、こんな感じで表示されます。(Twenty Fifteenテーマのデフォルトの表示です。)

404 NOT FOUNDページ

いやぁ、おもてなしの精神を感じませんね。私は悪くない、あなたがこのURLを開いたのが悪いんだ!お望みのページを勝手に探してくれって感じるナイスなアナウンスになっています。(言い過ぎ?!)

さて、そんななか、レクサスの404 NOT FOUNDページがシンプルながらも素敵だったので今回紹介します。レクサスを見た後に、他の自動車メーカーの404 NOT FOUNDページも気になったので勉強がてら集めて見ました。

皆様のサイト制作の参考になれば幸いです。

レクサスの404 NOT FOUNDページに感じるおもてなしの精神

さて、私が見たのはこの404 NOT FOUNDページです。

非常に簡潔ながらも、レクサスのおもてなしの精神が行き届いていて、素敵ですね。

大変申し訳ありませんが、該当ページがございません。 トップページへご案内いたします。 このページをブックマーク登録されていた方は、 お手数ですがブックマークの変更をお願いいたします。 なお、このページは5秒後に自動的にジャンプします。 ※自動的にジャンプしない場合は、上記のリンクをクリックして下さい。実際のページを見てみたい方はこちらをクリック

トップページへご案内いたします。

リダイレクトのことを「ご案内致します。」と表現するあたり、ちょっと感動しました。レクサスのショールームで対応をして頂いているような感じを受けます。

また、リダイレクトや画面遷移というようなむずかしい単語は使われず、ジャンプというイメージしやすい言葉で置換えられています。ブックマークしている方への配慮も忘れていません。

このキャプチャだとセンタリングされているように見えますが、実際は左上にコンパクトにまとめられています。これも何か意図があるのかな。

私のブログのNOT FOUNDページと比べると、その差は明らかですね。

その他の自動車メーカーの404 NOT FOUNDページ

レクサス以外の404ページも気になったので集めてみました。各社様々なスタイルで「ページが見つかりませんでした」と伝えてくれています。

※ 一部キャプチャは縦長になりすぎたためトリミングしております。リンク先は各社のトップページにしてありますので、各自でNOT FOUNDページを探してみてくださいませ。

トヨタ自動車

まずはトヨタ。レクサスとほぼ同じ構成でした。シンプルかつ自動リダイレクト。

https://toyota.jp/

トヨタ自動車のNOT FOUNDページ

スズキ

ももクロちゃんがCMをしているハスラーがバカ売れのスズキです。意外とシンプルな感じの作りになっています。

「スズキのサイトでなにかお探しですか?」という文言に言葉にできない違和感を感じるのは私だけでしょうかね。

http://www.suzuki.co.jp/

スズキのNOT FOUNDページ

スバル

スバルのNOT FOUNDページは、メッセージの下にサイトマップやキャンペーン情報を表示しています。

トップページやサイトマップに移動して別のページを探すよりもこの方が機能的だし私は好きでした。

https://www.subaru.jp/

スバルのNOT FOUNDページ

日産自動車

theシンプル。メッセージを表示して5秒後にページ遷移する作りでした。

5秒しか滞在できないし、長い文章は読んで貰えなそうですし。リダイレクトするといいう前提で考えるとこれは有りかと思いました。

http://www.nissan.co.jp/

日産自動車のNOT FOUNDページ

光岡自動車

WordPress で作られているようで、404 File Not Foundと表示されるのはSEO系プラグインか何かの影響かな?と関係ないことを考えてしまいました。

サイトマップへとサイトのトップへと2つのリンクがありますが、ページを探すならサイトマップを見てもらったほうが早いし、2つあると迷いそうだなぁと個人的には思いました。

http://www.mitsuoka-motor.com/

光岡のNOT FOUNDページ

三菱自動車

英語との併記!これは多言語サイトのせいなのか、日本に済む外国人への配慮なのか、少し気になるところです。

シンプルかつリダイレクトでトップページへ行きます。レクサスやトヨタと似たような作りですね。

http://www.mitsubishi-motors.co.jp/

三菱自動車のNOT FOUNDページ

マツダ

シンプルな作りです。リダイレクトはされませんが、上下にグローバルナビゲーションやフッターナビゲーションがあるので迷うことはなさそうです。

「引き続きマツダオフィシャルサイトでの快適なドライブをお楽しみください。」といメッセージが添えられているあたり、マツダらしいですね。

http://www.mazda.co.jp/

マツダのNOT FOUNDページ

ホンダ

一番驚いたのはホンダのサイトでした。

スバルと同じくお知らせや簡単なサイトマップがあるのですが、更にその下には「問題点についてお知らせ下さい」という見出しとともに、フォームが表示されています!こんなNOT FOUNDページはじめて見た!

ホンダのモノづくりに対する精神というものを感じるNOT FOUNDページになっています。

http://www.honda.co.jp/

ホンダのNOT FOUNDページ

ダイハツ

よく見る404ページですね。

「前のページに戻る」ボタンをクリックするとJavaScriptでひとつ前のページに戻る作りになっています。こういうのって検索エンジンから直で来たときって検索エンジンに戻っちゃうので悩みどころですよね。

https://www.daihatsu.co.jp/

ダイハツのNOT FOUNDページ

外国車の自動車メーカー

MINI

ミニはビジュアルでNOT FOUNDを表現している感じでしょうか。

  1. NOT FOUND.という文言を見なければ、パット見、あまり404ページぽくないですね。

https://www.mini.jp

MINIのNOT FOUNDページ

メルセデスベンツ

(!)という表示に見る側が驚きそうですが、ベンツのNOT FOUNDページは画像もなく割りとシンプル。トップページに戻らずに各種リンクを案内しています。

http://www.mercedes-benz.co.jp/

メルセデスベンツのNOT FOUNDページ

BMW

アドレスの入力が誤っている可能性があります。という断定にBMWらしさを感じますね。ヘッダー・フッターからページを見つけてもらえる作りになっています。

http://www.bmw.co.jp/

BMWのNOT FOUNDページ

テスラ

Drupalで作られているサイトのようです。ザ・海外って感じがします。

ページが見つからなかったことと共に、シンプルなナビゲーションが記載されています。

https://www.tesla.com/jp/

テスラのNOT FOUNDページ

まとめ

いかがでしたでしょうか?

お客様の欲しい情報を提供できなかった時、自動車メーカーはどういった応対をするのか。

NOT FOUNDページひとつですが、こうやって見てみると、各社の色が出てますね。

個人的にはスバルやホンダのような機能的な404 NOT FOUNDページが好きです。

特にホンダの「問題点を教えて下さい」っていう姿勢は、本田宗一郎の精神が根付いているように感じました。

 

concrete5 を Version5.7 から Version8 (8.1.0) にバージョンアップする方法とエラー時の対応方法

concrete5 version 8.1.0がリリースされています。

日本時間の1月25日にconcrete5のバージョン8.1.0がリリースされました。

そろそろバージョン8が安定してきたかなぁと様子を伺いつつ、アップデートを行いました。

今回、私が行ったアップグレード方法をご紹介します。

基本、以下のURLで紹介されていた英文をGoogle翻訳を掛けつつ進めました。

間違っている操作があれば教えて下さいませ。

Upgrading concrete5
https://documentation.concrete5.org/developers/installation/upgrading-concrete5

Version8.1.0へのアップデート手順

以下の手順でアップデートを行いました。

5.7系のconcrete5を利用している想定で話を進めます。

  1. 5.7系の最新バージョン(5.7.13)にアップデート
  2. 8.1.0をダウンロードして解凍
  3. 必要なファイルをアップロード
  4. 管理画面からアップデート
  5. つまづいたことと対応方法まとめ

Version8へアップデートしよう

1. 5.7系の最新バージョン(5.7.13)にアップデート

管理画面にログイン後、システムのバージョンアップを実行します。
この操作の前にバックアップはとっておきましょう!

以下の画面からアップデート操作を行います。

管理画面から【システムと設定】→【バックアップとリストア】→【concrete5をアップグレード】

画面のアナウンスに従って5.7.13にアップデートしていきます。

5.7.5.13へアップグレード

ダウンロードボタンをクリックして自動でダウンロードします。

(もしこのダウンロードボタンをクリックしてもエラーになる場合、手順2,3のように5.7.5.13を手動アップデートします。)

5.7.5.13へアップグレード

その後、更新をインストールをクリックしてバージョンアップを行います。

5.7.5.13へアップグレードが完了しました。

問題なく5.7.13にアップデートできました。

2. 8.1.0をダウンロードして解凍

次に、concrete5 Ver.8.1.0を公式サイトからダウンロードします。

concrete5 ダウンロード
https://concrete5-japan.org/about/download/

ダウンロードしたら解凍しましょう。

3. 必要なファイルをアップロード

解凍したファイルの中から、concreteディレクトリのみを残してそれ以外を削除します。

concreteディレクトリのみを残してそれ以外は全て削除

concreteディレクトリが格納された、concrete5-8.1.0ディレクトリを、updatesディレクトリにアップします。

updatesディレクトリに格納concrete5-8.1.0ディレクトリをupdatesディレクトリにアップロード

4. 管理画面からアップデート

アップロードが完了したら、以下の画面からアップデート操作を行います。

管理画面から【システムと設定】→【バックアップとリストア】→【concrete5をアップグレード】

画面のアナウンスに従って、8.1.0をインストールしていきます。

version8.1へアップグレード

更新をインストールをクリックします。

version8.1へアップグレードが完了しました。

これでVersion8.1へのアップデートは完了しました。

5.つまづいたことと対応まとめ

アップデートをしていると上手く行かないことがありました。

以下にエラーと対処方法を列挙します。

予期せぬエラーが発生しました。実行時間オーバーエラー

Maximum execution time of 30 seconds exceeded

上記のエラーが出た場合は、php.iniの設定を見直します。

php.ini の以下のパラメータを長く(120秒位?)設定します。

max_execution_time = 120

実行時間オーバーエラーが出て以降、エラーでインストールが進まない。

php.iniの設定をしたのに、エラーで動かない場合、concrete.phpファイルを設定してあげます。

\concrete\config\concrete.php

上記をコピーして以下のディレクトリに貼り付ける。

\application\config\

その後以下のパラメータ(170行目あたり)をtrueに変更してアップロードする。

※ アップデートが無事に終わったら上記をfalseに戻しておきましょう!

まとめ

スムーズに進めばすんなりとアップデートが完了するはずですが、躓いたら色々と調べる事になります!頑張りましょう!

また、これからはconcrete5のバージョン8が主流になっていくと思うので、影響が小さそうなサイトからアップデートを試し、ノウハウを蓄積してから大きめなサイトのアップデートをすることがおすすめです。

健闘を祈ります!

[jQuery] セレクトボックスで選択した値で表を絞り込む方法(プラグイン不使用、動作デモ、サンプルコード有)

表を検索したい!簡単に!

都道府県別にある情報を簡単に絞り込みたい。というご要望。

セレクトボックスに47都道府県の情報をあらかじめ設定しておきセレクトボックスを選択すると該当の都道府県を検索(絞り込み)する。

というかたちで実装を考えました。

テキストボックスだと入力するの面倒だし、都道府県で絞り込みたいだけなのでこのような形でどうだろうと。

jQueryのプラグインが色々とありましたが、自分でも簡単に表検索の仕組みが実装できそうだったので実装してみました。

参考になればと思い、ソースコードとデモサイトを作ったのでご活用下さいませ。

動作デモ・ソースコード

動作デモ

http://onocom.net/code/japan-prefecture/

ソースコード

https://gist.github.com/onocom/904991e984f1da14ef6e1d156bc6e570

ライセンス:WTFPL

好きに利用して改変して下さい。

実装したこと

セレクトボックスで選択した値(value)で表を検索(絞り込み)する機能を実装します。

ソースと解説

ソースコードサンプルと合わせてご覧くださいませ。

1.表を作る

取り敢えず検索するための表を作ります。

今回、都道府県の一覧表を作りました。

theadに見出しを。tbodyにデータを記述しましょう。

2.都道府県選択用のセレクトボックスを作る

表を絞り込む為のセレクトボックスを作ります。

optionタグのvalueに検索キーワードを割り当てます。valueの値で検索をかけるので、以下のようにvalueと異なる表示を設定してもOKです。

また、最初のoptionのvalueは空にしておき、絞り込み解除用に使います。

3.JavaScriptを組む

キモとなるJavaScriptのコードは以下のように記述します。

コメントで処理を補足しておりますので、参考にしてみてくださいませ。

まとめ

あえて、一般的なテキスト入力で絞り込む方法をせず、セレクトボックスで絞り込むようにしてみました。検索ワードが固定されている場合、この方が操作しやすいと思います。

もちろん上記を応用すれば、テキスト入力やラジオボタンで絞り込みなんてことも簡単に出来ます。

お役に立てば幸いです。

WordPressの検索フォームのカスタマイズ!カスタムタクソノミーを検索条件に追加する方法

WordPressの検索フォームをカスタマイズしよう

WordPressの検索フォームはキーワードを入力するテキストボックスと、検索を実行する検索ボタンで構成されています。

この検索フォームにカスタムタクソノミーを指定する方法をご紹介します。

検索条件にカスタムタクソノミーを追加しよう

以下の順序で検索フォームをカスタマイズしていきます。

  1. searchform.php をテーマフォルダに追加

  2. searchform.php にカスタムタクソノミー選択用のセレクトボックスを設置

  3. 検索ボックスを呼び出し

1.searchform.php をテーマフォルダに追加しよう

まずやることは、searchform.phpというファイルをテーマフォルダ内に追加することから始めます。

中身は取り敢えず空で大丈夫です。

2.searchform.php にカスタムタクソノミー選択用のセレクトボックスを設置

searchform.php をエディタで開いて以下のように書き換えます。

タクソノミースラッグ(以下例だとpref)をご自身のサイトに付け加えてあげてください。

2-1. カスタムタクソノミーを複数設置したい場合

以下部分をコピーして、formタグ内に追加することで、複数のカスタムタクソノミーからのAND条件検索も行えます。

●●●・・・タクソノミーラベル(例:都道府県)
■■■・・・タクソノミーの名前[半角英数](例:pref)

3. カスタマイズした検索ボックスを呼び出し

検索ボックスを表示させたい箇所のテンプレート(sidebar.php等)に以下のコードを記載します。

これでカスタマイズした検索ボックスが表示されるはずです。

CSSの調整等はよしなにしてくださいませ。

まとめ

結構簡単に検索条件にタクソノミーを追加できた!

その他にも、特定の日付範囲内の記事を検索する。とかもやろうと思えば出来ます。その場合、上記以外にも修正が必要です。それはまた気が向いたら追記しようかな。

[制作者向け] WAFが正常なJavaScriptもエラーにしてしまう場合の.htaccessによる対応方法(CPIシェアードプランACE01の場合)

WordPressやconcrete5等のCMSを使うなら絶対あったほうが良いWAF

WordPressに対する不正攻撃からサーバを守ってくれるWAF(Webアプリケーションファイアウォール)。

CPIのレンタルサーバ シェアードプランACE01にはWAFが標準装備されていて、クロスサイト・スクリプティングやSQLインジェクション等のサイバー攻撃を未然に防いでくれます。

詳しくはCPIの以下のページに分かりやすい解説が載っています。

https://www.cpi.ad.jp/shared/detail/waf.html

CPIは、ジェイピー・セキュア社のSiteGuard Liteを導入しているようですね。

WAFがある安心感は非常に大きく、利用しないのはもったいない!というかWAFが使えるなら絶対に使ったほうが良い機能です。

しかしながら、WAFがしっかりと動作しすぎるために、サイト構築時に悪意のないJavaScriptもエラーになるケースも割りと多かったりします。

GoogleAnalyticsのコードをconcrete5の管理画面にペーストして保存しようとすると以下のようなエラーになり上手く保存が出来ないことも。

WAF(SITEGUARD)エラー

.htaccessでWAFの設定を変更・無効にできる

そんなときに私は、JavaScriptを貼り付けて保存する間だけ.htaccessを使ってWAFを無効化しています。

手順とは言いながら、.htaccessに以下の一行を付け加えるだけです。

これで、WAFを無効に出来ます。この行を削除すると有効化されます。

無効化して作業が終わったら、すぐに有効化をしましょう!

すぐに有効化をしましょう!

大事なので2回言いました。

また、ON(有効)・OFF(無効)の2択ではなくて、より柔軟にWAFの除外設定をすることも可能です。

その解説は以下のCPIスタッフブログに詳しく書かれていますのでご一読下さいませ。

知らないと怖いWebセキュリティと、CPIサーバーのWAF設定方法
http://shared-blog.kddi-web.com/webinfo/129#setting

2017年2月24日追記

あれから色々と調べていたら、以下サイトに記載されていた、IPアドレスによりWAFの除外設定をする方法がCPIでも使えました。

192.168.1.1 の部分を自分のIPアドレスに変更すると、該当IPアドレスからのアクセスの場合、WAFのフィルタリングから除外されます。

【誤検知】WAFのSiteGuard Liteで閲覧をブロックされてしまった場合の除外設定の方法
http://spot-web.jp/blog/2700/

 

感想

WAFがサイト構築の足かせにならないように、WAFと仲良く付き合っていきたいですね。