パラメーターがダメ!?WordPressサイトで意図しない404ページの理由はこれだった

パラメーターがダメ!?意図しない404ページが発生

あるサイトがどこからやってきたか知るためにサイトURLにパラメータを付けてリンクをつけることがあります。

例えば以下の様な場合です。

<a href="アクセス解析を仕込んでいるサイトのURL/?foo=bar" />アクセス解析を仕込んでいるサイト</a>

この場合だと「?foo=bar」の部分がパラメーターということになりますが、WordPressで制作したサイトでパラメーターの内容によってはうまく動かないことがわかりました。

どういった状況でうまく動かないかまたそれはどうしてか紹介したいと思います。

どういう状況でなったのか

  • 「表示設定」で「ホームページの表示」を「固定ぺージ(以下で選択)」にしている。
  • パラメーターのキーに「page」を使用している。
  • トップページを表示してほしいのに404(ここには何もありません等)ページが表示されてしまう。
WordPressの管理画面内の設定ページ。ホームページの表示で固定ページを指定している

なぜおかしくなったのか

  • 「page」はWordPressの予約語の為、不具合が発生する。
  • 予約語はほかにあり意図しない挙動をするものもある。
  • 「表示設定」の「ホームページの表示」を固定ページにしていない場合はpageは使っても大丈夫だった。ただし、「post」や「p」では同様におかしくなってしまう。

解決策

  • パラメーターのキーを予約語ではないものに変更する。
  • 実務でクライアントからの要求でパラメータが決まっている場合はなんとか変えてもらうようにする。

予防策

  • WordPressの予約語があるということを知りまた、そのようなものがあるのでパラメーターなどを指定された場合に予約語に入っていないか確認する。
  • WordPressの予約語は次のページで確認できる。[https://codex.wordpress.org/Reserved_Terms]

IEサポート終了がなぜ騒がれるのか。そしてIEモードとは?いつまでも消せないブラウザ事情について

IEの終了がどんなことをもたらすのか

米Microsoftは2021年5月19日(現地時間)に2022年6月15日をもってWebブラウザ「Internet Explorer」のサポートを終了すると発表しました。

WEB業界(どんな業界だ?)システム関連業界で大きな話題になっています。

なぜ騒がれるかわからない人もいるでしょう。

Internet Explorerとはなんだったのかとなぜ騒がれるのかその理由を書いていきます。

Internet Explorer

Internet Explorer(IE)はWebブラウザというインターネットでホームページなどを見るためのソフト(今の言い方でアプリ)です。Microsoft社が開発しました。

世界で圧倒的シェアを誇るOSソフト「Windows」に標準で入っているので詳しくない人はWindowsを購入したときに入っているこのIEでいろいろなホームページを見ることになります。

IE11は2013年秋にリリースされWindows8.1から標準装備されました。

Windows10では標準のブラウザはEdgeになりましたが互換性維持のためIE11も使えるようになっています。

どんなブラウザなのか

ブラウザを分ける情報としてはレンダリングエンジン、javascriptエンジンの2つが大きな要素です。

レンダリングエンジンとはHTMLで書かれた文章を解析して画面に表示するプログラムのことでCSSを解析、画面に描画するコンピュータプログラム。

Javascriptエンジンは名前の通りJavascriptのコードを実行するコンピュータプログラムのことです。

WebブラウザはWebサイトまたはホームページにアクセスする際に次の処理を行います。

Loading ⇒ Scripting ⇒ Rendering ⇒ Painting

JavascriptエンジンはこのScriptingに関係しレンダリングエンジンはRendering、Painingに関係します。

浄水器の購入は無駄じゃない。導入メリットが大きい人の環境

家庭で浄水器を取り入れたいと考えた、「家族でそういう話がでた」とうことはないでしょうか?
私も最初浄水器なんかつける意味あるの?と思っている一人でした。
でも導入してみて良かったと思えたのでなぜ浄水器良いのかとこんな人は付けた方が良いよと思われる人を書こうと思います。

浄水器は何をするものか

浄水器は水道水の中に含まれる残留塩素やトリハロメタンなどの物質を除去または減少させる機器のことです。(一般社団法人 浄水器協会)

浄水器を使用することによってより「おいしくて、安全な水」を使うことができるようになります。

なぜ水道水じゃだめなのか

日本の水道水は優秀で世界的に見て安全性が高いと言われています。

それは厳しい検査項目をクリアした水だからです。

水道水にはバクテリア類の殺菌と発生防止のため(大きくいうと殺菌のため)塩素が含まれています。

塩素は殺菌力は強いが人体に影響が少なく、水本体のほかにも出てくる蛇口まで殺菌の持続性を得られる優れモノです。

法律で残留塩素は水1リットルあたり0.1mg以上の濃度を保持していなければいけないと決められています。

この塩素によって安全ではあるが「カルキ臭」と呼ばれる独特の臭いを持つようになります。

これは地域差がありますが一般的に源水の状態で分かれるといわれています。

なぜかと言うと源水が綺麗じゃないほどカルキ臭のもとになる塩素の使用量が増えるからです。

カルキ臭は料理をつくるときにも影響があります。せっかくの良い食材をダメにしているかもしれません。

また、残留塩素は不純物と反応しトリハロメタンなどの発がん性物質になる可能性があります。

人体に影響が出るレベルの量ではないとされていますができるならその量は0(ゼロ)にしたいものです。

自分で塩素を除去すればよい

塩素を自分で除去する方法もあります。

①煮沸する
沸騰してから10分以上沸騰状態を続けなければトリハロメタンが発生してしまうので注意が必要です。(ずっと沸騰したらすぐ火を止めてました…)

②汲み置く
日光に当てて6時間~2日間程度置いておく

③ビタミンCと混ぜる

以上の方法がありますがどれも時間がかかるので塩素が気になるなら真っ先に浄水器を使用するべきです。

また、塩素を除去した場合は雑菌が繁殖しやすいので除去後すぐに使い切ることが大事ですのでそういう点でも浄水器がベストな選択だと言えます。

浄水器を買うメリット

改めて浄水器を導入するメリットは次のようなものです。

  • ミネラルウォーターの購入費よりも浄水器のコストの方が安い
  • ペットボトルのゴミが少なくなる
  • ペットボトルを置いているスペースが空く
  • おいしい水が水道から手にいれることができる
  • カルキ臭がしない水を使うことでおいしい料理をつくることができる
  • 子供により安全な水をあげることができる

こんな人はもう浄水器を買いましょう

  • おいしい水を安く飲みたい人
  • よりおいしいごはん、よりおいしいスープ、よりおいしい料理を食べたい人
  • 子供がいて安全な水をあげたい人
  • 1週間に2リットルのペットボトルを段ボールで購入している人

あなたは定期的にミネラルウォーターを買っていませんか?
もし1週間に2リットルのペットボトルを段ボールで購入している人ならば浄水器を導入すべきです。

答えられますか?バーベキューと焼き肉の違い

新型コロナ感染拡大のために以前のように休みの日に出かけることができなくなってしまった家庭も多いことでしょう。

天気がよければ庭で焼肉でもしてモヤモヤした気分を少しでも解消したいところです。

ところでバーベキューと焼肉ってどう違うの?と尋ねられたらどう答えますか?

そんなバーベキューについての情報を紹介します。

焼きながら食べるのが「焼肉」。焼き終わって皿に盛り付けられたものを一斉に食べるのがバーベキュー

欧米では肉や野菜を焼いたあとにお皿に綺麗に飾り付けてからみんなでワイワイ食べるのが基本スタイルです。

日本の焼肉は鍋料理の影響なのでしょうか?料理しながら食べるスタイルが一般的です。

バーベキューコンロは運搬可能な調理用炉のことで、グリルは網焼き料理と網焼き調理に用いる器具を指す

バーベキューや屋外での焼肉に必要なコンロですが、お店に行くとコンロとグリルがあります。

コンロは「焜炉」と書き「運搬可能な調理用の炉(いろり)」のことを指します。

グリルは「網焼き」もしくは「網焼き用の器具」のことを指します。

バーベキューコンロはほとんど網焼きセットがついているので「バーベキューコンロ」でも「バーベキューグリル」でも呼び方は問題ないようです。

「display:flex」で頭を悩ませない!CSSでフレックスボックスを使うときに気にすべきポイント

CSSで「display: flex」が登場し、IE10を対象ブラウザリストから除外できるようになって要素の横並びの方法の最優先選択肢が「フレックスボックス」になりました。

しかし時々、思い通りにレイアウトできない状況に遭遇します。

毎回、ググって調べる時間を浪費してしまうので小さい壁にぶつかる前に実用的だと思われる部分のみまとめて紹介します。

対象ブラウザからIE11を外さない

「今の時代 IE11なんか使っている人いるの?」

おっしゃるとおりですが、IE11のサポート完全終了は2029年です。

そしてクライアントはIEで確認してくることが結構あります。

エンドユーザーはIEなんか使わないのですが注文者はIEで見てくるのです。

IE11でフレックスボックスはバグがありますので必ずIE11で確認しましょう。一番最初にIE11で確認してもよいくらいです。

IE11でのフレックスボックスで踏みがちな罠

■フレックスアイテムに「box-sizing」が効かない

IE11ではフレックスアイテム(display:flexを設定した要素の直の子要素)に「box-sizing」プロパティが効きません。

paddingの値によってはモダンブラウザ(Chrome等)では収まっている横並びアイテムがカラム落ちします。

■値に「calc()」は使えない

「flex-basis」の値に「calc()」を設定しがちですがIE11は対応していないので意図通りになりません。

※ショートハンドの時のみです。flex-basisを個別に設定するときは使えます。

.NG-flex-item {
  flex: 1 0 calc(100% / 3); /* 3等分の幅を確保したいからこのコード書きがち */
}

.OK-flex-item-1 {
  flex: 1 0 33.33%;
}

.OK-flex-item-2 {
  flex-gorw: 1;
  flex-shrink: 0;
  flex-basis: calc(100% / 3);
}

■flex-basisの値は単位必須

IE11ではflex-basisに0などの数字だけを設定しても反映されない。px,em,rem,%などを設定しましょう。

自分がよくやってしまうIE11の罠は以上ですがこれらを含め以下の記事が非常に助かります

flexboxのバグに立ち向かう(flexboxバグまとめ) – Qiita
https://qiita.com/hashrock/items/189db03021b0f565ae27

最終行が思い通りにならない・・・

フレックスボックスで記事リストをレイアウトする場合、「justify-content: space-between」で並べると綺麗に並べることができますが、3列の場合で最終行の要素が2個になった場合、両端に要素がよってしまいます。

これを防ぐ方法は条件によってフレキシブル(柔軟)に対応します。

条件:3列に固定したい

方法:フレックスコンテナー(display:flexを適用している包括要素)に疑似要素afterを追加してそのwidthプロパティをフレックスアイテムの幅と同じにする。かつheightプロパティは指定しない(ここポイント)。

条件:4列に固定したい

方法:フレックスコンテナー(display:flexを適用している包括要素)に疑似要素before、afterを追加してそのwidthプロパティをフレックスアイテムの幅と同じにする。かつheightプロパティは指定しない(ここポイント)。before要素にorderプロパティ1を指定する。

条件:5列以上もしくは色々な列数対応

CSSだけでは対応できません。最終行の残りの子要素をjavascriptを使って空の子要素で埋めると一列の子要素の数の変化に対応できます。

javascript(jQuery)でフレックスコンテナーにフレックスアイテムを追加して最終行をかならず左寄せにするスクリプト

<ul class="flex-container">
  <li class="flex-item">要素1</li>
  <li class="flex-item">要素2</li>
  <li class="flex-item">要素3</li>
  <li class="flex-item">要素4</li>
  <li class="flex-item">要素5</li>
  <li class="flex-item">要素6</li>
  <li class="flex-item">要素7</li>
  <li class="flex-item">要素8</li>
</ul>
$(function() {
  var $flexContainer = $('.flex-container');
  var flexItems = [];

  for(var i = 0; i < $flexContainer.find('.flex-item').length; i++) {
    flexItems.push($('<li class="flex-item"></li>'))
  }
  $flexContainer.append(flexItems);
});