ようやくドメインを http://moto-mono.net/ から http://5509.me/ に移転しました。ドメインの移転ということで、念のため前のデータは全て残しつつ、htaccessで新しいドメインにリダイレクトしています。その辺のメモ。色々キャプチャ取り忘れたので、画像が全然なくて意味わからないかもしれないです。タイトルにもある通り、WordPressでのデータ移転も含めて書きました。

準備

1. 新しいドメイン（ディレクトリ）にWordPressをインストールしておく

そのままなんですけど、先にインストールしておきます。プレフィクス（テーブル接頭語）は基本的に以前のブログと同じもので大丈夫ですが、同じDBを使う場合はあとあと置換するプレフィクスにしておきます。ここではgogo09_。

2. wp-contentをコピーしておく

テーマとかプラグイン、アップロードした画像ファイルなどもろもろ入っているのでこれもアップロードしておきます。

3. データをまるっとバックアップ

データのエクスポートはWordPress Database Backupで。
Redirectionも使っているのですが、このRedirectionのログがあほみたいに容量（6MB強）が大きかったのでこれだけチェック外しました。

4. プレフィクスを置換する

そもそも違うDBを使う場合はそのままで問題ないですが、今回は同じDBを使っているので、プレフィクスを置換しました。ダウンロードしたバックアップSQLデータをテキストエディタで開いて（シンタックスハイライトはオフにしないと大変なことになります）、一発置換でいいです。

“next_” >> “gogo09_”

データの取り込みからWordPressへの適用

1. バックアップデータをインポートする

プレフィクス置換済みのものをインポートします。インポートはphpMyAdminのImportから行いました。

2. ドメインを書き換える

設定が古いドメインのままになっているので、まずはDBを書き換えます。ドメイン設定は、プレフィクス_optionsに含まれています。

Browseから一覧を表示してsiteurlの項目の値を新しいドメインに書き換えます。

3. WordPressにアクセスする

http://新しいドメイン/wp-admin からWordPressにアクセスします。するとデータが更新されて、中身盛りだくさんなブログになっているはずです。

3-1. 基本設定のWordPressの場所を変更する

上のほうですね。新しいドメインに変えます。

3-2. アップロードファイルを変更する

これも新しいディレクトリに変えておきます。

4. 記事などに含まれる古いドメインを新しいドメインに書き換える

これはSearch Regexというプラグインを使うと簡単に書き換えることができます。

検索するとずらっと出てくるので、Search patternに検索語、Replace patternに置換するものを入れてReplate & Saveボタンをクリックすることで一発置換できます。

ここまでで、新しいドメイン上で今までのデータを持ったブログができました。

(5.) パーマリンクの変更

ドメインを変えたことにあわせて、記事のパーマリンクも変更しました。なんせ長かった･･･

今までのパーマリンク：/%year%/%month%/%day%/%postname%.html
新しいパーマリンク：/log/%postname%

だいぶすっきり！

mod_rewriteを使ったリダイレクトの設定

このままだと諸々登録されている古いブログのほうにアクセスが集まってしまうので、新しいブログへリダイレクトを設定します。htaccessでmod_rewriteの指定を行います。ドメインが変わるので、恒久的なリダイレクトになり、ステータスコードは301を使います。

mod_rewriteの指定方法は「URLの書き換え Rewrite」を参考にしてください。

RewriteRule ([^\/\.]+)\.html$ http://5509.me/log/$1 [R=301,L]
RewriteRule index.php http://5509.me/ [R=301,L]
RewriteRule ^(feed|about|labs)$ http://5509.me/$1 [R=301,L]
RewriteRule ^(tag|category)(\/.*)$ http://5509.me/$1$2 [R=301,L]
RewriteRule ^([0-9]+)(\/[0-9]+)? http://5509.me/log/$1$2 [R=301,L]

1行目は、旧記事URLから新しいURLへのリダイレクト。
2行目は、トップページのリダイレクト。
3行目は、ページとfeedのリダイレクト。
4行目は、タグとカテゴリページのリダイレクト。
5行目は、アーカイブページのリダイレクト。

記事URLのリダイレクト

重要なのは1行目なので、そこだけ解説しておきます。たとえば、要素をふわっと表示させる〜のURLは

http://moto-mono.net/2010/04/30/whatinout.html

ですが、新しいURLのルールは

http://5509.me/log/whatinout

に変わります。共通する箇所は太字になっているところなので、この部分を正規表現で取得します。正規表現は

([^\/\.]+)\.html$

になり、（）で取得した部分を$1で取得できるのでリダイレクトのURLは

http://5509.me/log/$1

となります。

にそれぞれなっています。基本的に正規表現が使えるはずですが、チカッパはapacheのバージョンが1.3.xx系だったので \d{2} とかが使えませんでした。

Google Analyticsなど使っているサービスのドメイン変更など

最後に、使っているサービスのドメインを変更しておきます。これが結構多くて大変でしたね。。

それにしても

全部の数字が0とか新鮮ですね･･･なんとなく記念にキャプチャした。

さみしくなんかないよ･･･！

Windows7のウィンドウのようにふわっと表示・非表示させることができます。ふわっとと、whatをかけ･･･（ｒｙ
色々な環境で試せてないので、バグというか予期しない動きは多いかもしれないです。twitterかコメントで報告もらえれば対応できる範囲で対応します。

ふわっとするためだけにeasingが必要になるいけてない仕様なんですけど、easingを別のところでも使ってカバーしてください（！）それかeasing関数を書いてもらえると･･･

Live demo
Download demo files

Read more

備忘として。。

Urchin6のUTMとGoogle Analytics(以下ga)を併用するときはUrchin側の導入コードが少し変わります。

1. 必要なファイルの準備

「__utm.gif」をサーバー（ドメイン）ルートにコピー。

2. UTMを利用するためにgaのコードに追加

urchin.jsを使っている場合

<script type="text/javascript">
_userv=2; // ここを追加
_uacct="UA-XXXXXXX-Y";
urchinTracker();
</script>

ga.jsを使っている場合

<script type="text/javascript">
var pageTracker = _gat._getTracker("UA-xxxxxx-x");
pageTracker._setLocalRemoteServerMode(); // ここを追加
pageTracker._initData();
pageTracker._trackPageview();
</script>

どちらもローカル サーバー モードの変更で、デフォルトではGAのサーバーのみに送信しているので、これをローカルサーバー（Urchinのサーバー）にも送信するように設定できます。

参考： http://www.google.com/support/googleanalytics/bin/answer.py?hl=jp&answer=76305

ドキュメントを見てると、「__utm.gif」はルートじゃなくてもよさそう。その場合は

_ugifpath = 'newLocalGifPath'; // urchin.jsの場合
pageTracker._setLocalGifPath(newLocalGifPath); // ga.jsの場合

でそれぞれ指定してあげればよさそう。
あ、Urchinの取得タイプをUTMに変更するのを忘れずに･･･

100317 16:28 追記：
Twitterの言語が日本語になっている場合、Hover Cardは表示されないようです。Englishにすれば表示されるので、オフィシャルのものとあわせて確認してみてください

最近Twitterに実装された、HoverCard（@screen_name リンクにカーソルをのせるとユーザー情報が表示されるやつ）を実装できるjQueryプラグインです。

デザインがちょっと違う・listsがfavouritesになっている、など違う点もあるのですが、基本的には同じように実装できるようにしました。インラインは現時点で未実装ですが、要望がそれなりにあれば実装しようかと思っています。

Live demo
Download demo files

Read more

jQueryは.css()を使えば、まるでCSSを書いているかのようにスタイルを適用できて便利ですよね。jQueryを使わない場合でも同じように書けるととても便利なので、いつも以下みたいな関数を用意してます。

// Set Styles
function set_styles(elm, hash) {
  for( var c in hash ) {
    elm.style[c] = hash[c];
  }
}

これさえあれば、あとは簡単

set_styles(element, {
  margin: '5px 0 5px 5px',
  width: '100px',
  height: '100px',
  fontSize: '14px'
});

こんな感じにjQueryの.css()と同じように（ちょっと違うけど）書けます。便利。