はてなブログに引っ越してきました

こんにちは、パートタイムエンジニアをやってる id:Pasta-K です。

これまでTumblrでやっていたGyazo公式ブログ(日本語版)なのですが、この度、一念発起してはてなブログに引っ越してきました。*1

理由はいくつかあるのですが、Tumblrの投稿フォームが日本語だと書きづらいというのが消極的な理由としては大きくて、積極的な理由としては、はてなブログにすることで日本のユーザーの皆さんに見てもらったりする機会が増えるのではないかというのが大きな理由としてはありました。さらには、今回の変更で書きやすくなったことで、社内の人がもう少し色々書けるような環境になると良いなというのもあります。

日本語版ブログについては、Gyazoの広報部長(?)であるところの @gyazo_ninja が書いてくれていることが多いので、彼と相談しながら進めました。

インターネット上を彷徨うといくつかTumblrからはてなブログに移行するための知見が書かれているのですが、今回僕らが実際に行った方法を順を追って紹介していきたいと思います。

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

はてなブログにデータをインポートするにあたって、TumblrのデータをWordPress形式などに変換する必要がありますが、Tumblrはエクスポートをサポートしていないので、そのあたりは自力でやっていく必要があります。

と言っても、流石に便利なツールが公開されているので、それを利用するとFeedを元に良い感じに生成してくれます。

http://tumblr2wordpress.benapps.net/

ここで変換すると少し問題があって、時刻の形式を HH:mm:ss に揃える必要があるのですが、上記のサイトではその形式にならないケースがあります。

そこで fork して時刻の形式を揃えてくれるバージョンを作成しました。

http://tumblr2hatenablog.herokuapp.com/ にアクセスして使うことも出来ますし、 https://github.com/pastak/tumblr2hatenablog からコードをcloneすれば、コマンドライン上で実行することも可能です。

これでめでたく、Tumblrをはてなブログにインポート出来るようになります。

BloggerからTumblrに移行して、今回はてなブログに移行したのですが、意外と手作業で整形などはしなくても上手くいっていて満足しています。

過去のブログからのリダイレクト

Tumblrでは記事のURLが /posts/カスタムURLの形式だったのですが、 はてなブログでは/entry/カスタムURLの形式になっています。

このまま公開すると過去の参照が全滅してしまう上に、Tumblrでは/post/140186808693/gyazoを徹底的に使いこなす-世界的ゲームエンジンunity-の開発元が教えるgyazo攻略法/post/140186808693が同じ記事を表示しているということがあったので、これも含めて良い感じにリダイレクトされる必要があります。

こちらも先人の知恵なのですが、 Transfer to Hatena blog - RAKUGAKI PROGRAMERS という記事の中で、CloudFlareのPage Rulesを使うと良いと紹介されていたので、僕らも今回はこの手法を採用することにしました。

まず、はてなブログ上の各記事のカスタムURL部分をTumblrのカスタムURLの短い方(前述の例だと/post/140186808693)に揃えます。今回は40記事ほどだったので、手作業でシュッとやったのですが、もし記事が多い場合はAtom Pub APIなどを使うと上手く出来るのではないかと思っています。*2

カスタムURLを設定し終えたら、Page Rulesにリダイレクトルールを設定します。

追加したリダイレクトルールは以下の通りです。

  • http://blogjp.gyazo.com -> http://blogja.gyazo.com
  • http://blogjp.gyazo.com/rss -> http://blogja.gyazo.com/rss
  • http://blogjp.gyazo.com/posts/* -> http://blogja.gyazo.com/entry/$1

これで、ブログのトップやrssなどもリダイレクトされるようになります。

このままでは長い方のカスタムURL(前述の例の/post/140186808693/gyazoを徹底的に使いこなす-世界的ゲームエンジンunity-の開発元が教えるgyazo攻略法)が /entry/140186808693/gyazoを徹底的に使いこなす-世界的ゲームエンジンunity-の開発元が教えるgyazo攻略法にリダイレクトされてしまい404になってしまうので、以下のようなJavaScriptを<head>に追加しています。

(function () {
  var matches = location.pathname.match(/(^\/entry\/\d{12})\/.+$/)
  if (matches) location.href = matches[1]
})()

これで移行は完了です。おつかれさまでした。

まとめ

Gyazoブログ日本語版をはてなブログに引っ越した際のことについて紹介しました。引っ越しの反響なのですが、過去のTumblrブログのデザインに気合いで似せたこともあって、社内ではなかなかの好印象です。

これからも新機能の紹介や社内の様子などが続々紹介されると思います。

読者になるボタンを貼っておきますので、よろしくお願いします。

広告

Gyazoを開発しているNotaIncでは求人もやっているようです。

*1:英語版ブログ http://blog.gyazo.com/ はTumblr上でやっています

*2:AtomPub API、http://developer.hatenastaff.com/entry/developers-advent-calendar-2015/day7 を見るとカスタムURLを指定出来るように見えるので、これを使えばUpdate出来るのではと思っているのですが、未確認です