GETメソッドに日本語のパラメータをそのまま入力しWebサーバへ送信した場合、以下画像の枠線部のようなよくわからない文字列になってしまいます。

この現象を一般的に「文字化け」と言います。


なぜこのような文字化けが発生するのでしょうか。

実はURLには以下の表で示した範囲の文字しか使用できない制限があり、GETリクエストで利用されるクエリ文字列もこの制限の影響を受けてしまい、日本語を直接パラメータとして使用することはできません。

URLのパラメータには日本語をそのまま入力することはできないと説明しましたが、ChromeやEdgeなどのWebブラウザではアドレスバーに日本語を直接入力しても文字化けせずに検索結果が表示されます。

実際どのようにして文字化けを解決しているのでしょうか。


上記は「日本語」という文字列をChromeのアドレスバーに直接入力し検索した際のURLになります。

パラメータ「q」の値がよくわからない文字列に置き換わっていることが確認できます。

これは「パーセントエンコーディング」という方法で「日本語」という文字列が変換された結果です。


今回入力された文字列「日本語」は「%E6%97%A5%E6%9C%AC%E8%AA%9E」と変換されましたが、各文字は以下のように16進数で表され、各値の先頭に「%」を付けた値で表されています。


半角スペースなどの使用出来ない文字も上記のようにエンコーディングされます。

これらの処理はWebブラウザ側で行われるため、基本的に私たちユーザが意識する必要はありません。

ショッピングサイトを作成するにあたって、どのような機能を持ったサイトにするか、画面表示の流れはどうするかなどを決める必要があります。

画面構成を考えるにあたって以下のような「画面遷移図」を作成します。


〇△ショッピングサイトの画面遷移図を作成しましたが、それぞれの画面のフローを簡単に説明します。

まず初めに01 ログイン画面でユーザIDとパスワードを入力します。ユーザIDまたはパスワードに誤りがあると02 ログイン失敗画面ようにエラーメッセージを表示し、正しい値の再入力を促します。


ログインに成功すると03 商品一覧画面が表示されます。

この画面では販売中の商品が一覧形式で並んでおり、購入したい商品の「カートに入れる」ボタンを押下すると対象の商品がショッピングカートに投入されます。

その後「カートの内容を確認する」ボタンを押下すると、04 カート一覧画面が表示され、ショッピングカートの中の商品が確認できます。


04 カート一覧画面では「この内容で注文する」ボタンを押下すると商品の注文が確定し、05 注文完了画面に遷移します。

購入する商品を変更する場合は「商品一覧画面に戻る」ボタンを押下します。

一部細かい機能の画面は省いていますが、ネットショッピングをしたことがある方であればよく見る画面構成だと思います。

画面遷移図が作成できたのでこれにプログラムを実装して各画面が機能するようにしていきます。

まず初めにショッピングサイトの入り口であるログイン画面を作成しますが、今回は小規模なシステムなので習得が比較的容易なPHPを使用して説明を行います。


ログイン処理：login.php


まず枠線部①でログインフォームで入力されたユーザIDとパスワードを取得し$user、$passwordという変数に格納しています。

ユーザID、パスワードは第三者に知られてはいけない情報なのでPOSTメソッドを使用してパラメータを渡しています。


次に入力されたユーザID、パスワードがそれぞれ「tanaka」「Test123」と一致するか②の部分で確認しています。

通常、ユーザIDとパスワードの組み合わせはデータベースに問い合わせして確認するのですが、説明を簡略化するために上記の確認方法となっています。


組み合わせが正しい場合は③の部分の処理が実行されます。

ここで使用されているPHPのheader関数「Location」は指定されたURLに対しGETリクエストを発行する動きをします。

よって③の処理によりURLが「goods_list.php」となっている商品一覧画面を表示することになります。


組み合わせに誤りがある場合は④の部分の処理が実行されます。

ここでは③の処理と同様にLocationで指定されたURL「login_failed.php」を表示する動きをするため、ログイン失敗画面が表示されます。