Monthly Archives: 6月 2014

はてなブログからWordPressに移行するためにしたこと

ほっとくと忘れてしまいそうなので、忘れないうちに、記録残そうと思います。

はてなブログから、WordPressへ結構苦労して移行しました。その時やったことをざっと書きたいと思います。

記事の移行

はてなブログ用ツールで記事データの取得

定番ですが、下記のツールを利用しました。
はてなブログ用ツール

.NETで作られているのでWindowsかMonoの環境が必要です。MacもMono環境を整えればできるかもしれないと書いてましたが、Windowsマシン持ってきてやってしまいました。

はてなのAPIを使用しているらしいので、それなら、自分もAPI使ってもいいんですが、せっかくあるツールが使えるなら、やっぱ楽さには叶いません。

このツールでデータをエクスポートしたものは、完全ではありません。次の問題点があります。

  • コメントが含まれない
  • 画像などがはてなフォトライフのままである
  • シンタックスハイライトなどの装飾が一部崩れている

はてなダイアリーのエクスポート機能を使用

はてなブログにはエクスポート機能がありませんが、はてなダイアリーにはあります。はてなブログに移行する前ははてなダイアリーを使っていて、はてなダイアリー時代が大半だったので、はてなダイアリーにログインすることではてなダイアリー時代のデータを抜くことは出来ました。

方法は下記の記事と同じです。

はてなダイアリーからWordPressへ全記事を移行した件 | ツインズパパの徒然日記 Ver.2

上記記事にも書いてあるとおり、次の問題点があります。

  • はてなキーワードのリンクもそのまま持ってきてしまう
  • 一部の記事の日付が1970年になってしまう

    • →これは、時刻 00時代のAMがうまく取り込めないという問題。リンク先や、その方が参考にされたサイトでは01時に変更することで対処されていましたが、僕の場合はAM自体を取り除いたらうまくいきました。
  • シンタックスハイライトがガタガタ
  • 画像がはてなフォトラ(ry
  • なぜか一部の記事がうまく移行できないで画面が真っ白になった(すごい大昔の記事)

RSSからインポート

はてなブログはRSSも配信しています。そしてWordPressは公式でRSSからインポートすることができます。しかし、これは、.NETのツールの下位互換でした。

  • 新着7件しか取ってこれない
  • コメントデータを取ってこれない

結局どうしたか

  • はてなダイアリー時代の記事のうち、真っ白にならなかったものは、はてなダイアリーで移行
  • はてなブログ時代の記事ははてなブログで移行
  • はてなブログ時代のコメントは、3件しかなかったので手でSQLを発行して移行:
insert into
    wp_comments (
        comment_post_ID,
        comment_author,
        comment_author_url,
        comment_date,
        comment_date_gmt,
        comment_content,
        comment_karma,
        comment_approved,
        comment_parent,
        user_id

    ) values (
        614,
        'susumuis',
        'http://www.susumuis.info/',
        '2014-03-30',
        '2014-03-30',
        'id:faith_and_braveさん コメントありがとうございます。 共感いただいて本当に嬉しいです。 自分は開発(省略)',
        0, 1, 0, 1
    )

こんな感じです。コマンドラインツールでのSQLの発行はキツイし、phpMyAdminのような「クラックしてください」と言ってるようなツールは使いたくなかったので、このツールを使いました。SSHトンネルの設定もやってくれるので便利でした。

Sequel Pro

はてなキーワード持ってきてしまった件についてはSQLに正規表現書いて変換しようとしましたが、MySQLは正規表現を使った置換ができないそうなので、PHPなどの言語で外から変換するしかないようです。まだ出来ていませんので後日できたら報告します。

検索結果のindexとか「いいね」カウントとか

検索エンジンのインデックスについては、301リダイレクトで対処するのが王道ですが、これは、

はてなダイアリー → はてなブログ → 独自ドメイン(はてなブログPro)

を公式移行ツールで移行してきたのでシームレスにやってくれていました。なので、あとは、はてなブログProで使っていた独自ドメインのURLそのままで記事のURLを移行するだけです。

WordPressにはパーマリンク機能というのがあって、記事のURLを

http://www.example.jp/?p=123
のようにクエリーパラメータにするのではなく、
http://www.example.jp/2014/06/28/sample-post/
のような任意のURLにすることができます。

ここで、移行前のURLは次の形式になっていました。

はてなブログ時代

http://ドメイン/entry/yyyy/mm/dd/数字6桁
例:
http://www.susumuis.info/entry/2014/06/11/222935

はてなダイアリー時代

http://ドメイン/entry/yyyymmdd/p数字
http://ドメイン/entry/yyyymmdd/数字10桁
http://ドメイン/entry/yyyymmdd/任意の単語
例:
http://www.susumuis.info/entry/20110728/p1
http://www.susumuis.info/entry/20090822/1252377609

見事に分かれています。それなら、共通する、「/entry/2014」の部分 + 投稿名として「06/11/XXXXXX」を書くようにしようとしましたがこれはできません。

"/"という文字が投稿名に使用できなかったためです。

結局どうしたかというと、 Enhanced Custom Permalinksというプラグインのお世話になりました。これを使えば記事ごとにパーマリンクを設定できます。

さて、記事の数は90くらいありますので、全部手でやってたら大変ですから、こいつは、SQLで一括で設定してしまいました。

当時のクエリを残していなかったので、正確なものを紹介できませんが、wp_postmetaテーブルをinsertしていく形になります。

単なる301ではなく、URLを同一にしたため、はてなスター、Facebookいいねまでそのまま引き継ぐことが出来ました!

はてなブックマーク、はてブコメント

ところが、はてなブックマークについてはうまく行きませんでした。はてなブックマークもURLに紐づく情報なので、てっきりブログをそのまま移行すれば、独自ドメインでブックマークが引き継がれると思っていました。確かに移行直後はそうだったのですが、移行後数時間後、はてなブックマークカウントが0になっていました。

なんでかなあと思ってみたところ、はてなブログProの管理画面を見たら理由がわかりました。

独自ドメインは解除されている!

はてなブログは、定期的にドメインが有効かどうかクロールしているようです。ドメインがきちんとはてなのDNSに向いていることがわかった時点で、元のはてなブログのURLから独自ドメインのURLにリダイレクトしているようです。

ドメインが無効、または別のサーバーを向いていると判断されると、はてなブログのドメインから独自ドメインへの転送がストップします。それと同時に、はてなブックマークのデータも、元のはてなブログのドメインのものに変換され、独自ドメインのカウントは、0になります。はてなブログとして独自ドメインで受けたはてなブックマークカウントも、一緒にはてなブログドメインに持って行かれてしまいます。

はてなブックマークははてなのものだから仕方がないですね。

人気エントリー一覧

人気エントリーの一覧は、元のはてなブログドメインのものをはてなブックマークブログパーツを使用すれば作成できます。このままだとリンク先がはてなブログになってしまうので、リンク先をJavaScriptで強引に書き換えてしまいました。右サイドバーの「以前反響を頂いた記事」という部分です。具体的にはこんな感じです。

jQuery('div#hatena_hotentry').on('DOMNodeInserted', function() {
  $links = jQuery('div#hatena_hotentry .hatena-bookmark-entrytitle');
  $links.each(function() {
    jQuery(this).attr('href', jQuery(this).attr('href').replace('susumuis.hateblo.jp', 'www.susumuis.info'))
  });
});

こんなことして怒られたらやめます。wwもう、この段階で欲しいのは過去のはてなブックマークじゃなくて、この記事がオススメだよっていうことなので、僕の方で勝手にレコメンドしちゃえばいいんです。

ブックマークコメント

はてなブックマークコメントはどうしましょう。最近はブログのコメント機能を使ってのコメントより、はてなブックマークコメントで暑いコメントをもらったりします。

はてブコメントがないと、過去盛り上がった記事もなんか寂しい感じですね。ただ、個人的には、はてなブックマークに対しては歓迎的でない部分もあって、何かと炎上しやすいなど、攻撃的なこと書く人がたまにいます。

コメントなのか、個人のメモなのかわからないしろものですから、今後、ブログの雰囲気的を良くしていくためにはない方が良いかもしれません。

ということで、過去の記事まで追跡して、はてブコメントを画面に出すのはやめました。ただ、僕のブログのなかで、はてブ2桁頂いた記事が6件だけあったのでそれらについては記事の下に手動で旧ドメインでのブックマークリンクを記載しました。こんなかんじです。

この記事は以前多くのブックマーク・コメントを頂きました。
<a href="http://b.hatena.ne.jp/entry/http://susumuis.hateblo.jp/entry/20110728/p1" class="hatena-bookmark-button" data-hatena-bookmark-layout="simple-balloon" title="以前のURLでのブックマーク件数"></a>
これからブックマークされる方はこちら↓

Markdown記法を使えるようにする

WordPressにはMarkdownを使えるようにするプラグインが複数存在します。いろいろ試しましたが僕はこのプラグインが使いやすいと思いました。

WP Markdown Live

コードのインデントとシンタックスハイライト

はてなダイアリーやはてなブログから記事をインポートした結果、残念なこととして、ソースコードのインデントやシンタックスハイライトがガタガタになってしまったことがありました。

これについては、幸いWP Markdown LiveプラグインがGitHub風のプログラムコード記法を持っているので、テキスト化されたコードからもう一度自前でインデントしてMarkdownに貼り直すことにしました。全部だと大変だから一部だけです。

これだとシンタックスハイライトがつきませんがWP Markdown Liveで出力したコードは

<pre class=" language-css">
<code class=" language-css" data-language="css">

コード

</code>
</pre>

(*うまくコードをテキスト化してくれないので、最初のpだけ全角文字にしています)
のように出力されます。これはそのまま prism.jsが使用できます。

テーマのスタイルシートにダウンロードしてきたprism.cssとjsを配置するだけで、綺麗にシンタックスハイライトすることができました。

SEOとかOGPとかTwitter連携とか

まだまだやらなきゃいけないことはたくさんありますが、だんだん面倒くさくなってきてしまったので、これらはプラグインでお茶をにごしました。
余力があったらプラグインを使わずに自力で連携したいです。

使ったプラグイン
* Jetpack by WordPress.com
* WP Open Graph
* WP Social Bookmarking Light

Jetpack使ってるあたりが負けてる感がするので、早急に自力でなんとかしたいです。

SEOのメタタグの部分はしっくり来るプラグインが見つからなかったので自分でheader.phpにスクリプト書きました。

5年後の未来を予想すること

というつぶやきをしたら、結構反響がよかったので、ついつい「昔は〜」というおじいちゃん的発言繰り返してしまいました。

というわけで未来の話をします。

未来の話といえば、2009年の暮か2010年の年明け頃に、勤務先の上司に

君の視点で、5年後のWebの世界を語って欲しい

と言われたので、僕なりに考察し、長文メールをその上司に送りました。概要は次のとおりです。

  • AWSは既存のシステムとの互換性を捨てきれず、Googleのクラウド技術に潰される
  • 今みんなクラウドとか言ってるけど、Web技術の進化はこれで最後だ、この先はエンジニアが不要になる
  • GoogleはWebの世界を支配するが、WebエンジニアはWebを離れ、宇宙、ロボット、人工知能などに注目し始める。10年後にはWebはレガシーになる

結果、起きたことは

  • スマートフォン、タブレット、モバイル通信の普及
  • ソーシャルゲームブームとエンジニアの流動性の加速
  • Webの多様化、レスポンシブル
  • SPAなどのWebシステムのフロントの近代化
  • AWSは滅びるどころかクラウド業界のリーダー的存在、GoogleはGCEなどを出したが追う存在
  • Webエンジニア、Webデザイナー増える

おめでとう!大外しになります。

なんでこうなったかといえば、上流を見ていなかったからに尽きるわけですが、
+ Webは今の使われ方がゴールである
+ よって、この形を効率よく提供する仕組みを整える方向に技術は向かう
+ それはすぐに整う。その結果、技術的課題はなくなる
という短絡的発想ですね。

実際はどうだったのでしょう。経済産業省が出している、次の資料を見てみましょう。

電子商取引に関する市場調査の結果を取りまとめました(METI/経済産業省)

冒頭「EC化率」という数字があります。EC化率とは、小売の流通総額のうち、どれくらいの割合がECによって流通したのかを表すものだそうです。今のEC業界はわかりやすく言うと、下記の記事に書かれている世界なのだそうです。

EC化率 - 100個中3個のリンゴしかECで売れていない

マーケターは知っておきたい!今後のEC市場の市場規模と他産業との比較、今後の有望セクターについて | マーケティング・パートナーのコーポレートブログ

ざっくり言うと、日本のEC化率は世界と比べるとまだまだ低いし、日本の個人消費は300兆円規模なのだから、ものすごい大きな可能性があるということです。

ソシャゲみたいな一過性のものだけじゃなくて、生活必需品みたいなものもどんどんEC化すれば、もっともっと産業規模が大きくなる。そのためにはもっとエンジニアは必要だし、マーケターは必要だし、技術の進化が求められているというわけです。

そのためにはパソコンが昔のままでは困るわけです。もっと簡単で、もっと安くて、もっと性能が良くなければならない。通信も速くなければならない、肩がこる目にやさしくないUIとか、ウィルスやフィッシングの被害にあう脅威とかなくさなければなりません。だから、フロント技術やデバイスの進化は止まらないわけです。。。

僕自身はエンジニアとして、マーケティングに無頓着であったことを反省しました。

そんなわけで、今度未来を語る折には、視野を広げて時代の動きを見極めながら、それと技術とを関連付けて未来を考えていきたいと思います。

はてなブログからWordPressに移行したワケ

こんにちはWordpress

本日、はてなブログからGoogle Compute Engine上に構築したWordpressへ移行しました。主な構成は 前回の記事に書いたものと同じで、セキュリティ対策とかバックアップとか色々いじっています。気が向いたら後日詳しく書きます。

まだ、はてなダイアリー時代の記事から引き継いだキーワードリンクが残っていたり、コードのインデントががたがたな記事があったり、ogタグがついてなかったり、やらなければならないことがあります。

引っ越したとはいえダンボールが積み上がってるみたいな状況ですが、今日はなぜ引っ越したのかを書こうと思います。

なぜはてなブログから引っ越したのか

はてなブログは有料プランで約3ヶ月使ったことになります。はてなダイアリーは5年近く使ったので、ずいぶん早く引っ越してしまいました。

引っ越した理由は下記のとおりです。

月額費用

月額費用 1008円(2年コースなら月あたり600円)、サービスの質を考えれば決して高いとは思いません。僕もブログを書く事自体が目的だったら払い続けたと思います。しかし1000円あれば、VPSが借りられてしまいます。Webエンジニアとして、インフラの専門家でなかったとしても自分でサーバーの一つくらい運営できなかったら情けないので、今どき一個くらいはVPSかIaaSのインスタンスを持っておきたいです。そうすると、VPSとブログでダブルで月額費用がかかってしまうので、だったらより自由なサーバーの方に投資がした方が勉強になりそうだと思いました。

はてなブログを無料プランで使用しても良かったのですが、独自ドメインでブログをやるにはProにするしかありません。独自ドメインでやりたかったのは個人的な趣味です。

洗練されているゆえのつまらなさ

現在のはてなブログはレスポンスが早く、安定していて、優れたブログサービスです。必要なことは揃っていますし、設定も簡単です。でもこれは個人的な印象ですが、はてなダイアリーのようなギークっぽさもない垢抜けた印象を感じました。はてなブログははてな社の商業サービスとしての健全なサービスであり、大変よい路線だと思います。運営業者が利益をちゃんと得ることがサービスの品質向上にもつながりますし、安心してブログを書くことができます。

でもそれは、はてなが、僕らエンジニアのもの、守らなきゃいけない仲間と言うのでしょうか。昔はそんな雰囲気があったんですが、もうそんな感じはしなくなっていました。

エンジニアってへそ曲がりで、完全なものって面白く無いんです。「なんでまた、そんな流行るかどうかもわからない、得体のしれないものに群がるのか」それがエンジニアなのです。

なぜWordpressを選んだのか

空前の大Wordpress時代

翻ってみると、今、Wordpressが大変ブームになっています。エンジニアというより、Webデザイナーさんであったり、アメブロから卒業してきたブロガーさんだったりが、猫も杓子もワードプレスです。

レンタルサーバーを使うと格安で独自ドメインでブログができる、自由度があるしユーザーが多いというのが理由でしょう。ここぞとばかりに、Wordpress関連のセミナーなんかも多く開催されていますね。

一方、エンジニアからの視線は冷たい

  • MySQL/PHPに依存しているから遅い。負荷に耐えられない
  • セキュリティに不安がある
  • Markdown, Syntax Highlightなどのエンジニア必須のツールが標準搭載していない
  • そもそもLAMPとかレガシーアーキテクチャ

今Wordpressを良く言っているエンジニアを見たことがありません。いたらごめんなさい。

だけどそれがいいんです。
やった!いまワードプレスやったらモテモテじゃなくて、
多くのユーザがいる以上、そんなにひどいものではないはずですし、ググればテクニックや情報は山のようにあるでしょう。また、良くない部分はどのようにしたら手なずけられずのか研究のしがいがあります。

僕自身は業務でJava/PostgreSQLを使っていますので、PHP/MySQLを基本としたWordpressは未知の領域です。あえてレンタルサーバーではなく、自分でGoogleのIaaSであるCompute EngineにNginxとHHVMというちょっと未来的な構成で構築してみました。

きっと、今頃デザイナーさんたちが彼らの視点でWordpressを研究しているのでしょう。僕は僕の視点から研究してみたいと思います。

うまくいったら、デザイナーさんたちの技のおこぼれがすすれるかもしれない。そうしたら、常々、フロントからインフラまで手を広げたいと言っていた僕の目的にマッチするというわけです。

すこし運用してみて思ったこと

確かに、プラグインシステムはセキュリティ的に不安があると思いました。ソースコードも職人芸チックで大変読みづらいです。

「テーマ」が素のPHPファイルというのも驚きました。テーマ改ざんしたら、データ全部消去したり、スパムの踏み台に悪用されたりやりたい放題できそうです。念のため、ルート直下とwp-admin直下以外のPHPファイルへのブラウザからのアクセスはnginxの設定で塞ぎました。

自由なプラグインシステムであるゆえ、SQLインジェクションやXSSが皆無とはいえない面があります。初心者がレンタルサーバを使わず、自前でWordpressを構築・運用するのは正直オススメできないかもしれません。データ改ざんに対して安心し切ることはできないので、バックアップ計画やアクセス監視を真面目に考えようと思います。

一方、データ構造はわかりやすいと思いました。これは良いことです。データさえまともならば、つぶしが利きます。最悪、同じデータで独自ブログエンジン作ってもいいわけです。

なぜGoogle Compute Engineを選んだのか

個人でサーバを運用したいと思ったら、今一番手っ取り早いのは、さくらやGMOなどのVPSサービスでしょう。月980円でストレージも100GBくらい割り当てられますし、GUIでOSのインストールも出来ます。GCEはストレージが最小構成で10GBしかなくさくらVPSの1/10、メモリはさくらの半分(GMOの1/4!)、ドキュメントは英語が基本で日本語もあるけど情報が古かったりします。利用者もまだ少ないですね。

でも、あえて、Googleのクラウドを選んだのかは、(お試しクーポンを貰ったからというのもあったのですが)使ってみると、結構楽しいんです!スナップショット取ったり、そこからインスタンス立ち上げたりし放題なのは楽しいです。ディスクを複数のインスタンスにマウントできたり、なにやらLBが爆速らしいなど、先行のAWSにはない、魅力もあります。

今AWSに触れると機能が多すぎて、にわかユーザーの僕にはついていきづらいですが、Google Developer Consoleのシンプルな画面なら取っ付き易く感じます。AWSは周りのインフラエンジニアさんにとって「アタリマエ」の道具ですから、絶対彼らには勝てません。でも、Googleのクラウドだったら、AppEngineもあるしプログラマーの仲間がいっぱい居ます。

Google Compute Engineはこれからのサービスっぽさがあって、とてもワクワクします。

今後の予定

冒頭にも述べたとおり、はてなダイアリーから移行したついでに持ってきてしまった「キーワード」がうるさいですし、画像がはてなフォトライフを参照していたり、はてなブックマークコメントが引き継げなかったなど、色々解決しなければいけない状態です。

ここは、プログラマーたるもの、自前のところにデータとプログラムがあるので、どのようにも料理できますから、後々変換スクリプト書いたりクローラ作ったり、プラグイン作ったりしようと思います。