ポンコツエンジニアのごじゃっぺ開発日記。

いろいろポンコツだけど、気にするな。プログラム&ロボット大好きなポンコツが日々の記録を残していきます。 自動で収入を得られるサービスやシステムを作ることが目標!!

WordPressからはてなブログに記事データを移行してみた

WordPressのサーバを立ち上げてから約1年、この度WordPressからはてなブログに移行してみました。

なので、それについて今回は記事を書こうと思います。

 

 背景

そもそもWordPressを使った理由としては、

  • 自分自身でWordPressのサーバを管理してみたかったから
  • ついでにCloudのサービスを試してみたかったから
  • CDNやLBやCloudSQLなどを使ってることができた

ということではじめました。

で、実際にそれらを使うことができ、満足した!というのが理由かなと。そして、使って満足したところで、サーバ費用が毎月5000円以上かかるのももったいないなって思って、今回はてなブログに移行することを決めました。

はてなブログを決めるにあたって、以下があったかなと思います。

  • WordPressの記事をそのままURLを変えずに持ってくることができる
  • 独自ドメインを使用することができる
  • 広告を載せることができる

ただし、有料のはてなブログProに登録しています。2年コースで月600円程度ととても安いですね。

移行手順

さて、WordPressからはてなブログに移行をするのにこちらのサイトを参考にしました。

www.junpeihazama.com

こちらに書いてあるとおりなのですが、

  1. ブログのデータをエクスポートする
  2. はてなブログにインポートする
  3. 画像の移行をする
  4. ドメインの向き先を変更する

1.ブログのデータをエクスポートする

WordPresの管理画面を開いて、ツール>エクスポートを選択して、全てのコンテンツをWXR形式でエクスポートをします。

そこで出力されたファイルをはてなブログにインポートします

2.はてなブログにインポートする

上でエクスポートされたファイルをはてなブログにインポートします。意外とすんなりいきます。

3.画像の移行をする

上の記事では画像を一つ一つ手動で移行させているみたいなのですが、記事のインポートを完了させると、以下の画像のように画像の移行をするボタンが表示されて、それを押すことで画像の引越しも簡単に行うことができます。

f:id:ponkotsu0605:20190330234438p:plain

ただ、不完全なのか、自分が使っていたWordPressの設定がよくなかったのかわからないのですが、半分くらいの画像は移行ができなかったので、これから画像の引越しを手動で行わなければいけません。

4.ドメインの向き先を変更する

ドメインの向き先を変更する必要があります。自分の場合はblog.pnkts.netのホスト名に対して、レコードタイプをCNAMEに設定し、hatenablog.com.を設定します。

同時にhttps対応ははてなブログの方でやってくれるので、何も考える必要がないのが楽ですね!

はてなブログの管理画面側のドメインのところを設定すると思うのですが、最初は以下のようにエラーになるかと思います。

f:id:ponkotsu0605:20190331001350p:plain

ドメイン設定をチェックを押すとDNSの設定ができているかの確認ができますが、反映されるまでに時間がかかるため、ドメインの設定状況が有効のステータスになるまでに時間がかかります。

f:id:ponkotsu0605:20190331001454p:plain

ドメイン設定をチェックボタンを押して、ドメインの設定状況有効なステータスになると次はしばらく待機になります。
おそらくですが、3時間くらいごとにチェックが走っているのかと思いますが、しばらく放置すると以下のようにドメインの設定状況有効になります。いろんなサイトには1日くらい待ってくださいとよく書いていました。

f:id:ponkotsu0605:20190331001659p:plain

 有効になると同時に、ブログ内のリンクのドメインも設定した独自ドメインに変わります。ちなみに、設定が終わるまでは以下のようにはてなブログのど名ののURLでブログにアクセスすることができます。

https://pnkts.hatenablog.com/

ただし、はてなブログの設定で、記事を配信するディレクトリをWordPress側と同じに設定する必要があります。

やらなければいけないこと

画像の引越し

上でも書きましたが、移行できなかった画像を手動でやらないといけません。しかし、この記事を書いているときはまだ画像の引越しが完全にできていないので、これから引越しを急いで行わなければいけません。

ソースコードのシンタックスハイライト設定

WordPressでは、自分の場合は[code]タグを使ってソースコードを書いていたのですが、それをはてなブログに移行すると、そのまま[code]タグが表示されてしまいます。なので、記事を一つ一つ見ながら[code]という文字列が含まれていたらすべて直さなければいけません。

また、"みたいにWordPressではHTMLのエンコードがされているものがあるので、それらも通常の文字に変更しないといけません。そこで使用したサイトがこちらになります。

devroom.azurewebsites.net

こちらのサイトを使うことで、以下のようにWordPressから持ってきたものに変な文字が含まれてしまっていたとします。

function getImage(messageId) {
  var url = "https://api.line.me/v2/bot/message/" + messageId + "/content";
  var headers = {
    "Content-Type" : "application/json; charset=UTF-8",
    'Authorization': 'Bearer ' + access_token,
  };

  var options = {
    "method" : "get",
    "headers" : headers,
  };

  return UrlFetchApp.fetch(url, options);    
}
function getImage(messageId) {
  var url = "https://api.line.me/v2/bot/message/" + messageId + "/content";
  var headers = {
    "Content-Type" : "application/json; charset=UTF-8",
    'Authorization': 'Bearer ' + access_token,
  };

  var options = {
    "method" : "get",
    "headers" : headers,
  };

  return UrlFetchApp.fetch(url, options);    
}
これを下のように、HTMLデコードさせる作業を行います。

最後に

ちょっとめんどくさいですが、引越し作業が終われば、サーバ費分も浮いたり、サーバの管理・保守もする必要がなくなったり、SEO対策もきっと良くなったりとか、いいことばかりだと思います。
逆に技術的なチャレンジをブログで行うことができなくはなってしまいますが、それは別のサーバを立てる時とかにチャレンジしてみましょう。
すべての記事の引越し対応が終わるまでしばらくお待ち下さい。