2012年11月に PowerShell に関して記事を書き初めて 10ヶ月経っていました。 はじめてのはてなブログ記事は、「WordPress.com から はてなブログに移行した理由と移行作業」です。
移行した理由
1. Markdown 記法で書きたい*1
これまで 200余り WordPress.com で記事を書いていましたが 記事一つ書くのが辛かったです。
例えばWordPress.com 記法では、コード一つ書くにも長いのです。
[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. はてな流入数が多かった
特に最近書いたこの記事が顕著でしたが、頑張って書いた記事への流入が はてな経由だったのですね。
普段は Google とかの検索エンジン流入数 がメインだったのですが、公開時にもう少し人の目に触れるには はてながいいと判断しました。 はてなは SEO が良いという記事がありましたが、 PowerShell な記事は数少ないので余り期待していないです。
3. 英語記事との分離
日本で記事を書く以上は、日本語が求められるのは当然です。 が、日本語辛いので、 Pro にすることで複数ブログを持てるのは大きなメリットでした。 これで日本語と英語で記事書けます。
4. 移行が楽
そのままです。 WordPress eXtended RSS (WXR) から Movable Type形式 への変換、インポートが容易だったのがいいですね。 下準備と、移行で一日あれば十分でした。 (DNSで一晩放置して残りをさくっと)
2015/10/18 追記 : 現在なら WXR形式を直接インポートできるので簡単ですね！
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)しましょう。
希望する はてなID とパスワード、メールアドレスなどを入れるだけです。
2. はてなブログProにアップグレード
メリットは此処にあります。要らない人はいらないですね。
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 にしました。 理由は国内で追随を許さない 最大手だからです。 (とあるリスクが少ない)
アカウント作成時
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 に ログイン
- Blog のトップURL
- Platform は、はてなは一覧にないので Other です
- Width でいくつ関連記事を出すかです。
生成されたタグをコピー
コードが生成されるのでコピーします。
はてなブログの デザイン設定 へ
カスタマイズ > 記事 > 記事下を選択します。
</body> タグの前に貼り付ける必要があるので、 今回は ブログ記事下に張りましょう。
貼り付けたら保存して完了です。
リンクが表示
どうも タグ を見てくれないので別の記事も出ているようですが、まぁ様子見。
移行してどうなの
Markdown楽です。楽で楽でたまりません。
まだ移行して3時間程度ですが、さっそくアクセスがあるようで嬉しい限りです。 これからも PowerShell の最新記事をあげていくので よろしくお願いします。
*1:2013/11 にWordPress,comでもMarkdown記法が使えるようになっています。- Markdown 記法が使えるようになりました
*2:まだ残ってるですが
*3:ただし他のブログに移行が困難になる可能性がある