【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です。
画像の少ない記事であれば、許容範囲の手間かなと思います。
まとめ
はてなブログの独自画像タグをimgタグに変換することができました。
これで自分の好きなMarkdownエディタで編集できる!
やったぜ!