【Markdown】はてなブログの独自画像タグをimgタグに変換する方法

はてなブログの記事をローカルのMarkdownエディターで編集したいのですが、
はてなMarkdown記法には独自タグが使われているためうまくいきません。
愛用のTyporaで記事を書きたいのですが。。
独自タグにはいくつかありますが、まずは記事編集でよく使う画像タグだけ解決したので共有します。

やりたいこと

はてなの独自タグというのは、画像の場合はこんな表記です。

[f:id:naosim:20151123001918p:plain]

この表記をなんとかして通常の

![画像名](URL)

に変換したい。

独自画像タグと画像のURLを比較する

まずは独自タグと実際の記事上の画像URLを比較します。

[f:id:naosim:20151123001918p:plain]
https://cdn-ak.f.st-hatena.com/images/fotolife/n/naosim/20151123/20151123001918.png

うむうむ。みえる。みえる。
法則性がみえるぞぉ。

はてなブログの独自画像タグの意味

まずは独自の画像タグから。
どうやら変数としてユーザID、日時、ファイルタイプの3つが埋め込まれてるみたい。
固定値と変数を分けるとこんな感じ。

[f:id:{userId}:{fileDateTime}{fileType}:plain]
変数 説明
userId 私の場合はnaosim
fileDateTime ファイルがアップされた日時。
fileType ファイルの種類を1文字で表現したもの。jならjpg、pならpng、gならgif。(他にもあるだろうけど調べてない)

画像URL

次は独自のタグで見つけた変数を画像URLにマッピングします。

https://cdn-ak.f.st-hatena.com/images/fotolife/{userIdの頭文字}/{userId}/{fileDateTimeの日付部分}/{fileDateTime}.{fileTypeに対応する拡張子}

ベースURLは変わりそうですが、とりあえずできた。

サンプルコード

上記をもとに作った変換プログラムです。

function convertToImg(hatenaImg /* like "[f:id:naosim:20151123001918p:plain]" */) {
  const segments = hatenaImg.split(':')
  const userId = segments[2]
  const fileDateTime = segments[3].slice(0, 14)
  const type = segments[3][14];
  const types = {
    'p': 'png',
    'j': 'jpg',
    'g': 'gif'
  }
  if(!type || !types[type]) {
    throw 'file type not found. ' + type;
  }

  return `![${hatenaImg.slice(1, hatenaImg.length - 1)}](https://cdn-ak.f.st-hatena.com/images/fotolife/${userId[0]}/${userId}/${fileDateTime.slice(0, 8)}/${fileDateTime}.${types[type]})`
}

デモ

サンプルプログラムの動作デモです。
1つ目のフォームにはてなの独自画像タグを入れて変換ボタンを押すと、Markdown標準の画像タグに変換されます。

See the Pen hatenaImg2Img by なおしむ (@naosim) on CodePen.

これでローカルで記事編集できる!

これで自分の好きなMarkdownエディタで記事編集ができるようになりました。
ブログ記事で画像を使う際に↓こんなステップを踏めばOKです。

  1. はてなブログの編集画面に画像をアップ
  2. 生成された独自タグを変換する
  3. 変換後の画像タグを自分のMarkdownエディタに貼り付ける

画像の少ない記事であれば、許容範囲の手間かなと思います。

まとめ

はてなブログの独自画像タグをimgタグに変換することができました。
これで自分の好きなMarkdownエディタで編集できる!
やったぜ!