VS CodeでWordPressにポストを投稿する・クロスOSでポスト管理をする方法 - Devil！Daredevil！！ -dev challenge-

• Facebook
• Twitter
• はてブ
• LINE
• Pocket

どうもこんにちは、如月翔也（@showya_kiss）です。
　今日は最近色々試していたんですが、「これは大体方法を理解したし再現性もあるし便利なのにあまり知られていないので共有したいな」と思う事があったので、それについて情報を共有します。
　内容としては、大人気エディタである「VS Code」を使ってWordPressにポストを投稿する方法についてです。
　この方法の旨味は、「VS CodeはWindows/Mac/Linuxにクライアントがある」「Webクライアントもある」のでクロスOSで使える点、そして「MarkDown」という記法で書けるのでMarkDownの練習になり（NotionもMarkDown対応なのでMarkDownは覚えておいて損はないです）、かつメディア系をアップするのが楽で、更にVS Codeを使う事でGitHubを使ってパソコン間でポスト内容を同期できるので、GitHubというWebサービスとGitHubDesktopというアプリ（これもWindows/Mac/Linuxで使えます）を使う事で自分の持っているパソコン全てにブログ内容を同期しながら保存しておく事ができるのです。
　まとめて話すと色々なサービスとアプリが絡む話になるので大変なのですが、一つ一つを追うとそんなに難しくありません。
　まずアプリとサービスについて個々に説明してからどう連携させるか、そして実際のインストールや設定方法について書いていくので大長文になりますが、知っている内容はそのままスルーして進んで頂ければ最後まで行けると思います。
　できるだけ簡単に噛み砕いて説明をしていくので文章が長くなりますが、見たまんまに作業していけば最終的に目指すゴールに辿り着くように動線を引きますので、できれば諦めずに最後まで付いて来てくれると嬉しいです。

まず現状として

まず現状として、僕は基本的にクロスOS使いで、可能な限り「WindowsとMacとLinux」を全部使いたいタイプで、使っているほとんどのアプリは「クロスOS対応」でなんなら「iOS・Android」にまで対応しているものを数多く使ってきたのですが、ここまではただ一つ、ブログを書くブログライターだけはクロスOSを達成出来ていなかったのです。
　Macで課金した「Mars Edit」というブログライターがあまりにも便利で、かつ、クロスOSのブログライターっていうのが今まで見当たらなかったんですよね。
　しかし、やはりクロスOSでブログを書きたいというのは正直な気持ちとしてあり、しかし最低限「Windows/Mac/Linux」で使えてかつ「Mars Edit」より便利じゃないと乗り換える意味がないので、色々探していたんですが、探しているのとは別方向から良い情報が入ってきたのです。
　僕はブログライターと同じく「テキストエディター」についてもクロスOS化を狙っていたのですが、今使っているNotionは同期や保存がめちゃくちゃ便利なんですがプログラム系のコードを書くのには向いていなくて、クロスOSのテキストエディターで良いのを探している時に、プログラマのおすすめとして「VS Code」というアプリがあると知り、それを試している中で、「VS Code」であれば機能拡張を使ってWordPressとはてなブログを更新できるというのです。
　テキストエディターとしてのVS Codeは非常に使いやすくて便利なものだったので、これでWordPressが更新できるのであればブログライターとして合格だと判断したのです。
　そこで、色々準備しました。結果として、次にご紹介するアプリとサービスを使う事で、VS CodeでWordPressにブログ投稿しつつ、その投稿内容を持っているパソコン全部で同期し、どのパソコンからでも全てのブログを更新し、内容を修正できる環境を作る事ができたのです。
　という訳で、今回はその環境の作り方についてご紹介していきます。

使うアプリとサービスについて

環境を作るのに使うアプリとサービスについてリスト形式で説明していきます。

• VS Code
  　エディタ本体です。後述する機能拡張を使う事でMarkDown記法でWordPressに投稿する事ができます。
  　クロスOS対応で、Windows/Mac/Linuxに対応しています。またWebクライアントもあるので最悪他のOSからもブラウザ経由で使う事ができます。
• VS Code機能拡張WordPress Post（改変版）
  　VS Codeの機能拡張の一種で、WordPressに投稿するための物があります。これは公式があるんですが、公式だと「生のHTMLを出力できない」という弱点があり、例えば商品紹介なんかのアフィリエイトのコードを貼り付けると勝手にMarkDownで解釈されてタグがバラバラにされて機能しないのでその点でこまります。
  　しかし、有志の方がこの機能拡張を更に改変して「生のHTML出力」に対応させてくれたバージョンがあり、それを使う事で今まで通りのアフィリエイトリンクなんかを貼り付ける事が出来ます。
• GitHub
  　アプリではなくサービスです。プログラマー、コードを書く人のためのバージョン管理・同期サービスで、公式にドキュメント管理もオーケーとされているのでブログの内容を保管する目的で使ってもオーケーです。
  　本来プログラマー向けのサービスなのでちょっととっつきづらいんですが、一回設定すればあとはそんなに考えなくて大丈夫です。
• GitHubDeskTop
  　GitHubでの同期をパソコン上で行うためのアプリです。
  　Windows/Mac/Linux対応のアプリで、基本的にはこのアプリを使ってローカルのデータをGitHubのデータと同期する事になります。使い方にちょっと癖がありますが、使い慣れると気にならないと思います。

基本的に使うのはアプリが2個、サービスが1個、機能拡張が1つだけです。
　記事更新の流れとしては、以下のリストの流れになります。

1. VS CodeでMarkDownを使ってブログ本体を書く
2. WordPress Postの機能拡張を使ってWordPressにポストする
3. GitHubDeskTopを使って書いたブログ内容をGitHubにアップする
4. 他のパソコンでアクセスする時はGitHubDeskTopで更新を拾ってくる

これだけです。非常に単純です。なんならWordPressのGutenbergを使ってブログを書くより楽かもしれません。
　では、実際のインストールと設定の方法について説明していきます。

VS Codeのインストールについて

VS CodeについてはWindows/Mac/LinuxのクロスOSアプリなので、インストール方法としては公式サイトからダウンロードしてきて実行、設定は何も変えずに「次へ」を連打しておしまい、というシンプルな方法です。
　公式サイトはこちらです→https://code.visualstudio.com/
　アクセスするとアクセスしたOSに応じたダウンロードページが表示されますので、「Download for ～ Stable Build」というボタンをクリックしてダウンロードしてきて下さい。
　後は実行して「Next」を連打です。
　英語なので最初は戸惑うでしょうが、インストールしたらすぐに日本語化できるので安心して下さい。

VS Codeの日本語化方法について

VS Codeの日本語化手順は以下です。簡単なので恐れずに行って下さい。

1. VS Codeを起動する
2. VS Codeの左メニュー、一番下にある「Extensions」のアイコンをクリックする
3. Extensions の検索ボックスが表示されるので、「Japanese Language Pack」と検索しする
4. 表示された Extensions の一覧の中から「Japanese Language Pack for Visual Studio Code」をクリックする
5. 「Japanese Language Pack for Visual Studio Code」の画面が表示されruので、「install」 をクリックする
6. インストールが完了したら画面右下に「Restart」と表示されるのでクリックしてVS Codeを再起動する
7. VS Codeが起動して日本語化が終わっているのを確認する

手順としては7つですが、検索窓を開いて検索してインストール、アプリの再起動だけです。

VS Codeの機能拡張WordPress Post（改変版）のインストールについて

VS CodeがセットアップできたらWordPressに投稿を行う機能拡張であるWordPress Postをインストールします。
　公式では画像サイズの問題や生HTMLが書けない問題があるため、scratchpadjpさんが改変して配布しているGitHubサイトに移動してVSIXファイルをダウンロードしてきます。
　右のサイトにアクセスして、「wordpress-post-0.0.6-h.vsix」のリンクをクリックしてVSIXファイルをダウンロードしてきて下さい→https://github.com/scratchpadjp/vscode-wordpress-post/releases/tag/v0.0.6-h
　ダウンロードが済んだら、以下手順で機能拡張をVS Codeにインストールします。

1. VS Codeの左メニュー、一番下にある「Extensions」のアイコンをクリックする
2. Extensions の検索ボックスが表示されるので、ボックスの横にある「…」ボタンをクリックする
3. 表示されるメニューの一番下、「VSIXからのインストール」をクリックする
4. ダウンロードしてきた「wordpress-post-0.0.6-h.vsix」を選択し、「インストール」をクリックする
5. インストールが終わると右下に「今すぐ再度読み込む」が表示サれるのでクリックする

インストールはこれで終わりですが、この改変版のWordPress Postは公式版が更新されると勝手に公式版に切り替わってしまうので、自動更新を切ります。そのために続きの作業をして下さい。

6. VS Codeの左メニュー、一番下にある「Extensions」のアイコンをクリックする
7. Extensionsの画面で「インストール済み」をクリックし、開いたリストから「WordPress Post」をクリックする
8. 「WordPress Post」の設定画面になるので、「自動更新」のチェックを外す

これで自動更新はしなくなったので、設定画面を閉じて構いません。
　この手順でVS Code用のWordPress投稿用機能拡張、WordPress Postの改変版がインストールできました。

WordPressのポストを保存・同期するためにGitHubを使う

WordPressへの投稿を保存・同期するために、GitHubという技術者サービスを使います。
　保存はともかく同期はいらない、ローカルにファイルがあればそれでいい、という人はGitHubの登録もGitHubDeskTopのインストールも不要なので、手順を飛ばしてポストを投稿する所まで進んでしまって構いません。

GitHubのアカウントを取得する

まずGitHubのアカウントを取得します。
　最初にhttps://github.co.jp/にアクセスします。
　そうすると画面右上に「サインアップ」というボタンがあるのでそれをクリックします。
　「First, let’s create your user account」という画面になり、「Username」「Email Address」「Password」「Email preferences」「Verify your account」と書かれた画面が表示されます。
　ここで「Username」にはお好みのユーザー名を入力し、「Email Address」にはメールが届くメールアドレスを（後で認証に使うので有効なメールアドレスを入れてください）、「Password」にはログインするためのパスワードを入力し。「Email preferences」はチェックなしでオーケー、「Verify your account」にはチェックを入れて、もしかしたらReCapchaが走るかも知れませんが落ち着いて対応してください。Recapchaが済むと画面一番下の「Create account」が緑色になって押せるようになるので押します。
　「Create account」を押すと画面が切り替わり、8文字の数字を入れる認証画面になりますので、今入力したメールアドレスに8桁の数字が書かれたメールが届いているのでそれをコピーして貼り付けてください。手打ちでもいいです。
　この認証が終わると「dashboard」に移動します。移動したらアカウントができた証拠なので「GitHub」のアカウントは取れた事になります。

GitHubでWordPress用のリポジトリを作成する

後でVS Codeに保存するのですが、GitHub側にWordPressのデータの保管場所を作ります。
　それを「リポジトリを作成する」と言います。
　今dashboardにいると思うので、画面左側にある「Top Repositories」欄の横にある「New」ボタンをクリックします。
　「Create a new repository」の画面が開くので、画面中程、「Repository name」欄に作成するリポジトリ名を入力します（公開される訳ではないので自分で認識できる名前をつければオーケーです：例えば「MyWordPress-001」）。その2段下、今は「Public」が選ばれているのは「Private」に選択を変え、画面下にある「Create repository」を押します。
　これでWordPress用のリポジトリが出来ました。

GitHubDeskTopをインストールする

今作ったデータ保管場所を同期するために、GitHubDeskTopアプリをインストールします。
　このサイトにアクセスすると、アクセスしたOSによって必要なインストーラーをダウンロードする画面が表示されるのでダウンロードして実行します→https://desktop.github.com/
　実行後インストールが走りますので、「Next」ボタンが現れたら「Next」を、「Finish」が現れたら「Finish」を押して下さい。基本的にそのままインストールが終わってGitHubDeskTopが起動します。

GitHubDeskTopでGitHub認証を行う

GitHubDeskTopでGitHubのデータを連携するために、GitHubDeskTopからGitHubに認証を行います。
　GitHubDeskTopの「File」から「Options」を選び、表示される「Options」画面の「Account」画面の右側に「GitHub.com」の欄があり、「Sign in」のボタンがあるのでそれをクリックします。
　「ブラウザーを使ってサインイン」のウィンドウが開くので、「ブラウザーで続行」をクリックします。
　すると、デフォルトのブラウザが開き、GitHubの認証画面になりますので、認証を通して下さい。
　認証が通ったらもうGitHubDeskTopでGitHubのデータを使えるので、早速設定をします。

GitHubDeskTopにGitHubのリポジトリをクローンしてくる

ではGitHubDeskTopを使って、先程GitHub上に作ったリポジトリを同期する手続きをします。
　クローンという作業をするのですが、意味としてはWeb上のリポジトリをローカルに同期するという意味になります。
　GitHubDeskTopの「File」から「Clone repository」を選ぶと「Clone a repository」画面が表示されるので、先ほど作ったリポジトリをクリックし、下の「Local path」欄に名前が入ったのを確認してから画面右下の「Clone」ボタンを押します。これでクローンが完了しました。

VS Codeにクローンしたリポジトリを追加する

GitHubDeskTopでクローンして作ったリポジトリをVS Codeに追加する事でWordPressへの更新をローカルとWebに同期する事ができます。
　そのために、今作ったローカルのリポジトリをVS Codeに登録します。
　VS Codeを起動し、「ファイル」メニューから「フォルダーを開く」をクリックします。
　即座にフォルダが開きますので、「ファイル」メニューから「名前をつけてワークスペースを保存」を選びます。
　名前を入力するウィンドウが表示されますが、特に変更しないで保存して構いません。
　これでワークスペース用のファイルも保存されたので、同期の準備はバッチリです。

VS CodeにWordPress用の設定を入力する

ワークスペースは別にどう作っても言いのですが、構造としてWorsPressはまず「page」と「post」があり、「post」の中に「年」のフォルダ、その中に「月」のフォルダ、中に個別の記事のポストが配置されるのが一般的なので、まず今作ったワークスペースの名前をクリックし、名前の横に表示される左から2つ目のアイコンの「新しいフォルダー」で「page」を作り、同じく「post」を作り、「post」を選択して中に「2024」を作り、2024を選択して「02」を作るといいでしょう。もちろん見ている今が違う年の違う月なら数字を合わせて大丈夫です。
　そこまでしたら、今度は左側の一番下に表示されているさっき作った「ワークスペース」のファイルをクリックします。
　ここを書き換える事でWordPressの設定を行う事になります。

ワークスペースファイルの内容

以下内容をコピーして貼り付けて下さい。その後内容を更に書き換えます。

{
	"folders": [
		{
			"path": "."
		}
	],
	"settings": {
		"wordpress-post.apiUrl": "https://あなたのドメイン/wp-json/wp/v2",
		"wordpress-post.authUser": "ユーザー名",
		"wordpress-post.authPassword": "アプリケーションパスワード"
	  }
}

今書かれている内容で、「あなたのドメイン」はWordPressのドメイン名を指します。
　例えば私の「https://dev.showya-kiss.com/」であれば「techblog.show-ya.blue」に書き換え、「https://dev.showya-kiss.com/wp-json/wp/v2%E3%80%8D%E3%81%AB%E6%9B%B8%E3%81%8D%E6%8F%9B%E3%82%8F%E3%82%8C%E3%81%B0%E3%82%AA%E3%83%BC%E3%82%B1%E3%83%BC%E3%81%A7%E3%81%99%E3%80%82
　ユーザー名はWordPressにログインする時に使うユーザー名です。メールアドレスではいけません。わからない場合、WordPressの管理画面に行き、画面右上の「こんにちは、～～さん」にマウスカーソルを合わせるとハンドル表記の下にユーザー名が表示されるのでそれを入力して下さい。例えば私の「show-ya」の場合、「show-ya」に書き換えればオーケーです。
　アプリケーションパスワードだけ面倒くさいので別項目を建てます。

WordPressのアプリケーションパスワードについて

WordPressのアプリケーションパスワードについては、通常のログインで使うパスワードは使わないで下さい。
　WordPressの管理画面から、アプリ専用のパスワードを発行できるのでそれを使います。
　操作方法としては、WordPressの管理画面に行き、画面左下の「ユーザー」から「プロフィール」を開きます。
　開いた「プロフィール」画面を下までスクロールすると、「アプリケーションパスワード」という項目があり、「新しいアプリケーションパスワード名」という項目があるので、自分で認識できる名前を付けて（なんでもオーケーです）下の「新しいアプリケーションパスワードを追加」をクリックします。
　すると「～～の新しいパスワード」という欄が現れ、そこに4文字のセットがスペースで区切られて5個表示されます。これを全てコピーしてどこかに保存しておき、そしてこの文字列（スペース込み）を先程のアプリケーションパスワードに書き換えます。
　これで全ての設定は終了です。

設定が終わったのでWordPressへポストを行います

これで全ての設定が終わったので、WordPressへポストを行います。
　WordPressへの投稿は、以下手順で行います。

1. マークダウンファイルを作成する（～.md）
2. 作成したマークダウンファイルにヘッダを書く
3. ヘッダを書いた後ブログ内容をMarkDownで書く
4. CTRL（またはCommand）+Sキーで保存する
5. CTRL（またはCommand）+Shift+Pキーを入力しコマンドパレットを開く
6. WordPress Postを検索し、実行する
7. ポストが投稿される
8. GitHubDeskTopを起動し、「Commit to main」、「Fetch to Origin」（ニ回目移行は「Push Origin」）を行う事でGitHubに同期する
9. 他のパソコンなどでGitHubから持ってくる時は「pull Origin」を行う

以上です。
　一つずつ説明していきます。

マークダウンファイルを作成する（～.md）

ワークスペースの該当月をクリックし、「新しいファイル」をクリックします。
　新しいファイル名をつける欄が出ますので、適切な名前をつけます。ヘッダでSlugを指定しない場合、ファイル名がWordPressの記事名として使われるので注意して下さい。ファイル名は「.md」の拡張子にする必要があります。

作成したマークダウンファイルにヘッダを書く

作成したファイルにヘッダを書きます。
　ヘッダは下記内容で書きます。

---
title: "タイトル名"
categories: 
  - "カテゴリのスラッグを記入"
slug: "WordPress記事名のスラッグを記入"
date: "2024-07-01T23:59:59"
status: publish
---

タイトル名は本文に表示されるタイトル名（全角文字オーケー）、カテゴリのスラッグはWordPressのカテゴリで選びたいカテゴリのスラッグを記入します。カテゴリのスラッグは行を増やして複数設定できます。
　WordPress記事名のスラッグはURLのスラッグ名です。一応全角は使えるのですがエンコードする時にエスケープされて意味のわからない文字列になるので、むしろ英語で書いた方がいいです。
　dateは投稿日時をYYYY-MM-DDTHH:MM:SS形式で記入します。DDとHHの間に半角大文字の「T」が必要です。未来の日付を入力すると予約投稿になります。
　statusは公開する場合「publish」、下書きに投稿する場合「draft」を記入します。
　ヘッダの上下にはハイフン3つの行が必要です。

ヘッダを書いた後ブログ内容をMarkDownで書く

ヘッダを書いた後、いきなり本文を書きます。ヘッダのハイフン3つの行の下からもう本文として扱われます。
　本文はMarkDownで書く必要がありますが、改行についてはわりと厳格ではなく、VS Codeで改行したものが実際の改行として扱われます（話は変わりますがMarkDownでは改行は半角スペース2個で記載する必要があり、はてなブログに投稿する機能拡張ではVS Code内の改行は反映されなかったりします）。
　MarkDownについては奥が深い話なのでご自身で調べて欲しいのですが、HTMLタグを書かないで装飾した文章が書けるので一度覚えると非常に楽です。

なお、生のHTMLを書きたい時は書きたいHTMLの前に「＜！ーー！」（半角で入れて下さい）を入れ、書いたHTMLの後に「！ーー＞」（半角で入れて下さい）を入力して下さい。それで挟む事で挟んだ部分が生のHTMLコードになります。

CTRL（またはCommand）+Sキーで保存する

MarkDownを書き終えたら、CTRL（またはCommand）+Sキーでファイルを上書き保存します。
　保存しなくてもいきなり投稿は可能なのですが、保存する癖を付けておかないと同期している意味がないので要注意です。

CTRL（またはCommand）+Shift+Pキーを入力しコマンドパレットを開く

上書き保存が終わったらCTRL（またはCommand）+Shift+Pキーを入力してコマンドパレットを開きます。
　このキーコンボを打つとVS Codeの一番上の行が入力可能になってカーソルが移動します。

WordPress Postを検索し、実行する

移動したカーソルで「WordPress Post」を検索し、「WordPress Post」を実行します。
　このコマンドは履歴が残るので、初回検索すれば次回以降は履歴から選べば一撃で実行できます。

ポストが投稿される

WordPress Postの機能拡張によりWordPressにポストが投稿されます。
　作ったMarkDownが解釈されてHTMLに変換されて投稿されます。
　この時、403や503のエラーが出る場合、WordPress側でファイアーウォールがかかっている可能性があります。
　使っているサービスで「WAF」などを検索し、一度無効化して試してみて下さい。
　また、「xml-rpc」や「Rest API」が許可されていない場合も同じエラーが出ます。使っているサービスで検索し、こちらは「有効化」「海外からのアクセスを許可」して試してみて下さい。

GitHubDeskTopを起動し、「Commit to main」、「Fetch to Origin」（ニ回目以降は「Push Origin」）を行う事でGitHubに同期する

無事ポストが投稿されたら、今度はそれをGitHub側に反映します。
　GitHubDeskTopを起動し、「Commit to main」を行って下さい。複数のファイルが更新している場合コメント欄を入力しないとボタンが押せないので、適当にコメントを入れて下さい。僕は面倒くさい時は「fix」とだけ入力しています。
　「Commit to main」が終わると画面が切り替わり、「Fecth to Origin」のボタンが表示されますのでそれを押します。これを押す事で正式にGitHubに登録されます。
　二回目以降は「Fetch to Origin」ではなく「Push Origin」になりますが、気にせず押して下さい。
　これでポストの投稿と同期ができました。

他のパソコンなどでGitHubから持ってくる時は「pull Origin」を行う

他のパソコンなどで同期をしたい場合、Webから持ってくる必要があるので、GitHubDeskTopを開くと「pull Origin」のボタンが表示されるので、それをクリックして下さい。
　それによってパソコンに最新のGitHubの情報が反映されます。

書きかけのファイルとかも気にせずCommit to mainしてセーブし、Push Originして運用して下さい

別に同期はいつでもできるので、記事が書き上がらず途中の状態でもセーブして同期して構いません。
　また、statusをdraftにして投稿しておけばWordPress側にも情報が残るので、場面に応じて使い分けて下さい。

という訳で、VS CodeでWordPressにポストして同期する環境ができました

というわけで1万2千文字になりますが、VS CodeでWordPressにポストして同期する環境ができました。
　更に言うとPaste Imageを使って画像の自動挿入なんかをすると便利なのですが、あまりにも長すぎるので今回はパスします。
　気になる人はVS Codeの機能拡張から「Paste Image」を検索してインストールし、使い方はググってみて下さい。めちゃくちゃ便利です。
　ただ、画像のアップロード時はWAFやセキュリティに引っかかる可能性が高いので注意してくださいね。

それではまた！

• Facebook
• Twitter
• はてブ
• LINE
• Pocket