VS Code用WordPress Post拡張機能を修正してみるその10

Visual Studio Code

2023/01/122023/07/27

修正したWordPress Postの最新版は下記になります。

今回はWordPressに記事を投稿することができるVS Code拡張機能であるWordPRess Post拡張機能の気になる点を修正してみます。画像の多重アップロードは結構困っていたので、解決できて良かったです。自分で機能を増やしたり、動作を修正できるのがオープンソースの良いところと実感できました。

前回は海外通販AliExpressで購入したPCスタンドを紹介しました。

今回はVS Code用のWordPress Post拡張機能のバグ修正について紹介したいと思います。

この拡張機能は、VS CodeでMarkdownを用いて作成した記事を直接WordPressに投稿できるという大変便利なものです。

以前の修正については下記を参照してみてください。

VS Code用WordPress Post拡張機能を修正してみるその9

今回はWordPress Post拡張機能をさらに修正して、処理状況をわかるようにしてみます。とくに画像を多く使っている記事を投稿するときには、投稿完了のメッセージが表示されるまで時間がかかり不安になってしまうと思います。今回の修正によって、この不安は解消されるのではないかと思います。

VSIXファイルのダウンロード
発見した不具合
1. 不具合の原因
2. 修正
まとめ

VSIXファイルのダウンロード

最初に今回の修正後のファイルの案内をしておきます。

今回の修正でバージョンを「0.0.6-k」となっています。

これを利用してみたい方は下記のURLからVSIXファイルをダウンロードして、VS Codeにインストールしてみてください。

Release v0.0.6-k · scratchpadjp/vscode-wordpress-post

This is unofficial version of WordPress Post extension for VS Code. The following features are added to the original version of WordPress Post 0.0.5. Customize code block behavior Add width/height...

発見した不具合

きっかけはWordPres Post拡張機能で投稿した画像のリンクが壊れていることに気づいたことです。

これに気づくまで10記事ぐらいをWordPress Post拡張機能で投稿したのですがこの問題に気づいていませんでした。

プレビューでちゃんと画像が埋め込まれていることを確認したはずなのですが・・・

HTMLのコードを調べてみると

<img src="wp-content/uploads/2022/12/ファイル名.jpg" alt="説明" title="タイトル" width="640" height="480">

のようになっていました。

srcがこのようになっていると、この画像が埋め込まれているページのURLをベースとしてこの画像のURLが解釈されます。

例えば、ページのURLが「https://scratchpad.jp/example/」だとすると、画像のURLは「https://scratchpad.jp/example/wp-content/uploads/2022/12/ファイル名.jpg」と解釈されます。

WordPressの場合、アップロードした画像は「https://scratchpad.jp/wp-content/uploads/」以下に格納されますので、これではリンクが無効になってしまいます。

正しくは、

<img src="/wp-content/uploads/2022/12/ファイル名.jpg" alt="説明" title="タイトル" width="640" height="480">

となっていなければいけません。

わかりにくいですが、違いはsrcに設定する値の先頭の「/」の有無です。

不具合の原因

WordPress Post拡張機能のコードを確認するとsrcに埋め込むURLは下記で設定されていました。

https://github.com/scratchpadjp/vscode-wordpress-post/blob/v0.0.6-j/src/post.ts#L199

      srcAttr = context.replaceAttachedImageUrl(imgItem["source_url"]);

「imgItem[“source_url”]」では画像の完全なURL(httpsから始まるURL)が取得でき、それをreplaceAttachedImageUrl関数で変換しています。

このreplaceAttachedImageUrl関数は次のようになっています。

https://github.com/scratchpadjp/vscode-wordpress-post/blob/v0.0.6-j/src/context.ts#L131

  replaceAttachedImageUrl(imgSrc: string): string {
    const siteUrl: string = this.getConf("siteUrl");
    return imgSrc.replace(siteUrl, "");
  }

この関数では引数で与えられたURL(画像の完全なURL)から、拡張機能の設定にあるsiteUrlで指定した文字列(URL)を取り除いています。

siteUrlは拡張機能の設定の下記の部分です。

つまり、画像のURLが「https://scratchpad.jp/wp-content/uploads/2022/12/ファイル名.jpg」であった場合に、siteUrlに設定されたURLが「https://scratchpad.jp」であれば、画像のURLは「/wp-content/uploads/2022/12/ファイル名.jpg」と変換され、HTMLに埋め込まれることになります。これは期待通りに動作します。

しかし、siteUrlに設定されたURLが「https://scratchpad.jp/」(末尾に「/」が付いているURL)出会った場合は、画像のURLは「wp-content/uploads/2022/12/ファイル名.jpg」と変換されます。このURLでは期待通りに動作しません。

従って、siteUrlに設定したURLの末尾に「/」が付かないと期待通りに動作し、siteUrlの末尾に「/」が付くと画像のURLが無効になってしまうということです。

修正

修正方法として、完全なURLからsiteUrlで指定した文字列を取り除くという処理自体をやめることも考えました。

しかし、siteUrlの部分を取り除くことでHTMLに埋め込まれるURLが短縮され、HTMLデータを小さくする効果も期待がきます。

そこで今回はsiteUrlの末尾の「/」が付いている場合はそれを取り除いてから使用する用にしました。具体的には上記で説明したreplaceAttachedImageUrl関数を次のように修正しました。

https://github.com/scratchpadjp/vscode-wordpress-post/blob/v0.0.6-k/src/context.ts#L131

  replaceAttachedImageUrl(imgSrc: string): string {
    const siteUrl: string = this.getConf("siteUrl").replace(/\/$/, ''); // remove trailing slash if exist
    return imgSrc.replace(siteUrl, "");
  }

getConf関数で取得したsiteUrlの値を、replace関数を使って末尾の「/」を取り除いています。

これで今回発見した不具合は解消できました。