Fly higher! Sky is the limit!

webの現場で働く人のブログ

.htaccessによる少し複雑なリダイレクト備忘録

.htaccessのリダイレクトでハマったのでメモを残しておきます。

.htaccessでリダイレクトの除外する場合

mod_rewriteが使用可能な環境な場合

コード

RewriteEngine on
RewriteBase /

<IfModule mod_rewrite.c>

# ディレクトリ配下でリダイレクトの指定
RewriteCond %{REQUEST_URI} !^/(target/dir/)

# 拡張子で単位でリダイレクトの除外
RewriteCond %{REQUEST_URI} !\.css$
RewriteCond %{REQUEST_URI} !\.js$
RewriteCond %{REQUEST_URI} !\.jpg$
RewriteCond %{REQUEST_URI} !\.gif$

# ページ単位でリダイレクトの除外
RewriteCond %{REQUEST_URI} !^/hoge/hoge/index.html$
RewriteCond %{REQUEST_URI} !^/hoge/hoge.html$

</IfModule>

内にRewriteCondを使ってリダイレクトから除外する。 上から下へ、処理が行われるので先に優先順位を気を付けながら指定する。

.htaccessで除外したURL以外をトップページへ飛ばす場合

コード

RewriteEngine on
RewriteBase /

<IfModule mod_rewrite.c>

# 除外指定
～ 省略 ～

# 除外指定したもの以外をトップページへリダイレクト
RewriteRule ^(.*)$ https://paradox-tm.hateblo.jp/ [R=301,L]

</IfModule>

ポイントは除外指定されたURLは、リダイレクトから除外されるのでリダイレクトの除外指定をしたものよりも下に記述すること。

個別のリダイレクト指定（除外したURLのリダイレクト指定）

コード

RewriteEngine on
RewriteBase /

<IfModule mod_rewrite.c>

# 除外指定 & トップページへ飛ばす
～ 省略 ～

</IfModule>

# 除外したけど個別にリダイレクトさせたいURLを指定
Redirect permanent /hoge/hoge/index.html https://paradox-tm.hateblo.jp/hoge/hoge/index.html
Redirect permanent /hoge/hoge/index.html https://paradox-tm.hateblo.jp/hoge/hoge.html

index.htmlがある場合、すべてのページを/index.htmlに統一後にリダイレクトする場合

コード

RewriteEngine on
RewriteBase /

# /で終わるURLでアクセスした場合、index.htmlを付加し自分自身へリダイレクトを終了させる
# 本番環境とテスト環境とでURLが違う場合も想定して、飛び先のURLは絶対パスで指定する
RewriteRule ^(.*)/$ https://paradox-tm.hateblo.jp/$1/index.html [R=301,L]

<IfModule mod_rewrite.c>

# 除外指定 & トップページへ飛ばす
～ 省略 ～

</IfModule>

# 除外したけど個別にリダイレクトさせたいURLを指定
Redirect permanent /hoge/hoge/index.html https://paradox-tm.hateblo.jp/hoge/hoge/index.html

イメージは以下の通りです。

  1. /で終わるURLでアクセスした場合、一度/index.htmlをつけた状態になるように自身のサイトへリダイレクト
  2. 除外URLに含まれるかどうかを判定
  3. 含まれない場合、トップページへリダイレクト
  4. 個別で指定がある場合、個別のページへリダイレクト

ポイントは、IfModule mod_rewrite.cの中に、index.htmlへ飛ばす記述を書かないことです。
書いてしまうとリダイレクトがうまくいかなくなります。/（スラッシュ）で統一する場合や、wwwで統一する場合も同じ。

また、本番環境とテスト環境とでURLが違う場合も想定して、飛び先のURLは絶対パスで指定することです。

【.htaccess】特定のIPだけ閲覧を許可し、その他は指定のURLにリダイレクトする

サンプルソースコード

IPアドレス例：111.222.333.444

allow from all

<IfModule mod_rewrite.c>
  RewriteEngine On
  RewriteBase /
  RewriteCond %{REQUEST_FILENAME} !^(.*)\.(gif|png|jpg|jpeg|css|js)$ [NC]

# 111.222.333.444
  RewriteCond %{HTTP:X-Forwarded-For} !^111\.222\.333\.444

# 111.222まで指定したい場合
  RewriteCond %{HTTP:X-Forwarded-For} !^111\.222

# 指定IP以外を指定のURLにリダイレクト
  RewriteRule ^(.*) https://paradox-tm.hateblo.jp/ [L,R]
</IfModule>

IPアドレスの確認

www.cman.jp

こちらへアクセスすると確認できます。

SSL化対応したサイトへのリダイレクト

コード

RewriteEngine on
RewriteCond %{HTTPS} off
RewriteRule ^(.*)$ https://%{HTTP_HOST}%{REQUEST_URI} [R=301,L]

Webの現場で使えるテクニック集まとめ（完全メモ帳）

Webの現場でたまに使うけど忘れてしまい、またググるみたいな記事やこれだけは読んどけ的な記事を載せていきます。
完全メモ帳なので、随時更新していきます。

CSS系

天地中央

.hoge{
  position: relative;
  top: 50%;
  transform: translateY(-50%);
 }

https://coliss.com/articles/build-websites/operation/css/css-centering-vertically-and-horizontally.html
天地中央ってよく使いますよね。

CSS3を使った新しい画像置換の方法

https://kojika17.com/2011/03/css3-image-replacement.html

セレクトボックスをいい感じにするデザイン

https://copypet.jp/797/
セレクトボックスのスタイルとか忘れがちなので大分参考になります。

JavaScript系

クラス名（class属性に値）を削除（IE9有）

http://shanabrian.com/web/javascript/remove-class.php
もうほとんど使う事ないけど、IE9対応有りであれば参考になります。

Ajax

https://qiita.com/tonkotsuboy_com/items/0722ad92f370ab0c411b
then()いうメソッドを使ってECMAScript 2015のPromise風のコードが使えます。

ブラウザバック禁止

https://qiita.com/masashi68/items/d53f2195dde0712e641f
ブラウザバックってペナルティ受けそうですが...たまにある要望です。

Cookieが有効かどうかを確認する。

1.変数宣言（フラグ判定用）
2.Cookie にダミー Cookieを書き込む
3.書き込めた場合、Cookieの値を過去日付にして削除し、有効フラグを立てる

let cookieFlag = false;
document.cookie = "cookie_dummy=cookie_dummy";

if(document.cookie.length){
//Cookie有効化
  cookieFlag = true;
  document.cookie = "cookie_dummy=cookie_dummy;expires=Thu, 01 Jan 1970 00:00:00 GMT;"
}else{
 //Cookie無効化
}

その他、HTMLとか制作環境まわりなど

「aria-hidden="true"」と「speak: none;」

http://blog.e-riverstyle.com/2015/02/aria-hiddentruespeak-none.html

noindex,nofollow

https://digital-marketing.jp/seo/about-noindex-and-nofollow/
noindex,nofollowの仕組みや利用タイミングなど

Gitとがクローンできない場合

環境変数とか疑え。

nodeがインストールできない。

proxy設定とかを疑え。

$ npm config set proxy http://proxy.example.com:8080

https://qiita.com/tenten0213/items/7ca15ce8b54acc3b5719

バージョン指定、gulpインストール方法

$ npm install --save-dev gulp@x.xx.x

html差分ツール

https://chrome.google.com/webstore/detail/html-diff-check-tool/fjbonpakihikkocmockbkndhooihpijo
めっちゃ便利

Vue.js初心者向け：インラインテンプレートから単一ファイルコンポーネントの使い方まで

https://qiita.com/sygnas/items/c0228eabbb3157766d5c
単一ファイルコンポーネントの理解

jQueryを使用しない現在地表示（ES6:JavaScript）

お久しぶりです。
もうES2015（ES6）を使用すれば、大分楽な時代になりました。
なんとなくjQueryを使用しない現在地表示のJavaScriptを記述したのでご自由にお使いください。

想定されるhtml

<ul class="element">
  <li><a href="/aaa/">りんく１</a></li>
  <li><a href="/bbb/">りんく２</a></li>
  <li><a href="/ccc/">りんく３</a></li>
</ul>

JavaScript

const dir = location.href.split('/');
const dir2 = dir[3];
let glovalNav = document.querySelectorAll('.element a');

glovalNav = Array.prototype.slice.call(glovalNav, 0);
glovalNav.forEach( (element) => {
  if(dir2 !== '' && element.getAttribute('href').match(dir2)){
    /*aタグにclass付与する場合*/
    element.classList.add('active');
    /*
      親要素 liタグにclass付与する場合
      element.parentNode.classList.add('active');
    */
  }
});
  1. 現在閲覧しているURLを取得し、/（スラッシュ）ごとでスプリットして分割する
  2. 第二階層のdir[3]を格納
  3. ターゲットとなる要素の a要素を指定
  4. a要素のhrefが、2で取得した第二階層と一致しているか確認し、一致した場合 classを付与
    ※ トップページのみ第二階層を持たないので、第二階層が空でないことも確認

IE11でも動くようにしたい場合は、以下。

"use strict";
var dir = location.href.split('/');
var dir2 = dir[3];
var glovalNav = document.querySelectorAll('.element a');
glovalNav = Array.prototype.slice.call(glovalNav, 0);
glovalNav.forEach(function (element) {
    if (dir2 !== '' && element.getAttribute('href').match(dir2)) {
        /*aタグにclass付与する場合*/
        element.classList.add('active');
        /*
          親要素 liタグにclass付与する場合
          element.parentNode.classList.add('active');
        */
    }
});

JSONジェネレータを作る（Vue.jsとかJavaScriptとか）

！！！いきなり完成品！！！！

See the Pen JSON GENERATOR by paradox_tm (@takumaro-web) on CodePen.

作成手順

1. JSONを用意して、HTML上に表示する。

{
    "name": "安室奈美恵",
    "sex": "女性",
    "age": "41"
}

私が今回利用したサイトはこちら（というかいつも利用している。）
http://hilite.me/

2. 値が変わるところを書き換えていく。

JSONジェネレータを作る（Vue.jsとかJavaScriptとか）

※ 大枠のmain要素に#generatorも追加してます。

JS - code

var createJson = new Vue({
  el: '#generator',
  data: {
    name: "安室奈美恵",
    sex: "女性",
    age: "41"
  }  
});

3. それぞれの値を変更できるようにinputタグを用意する。

これでリアルタイムにJSONの値を変更することができる。

JSONジェネレータを作る（Vue.jsとかJavaScriptとか）

※エアロスミスは、バンドやし！バンド結成から48年やし（2018年現在）！

JSONをダウンロードするためのJSを記述

var test;
function json_create() {
  test = [
      {
          "name": "安室奈美恵",
          "sex": "女性",
          "age": "41"
      }
  ];
}

function json() {
  var data = JSON.stringify(test);
  var a = document.createElement('a');
  a.textContent = 'Download JSON' //ボタンの文言を定義
  a.download = 'test.json'; //JSONの名前を定義
  a.href = window.URL.createObjectURL(new Blob([data], { type: 'text/plain' }));
  a.dataset.downloadurl = ['text/plain', a.download, a.href].join(':');
  var exportLink = document.getElementById('download');
  exportLink.appendChild(a);
}json();

参考サイト https://kuroeveryday.blogspot.com/2015/07/javascriptExportFile.html

値をリアルタイムで監視し、生成するJSONの中身も書き換えていく

ここが今回のミソ。

function jsonGenerat() {
  test = [
      {
          'name': createJson.$data.name,
          'sex': createJson.$data.sex,
          'age': createJson.$data.age
      }
  ];
}

createJson.$watch('name', function (newValue, oldValue) {
   document.querySelector('#download a').remove();
   jsonGenerat();
   json();
})
createJson.$watch('sex', function (newValue, oldValue) {
   document.querySelector('#download a').remove();
   jsonGenerat();
   json();
})
createJson.$watch('age', function (newValue, oldValue) {
   document.querySelector('#download a').remove();
   jsonGenerat();
   json();
})
  • 生成するJSONの中身もinputタグで書き換えられた内容にする
  • ダウンロードリンクも新しいものになるように毎回上書きをおこなう

これでJSONジェネレータの完成！！！

あまり難しいテクニックもなく、このようなジェネレータを作ることができました。
あなたの日々の更新が少し楽になるかもしれません。

以上です。

平成も終わろうとしているのにjQueryにヤラレル

事象

Google ChromeやFirefoxのコンソールからJavaScriptを実行するとエラーが起きないのにサーバーにそのJavaScriptをアップすると謎のエラーが起きる。

エラー内容

＜Google Chrome＞
Cannot read property 'replace' of undefined

＜Firefox＞
TypeError: e is undefined

そもそも、replaceなんてしてないし、eが定義されてないってなんだ..？
久々に苛立ちと焦りが...これはIE6を対応していた頃を思い起こさせるような感じであった。

仕方がないので1行ずつデバックしてみる。

苛立ちや焦りは、良い波紋をうまない。
よって、安定した呼吸をしながら1行ずつデバックする必要がある。

原因発見

以下のソースが犯人のようだ

$('.className').prev('.className').css({"display":"block"}).text('やれやれだぜ。');

一見、正しそうに見える。いや、むしろ正しい。
しかし、なぜだか「cssのメソッドチェーン」ところでこける...
css({"display":"block"}) → show()にしたら、ケロッと動いた。
まったく「やれやれだぜ。」

一言

そもそもclassで出し分けすればいいのになんでこんなめんどくさいことをしないといけないかは、
システム絡みの大人の事情ということで、お察しください。
恐るべし、jQuery。

WordPress（ワードプレス）の投稿内でJavaScriptを実行するTips

この記事は以下の現象の人におススメの記事です。

  • JavaScriptを記述したのになぜかpタグに書き換えられてしまう。
  • 複数人で更新しているため、できれば自分の投稿（固定）ページのみに適応させたい。
  • 事情によりサイト共通部分（php）は弄れない。

など

WordPressの投稿内でJavaScriptを実行する方法

以下のページを読めば、大体方法はわかる。

WordPressの記事内にJavaScriptを挿入する4つの方法
https://minory.org/wordpress-javascript.html

WordPressの投稿でjQueryやJavaScriptを使う方法
https://itstudio.co/2015/07/24/4455/

こちらのページで解決されたら、この記事にはもう用がない。

しかし...

divで囲んでも『jQuery』と接頭辞をつけてもJSコードがpタグに書き換わってしまう場合

「こちらの方法でpタグに書き換わってしまうのを阻止すればええやん」と声が聞こえてきそうだが、複数人でサイトを管理しており、勝手にプログラムを修正したら他の人にも影響が出てしまうので不可能という状況の場合、どうするか。

悩んだ結果...解決策が浮かんだ。

それは、JavaScriptの難読化だ。

JavaScriptの難読化

  • 難読化させることでpタグになるのを回避させる！
  • さらにセキュリティ面も向上するので一石二鳥！

我ながら、「キタコレ」と思った瞬間であった。

手順

http://utf-8.jp/public/aaencode.html

  1. 上記のサイトにアクセスし、自分がかいたJavaScriptを張り付ける
  2. 記事内にコピぺする

難読化できるサービスはいくつかあるが、とりあえず顔文字のやつは動いてくれた。

めでたし、めでたし。
少しでもお役に立てれば幸いです。

以上