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

VS Code用WordPress Post拡張機能を修正してみる その5WordPress
スポンサーリンク

前回まではWordPressの記事をVS Codeで作成できる拡張機能であるWordPress Post拡張機能を修正してきました。

今回はこれまでやってきた修正を統合してVS Codeで利用できるようにしてみます。

スポンサーリンク

これまでの修正

これまで4回に渡ってWordPress Postを修正してきました。

VS Code用WordPress Post拡張機能を修正してみる その1
今回はVS Code用の拡張機能であるWordPress Post拡張機能のを修正したことを紹介します。 このWordPress拡張機能はMarkdownでWordPressの記事を作成でき、大変便利なのですが、実際に使用してみるといくつか気になる動作がありました。その一つであるコードブロックのHTMLについてはソースコードを修正することで、所望の動作とすることができました。
VS Code用WordPress Post拡張機能を修正してみる その2
今回もVS Code用の拡張機能であるWordPress Post拡張機能の修正したことを紹介します。元々のWordPress Post拡張機能は画像の埋め込みに対応しているものの、サイズの指定や縮小には対応していません。今回の修正では画像の最大サイズを指定できるようにしたことで、必要に応じて画像を縮小させることができるようになりました。
VS Code用WordPress Post拡張機能を修正してみる その3
今回もVS Code用の拡張機能であるWordPress Post拡張機能の修正したことを紹介します。今回の修正ではMarkdownから生成されるHTMLをフォーマットする機能と、URIっぽい文字列を自動的にリンクする機能を追加しました。
VS Code用WordPress Post拡張機能を修正してみる その4

今回もVS Code用の拡張機能であるWordPress Post拡張機能の修正したことを紹介します。今回の修正では、Markdownの任意のブロックをHTMLタグで挟むことができるカスタムコンテナ機能を追加します。このカスタムコンテナ機能を使うとWordPressの記事をMarkdownで記述する際の表現力が上がるのではないかと思います。

こられの修正でWordPress Post拡張機能の実用性が上がり、私的には満足な状態となりました。

あとはこの拡張機能をインストールして活用していくだけです。

スポンサーリンク

修正版WordPress Post拡張機能

それでは、これまで行った変更をすべて取り込んだ修正版WordPress Post拡張機能を用意していきます。

修正を統合したソースコードの用意

修正を統合して行くには、これまで修正用に作成したブランチをマージしていく必要があります。

マージ先はmainブランチでも良いのですが、今回はオリジナルのWordPress Postをフォークしたプロジェクトのため、mainブランチはアップストリームの追随用として利用したい(=ローカルの変更は入れたくない)ところです。

そこで「integration-local-changes」というブランチを新規に作成し、ここに修正をマージしていくことにしました。

GitHub - scratchpadjp/vscode-wordpress-post at integration-local-changes
Contribute to scratchpadjp/vscode-wordpress-post development by creating an account on GitHub.

マージはgitの機能で行っていきます。複数のブランチで同じと箇所を変更していることもあり、マージ時にコンフリクトを生じることがありましたが、手作業で解決していきました。

バージョン番号の設定

インストールなどの作業に入る前に、拡張機能のバージョン番号を決めておきましょう。

今回の修正はWordPress Post拡張機能の「0.0.5」というバージョンをベースにしています。
従って、それより大きいバージョン番号を利用したいところです。

単純に考えると「0.0.6」となりますが、このバージョン番号は本来はオリジナルのWordPress Post拡張機能の次バージョンで使われるべきです。

そこで今回は枝番をつけて「0.0.6-X」(Xの部分ははa, b, c, …と更新する)とすることにしました。

最初は「0.0.5-a」というバージョン番号を使って見たのですが、このバージョン番号は「0.0.5」より古いとVS Codeは認識しました。

そのためマーケットプレースに公開されている「0.0.5」のWordPress Post拡張機能に更新しようとしてしまい、意図通りの動作ではありませんでした。

バージョン番号を「0.0.6-X」とすれば、「0.0.5」より新しいバージョンと認識され、マーケットプレースに公開されているWordPress Post拡張機能を導入しようとしなくなります。

なお、オリジナルの作者が「0.0.6」を公開すると、「0.0.6」の方が新しいバージョンとなりますので、公開された「0.0.6」に更新する用になります。

バージョン番号の指定はpackage.jsonで行います。package.jsonの序盤に「version」というキーがあるので、使用したいバージョン番号を指定します。

  "version": "0.0.6-c",

今回は「0.0.6-c」を指定しています。

最初は「0.0.6-a」だったのですが、それ以降に2回ほど変更したのでこの記事を作成時のバージョンは「0.0.6-c」となっています。

VISXファイルの作成

作成した拡張期のをVS Codeで利用できるようにするためには二つの方法があります。

  • VS Codeのマーケットプレースで拡張機能を配布し、オンラインで拡張機能をインストールできるようにする
  • VSIXファイルを作成し、ローカルで拡張機能をインストールする

マーケットプレースでの配布がVS Codeの拡張機能としては正しい姿です。しかし、本来ならば私が行った修正をオリジナル(アップストリーム)のWordPress Post拡張機能に取り込んでもらうのが先となります。

従って今回は、後者のVSIXファイルを作成する方法を採用します。

VSIXファイルを作成するためには、VS Codeの拡張機能を作成するために導入したvsceコマンドを利用します。

$ vsce package

これで同フォルダに「wordpress-post-0.0.6-c.vsix」というファイルが作成されます。ファイル名の後半の「0.0.6-c」というのはpackage.jsonに記述したバージョン番号です。

シンプルに「vsce package」でVSIXファイルを作成してみたところ、VISXファイルを作成した環境と、VISXファイルを利用する環境が異なると、WordPress Post拡張機能の利用時にエラーが出ることがわかりました。

例えば、Linux環境で作成したVSIXファイルをWindows環境のVS Codeで利用すると次のようなエラーになります。

Something went wrong installing the "sharp" module

Cannot find module '../build/Release/sharp-win32-x64.node'
Require stack:
(以下省略)

この問題を解決するために、とりあえず「vsce package」を実行するに次のコマンドを実行することにしました。

$ npm rebuild --platform=win32 --arch=x64 sharp
$ npm rebuild --platform=win32 --arch=ia32 sharp
$ npm rebuild --platform=darwin --arch=x64 sharp
$ npm rebuild --platform=darwin --arch=arm64 sharp
$ npm rebuild --platform=linux --arch=x64 sharp
$ npm rebuild --platform=linux --arch=arm64 sharp

これで上記のエラーは解消されました。ただ、これが正しい対処法なのかどうかはわかりません。

また、Windows on ARMや32bit Linux等の環境ではこのVSIXファイルは利用できないことになります。

なお、私が作成したVSIXファイルは下記でダウンロードすることが可能です。

Release v0.0.6-c · 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...

VSIXファイルのインストール

拡張機能を使うためにVSIXファイルをVS Codeにインストールス必要があります。

VS Codeのコマンドパレットで「vsix」と入力すると「拡張機能: VSIXからのインストール…」というコマンドが表示されますので、これを選択します。

VSIXからのインストール

あとはファイルを選ぶダイアログボックスが表示されるので、自分のプラットホームに対応したVSIXファイルを選択します。

これでVSIXファイルにパッケージングされた修正版WordPress Post拡張機能がインストールされます。VS Codeの再読み込みが要求されたら行っておきましょう。

VS Codeの再読み込み

VS Codeの拡張機能で「WordPress Post」を確認するとバージョン「v0.0.6-c」がインストールされているはずです。

インストールされた状態

これで修正版のWordPress Post拡張機能が利用可能です。

拡張機能の利用

WordPress Post拡張機能を利用するためにはWordPressの認証情報などの設定が必要です。設定方法ついては以前紹介しているので参照してみてください。

WordPressをVS CodeとMarkdownを使って更新する
今回はWordPressの記事の更新をVS CodeとMarkdownで行うために「WordPress Post」という拡張機能を導入してみます。WordPress Postを利用するとVS Code上でMarkdown形式で作成したドキュメントを、VS Codeから直接WordPressに投稿することができます。しかし、imgタグにサイズ属性がつかないなど、残念な点もあり、残念ながら常用するに至りませんでした。今後のバージョンアップに期待したいところです。

設定が終わったら、あとはMarkdownで記事を作成し、完成したらコマンドパレットで「WordPress Post: Post」を実行するだけでWordPressに投稿できます。

もちろん、修正版のWordPress Post拡張機能を利用していれば、画像の上限サイズ(上限を超えた場合は縮小)やカスタムコンテナなども利用可能です。

スニペットの利用

VS Codeにはあらかじめ用意しておいたテキストを呼び出すことができるスニペットという機能があります。

WordPress Post拡張機能でWordPressの記事を作成するときにもこのスニペット機能は活用でき、記事作成の効率を上げることができるのでオススメです。

例えば、私はWordPress Post拡張機能で利用するFrontMatterを登録してあります。

  "FrontMatter": {
    "prefix": "front",
    "body": [
      "---",
      "title: $1",
      "status: draft",
      "categories: [$2]",
      "tags: [$3]",
      "excerpt : $4",
      "---"
    ],
    "description": "WordPress記事の情報"
  },

また、カスタムコンテナなども登録しています。

  "information-box" : {
    "prefix": "information-box",
    "body": [
      "::: information-box",
      "$1",
      ":::"
    ],
    "description": "Cocoonで用意されているアイコンボックス (i)"
  },
  "alert-box" : {
    "prefix": "alert-box",
    "body": [
      "::: alert-box",
      "$1",
      ":::"
    ],
    "description": "cocoonで用意されているアイコンボックス (!)"
  },

その他、WordPressのショートコードなども登録しておくと便利と思います。

まとめ

今回はこれまで行ってきたWordPress Post拡張機能の修正を統合してVS Codeの拡張機能パッケージ(VSIXファイル)を作成してみました。

このVSIXファイルをインストールすることで、これまでWordPress Post拡張機能で不便だった点を解消できると思います。

WordPressの記事作成環境に困っている方には是非活用して欲しいと思います。

次回は実際にこの拡張機能を使ってみたらわかってきた課題を修正したいと思います。

コメント