修正したWordPress Postの最新版は下記になります。
前回まではWordPressの記事をVS Codeで作成できる拡張機能であるWordPress Post拡張機能を修正してきました。
今回はこれまでやってきた修正を統合してVS Codeで利用できるようにしてみます。
これまでの修正
これまで4回に渡ってWordPress Postを修正してきました。
今回もVS Code用の拡張機能であるWordPress Post拡張機能の修正したことを紹介します。今回の修正では、Markdownの任意のブロックをHTMLタグで挟むことができるカスタムコンテナ機能を追加します。このカスタムコンテナ機能を使うとWordPressの記事をMarkdownで記述する際の表現力が上がるのではないかと思います。
こられの修正でWordPress Post拡張機能の実用性が上がり、私的には満足な状態となりました。
あとはこの拡張機能をインストールして活用していくだけです。
修正版WordPress Post拡張機能
それでは、これまで行った変更をすべて取り込んだ修正版WordPress Post拡張機能を用意していきます。
修正を統合したソースコードの用意
修正を統合して行くには、これまで修正用に作成したブランチをマージしていく必要があります。
マージ先はmainブランチでも良いのですが、今回はオリジナルのWordPress Postをフォークしたプロジェクトのため、mainブランチはアップストリームの追随用として利用したい(=ローカルの変更は入れたくない)ところです。
そこで「integration-local-changes」というブランチを新規に作成し、ここに修正をマージしていくことにしました。
マージは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ファイルは下記でダウンロードすることが可能です。
VSIXファイルのインストール
拡張機能を使うためにVSIXファイルをVS Codeにインストールス必要があります。
VS Codeのコマンドパレットで「vsix」と入力すると「拡張機能: VSIXからのインストール…」というコマンドが表示されますので、これを選択します。
あとはファイルを選ぶダイアログボックスが表示されるので、自分のプラットホームに対応したVSIXファイルを選択します。
これでVSIXファイルにパッケージングされた修正版WordPress Post拡張機能がインストールされます。VS Codeの再読み込みが要求されたら行っておきましょう。
VS Codeの拡張機能で「WordPress Post」を確認するとバージョン「v0.0.6-c」がインストールされているはずです。
これで修正版のWordPress Post拡張機能が利用可能です。
拡張機能の利用
WordPress Post拡張機能を利用するためにはWordPressの認証情報などの設定が必要です。設定方法ついては以前紹介しているので参照してみてください。
設定が終わったら、あとは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の記事作成環境に困っている方には是非活用して欲しいと思います。
次回は実際にこの拡張機能を使ってみたらわかってきた課題を修正したいと思います。
コメント