Typora エディターで画像を自動的にアップロードする

Typora は私が非常に愛用している markdown エディターで、今まで使った中ではこれ以上に使いやすいエディターはありません。比較的複雑なブログ記事は Typora で書いてからアップロードします。Typora は非常に豊富な機能を備えており、以下のようなものがあります：

• テーブルのサポート
• LateX 構文のサポート、数式を書くのに便利
• 画像をドラッグ＆ドロップして対応する markdown 構文を生成
• iframe、video、ruby など多様な HTML タグをサポート
• テーマのカスタマイズ（CSS で作成）
• 内蔵のファイル・フォルダブラウジングと切り替え機能
• その他にも便利な機能がたくさん

これらの絶妙な機能のおかげで、私は Typora に夢中です。
ただ、使用中に一つ悩みがあるのが画像のアップロードです。Typora は画像のパスを markdown に挿入するだけで、以下のような構文になります：

![image alt](/Users/Kalan/my/image/path.png)

このままコピーしてウェブページに表示すると、画像が壊れてしまいます。なぜなら、ユーザーはあなたのコンピュータのパスにアクセスできないからで、画像をクラウドやサーバーのストレージにアップロードする必要があるからです。 手動で処理するのは面倒で、時には画像が大きいと、アップロード前に圧縮したくなります。そう考えると、余計な操作が増えるので面倒に感じ、文章を書く思考が途切れてしまいます。

編集器を抜け出さずに画像を直接アップロードする方法はないかと考えてしまいました。Typora 自体は非常に強力な画像ドラッグ＆ドロップ機能をサポートしており、ウェブページからのコピー＆ペーストも完全に可能です。本当に素晴らしい UI です。

そして、私はこれを見つけました：

Typora 画像アップロード

一目見て驚きました！この機能を使えば、画像をエディターに挿入する際の動作をトリガーできるようになります。特定のフォルダに移動させたり、画像をアップロードしたりすることができ、さらに素晴らしいのは、画像をアップロードするためのコマンドを自分で定義できることです！

この upload コマンドの中で、画像を圧縮し、S3 にアップロードして画像の URL を返します。残りの UI や状態のインタラクションは Typora に任せることで、完全にスムーズに画像をアップロードできるようになります！

完成後の効果はこんな感じになります：

実装

私の Github にあるプログラム（Node.js で書かれています）を直接参考にできます。実装はかなり簡単ですが、早く完成させたかったので、パッケージをインストールしてそのまま使いました。もし最初から自分でやりたい方は、自分で書いてみても良いでしょう。現在は S3 のアップロードのみをサポートしています。

後記

これから私の人生に新たな扉が開かれ、写真の処理が面倒で投稿をためらうことはなくなりました。markdown を使ってコンテンツを作成するのが好きな皆さんにシェアします。