はてなブログに移行した

ようやく, このブログをはてなダイアリーからはてなブログに移行した. これまでなかなか移行できていなかった理由や, 移行を機に改めた点についてまとめておく.

移行のモチベーション

はてなダイアリーは古いサービスで, 文字コードEUC-JPだったり, 新規の機能追加がないせいで相対的にどんどん不便になっていったり, とにかくさっさと移行すべき. ただ, 後述するように移行作業が億劫になる理由もあった. けっきょく直接的に移行に踏み切ることになったのは, 以下の記事を書いたときに数式をMathJaxで表示できたのがとにかく最高だったから, ということになる.

ふつうブログを移転するとなると, 古いURLにアクセスされたらどうなるのかとか, はてなスターはてなブックマークが古いURLに残ってしまわないのかとか, 古いブログのRSSを購読していた人たちはどうなってしまうのかとか, いろいろ気にしないといけない点があるけれど, はてなダイアリーからはてなブログへの移行の場合はこういう点を気にする必要はない. これはありがたい.

STEP2:はてなブックマークの移行

はてなダイアリーの記事についたはてなブックマークを、はてなブログに移行します。

このステップを設定すると、はてなダイアリーの記事についていたはてなブックマークが、それぞれ対応するはてなブログの記事にすべて移ります。

STEP3:記事のリダイレクト設定

はてなダイアリーの記事にアクセスしたときに、対応するはてなブログの記事に自動的に移動(リダイレクト)するよう設定します。この時点で、はてなダイアリーRSSフィードも、はてなブログにリダイレクトします。 (強調引用者)

【提供終了】はてなダイアリーからのインポート(ブログの移行) - はてなブログ ヘルプ

ちなみに, 古い記事はそのまま残しておいて, RSSフィードだけリダイレクトして, 新規に書かれる記事だけはてなブログに移行するということもできる.

フィードリダイレクト設定

はてなダイアリーRSSフィードだけを、はてなブログに転送(リダイレクト)させることができます。RSSをリダイレクトすると、RSSリーダーなどでブログの更新を確認しているブログ読者が、そのままではてなブログの更新通知を受け取ることができます。

はてなブログで新たにブログを開設し、はてなダイアリーの更新を停止するが、既存のコンテンツは移行しないという場合などにご利用ください。

【提供終了】はてなダイアリーからのインポート(ブログの移行) - はてなブログ ヘルプ

今回はどうしても古い記事もすべてはてなブログに移行したかったのでこの方法はとらなかったけれど, これでいいなら後述の問題もなくなってだいぶ楽なので, 移行に際しては検討した方がよさそう.

移行の障壁

デザインの移植

もちろん, デザインを公式テーマのものに変えてしまうという手もあったけれど, それだとブログのアイデンティティを一度リセットすることになってこれまでの記事を移行してくる意味もない(全く別に新たにブログをはじめるのと大差ない)ので基本的なデザインは引き継ぎたかった.

もともとのデザインはHatena2-darkgrayというテーマを元にカスタマイズしたものだったので, テーマストアのHatena2 for はてなブログを元にすれば簡単かとおもいきや, このテーマには以下の問題があって, けっきょくいちからスタイルシートを書くことにした.

  • グローバルヘッダが中央カラム表示になっているのでプルダウンメニューの表示位置がずれる
  • なんかCSSのあたってないHTML要素がわりとあってどうせ自分で定義しないといけない
  • darkgray版はないのでどうせ自分で色指定を上書きしていかないといけない

もともと中央カラムに表示するデザインはそれほど気に入っていなかったので, いちからデザインしなおすついでにレイアウトも見直した. ぜんたいのデザインの再構成が必要なだけでなく, 記事中にclass属性つきのタグを直書きして使えるようにしていたり, <style>要素で記事ローカルなスタイルを定義している箇所もあったので, 細かい調整はけっこうたいへんだった. デザイン移植というよりは既存のイメージに近い感じのデザインを新たに書き起こすということになってだいぶ時間がかかってしまった. あまりに時間がかかるのでHatena2とは違うデザインにしたい部分は, イメージに合うものを公式テーマから探してきてCSSを部分的に真似した. Evergreenがサイドバーなしの簡潔なデザインでだいぶ参考になった.

はてな記法の解釈の微妙な違い

はてなダイアリーはてなブログはてな記法で利用できるものの, 記法の解釈のされ方が微妙に違う部分があって, 全記事を見直して崩れてないか確認する必要があった*1. 解釈が違っていることに気づいた主な部分は以下の通り.

  • pタグ停止記法
    • はてなブログではpタグ停止していると>, <がそのまま表示されてしまう場合があった
    • (どういう条件なのか細かく調べていない)
  • 脚注記法の開始判定
    • はてなブログではpre記法内に(​(~)​)があると脚注記法と判定されてしまう
      • pre記法内で脚注記法が展開される仕様そのものは正しいとおもう(のでどちらかというとはてなダイアリーがおかしい気がする)
      • スーパーpre記法では脚注記法扱いされない
    • これに限らず意図せず記法解釈されてしまう場合は<span>囲う, &#x200b;を挟むなどの対処が必要
  • 脚注記法内に書けるタグが異なる
  • <blockquote>内の<cite>
    • 引用記法ではなくHTML要素を直書きした場合, はてなブログではcite属性やtitle属性から<cite>要素を補ってくれない
    • (まぁ勝手に補うのもどうかというのはわかる)

移行を機に変えたこと

レイアウトの変更

元のデザインのように中央カラムに寄せてそれ以外の領域はただのグレーの背景になっているようなレイアウトは, ブラウザの幅を大きくするとなにもないグレーの背景が大半になって見栄えしない. そこでおもいきって中央カラム表示はやめて, ヘッダも本文の領域も横いっぱいになるようにした.

とはいえ, ほんとうに本文が横いっぱいに広がって表示されてしまうと, 横長のディスプレイでブラウザを全画面表示した場合に一行が長すぎて読みづらくなってしまうため, 本文の領域は一定の最大幅におさめてそれ以上は伸長しない方がよい. けれどこれだと中央カラムで表示したのと構造的な本質は変わらず, 横長ディスプレイでは幅がすごく余ることになる. そこで, 幅が一定以上になった場合はサイドバーを表示することにした. もともとサイドバー不要派だったことをおもえばとんだ宗旨替えに見えなくもないけれど, サイドバーが不要な理由は「本文の表示領域を圧迫するくらいならない方がいい」というものなので, 幅が余ってしかたない場合は表示しても差し支えない.

幅が大きいときだけサイドバーを表示するのはCSS3のメディアクエリを使えば済むので難しくない. 難しいのは, サイドバーが表示されているときは本文の領域とサイドバーの領域を合わせたものが中央に配置されてほしいというところ. こういうのは常套手段として, 本文領域の外側の要素(#wrapper)をleft: 50%で配置しておいて, 本文領域(#main)をleft: -50%で配置しつつサイドバーの幅の分だけmargin-rightを設定しておくと意図通りにできるようだった. 仕事だと(うちの会社では)こういうのはデザイナの領分でエンジニアは基本的にやらないので勉強になる.

プロフィールの表示

前のデザインではプロフィールはリンクのみで, 常には表示しないというスタンスだった. これは, 記事は内容こそが大事であって, 誰が書いているかは二の次という気持ちの現れだった. 個人的な立場や経験からの意見を個人の感想のレベルを超えて書かない方がよいとおもっていた. この点は心境の変化というか, 過度に一般化せずに立場や思想を明確にした上で個人的な意見を主張するのはそれなりに有益で, そういう情報を発信する余地をなくすのももったいない, とおもうようになった. そんなわけで, 誰が書いているのか気にする機会もあるだろう, ということでプロフィールは表示することにした.

もう少し身も蓋もない理由としては, RSSが衰退した今となっては, 購読ボタン(「読者になる」ボタン)を表示しないのは一定数の読者にとって不便なのは間違いなく, 購読ボタンを表示するからにはプロフィールのモジュールといっしょになっていないとおさまりが悪い, というのがある.

プロフィールの表示にあたっては元々ブログタイトル下に表示していたカテゴリと注目記事の領域の右側をあけ渡すことにした. ブログタイトル下の要素はposition: absoluteでけっこう無理に表示しているので, プロフィール分だけよけてカテゴリと注目記事の幅を狭くするのはそれなりに手間だった. ブログタイトル下領域の幅は基本的には本文領域の幅と同じで, 本文領域の幅からプロフィールの幅を引いたものがカテゴリと注目記事の幅ということになる. 最近はCSS3のcalcが使えるのでこういうこともやりやすい. 全体の幅を文字定数として方程式を立てればどう指定すればいいかすぐわかる.

ただし, 本文の領域が最大幅に達していないとき(全体の幅から相対的に計算されるとき)と, 最大幅に達して余白が伸長するときとでcalcの計算を変えないといけない. このため, 本文の領域が最大幅に達するときの全体の幅を逆算して, その値を閾値にメディアクエリでcalcの内容を変える, ということが必要になった*2.

コメント欄のデザイン

元々のコメント欄のデザインはとくになにも考えずにHatena2-darkgrayのものを角丸にした程度だったけれど, 新しいデザインでは中央カラム表示ではなくなって, サイドバーも箱っぽくないのでコメント欄だけHatena2のデザインになっていても浮いてしまう. なのでコメント欄は今風に大きいアイコンで線で区切ったものにした. 「コメントを書く」ボタンともどもEvergreenの真似.

ふつうのコメント欄のデザインが箱でなくなると, はてなブックマークコメントも箱ではダサい. ただ, ソーシャルパーツとして記事下に配置できるものは<iframe>になるようで, デザインを変えられない. これではあまりにダサいので, JSONPAPIを叩いてコメントを取得して一覧の要素を構築するJavaScriptを記事下に貼ることにした. これは実ははてなニュースの「記事への反応(ブックマークコメント)」のパクり*3.

運営会社としての見解ではなく個人的な意見として, JSONP APIはいかなる理由であれ廃止した方がよいとおもっているので, (自分がはてなブックマークの開発に関わっている限り)ゆくゆくはこのAPIは廃止される流れだとおもっている. JSONP APIが廃止された場合, ログイン状況は考慮しない(ゲストユーザでアクセスしたときと同じ情報しかとれない)バージョンのJSON APIAccess-Control-Allow-Origin: *つきでレスポンスを返すようにするのが筋だとおもうけれど, 実際そういうものが提供されるかどうかはわからない. そういうわけで, JSONP版がいつ廃止/仕様変更になったとしても, なんらかの対処ができるという自信がない限りこのやり方はおすすめしない.

細かい要素の変更

はてなダイアリーでは別の記事へのリッチなリンクとして:detailを使っていたり, スライドを埋め込むのに埋め込みタグを直書きしていたりしたのを:embedにほぼ統一した. また, 目次もこれまでは手で書いていたのを目次記法([:contents])に統一した.

細かい表示のしかたの調整はいくつもあって, たとえば<blockquote>には引用符(“)を大きく表示してその分インデントされるようにした.

記事の管理方法

これまでは自作のEmacs向け記事管理環境を使っていたけれど, これをはてなブログ対応するのが億劫で移行できないでいる間にid:motemenさんがblogsyncという記事をローカルに同期する最高のコマンドラインツールを作っていたのでこれを使っている*4.

まだやっていないけれど, ファイルが保存されたらblogsyncを裏で叩いて同期したり, blogsync管理下のファイルを一覧するようなものをEmacsで実装すれば以前と遜色ない使い心地になるのではないかとおもう.

感想

はてなブログに移行してとにかくなにもかもモダンになった. 最近はとくに筆が重いのでこれで少しは記事を書く頻度が上がるとよいなぁ.

*1:見直し自体はCSSをあて切れていない部分がないか確認するのにどのみち必要ではあった

*2:テクニカルにはcalcに最大値関数がないのが原因なので, そういったものが追加されればメディアクエリで切り替える必要はない

*3:といっても, はてなニュースの方の実装も元々自分が仕事で書いたものだ

*4:なんかカテゴリに対応してなかったのでさっそくpull requestした