yumetodoの旅とプログラミングとかの記録

旅や登山の記録やプログラミング関連の話とかフリーソフト紹介とか

FC2からはてなブログに移行した

はじめに

私は今まで http://freesofutotravel.blog94.fc2.com/ という、FC2のブログサービスを利用してほそぼそとブログを書いていたのだが、この度、はてなブログに移行した。

移行した理由

  • FC2で使っていたデザインテンプレートがHTML4.01で、HTML5にする作業をしてみたが思いの外面倒だった
  • 基本的に写真はGoogle Picasaに置いてそれを呼び出すようにしていたのだが、Google PicasaがGoogle Photosになった時に、画像埋め込みリンクが簡単に取得できなくなったが、はてなブログにはGoogle Photosとの連携があるので極めて簡単に写真を貼り付けられる
  • Markdownが使える、HTML直書きしなくていい
  • はてなブログのデザインはGithub上でLESSファイルで提供されており、CSSのように人間を卒業しなくてもカスタマイズできる
  • はてなブログのデザインはレスポンシブデザインに対応している
  • はてなブログのデザインをShippableと組み合わせて自動デプロイする作業に憧れた
  • 「フリーソフトの旅（windows）」という前のブログのタイトルと中身があっていなかった
  • プログラマー界隈はやっぱりはてぶろ勢が多い
  • カテゴリーがFC2より柔軟

Markdownが使えるっていうのは大きいですね。wysiwygエディタは信用していないので(FC2のやつが吐くコードは糞だった)HTML直書きしていたんですが、さすがにつらみがあった。

移行のときに参考にしたもの

tsubakit1.hateblo.jp

なんかこの方は画像の移行に苦労しているけれど、ほとんどの画像はすでにGoogle Photosにあったので何もする必要がなかった。
Picasaを知る前に書いた記事2本だけはFC2に画像置いていたからこれはMarkdownで自力で書き直した。

また、この方はわざわざはてなダイアリーを経由しているが、そんなことはしなくても普通にいけた。もともとFC2ではHTML直書きしてたから、というのもあるのだろうか。 FC2のときはFC2解析を使っていたのでそのコードを各記事に埋め込んでいたのですが、それはFC2からExportしたテキストファイルの段階で消しました。

デザインの自作

できればあまりデザインを変えたくなかったのですが、FC2のブログデザインで使われている背景画像は著作権的にこっちに持ってこれないので、適当な画像を探していたら、

www.pakutaso.com

を見つけまして、ええやん、となって

github.com

一気に開発しました。

LESSとJavaScriptで開発しています。いや、JavaScriptはいらないはずなんですが、ブログタイトルのmarginとpaddingを弄って背景画像とブログ記事の開始位置の相対位置を固定したくて使ってます。CSSだけだとまだ動的に幅の参照とかできないはず。HTML構造ごと変えればCSSだけにできるけどだるいのでJavaScript使ってます。

追記: CSSのvw単位を使うことでできたのでJavaScriptはいらなくなった。

github.com

書いたLESSとJavaScriptはShippableというCIに投げつけて、LESSはCSSにしてminify、JavaScriptはGoogle Closure Compilerでminify&ES5化してます。この辺は後でQiitaにでも書く予定。

追記

qiita.com

書いた。

不満な点

HTTPS化できないことかな。

かと言ってサーバー立ち上げたり借りたりしてWordPress使う気にはなれなかったし、 友人が

173210's Blog

でやってるみたいにGithub pages使うことも考えたけど、それはそれでコメントシステムとかどうすんの？という思いがありはてなブログ使っているけど。

まだ移行できていないもの

雲取山に登山した記事

雲取山に登山した記事で国土地理院の地図に書き込みしたものを公開しているのだが、国土地理院側の仕様変更がいつのまにかあったらしく壊れていた。今ちまちまコンバーターを書いている。

追記(2018/1/8)

github.com

github.com

変換完了した。

SyntaxHighlighter

はてなブログにはもともとSyntaxHighlightしてくれるやつがあるっぽい。実際使ってみたが、正直気に入らない。 あとインポートした記事のSyntaxHighlightは記法がちがうのかうまく行ってないのでどのみちSyntaxHighlighterが必要そうだ。

追記

試しに有効にしたらMaximum call stack size exceededとでて、かつトップバーが読み込まれないので、あきらめモード。data-unlink=""とかそういう問題じゃない。 minifyされてないSyntaxHighlighterで試したらなんかそこかしこで無限再帰している。はてなブログのなにが干渉しているのだろう。かといってiframeのsrcdoc使うのはなぁ・・・。

広告が表示されない

これは大問題だ。 Imgur この12個のエラー、どうにかならないのか・・・。

元記事からのリダイレクト

これどうすっかな・・・。まあJavaScriptで書くんだけど、URLががらっと変わってるもんで、厳密に各記事をリダイレクトするには変換テーブルを持っておく必要があるな・・・。