Movable TypeでjQuery replace　メモ

過去にMTで作成したサイト上でスマホ対応をする場合、通常ならプラグインを入れてしまいたいところですが、
プラグインを使わずにできないかイロイロと実験してみました。

構成としてはスマホデータを/sp/に格納し、スマホでアクセスした場合はjQueryでこのディレクトリへ飛ばすようにします。

/
┗/blog/←5個ブログが存在
┗/folder/
┗/sp/ ←スマホサイト

MTでスマホ用のアーカイブテンプレートを作成するわけですが・・・
これまでの記事に内部リンクが入っており、ただテンプレートを作成しただけだと
過去記事のリンクが通常のPCページにいってしまいます。

これだと、今後も記事を公開した際に内部リンクがあると/sp/ディレクトリに行かないわけです。

そこでまず、思いついたのがMTのグローバルモディファイアのreplaceでした。

<mt:entrybody replace="foo","bar">

↑これ。

<mt:entrybody replace=“/www.hogehoge.jp/“,”www.hogehoge.jp/sp”>

テンプレートタグなので、MT上であればこれが定石だろうと思ったわけですが、問題が・・・

それは、imgファイルにも/sp/が付いてしまうこと。

あちゃ〜

ということで、色々と考えた結果・・・jQueryでやることに・・・

イメージ以外のリンクをリンクを抽出してそのリンクに/sp/を追加すると、行けるんじゃね？

そこで参考にしたサイトがこちら（jQueryでaタグのhrefの値(リンク先URL)を差し替えもしくは置換する方法）

$(document).ready(function() {
$("a").each(function() {
var replace = null;
var replace = $(this).attr('href').replace(/.com/g,'.jp');
$(this).attr('href',replace);
});
});

.comとjpの部分を書き換えて

$(document).ready(function() {
$("a").each(function() {
var replace = null;
var replace = $(this).attr('href').replace(/www.hogehoge.jp/g,'.www.hogehoge.jp/sp');
$(this).attr('href',replace);
});
});

としたところ、今度は、ブログとウェブページで階層が違うところでうまくリンクが貼られない・・・

ブログの階層が/blog/yyyy/mm/foo.html
ウェブページの階層が/folder/foo.html

というわけです。

ウェブページとブログで分けてしまったほうが良さそうです・・・

先にブログからやってしまいましょう・・・

$(document).ready(function() {
$("#page-contrents a").each(function() {
var replace = null;
var replace = $(this).attr('href').replace(/20/g,'sp/20');
$(this).attr('href',replace);
});
});

メニュー等に影響が出ないようコンテンツエリア（#page-contrents）のみに掛けます。
さっそくこれで、問題なく行ける予感・・・

行けました！全然出来るじゃん！

・・・と思っていた矢先、また思わぬ問題が・・・

URLに2016hogehoge.pdfなどというファイルがトップディレクトリ階層に散乱しており
/20にしてしまうと、2016hogehoge.pdfファイルも反応して/sp/2016hogehoge.pdfに書き換わってしまいます。

foo.htmlのリンクのみに/sp/をかけ、2016hogehoge.pdfはあくまで通常のディレクトリにしておきたいわけです。

ここで発想として思ったのが、if文で切り分けたほうが良いということでした。
foo.htmlを含むものにのみ/sp/置換をかけるわけです。

・・・しかし、foo.htmlのみを抽出してその部分を書き換えるとなると、
ちょっと記述がややこしくなり面倒くさいので、もっと簡単にできないか・・・と考えました。

そこで、正規表現を使い、下記のように記述しました。

$(document).ready(function() {
$("#page-contrents a").each(function() {
var replace = null;
var replace = $(this).attr('href').replace(/20([0-9])([0-9])\//g,'sp/20$1$2/');
$(this).attr('href',replace);
});
});

ブログの場合、/yyyy/が/20xx/になるので、20xxの数字を0-9まで指定してグルーピングを行います。

正規表現は、javascript以外にも使えるとっても便利なツールです。

これだと、PDFのファイル名が20xxと始まっても問題ありません。
/20xx/を/sp/20xx/に書き換えるとしていますので。

これで、あとはフッターあたりに記述しておけばOK

・・・と思いきや、今度はウェブページにも問題が・・・

今度は、ウェブページの中にも内部リンクがいくつか有ることが発覚。
folder全てではなく、特定のフォルダーに内部リンクがあり、ここにも/sp/を追加しなければなりません。

でも、大丈夫！

先にブログでやった内容をウェブページ用にすればいいわけですから。
ここで修正が必要なフォルダーは
/public/
/admission/
/contact/
の3つです。

これも、正規表現でちょちょいのチョイ！

$(document).ready(function() {
$("#page-contrents a").each(function() {
var replace = null;
var replace = $(this).attr('href').replace(/\/(public)|\/(admission)|\/(contact)/g,'/sp/$1$2$3');
$(this).attr('href',replace);
});
});

今回利用した正規表現のポイントをいくつかご紹介。

replace(/20([0-9])([0-9])\//g,'sp/20$1$2/');

/20/g, は20という文字列があれば置き換えの対象になるという意味です。
[0-9]は0-9までの数字で何か一つ該当するという意味。
([0-9])は$1や$2と連動しておりグルーピングをしてくれます。
([0-9])([0-9])の場合、$1$2で同じ内容が反映されます。
また、\（バックスラッシュ）はエスケープです。
この場合、/（スラッシュ）に意味があるので、そのまま/（スラッシュ）を入れてしまうとエラーになっていまいます。
そこで、エスケープを使い、あくまで記号として表記することが必要になります。

なので、/20xx/をsp/20xx/に置き換えるという意味の正規表現になります。