前回の、Movable Type移行篇に続き、WordPressの移行についてまとめ。

サーバ移転先

【移転前】ロリポップ ⇒ 【移転先】エックスサーバ

WordPressの移行手順

こんな感じで移行しました。

  1. アプリケーションのバージョンチェック
  2. WordPressデータベースのバックアップ
  3. MySQLをバージョンアップ(※必要な場合のみ)
  4. WordPressのバージョンアップ
  5. 新サーバにWPをインストール
  6. 新サーバにデータをインポート

1. アプリケーションのバージョンチェック

MTのときにも書いたけど、移行に失敗しないようWordPressのバージョンを揃えるところから。サーバ移転するし、どうせなら最新の環境で動かしたくて、WordPress3系にバージョンアップ。

このとき、移転先のMySQLのバージョンもチェックして、違ってたら合わせる。エックスサーバーはMySQL5が使えるので、ロリポップで事前にバージョンアップすることにした。

まとめると、こんな感じ。

サーバ WordPress PHP MySQL
移転前:ロリポップ WordPress 2.8.4 PHP 5.2.6 MySQL 4.0
移転先:エックスサーバー WordPress 3.0.4 PHP 5.1.6 MySQL 5.0

2. WordPressデータベースのバックアップ

前に、Wordpress2.8へ自動アップグレードしようとして、華麗に失敗した苦い経験があるので、バックアップは入念に行う。MySQLのバージョンアップを行う前に、まずはバックアップ。面倒くさくてもバックアップ。なにはともあれ、バックアップです。

WordPressの管理画面からもバックアップできるけど、プラグインの設定が引き継げないので、「phpMyAdmin」で行う。

実際の作業は下記サイトを参考にさせてもらいました。

(参考)

データベースのバックアップ - WordPress Codex 日本語版
http://wpdocs.sourceforge.jp/データベースのバックアップ
WordPressのサーバー移転メモ:バックアップ編 | コリス
http://coliss.com/articles/blog/wordpress/howto-backup-wordpress-data-for-change-server.html

3. MySQLをバージョンアップ(※必要な場合のみ)

エックスサーバーでMySQL5を使いたかったので、ロリポップ側でも事前にバージョンアップしておく。

ちなみに、WordPress Codexによると、WordPress 3.2からは、PHP 5.2 以上、MySQL 5.0.15 以上がサーバ要件となるみたい。まだ先の話だけどね。。

MySQL5データベースへ移行

作業は下記サイトを参考に進めました。

(参考)

「よろずや工房」のPCよろずカルテ ≫ Blog Archive ≫ ロリポップでのMySQL4からMySQL5への移行
http://www.ntfcorp.jp/yorozuya/?p=4770
MySQL5への移行 / ユーザー専用ページ / マニュアル - ロリポップ!
http://lolipop.jp/manual/user/mysql5-upd/#search_word=mysql

※メモ
「使用されている文字コード」は、「UTF-8」を選択する。元のDBはEUCだったけど、「UTF-8」じゃないと文字化けしました・・・。

wp-config.phpを書換

続いて、データベースの設定情報を変更するため、WordPress設定ディレクトリ内の「wp-config.php」を書換。

ロリポップのマニュアルがよくまとまっていて親切です。

4. WordPressのバージョンアップ

その前に、もう一回バックアップを取っておく。失敗は怖いです。。。

バックアップが完了したら、Wordpressを自動アップグレード!なのだが、バージョンアップの前に、「プラグインをすべて無効化」しておくこと。先人の教えに忠実に従いましょう。

アップグレードが終了したら、プラグインを有効化して、表示を確認。問題なければ、再度バックアップ。これでようやくサーバ移転用データ、ゲットです!

5. 新サーバにWPをインストール

エックスサーバーの自動インストール機能を利用して、楽させてもらいました。ありがとう、中の人!

最初、ログインできなくて焦ったんだけど、「wp-config.php」内にWordpressのインストールディレクトリを明示的に指定して無事解決です。

(参考)

wordpress ブログのアドレス(URL)を変更したらログインできない - ブログ - 教えて!goo
http://oshiete.goo.ne.jp/qa/4755986.html
wp-config.php の編集 - WordPress Codex 日本語版
http://wpdocs.sourceforge.jp/wp-config.php_の編集

6. 新サーバにデータをインポート

さっきバックアップしたデータを「phpMyAdmin」を使用してインポート。
作業は下記サイトを参考に進めました。

(参考)WordPressのサーバー移転メモ:セットアップ編 | コリス
http://coliss.com/articles/blog/wordpress/howto-setup-wordpress-data-for-change-server.html
画像パスの変更

新サーバでインストールディレクトリが変更になる場合、インポート用データの画像パスを変更しないと画像が表示されない。ということで、下記2つのSQL文を発行してやりましょう。

(参考)

WordPressで使える知ってると便利な13のSQL文 | Web活メモ帳
http://blog.verygoodtown.com/2010/02/wordpress-useful-sql-13/
WordPress を別のディレクトリに移動する:トイレのうず/ぼやき
http://www.1010uzu.com/boyaki/200902-09160050.html

最後に

以上で、WordPressの移転が完了。
あとは、プラグインの動作確認とか、もろもろ検証しときましょう。

次回は、メールサーバ変更(GoogleApps)についてまとめる予定です。
がんばれ、オレ。

jQueryプラグイン jQuery crossFader

盆栽教室のサイトを制作した際に、画像ギャラリーを作る必要があったので、せっかくなのでjQueryプラグイン化してみた。

フェードイン・フェードアウトするだけのシンプルな動きなので、さっと設置したい時には便利かも。ということで、さっそく解説。

jQuery crossFader

フェードイン・フェードアウトで画像を表示するjQueryプラグイン。画像をクリックすると次の画像へ遷移します。

更新履歴
  • [2013.09.24] ver0.4 フェードの手動開始オプションを追加
  • [2012.07.04] ver0.3 クリック時の切替処理無効化オプションを追加
  • [2011.03.17] ver0.2 ループ制御用オプションを追加
  • [2011.02.14] ver0.1 リリース
準備

必要なデータを上記よりダウンロード後、CSSとJavaScriptを読み込む。

使い方

JavaScript

ギャラリー部分のid(id-of-crossfader)を指定し、クロスフェードを実行。

HTML(画像のみの場合)

CSSを適用するため、画像の親要素(ここでは<div>)にclass="crossfader"を付与してください。
JavaScriptオフの環境では、class="active"を付与した画像が表示されます。

HTML(リンクを設定する場合)

オプション
オプション項目 デフォルト値 内容
timer 6000 切替までの待機時間 [単位:ミリ秒]
speed 1500 遷移速度(待機時間timer経過時) [単位:ミリ秒]
changeSpd 800 遷移速度(画像クリック時) [単位:ミリ秒]
clickStep true クリック時の切替処理を有効(true) or 無効(false)
autoStart true フェードを自動開始(true) or 手動開始(false)
random false 画像をランダム表示する(true) or しない(false)
loop true 画像をループさせる(true) or させない(false)
オプション指定方法
ライセンス

MITライセンスでの配布となります。

jQuery crossFader

サーバ移転から約2週間。だいぶ落ち着いてきたので、忘れないうちにまとめておこうかと。以下、移転作業についてのメモ。

サーバ移転先

【移転前】ロリポップ ⇒ 【移転先】エックスサーバ

ロリポップからエックスサーバへ

サーバ選びでいろいろ迷ったんだけど、結果的には、ロリポップからエックスサーバーへ移転することに。

データベースが複数個つかえて、マルチドメイン対応で、とか前提条件をいくつか決めてエックスサーバーを選んだんだけど、乗換直後にロリポのチカッパプランが誕生。もう少しタイミングが早ければ、嗚呼・・・。

サーバ移転の手順

全体の流れは、以下のような感じ。

  1. MT(Movable Type)の移行
  2. Wordpressの移行
  3. メールサーバ変更
  4. DNS変更
  5. リダイレクト処理

今回は、「1. MT(Movable Type)の移行」についてまとめます。以下、詳細。

1. MT(Movable Type)の移行

旧サーバでバックアップ取って、新サーバで復元するだけなのだが、移行前にMTのバージョンを揃えておくのがポイント。データ移行は、同じバージョン間じゃないとうまくいかないらしい。

(参考)別のサーバーへ移行したい | Movable Type 4 FAQ
http://www.movabletype.jp/faq/export-blogs.html
バックアップ

ということでまずは、バックアップから。

MT管理画面でのバックアップ

上図の通り、管理画面の「システムメニュー>ツール>バックアップ」画面に移動。zip圧縮を選択の上、「バックアップデータを作成」ボタンをクリック。しばらくたつと、zipファイルがダウンロードされます。
※「ツール>エクスポート」だと、テンプレートデータ等がエクスポートできないので注意!

(参考)

MT4 のバックアップ・復元についてのまとめ | Movable Type 4 | 阿部辰也のブログ――人生はひまつぶし。
http://www.abe-tatsuya.com/web_prog/movabletype4/backup.php
ブログの完全バックアップと、データベースのバックアップ | Movable Type 4 ドキュメント
http://www.movabletype.jp/documentation/start_backup.html
MTのバージョンアップ

続いて、MTを最新版にバージョンアップ。

当然のごとく、MT5へのアップグレードを考えたけど、SQLiteはサポートしてないみたいで、断念。そのうち、MySQLに移行して、MT5にするかな・・・。

結局、以下のバージョンアップを実施。
Movable Type 4.261 ⇒ Movable Type 4.28

MTのバージョンアップ手順
  1. インストールディレクトリ「mt」を「mt--」にリネームし、バックアップ
  2. 「mt--」と同ディレクトリに、インストール用「mt」ディレクトリを新規作成
  3. 「mt」ディレクトリに、MT4.28の全ファイルをアップロード
  4. 「mt--」内のmt-config.cgiをコピーして「mt」ディレクトリにアップロード
  5. ブラウザで「mt/mt.cgi」にアクセスし、アップグレード実施

※メモ
MTファイルをアップロードする際、転送モードは「バイナリ転送モード」を選択する。
mt.cgi等のCGIファイルは、パーミッションを「755」に変更する。

(参考)小粋空間: Movable Type 4.21 から 4.22 へのアップグレード
http://www.koikikukan.com/archives/2008/10/19-003333.php
データの復元

続いて、バックアップデータを復元。

データの復元手順
  1. 「mt」ディレクトリ内に、データ復元用の「import」ディレクトリを作成
  2. 「import」ディレクトリ内に、先ほどのバックアップデータ(zip形式)を解凍の上、アップロード
  3. 管理画面の「システムメニュー>ツール>復元」で、バックアップファイルを何も指定せず、「復元」ボタンをクリックし、データを復元(※下図参照)

MT管理画面での復元

※メモ
sqlitedbファイルを利用して、データ移行する際は、FTPの転送モードに注意。
ダウンロードもアップロードもバイナリモードで行うこと。
アスキーモードのままだと、mtログイン画面にて、下記エラーが発生する。
「DBD::SQLite::db prepare failed: database disk image is malformed(11)」

(参考)

バックアップしたブログの復元 | Movable Type 4 ドキュメント
http://www.movabletype.jp/documentation/start_restore.html
やっちまっただ - 流れ着いたら。。。
http://www.flotsam-fareast.com/2009/04/mt-reset-20090423.html
MT4を別サーバで復元するとき - ウェブデザイン hasegawahiroshi.jp
http://hasegawahiroshi.jp/2008/03/24/mt4/
再度バックアップ

バージョンアップしたMTでデータが復元されていることが確認できたら、再度バックアップを実施。新サーバへの移行に備える。

新サーバへMTをインストール

ここからようやく、新サーバでの作業。

旧サーバと同じバージョンのMTを、新サーバにインストールしていくのだが、手順は、「MTのバージョンアップ」のときとほぼ同じなので割愛。

サブドメインで公開する場合

http://blog.example.com/のように、サブドメインで公開する場合は、mt-config.cgiの「CGIPath」と「StaticWebPath」を、絶対パスで指定する必要がある。

ルート相対のままにしておくと、ディレクトリを読みにいけないため、captchが表示されないなど、不具合が発生する。

(変更前)mt-config.cgiの設定

CGIPath /mt/
StaticWebPath /mt/mt-static/
StaticFilePath ルート相対


(変更後)mt-config.cgiの設定

CGIPath http://www.example.com/mt/
StaticWebPath http://www.example.com/mt/mt-static/
StaticFilePath (変更なし)

(参考)

小粋空間: Movable Type(MT)のインストール
http://www.koikikukan.com/archives/2008/11/01-015555.php
サブドメインでブログを公開したい | Movable Type 4 FAQ
http://www.movabletype.jp/faq/post-36.html
小粋空間: Movable Type でサブドメインを利用する場合の設定
http://www.koikikukan.com/archives/2008/03/06-020202.php
Movable Type 4.2  Can't call method "label" on an undefined value - 徒然雑草
http://veritascreative.org/continuous_connection/2009/09/02_165800.html
xserver で cron | trash-area.com
http://trash-area.com/archives/335
まとめ

ということで、以上でMTの移転完了。

これにプラスして、プラグインの動作確認したり、移行データの検証したり、リダイレクトの設定したり、みんなにお知らせしたりと、やること盛りだくさん。ひとことで言えば大変でした。

でも、参考として挙げている数々のサイトに助けられ、無事移行が完了しました。感謝、感謝。

<結論>
サーバの移転なんて、しないに越したことないね! なんだ、この結論。。。

サーバ移転:Wordpress移行篇に続きます。

ということで、以前のブログ「エアロパス」から引っ越してきました。

これまでは、スカイラブデザインとしてのドメイン「skyld.net」を使用してきたけど、夫婦で別ドメインってのもあれなので、「komadoya.com」(=小窓屋)へ統合することに。

ブログも含め、コンテンツをほぼこっちに移行したんだけど、作業が思った以上に大変で。。。その辺の話は、別でまとめようかな。

移行に伴いURLが変更になりましたので、古い方のブログで、ブックマークやRSS等をご利用いただいていた方は、お手数ですが下記に変更ください。

これからは、こっちで色々と更新していきますのでよろしくお願いします。

福岡で商業施設やオフィスビルの設計施工・工事を行う「近藤金属工業株式会社さま」のWebサイトリニューアルを担当させていただきました。

近藤金属工業 トップページ

社長の近藤さんと親しくさせていただいている縁もあり、今回声をかけていただきましたが、改めて実績を拝見すると、新宿駅前にある繭の形をした「モード学園」のビルや、レベルファイブがオフィスを構える「薬院ビジネスガーデン」を手がけるなど、そうそうたる実績の数々です。すごい!

近藤金属工業 実績紹介ページ

ビジネスに直結するシンプルなサイトを作りたい、という近藤さんの意向をもとに、特に実績紹介ページに力を入れて制作。年度ごとの更新がしやすい仕組みを作ったり、物件写真を多く掲載できるレイアウトにするなど、問い合わせへのつながりと今後の拡張性に意識して取り組みました。

また、お話をうかがうと、「取引先に実績を紹介する際、印刷物を用いることが多い」とのことでしたので、印刷用スタイルシートを準備し、印刷時にそのまま実績集として使用できるよう配慮を行っています。

打ち合わせ時には設計時の苦労話や、現場での裏話が伺え、昔、設計者だった僕にとってはとても楽しい仕事となりました。さらに、「たてものに技術を。まちに風景を。」のコピーまで採用してもらって恐縮です。

普通に生活しているとなかなか縁のない会社だと思いますが、あなたが住むまちの風景をつくっている(・・・かもしれない)近藤金属工業をどうぞよろしくお願いいたします!

近藤金属工業株式会社
http://www.konkin.co.jp/