後方参照

.htaccess では、一部のディレクティブ(RewriteRule、RewriteCond、Macht の含まれるもの)では正規表現が利用でき、基本的な正規表現はこちらにまとめました。⇒ 正規表現の基本

正規表現で条件にマッチングした文字または文字列は、変数として格納して、それより後で利用することができます。

例を見ていきましょう。このような正規表現があったとします。

(blue|green)(\d+)(\.html)

3つにグループ化されていますね。何を意味しているかというとこうなります。

(blue|green) ⇒ “blue” または “green”
(\d+) ⇒ 1個以上の任意の数字の繰り返し
\.html ⇒ “.html”。”.” はメタ文字なので、普通の文字として “.” を扱うために、直前に “\” がつきます。

つまり、”blue1.html”、”blue2.html”、”blue10.html”、”green1.html”、”green2.html”、”green10.html” などがマッチングします。

これらを変数として格納し、 “$n” という表記で、後で利用することができます。(“n” には 0~9 の数字が入ります。)マッチング条件が複数ある場合、左側から、$1、$2、$3 という順番で、変数が格納されていきます。($0 と $1は同じ)

この例の場合はこうなります。

(blue|green) ⇒ $1
(\d+) ⇒ $2
\.html ⇒ $3

実際の.htaccessに使われる例としてはこんなかんじになります。

RedirectMatch /(blue|green)(\d+)(\.html) http://newdomein.com/$1$2$3
#               ↑"$1"に格納 ↑"$2" ↑"$3"              後方参照 ↑
# 転送元にある該当htmlファイルを、newdomein.comにある同じ名前のhtmlファイルに転送

Macht の含まれるディレクティブ、RewriteRule ディレクティブでは、前述したように、後方参照に ” $n ” が使われるのですが、RewriteCond ディレクティブでは、” %n ” が使われます。ご注意ください。

正規表現の基本

.htaccess では、一部のディレクティブ(RewriteRule、RewriteCond、Macht の含まれるもの)では正規表現が利用できます。

正規表現とは、プログラミングで使用される、いくつかの文字列を1つの形式で表現する記述方法です。何に使われるかといえば、多くの文字列から必要な文字列を検索して、条件を指定したりする場合です。

プログラミングとかしていても、あまり使わないやつとか、忘れちゃうんですよね。
.htaccess のディレクティブをまとめる前に、基本的な正規表現をまとめてみます。

基本的な正規表現

記号 説明
. 任意の1文字にマッチ
例)”の.と” なら、”のーと”、”のうと”、”のりと” などがマッチ。
^ ^ に続く文字列が 行の先頭にある場合にマッチ
例)”^本” なら、”本棚”、”本拠” はマッチ。”台本” はマッチしない。
$ $ の前の文字列が 行の文末にある場合マッチ
例)”花$” なら、”生花”、”紅花” はマッチ。”花束” はマッチしない。
* * の前の文字が 0回以上繰り返す場合にマッチ
例)”はー*い” なら、”はい”、”はーい”、”はーーい” などがマッチ。
+ + の前の文字が 1回以上繰り返す場合にマッチ
例)”はー+い” なら、”はーい”、”はーーい” がマッチ。”はい” はマッチしない。
? ? の前の文字が 0個か1個ある場合にマッチ
例)”はー?い” なら、”はい”、”はーい” がマッチ。”はーーい” はマッチしない。
| ~または~(選択肢の区切り目)
例)”小学生|中学生|高校生” なら、この3つの選択肢のいずれかがマッチした場合。
[] 角括弧内の文字のどれか1つにマッチ。
例)[abc123] なら、”a”、”b”、”c”、”1″、”2″、”3″にマッチ。

角括弧内の文字を “-” を使って範囲指定可能
例)[a-cX-Z0-1] は “a”、”b”、”c”、”X”、”Y”、”Z”、”0″、”1” にマッチ。

[^] 角括弧内の文字が含まれないものにマッチ
例)[^a-c] なら、”a”、”b”、”c” 以外にマッチ。
() グループ化(文字の集合を1つにまとめて扱う)
例)(一時間)+ なら、”一時間” にマッチ。
{} 直前の文字、またはグループの桁数を指定
例)”あ{3}” なら、”あああ” がマッチ。
“あ{2,3}” なら、”ああ”、”あああ” がマッチ。
“あ{2,}” なら、あを2回以上繰り返すものがマッチ。

メタ文字を普通の文字として扱う ” \

正規表現の基本として使用される ” . 、^ 、$ 、* 、+ 、? 、| 、[ 、] 、{ 、} ” は、メタ文字と呼ばれ、上記、「基本的な正規表現」でまとめた通り、文字を形式に沿って表現するための意味が与えられています。これらのメタ文字を、普通の文字として扱うには、直前に “ \ ” を記述することで実現します。

説明
\ エスケープ 直後のメタ文字を普通の文字として扱う
例)”2\+3″ の場合、”2+3″ がマッチ。”+” は、「直前の文字が 1回以上繰り返す場合にマッチ」という意味ではなく、普通の文字として扱われる。

定義済みの文字クラス

記号 説明
\d [0-9] 全ての数字
\D [^0-9] 数字以外の全ての文字
\s [\t\f\r\n] 垂直タブ以外のすべての空白文字
\S [^\t\f\r\n] 空白文字以外の全ての文字
\w [a-zA-Z_0-9] アルファベット、アンダーバー、数字
\W [^a-zA-Z_0-9] アルファベット、アンダーバー、数字以外の全ての文字

後方参照

正規表現で条件にマッチングした文字または文字列は、変数として格納して、それより後で利用することができます。
後方参照について詳しくはこちら⇒後方参照

ドロップダウンメニュー(レスポンシブ対応)jQuery編

WordPressの最近のテーマは大概、メニューなどレスポンシブ対応で、自動でドロップダウン式に切り替わるようになっていますが、古いテーマを利用するとか、手書きで書く場合など、使えるかなと思って、レシピ的にメモしておきます。
ドロップダウンメニューはCSSだけでも実現できますが、今回はjQueryです。

ddmenu.js

jQuery(document).ready(function($){

	var agent = navigator.userAgent;
	var list = jQuery("div.menu-container");

	function menuslide(){
	//メニュー表示非表示
	jQuery("p.navtitle").click(function(){
	if(jQuery(list).css("display")=="none"){
		jQuery(list).slideDown("normal");
	}else{
		jQuery(list).slideUp("normal");
	}
    });
    }

    if(agent.search(/iPhone/) != -1 || agent.search(/iPod/) != -1){
        menuslide();

    }else if(agent.search(/Android/) != -1){
        menuslide();

	}else{
		var replaceWidth = 700;
		function widthSize(){
			var windowWidth = parseInt(jQuery(window).width());
			if(windowWidth >= replaceWidth) {
				jQuery(list).css("display","block");
			} else if(windowWidth < replaceWidth) {
				jQuery(list).css("display","none");
			}
		}
		jQuery(window).resize(function(){widthSize();});
			widthSize();
			menuslide();
  }
});

CSS

@media screen and (min-width: 701px) {
    p.navtitle {
        display: none;
    }
}

@media (max-width: 700px) {
    /* @media (max-width: 700px) Reduce font-sizes for better readability on smaller devices */
p.navtitle {
        color: #ffffff;
        dispaly: block;
        cursor:pointer;
        line-height:1.4;
        font-size: 14px;
        font-weight:bold;
        margin: 1.2em 0 1.2em 5px;
    }
    #access div {
        margin: 0;
    }
    #access ul {
        margin: 0;
    }
    div.menu-menu-1-container {
        height: auto;
        width: 100%;
        display: none;
    }
    div.menu-container ul {
        width: 100%;
    }
    div.menu-container ul li {
        float: none;
        background: #222;
        width: 100%;
        padding: 0;
        text-align: left;
        font-size: 14px;
    }
    div.menu-container ul li a {
        border-bottom: solid 1px #666;
    }
    
   .nav-btn-ico {
      display: inline-block;
      position:relative;
      margin: 0 10px 3px 0;
      padding: 0;
      background: #ffffff;
    }
    .nav-btn-ico, .nav-btn-ico:before, .nav-btn-ico:after {
      width: 14px;
      height: 3px;
    }
    .nav-btn-ico:before, .nav-btn-ico:after {
      display: block;
      content: "";
      position:absolute;
      top: 50%;
      left: 0;
      background: #ffffff;
    }
    .nav-btn-ico:before {
      margin-top: -8px;
    }
    .nav-btn-ico:after {
      margin-top: 4px;
    }  
}