logo
  • 現在做什麼
  • 關於我

Kalan

文章分類

  • 前端
  • 開發筆記
  • 雜談
  • 年度回顧

快速連結

  • 現在做什麼
  • 關於我
  • 聯絡我
  • 職涯思考🔗

關注我

在福岡生活的開發者,分享軟體開發與日本生活的點點滴滴。

© 2025 Kalan Made with ❤️. All rights reserved.

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

作成者:カランカラン2020年6月13日 1:27
ホーム/開発ノート
💡

質問やフィードバックがありましたら、フォームからお願いします

英語原文

目次

  1. 実装
  2. 後記

本文は台湾華語で、ChatGPT で翻訳している記事なので、不確かな部分や間違いがあるかもしれません。ご了承ください

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 画像アップロード

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

Typora 画像アップロードカスタマイズインターフェース

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

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

実装

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

後記

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

← スマートホーム向け Google Home によるリモート IR リモートコントロール福岡での4か月間のリモートワークに関する最新情報 →

この記事が役に立ったと思ったら、下のリンクからコーヒーを奢ってくれると嬉しいです ☕ 私の普通の一日が輝かしいものになります ✨

☕Buy me a coffee

目次

  1. 実装
  2. 後記