WordPress.com から はてなブログに移行した理由と移行作業

2012年11月にPowerShellに関して記事を書き初めて10ヶ月経っていました。 はじめてのはてなブログ記事は、「WordPress.comからはてなブログに移行した理由と移行作業」です。

移行した理由

1. Markdown 記法で書きたい*1

これまで200余りWordPress.comで記事を書いていましたが記事1つ書くのが辛かったです。

例えばWordPress.com記法では、コード1つ書くにも長いのです。

[code langugage=hogehoge]

更に、文字の装飾はhtmlタグ..... この上なく辛かったです。 これからはMarkdownで書けるのでシンタックスハイライトも使えます。

select hogehoge from fugafuga

はてなブログがMarkdownとスーパーpre記法の両方でPowerShellにシンタックスハイライト対応していないという誤算がありましたが、 そこは後述のSyntaxHighlighterを使っています。 これでWordPress.comよりも綺麗にシンタックスハイライトできます。

Get-ChildItem -Path c:\hogehoge
2015年

といいながら、Gistのコード埋め込みに全面的に切り替えました。あとから参照できるのと、ハイライトに癖がないの最高です。SyntaxHighlighterのメンテもしたくないですし。

開発がGitHub中心なため、 基本的な記述に関してMarkdown記法に統一できるのは書くつらさが軽減されて嬉しいです。

はてなブログでのMarkdown記法は見栄えの面からGitHubと要領が少し違いますがまぁ許容範囲です。特に# の扱いが違います。

2016年

はてなブログでPowerShellのシンタックスハイライトに対応してくれました！ ps1がキーワードになります。

Get-ChildItem -Path c:\hogemoge
1..10 | Foreach-Object { $ * $ } | Out-File -Path c:\hoge.txt
とかですね。

2. はてな流入数が多かった

特に最近書いたこの記事が顕著でしたが、頑張って書いた記事への流入がはてな経由だったのですね。

> PowerShell における Windows Workflow Foundation 4.0 (WF) 利用のすすめ

普段はGoogleとかの検索エンジン流入数がメインだったのですが、公開時にもう少し人の目に触れるにははてながいいと判断しました。
はてなはSEOが良いという記事がありましたが、 PowerShellな記事は数少ないので余り期待していないです。

3. 英語記事との分離

日本で記事を書く以上は、日本語が求められるのは当然です。
が、日本語辛いので、 Proにすることで複数ブログを持てるのは大きなメリットでした。
これで日本語と英語で記事書けます。

4. 移行が楽

そのままです。
WordPress eXtended RSS (WXR) からMovable Type形式への変換、インポートが容易でいいです。
下準備と、移行で一日あれば十分でした。 (DNSで一晩放置して残りをさくっと)

2015/10/18追記 : 現在ならWXR形式を直接インポートできるので簡単ですね！

> https://staff.hatenablog.com/entry/2015/07/16/120000

5. テーマが豊富ではないがカスタマイズが容易

正直テーマ数だけならWordPress.comの方が多いです。
が、使えないテーマが多いのとカスタム面倒です。
はてなブログは、各テーマ作者がCSSの調整を明示されているのが楽なので嬉しいですね。

6. Google Analytics の利用

WordPress.comでは辛いのがあり.... 統計を取る時に結構困ったのではてなブログでは利用できるのが嬉しいですね。

7. 広告消し去りたい

そのままで。広告きらいなのでアフィも消します。
WordPress.comは無料でやろうと思い立って始めたので課金はNGだったので出来ませんでした。

8. 利用者からのススメ

はてなブログ利用者からのススメが多いの。みなさん色々使ってきて、それでもはてなブログがいいといいます。ステマ？

あと、利用者じゃないneue.ccにステマされました。決定打はこれです。

移行時の作業

簡単な作業をほんの僅か！ ですが、せっかくなので紹介します。
どうせやるならいろいろ楽しみましょう作戦なので、Proに課金して試しています。

> 1. はてなIDを登録
> 1. はてなブログProに登録
> 1. はてなブログ初期設定と非公開設定
> 1. SyntaxHighlighter 設定
> 1. ドメイン (DNS レコード)取得
> 1. 取得したドメインに hatenablog.com をCNAME紐づけ
> 1. Google Analytics 登録
> 1. WordPress.com の外部サイト連携で、はてなブログの独自ドメインにリダイレクト
> 1. WordPress.com から記事を エキスポート して はてなブログにインポート
> 1. はてなブログを公開しWordPress.com の記事を非公開に変更
> 1. LinkWithin の有効化

もし必要とする人がいるなら.... 共有します。

1. はてなIDを登録

はてなブログトップからブログ開設 (無料) / Sign Up (Free)しましょう。

> Hatena Blog Register

希望するはてなIDとパスワード、メールアドレスなどを入れるだけです。

2. はてなブログProにアップグレード

メリットは此処にあります。要らない人はいらないですね。

> HatenaBlogPro

3. はてなブログ初期設定と非公開設定

初期設定は容易です。

基本設定


ブログURL : 自動的にはてなIDで決められる。(私の場合は、 guitarrapc-techだったので、 guitarrapc-tech.hatenablog.comでした。)
ブログ名 : 好きに決められる
ブログ説明 : ここも自由
編集モード : Markdown一択
コメント : WordPress.comでは、承認にしていましたが、今回は自由にする。スパムの様子を見て変更しする予定



公開設定

現時点では非公開

4. SyntaxHighlighter 設定

はてなブログのスーパーpre記法・Markdown記法いずれもPowerShellシンタックスハイライトしていません。
GitHubならできるのに。
ということで、SyntaxHighlighterを設定します。

> ソースコードを色付けして記述する（シンタックス・ハイライト）

SyntaxHighlighterダウンロード


ここSyntaxHighlighterからダウンロード
私の時は、バージョン3.0.83でした
zip解凍してcssとjsを利用し



デザインCSS登録


はてなブログの設定画面 > デザイン > カスタマイズ > デザインCSSに移動
syntaxhighlighter_3.0.83\styles\shCoreDefault.cssの中身をコピーし貼り付け



サイドバーにjs登録


はてなブログの設定画面 > デザイン > カスタマイズ > サイドバーに移動
モジュールを追加 > HTML
以下を貼り付け



続いて、scriptタグを書いて、中に必要な言語のjsをコピーして貼り付け
PowerShellならsyntaxhighlighter_3.0.83\scripts\shBrushPowerShell.js"



最終行に以下をコピーして貼り付けで読み込まれる


適当にテスト記事を書いて、preタグで囲んでハイライトを確認します。


対象言語を記述(これのタグで囲むと PowerShell)


以上で完了です。



5. ドメイン (DNS レコード)取得

今回は、 お名前.comにしました。
理由は国内で追随を許さない最大手だからです。 (とあるリスクが少ない)

> お名前.com

アカウント作成時

whois代行を有効にすることで、お名前.comがwhois公開されるので個人の人には必須です。
whois公開はもはやデファクトスタンダードなので、気を付けましょう。
今回は、gTLDである .comで登録し、guitarrapc.comにしました。
これはccTLDである .acなどのドメインは、迷惑メールに利用されており面倒があるためです。

> ドメインの種類

独自ドメイン取得


お名前.comにログイン
ドメイン設定を選択
ネームサーバーの設定 > DNS関連機能の設定を選択
DNSレコード設定を利用する
自分のドメインを選択
TYPEをCNAMEに設定、ホスト名にサブドメインを指定 (今回はtech) 、Valueにhatenablog.comを指定し登録
nslookupとpingでDNSレコードを確認 (tech.guitarrapc.com)



6. 取得したドメインに hatenablog.com をCNAME紐づけ

はてなブログの独自ドメインに登録


はてなブログ > 設定 > 詳細設定 > 独自ドメイン > ここに作成したtech.guitarrapc.comを登録
直後はお名前.comにリダイレクトされる
数時間経つと取得した独自ドメイン(tech.guitarrapc.com)へのアクセスで、自分のはてなブログ (guitarrapc-tech.hatenablog.com) にリダイレクトされる



7. Google Analytics 登録

アカウントを持っていれば無料です。
私は色々ありGoogle Appsアカウントがあるのでそれを使いました。
Google Analtics

はてなブログの独自ドメインをGoogle Analyticsに登録した後、 Google AnalyticsのプロパティIDをはてなブログに登録します。


トラッキング情報 > トラッキングコード > プロパティIDをコピー
はてなブログ > 設定 > 詳細設定 > 解析ツール > Google Analytics埋め込みに貼付(例：UA-123456-78)



8. WordPress.com の外部サイト連携で、はてなブログの独自ドメインにリダイレクト

WordPress.comからはてなブログに記事を移行するにあたり、WordPress.comとはてなブログで記事が重複していると検索エンジンに問題扱いされます。
そこで、WordPress.comで行っている外部サイト連携を使って、WordPress.comにアクセスして下さった人をはてなブログにリダイレクトします。(外部サイト連携は$13かかる)
このようなイメージです。

guitarrapc.wordpress.com -> tech.guitarrapc.com
この時、WordPress.comに転送先のドメインにサブディレクトリ/entry/指定出来ず、ドメイン指定のため綺麗に記事に飛ばせないのは諦めました。


こうしたい

guitarrapc.wordpress.com/yyyy/mm/dd/日本語記事名 -> tech.guitarrapc.com/entry/yyyy/mm/dd/日本語記事名

こうなってしまう

guitarrapc.wordpress.com/yyyy/mm/dd/日本語記事名 -> tech.guitarrapc.com/yyyy/mm/dd/日本語記事名

記事がないとでるが諦めた

guitarrapc.wordpress.com/yyyy/mm/dd/日本語記事名 -> tech.guitarrapc.com/entry/yyyy/mm/dd/hatenaid


9. WordPress.com から記事を エキスポート して はてなブログにインポート

2015-07-16から直接WordPress.comのWXR形式をインポートできるようになりました。
> https://staff.hatenablog.com/entry/2015/07/16/120000

これでもう、エキスポートしてインポートが簡単です。変換は不要ですね！

WordPress.comで記事をエキスポート


WordPress.comの管理画面
ツール > エキスポート
<iframe src="https://skydrive.live.com/embed?cid=D0D99BE0D6F89C8B&resid=D0D99BE0D6F89C8B%211816&authkey=AOpxOHDFcJXfzAk" width="318" height="187" frameborder="0" scrolling="no"></iframe>
WXR形式のxmlが取得できる



Movable Type形式に変換

2015/7/16からすでに不要になっています。

ここで、一括変換してしまいます。

小物置き場 - ソフトウェア  ＞ WEB ＞ WxrToMt

はてなブログにインポートできるように調整


PM消去
WordPressからエキスポートしものを変換して中身をみると、24時間形式 + PMになっている箇所があります。
PMの箇所を修正する必要があります。今回はサクッと正規表現で置換しましたが、 スクリプト化した方が楽でしょう。


はてなブログでインポートできる

DATE : yyyy/mm/dd HH:MM:ss
DATE : yyyy/mm/dd HH:MM:ss AM



はてなブログでインポートできない

DATE : yyyy/mm/dd HH:MM:ss PM
このような正規表現で済みます。

Find

(DATE: \d{2}/\d{2}/\d{4} \d{2}:\d{2}:\d{2}) PM

Replace

$1
- 時刻調整

続いて、記事を見ると数件だけインポートできない場合があります。
これも問題の記事をインポートファイルで見ると同一時刻のDATE: になっていることが分かります。
分をずらして完了です。


同一時間の記事のMMをずらす

DATE : yyyy/mm/dd HH:MM:ss

- シンタックスハイライト編集

WordPress.comでのシンタックスハイライトとはてなの記法は異なるため修正します。

WordPress.comではこのように記述しました。



[code language="PowerShell"] [/code]
[sourcecode language="PowerShell"] [/code]
全然スーパーPre記法も効かず、そもそもインポートした記事はMarkdownどころかhtmlだったので泣きました。
利用していたPowerShell, CSharp, SQL, BashはSyntaxHightlightに正規表現で置換しています。 (こわいけど上手くいったらしい)

はてなブログにインポート

後は、インポートして完了です。


はてなブログ > インポート > Movable Type形式 > 変換したファイルを選択してインポート
記事のインポートに失敗していてやり直す場合も、インポートの取消で記事を消せるので楽



やり残し

WordPress.com内部の写真参照を直していませんが、これはおいおい直しましょう。
この辺は、全て外部SkyDriveなどを参照しておけば良かったですね。

そもそもいくつかのSkyDrive参照が上手く埋め込めてないのは諦めましたが。なにか。

問題


インポートした記事がmarkdownじゃない。過去記事の修正は辛い。見たまま編集モードからスクレイピングしてmarkdownにし直したほうが修正早い
インポートした記事の改行、タグ回りが、WordPress.comの記事に比べて崩れる。特にSkyDriveの画像を参照するiframeは崩れる、やばい
SkyDrive画像参照が遅い。はてなさんではなく、WordPress.comでもでしたし、これはSkyDrive側の問題。はてなフォトで原寸表示をリンクが、描画速度的にもベストでした((ただし他のブログに移行が困難になる可能性がある))



10. はてなブログを公開しWordPress.com の記事を非公開に変更


はてなブログを公開
先述の通り、同一記事がクローラにかかると面倒なのでWordPress.comの記事は非公開



タイミングを見てWordPress.comは削除ですね。

11. LinkWithin の有効化

WordPressでは自動的に記事URLを検知してトラックバックが貼られました。

が、はてなブログではないので、関連する記事を表示するためのサービスを有効化してみました。

> - LinkWithin

作業は簡単です。

LinkWithinにログイン


Email
BlogのトップURL
Platformは、はてなは一覧にないのでOther
Widthでいくつ関連記事を出すか指定



生成されたタグをコピー

コードが生成されるのでコピーします。

はてなブログのデザイン設定へ

カスタマイズ > 記事 > 記事下を選択します。

&lt;/body&gt;タグの前に貼り付ける必要があるので、 今回はブログ記事下に張りましょう。

貼り付けたら保存して完了です。

リンクが表示

どうもタグを見てくれないので別の記事も出ているようですが、まぁ様子見。

移行してどうなの

Markdown楽です。楽で楽でたまりません。

まだ移行して3時間程度ですが、さっそくアクセスがあるようで嬉しい限りです。
これからもPowerShellの最新記事をあげていくのでよろしくお願いします。

*1:2013/11 にWordPress,comでもMarkdown記法が使えるようになっています。- Markdown 記法が使えるようになりました