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形式を直接インポートできるので簡単ですね！

staff.hatenablog.com

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

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

6. Google Analytics の利用

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

7. 広告消し去りたい

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

8. 利用者からのススメ

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

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

移行時の作業

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

はてなIDを登録

はてなブログProに登録

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

SyntaxHighlighter 設定

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

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

Google Analytics 登録

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

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

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

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 type="text/javascript" src="https://agorbatchev.typepad.com/pub/sh/3_0_83/scripts/shCore.js"></script>

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

<script>
必要な言語のjsを貼り付け
</script>

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

<script type="text/javascript">SyntaxHighlighter.all();</script>

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

<pre class="brush: powershell">
# 対象言語を記述(これのタグで囲むと PowerShell)
</pre>

以上で完了です。

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 で有償 $13 で行っている外部サイト連携を使って、WordPress.com にアクセスして下さった人をはてなブログにリダイレクトします。このようなイメージです。

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形式をインポートできるようになりました。 staff.hatenablog.com

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

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

WordPress.com の管理画面
ツール > エキスポートします

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記法 / SyntaxHighlight のいずれかに。今回は、スーパーPre記法で対応できるものはそれで。~~

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

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

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

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

やり残し

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

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

問題

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

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

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

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

11. LinkWithin の有効化

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

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

LinkWithin

作業は簡単です。

LinkWithin にログイン

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

f:id:guitarrapc_tech:20140329214858p:plain

生成されたタグをコピー

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

f:id:guitarrapc_tech:20140329215114p:plain

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

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

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

f:id:guitarrapc_tech:20140329215723p:plain

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

f:id:guitarrapc_tech:20140329215759p:plain

リンクが表示

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

f:id:guitarrapc_tech:20140329215917p:plain

移行してどうなの

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

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

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

*2:まだ残ってるですが

*3:ただし他のブログに移行が困難になる可能性がある

tech.guitarrapc.cóm

Technical updates

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

目次

移行した理由

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

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

3. 英語記事との分離

4. 移行が楽

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

6. Google Analytics の利用

7. 広告消し去りたい

8. 利用者からのススメ

移行時の作業

1. はてなIDを登録

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

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

4. SyntaxHighlighter 設定

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

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

7. Google Analytics 登録

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

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

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

11. LinkWithin の有効化

移行してどうなの

目次

移行した理由

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

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

3. 英語記事との分離

4. 移行が楽

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

6. Google Analytics の利用

7. 広告消し去りたい

8. 利用者からのススメ

移行時の作業

1. はてなIDを登録

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

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

4. SyntaxHighlighter 設定

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

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

7. Google Analytics 登録

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

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

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

11. LinkWithin の有効化

移行してどうなの

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