• ブログTOP
  • AI・ディープラーニング
  • AR
  • VR
  • WEBサイト
  • WEBマーケティング
  • SEO
  • SNS
  • その他
  • お問い合わせ

ALAKI株式会社

COZIKEEいつまでも使えるTech情報発信ブログ

リクルートサイトはこちら >

日本語URLを含むリダイレクトの罠にかかっても無事でいられる2つの対策

2017年12月28日

  • このエントリーをはてなブックマークに追加

こんにちは、Webプログラマの篠田です。

明日は年末恒例の自宅大掃除を計画しています。
1年間の汚れを落とすべく、窓や換気扇など普段掃除しないところを徹底的に磨こうと思います!

2017年最後のブログは、.htaccessによる日本語を含むリダイレクト設定に関してご紹介します。

この記事の目次

  • 1 日本語を含むURLとは
  • 2 一般的な方法で、日本語を含むURLをリダイレクトしてみる
  • 3 日本語を含むURLにリダイレクトしたい場合
  • 4 まとめ

日本語を含むURLとは

一番、遭遇率が高いのはWordPressを利用しているサイトのパーマリンク(記事の詳細URLのこと)に含まれた状態で、公開されている場合かとおもいます。

URLに日本語が含まれていても、Webサイトの表示には問題ありません。

ですが、Webページのパーマリンクを変更したり、ドメインが変更になるなどの「リダイレクト(転送)」が必要になった場合に困ったことになります。

一般的な方法で、日本語を含むURLをリダイレクトしてみる

例として、架空のURL「https://alaki.co.jp/テスト」から「https://alaki.co.jp/test.html」にリダイレクトするパターンを検証します。

.htaccessを利用した、一般的なリダイレクト設定は下記のとおりです。

1
2
3
4
5
6
<IfModule mod_rewrite.c>
RewriteEngine On
 
#一般的な記述方法でのリダイレクト設定
RewriteRule ^%E3%83%86%E3%82%B9%E3%83%88 https://alaki.co.jp/test.html [R=301,L]
</IfModule>

日本語を含むURLは、「URLエンコーディング」という特殊な表記に自動的にブラウザが変換して表示してくれます。

「URLエンコーディング」された文字列を、.htaccessに記述します。

URLに含まれている日本語「テスト」は、「URLエンコーディング」されると「%E3%83%86%E3%82%B9%E3%83%88」と表現されます。

次に、リダイレクト先は「https://alaki.co.jp/test.html」とします。

この設定の結果はというと「リダイレクト失敗」となります。

リダイレクトされない原因

Apacheを利用している場合、「URLエンコーディング」された文字「%」を「x」に自動的に変換してしまうという特徴があります。

そのため「%E3%83%86%E3%82%B9%E3%83%88」が本来の意味を失ってしまうため、リダイレクトができないという現象が発生します。

解決方法

「URLエンコーディング」は文字を「%」と16進数2桁の文字コードで作られているので、Apacheが認識できる「16進数」にすることで対応ができます。

具体的には「%」の部分を「\x」に置き換えることで、Apacheが正常に「URLエンコーディング」された文字列を認識するようになります。

例えば「%E3」であれば「\xE3」となります。

これを踏まえて、リダイレクト処理を書き換えていきます。

1
2
3
4
5
6
<IfModule mod_rewrite.c>
RewriteEngine On
 
#「%」を「\x」に置き換えたパターン
RewriteRule ^\xE3\x83\x86\xE3\x82\xB9\xE3\x83\x88 https://alaki.co.jp/test.html [R=301,L]
</IfModule>

これであれば、正常に「https://alaki.co.jp/test.html」にリダイレクトされるようになります。

日本語を含むURLにリダイレクトしたい場合

日本語を含むURLのリダイレクトには、もう1つ大きな罠があります。

それが、リダイレクト先のURLに日本語が含まれている場合です。

例えば「https://alaki.co.jp/test.html」を「https://alaki.co.jp/テスト」にリダイレクトしたい場合です。

先程のパターンを利用して書いてみます。

1
2
3
4
5
6
<IfModule mod_rewrite.c>
RewriteEngine On
 
#「日本語を含むURL」にリダイレクトさせたいパターン
RewriteRule ^test.html https://alaki.co.jp/\xE3\x83\x86\xE3\x82\xB9\xE3\x83\x88 [R=301,L]
</IfModule>

この設定の結果はというと「リダイレクト失敗」となります。

リダイレクトされない原因

先程は、Apacheが「%」を理解できなかったことが原因でしたが、今度は「mod_rewrite」の方に問題が発生したためです。

「mod_rewrite」は「\(バックスラッシュ)」を無視してしまい「https://alaki.co.jp/xE3x83x86xE3x82xB9xE3x83x88」にリダイレクトされてしまいます。

また、「%E3%83%86%E3%82%B9%E3%83%88」だと今度は「mod_rewrite」が「%」を置換文字列とご認識して正しくリダイレクトできなくなります。

解決方法

「mod_rewrite」の「%」を理解させるには「%」を「\%」に変換して、「置換処理」を無効化することで解決することができます。

具体的な.htaccessの設定は下記のとおりです。

1
2
3
4
5
6
<IfModule mod_rewrite.c>
RewriteEngine On
 
#「日本語を含むURL」にリダイレクトさせたいパターン(正解)
RewriteRule ^test.html https://alaki.co.jp/\%E3\%83\%86\%E3\%82\%B9\%E3\%83\%88 [NE,R=301,L]
</IfModule>

「NE」は「mod_rewrite」のフラグで、特殊文字を「エンコード」されるのを防ぐという設定になります。

これで、日本語を含むURLにリダイレクトすることが可能になります。

まとめ

日本語を含むURLは、避けられるのであれば避けたほうが良い言われていますが、どうしても日本語を含むURLになってしまう場合もあるとおもいます。

そういう不測の事態+リダイレクトでも対策さえ知っていれば、恐れる心配はありませんね。

それでは、2018年もよろしくお願いします。

みなさま、良いお年を!!

 


現場の業務フローに寄り添ったWebシステムをお求めなら、私たちALAKIにご相談ください。

ALAKIは経営者様が感じている問題点と、実際にWebシステムを利用される現場スタッフ様が直面している課題を、弊社システムエンジニアが丁寧に聞き取り、お客様と共にシステムを作り上げていきます。
業務改善が実現できるWebシステムをお求めの方は、是非ALAKIにご相談ください。

・ALAKIのWebシステム開発

・ALAKIのクラウド型受発注システム

  • ツイート
  • このエントリーをはてなブックマークに追加

You may also like...

  • スクリーンショット 2018-03-02 0.54.59

    Webサイトに動きを!グリッチエフェクトを実装する「CSS Glitch Effect」

    2 3月, 2018

  • a80f1d6c6827958816c7034215236676_m

    Webサイトを常時SSL化する4つのポイント

    24 10月, 2017

  • WEBデザインの基本セオリー 0

    知っておきたいWEBデザインの3つの基本セオリー

    4 9月, 2014

デザイナー募集
  • Next story 【2018年のデザイン予想】これからきそうな海外のWebデザインのトレンド5選
  • Previous story Webデザイナー必見!Adobe Creative Cloudデスクトップアプリケーションを利用して、デザインデータをバージョン管理する方法

弊社サービス

MONJI+ MUGHEN ALAKI クラウド型受発注システム さよなら過去のAR。WebARがイベント集客に革命を起こします。

運営会社

ALAKI株式会社 ALAKI株式会社採用サイト

人気の記事

  • alaki1462_A_businessman_who_works_logically_1da80a2e-c297-4911-bdd6-feba0ebf1357

    仕事術

    【書籍要約】数学的な仕事術大全

    4 11月, 2024

  • fv-main-img-min

    空間コンピューティング

    世界初!「空間コンピューティング」を専用端末不要、スマホのWebブラウザのみで実現する『Web XR Site』を公開しました

    22 6月, 2023

  • Virtual reality players isometric vector illustration. VR UI and navigation. Futuristic digital technology. Virtual screen. Mixed reality 3d concept. Person in VR headset. Web banner idea

    AR

    Appleから新世代MRグラス「Vision Pro」の登場 – デジタルと現実世界が融合する新時代へ

    6 6月, 2023

  • AWE

    未分類

    ARアプリ『MUGHEN』が世界最大のAR/VRアワード「AWE」のファイナリストに選出されました!

    26 5月, 2023

  • python-logo-master-v3-TM

    pyhotn / 業務効率化

    「SwinIR」で高画質化した画像を pythonを使用して一括で元のサイズに戻す方法

    2 2月, 2023

カテゴリー

  • AI・ディープラーニング
  • AR
  • BtoB
  • CMS
  • Git
  • Google AdWords
  • gulp
  • Javascript
  • Laravel
  • Photoshop
  • Pug
  • pyhotn
  • Sass
  • SEO
  • SNS
  • Twitter広告
  • VR
  • Web3.0
  • WEBサイト
  • WEBマーケティング
  • YouTube
  • コーディング
  • システム開発
  • スマートフォンサイト
  • セキュリティ
  • セミナー
  • その他
  • ツール
  • デザイン
  • ベトナムレポート
  • 仕事術
  • 未分類
  • 業務効率化
  • 空間コンピューティング
  • 色

アーカイブ

  • 2024年11月
  • 2023年6月
  • 2023年5月
  • 2023年2月
  • 2023年1月
  • 2022年12月
  • 2022年11月
  • 2022年10月
  • 2022年9月
  • 2022年2月
  • 2021年12月
  • 2021年9月
  • 2021年7月
  • 2021年6月
  • 2020年10月
  • 2020年9月
  • 2020年8月
  • 2020年6月
  • 2019年6月
  • 2019年5月
  • 2019年4月
  • 2019年3月
  • 2019年2月
  • 2019年1月
  • 2018年12月
  • 2018年11月
  • 2018年9月
  • 2018年8月
  • 2018年7月
  • 2018年6月
  • 2018年5月
  • 2018年4月
  • 2018年3月
  • 2018年2月
  • 2018年1月
  • 2017年12月
  • 2017年11月
  • 2017年10月
  • 2017年9月
  • 2017年8月
  • 2017年7月
  • 2017年6月
  • 2017年4月
  • 2017年3月
  • 2017年2月
  • 2017年1月
  • 2016年12月
  • 2016年11月
  • 2016年10月
  • 2016年9月
  • 2016年8月
  • 2016年7月
  • 2016年6月
  • 2016年5月
  • 2016年4月
  • 2016年3月
  • 2016年2月
  • 2016年1月
  • 2015年12月
  • 2015年11月
  • 2015年10月
  • 2015年9月
  • 2015年7月
  • 2015年3月
  • 2015年2月
  • 2015年1月
  • 2014年12月
  • 2014年11月
  • 2014年10月
  • 2014年9月
  • 2014年8月
  • 2014年7月
  • 2014年6月
  • 2013年10月
  • 2013年9月

Facebook

お問い合わせ

お問い合わせ

人気の記事

  • 【書籍要約】数学的な仕事術大全
  • 世界初!「空間コンピューティング」を専用端末不要、スマホのWebブラウザのみで実現する『Web XR Site』を公開しました
  • Appleから新世代MRグラス「Vision Pro」の登場 – デジタルと現実世界が融合する新時代へ
  • ARアプリ『MUGHEN』が世界最大のAR/VRアワード「AWE」のファイナリストに選出されました!
  • 「SwinIR」で高画質化した画像を pythonを使用して一括で元のサイズに戻す方法

カテゴリー

  • AI・ディープラーニング
  • AR
  • BtoB
  • CMS
  • Git
  • Google AdWords
  • gulp
  • Javascript
  • Laravel
  • Photoshop
  • Pug
  • pyhotn
  • Sass
  • SEO
  • SNS
  • Twitter広告
  • VR
  • Web3.0
  • WEBサイト
  • WEBマーケティング
  • YouTube
  • コーディング
  • システム開発
  • スマートフォンサイト
  • セキュリティ
  • セミナー
  • その他
  • ツール
  • デザイン
  • ベトナムレポート
  • 仕事術
  • 未分類
  • 業務効率化
  • 空間コンピューティング
  • 色

検索

ALAKI株式会社 © 2025. All Rights Reserved.