vscode 画像の貼り付けは、自動的にDogeの画像ホスティングにアップロードされます。

この記事の解決策には問題がありますが、より完璧な方法をおすすめします。

最近、Dogedoge 画像ホスティングという期間限定の無料サービスがあると聞きました。このサービスは、中国本土の CDN と高性能のリアルタイムクロッピング機能をサポートしています。私も作者にメールを送って申請してみましたが、2〜3 日後に承認されました。

画像ホスティングを申請した後は、もちろん画像の自動アップロードを設定します。最近は主に vscode を使用してブログを書くことが多くなったため、「vscode で画像を貼り付けて自動的に Dogedoge 画像ホスティングにアップロードする」という要件に変わりました。この記事では、私の探求プロセスと解決策を記録しています。

探求#

私の知識に基づいて言えば、PicGo-Core はプラグインベースの設計であり、カスタムアップロードの要件を簡単に満たすために、プラグインを手動で作成することができるはずです。難しいのは、vscode での画像の貼り付けと picgo のアップロードコマンドの統合です。

しかし、調査を行った結果、私は vscode でのカスタム画像貼り付けコマンドのフックを見つけることができませんでした。現在のPicGo の vscode 拡張機能は、PicGo-Core が公式にサポートしている 8 つの画像ホスティングのみをサポートしており、PicGo-Core のカスタムプラグインをサポートしていません。

the plugin feature of PicGo-Core is working in progress.

解決策#

幸いなことに、調査中に別の vscode 拡張機能「vsc-markdown-image」を見つけました。この拡張機能は、カスタムアップロードメソッドをサポートしており、非同期の JavaScript 関数を作成し、アップロードして画像のリンクを返すだけで使用できます。

公式ドキュメントには、次のようなテンプレートが示されています：

const path = require('path');
module.exports = async function(filePath, savePath, markdownPath) {
    // 画像のアクセスリンクを返す
    return path.relative(path.dirname(markdownPath), filePath);
}

パラメータの説明：

filePath => 一時的な画像ファイルのパス
savePath => 設定に基づいて生成された画像ファイル名
markdownPath => 現在の.md ファイルのパス

テンプレートコードでは、画像の相対パスを直接返しています。

私の限られた JavaScript の知識を活用して、簡単なアップロード関数を作成しました：

const path = require('path');
const got = require('got')
const FormData = require('form-data')
const fs = require('fs')

module.exports = async function (filePath, savePath, markdownPath) {
    // ここに申請したトークンを入力してください
    const token = 'your token'
    const postURL = `https://www.dogedoge.com/tools/upload/${token}`
    const form = new FormData()
    form.append('file', fs.createReadStream(filePath))
    try {
        const resp = await got.post(postURL, {
            body: form
        })
        let response = JSON.parse(resp.body)
        return response.data.o_url
    } catch (error) {
        console.error(error)
        return path.relative(path.dirname(markdownPath), filePath);
    }
}

テストの結果、正常にアップロードできました。

使用方法#

コードをGitHub リポジトリにアップロードしました。以下の手順で使用できます：

# コードをダウンロード
git clone https://github.com/amtoaer/vsc-markdown-image-dogedoge
# ディレクトリに移動
cd vsc-markdown-image-dogedoge
# 依存関係をインストールする方法は2つあります：
# 1. yarnを使用して依存関係をインストールする
yarn
# 2. npmを使用して依存関係をインストールする
npm install

次に、vscode 内で Markdown Image 拡張機能をインストールし、以下の設定を行います：

Markdown-image > Base: Upload Method をカスタムに設定します。
Markdown-image.DIY: Path に upload.js ファイルの絶対パスを入力します。

図 1

これで設定が完了しました。画像をアップロードする必要がある場合は、編集領域を右クリックして「画像を貼り付ける」オプションを選択するか、ショートカットキーALT + SHIFT + Vを使用します。