※ 本記事は予約投稿です。
こんにちは。虎の穴ラボのT.Hです。

この記事は「虎の穴ラボ Advent Calendar 2022」4日目の記事です。
3日目はS.Aさんによる「エクセルデータのマッピングにJavaの動的プロキシを使ってみる」が投稿されました。
5日目はhk220さんによる「GoogleSitesをMarkdownに変換するChrome拡張機能を作ってみた」が投稿されます。こちらもぜひご覧ください。

はじめに

WordPressにはHTTPリクエストを使用して記事の投稿や取得が行える「WP REST API」が用意されています。
今回はKotlinからWP REST APIを利用して記事の投稿を行う方法を紹介いたします。

検証環境

今回紹介する記事の検証環境は以下になります。

Mac Book Pro 2019 (Intel CPU)
MacOS Ventura 13.0.1
Docker version 20.10.17 build 100c701
Docker Compose version v2.10.2

環境準備

記事内で利用するファイルやプログラムは以下のリポジトリより取得できます。 github.com

始めにDockerを利用してローカルにWordPressの環境を構築します。
リポジトリをローカルにクローンし、docker-compose.ymlファイルが存在するディレクトリに移動します。
ディレクトリ移動後、以下のコマンドを使用して検証用のWordPressコンテナを起動します。

docker compose up -d

起動が完了したら、以下の手順に従ってWordPressの初期設定を行います。

WordPressの初期設定

http://localhost にアクセスします。
言語選択画面が表示されるので「日本語」を選択して「次へ」をクリックします。

必要情報を入力します。
入力が完了したら「WordPressをインストール」をクリックします。

インストールが完了したら、ログインを行なってください。
ログイン後、ダッシュボード左メニューから「ツール」>「サイトヘルス」をクリックします。

「REST API が利用可能です」となっていることを確認します。

ダッシュボード左メニューの「ユーザー」>「プロフィール」の順でクリックし、プロフィール画面を開きます。
画面を下までスクロールすると「アプリケーションパスワード」の設定項目が表示されます。
「新しいアプリケーションパスワード名」に名称を入力し、「新しいアプリケーションパスワードを追加」ボタンをクリックしてください。

アプリケーションパスワードが発行されるので、内容を控えておきます。
(アプリケーションパスワードはKotlinからWordPressへ記事投稿を行う際の認証に使用します。)

以上で、WordPressの準備が整いました。

KotlinからWP REST APIを利用して記事を投稿する

Kotlinから実際にWP REST APIを利用して記事を投稿してみます。
今回はアイキャッチ画像付きのシンプルな記事を投稿します。

ここでは、KotlinからWP REST APIを利用して記事を投稿する際、ポイントとなる部分を紹介いたします。
また、記事内で利用しているメイドちゃんは以下より取得できます。

yumenosora.co.jp

REST APIの操作に利用するライブラリ「OkHttp3」について

以降の操作で「OkHttp3」というライブラリを利用します。

square.github.io

OkHttp3はSquare社が管理しているオープンソースのHTTPクライアントライブラリです。
Android開発に用いられることも多く、Kotlinとも相性が良いと感じたため今回の検証で利用することにしました。

認証用文字列の作成

認証に利用する文字列は「ユーザー名:アプリケーションパスワード」形式の文字列をBase64でエンコードして利用します。

val auth : String = properties.getProperty("API_SECRET")
val authStr = Base64.getEncoder().encodeToString(auth.toByteArray())

以降、WP REST APIを呼び出す際にHTTPリクエストヘッダ内に含めることで認証を行います。

addHeader("Authorization", "Basic $authStr")

アイキャッチ画像のアップロード

以下の方法で画像をアップロードすることができます。

メディアタイプの定義

メディアタイプを定義します。OkHttp3を利用している場合、用意されている拡張関数を利用して文字列からメディアタイプを生成できます。

val mediaTypeImg : MediaType = "image/png".toMediaType()
val file : File = File("${properties.getProperty("IMG_FILE")}")

リクエストボディの作成

リクエストボディを作成します。
こちらもOkHttp3を利用していれば、拡張関数を利用してFileオブジェクトからリクエストボディを生成できます。

val multipartBody : MultipartBody = MultipartBody.Builder()
    .setType(MultipartBody.FORM)
    .addFormDataPart("Content-Type", "image/png")
    .addFormDataPart("file", "${properties.getProperty("IMG_FILE")}", file.asRequestBody(mediaTypeImg))
    .build()

リクエストの作成

リクエストを作成し、送信します。
メディアアップロードのエントリポイントは「/wp-json/wp/v2/media」になります。
上記APIに対して作成したリクエストボディと認証用文字列をPOSTメソッドで送信することで、アイキャッチ画像をWordPressに登録することができます。

val requestEyeCatch: Request = Request.Builder()
    .url(properties.getProperty("WORDPRESS_MEDIA_POST_URL"))
    .addHeader("Content-Type", "multipart/form-data;")
    .addHeader("Content-Disposition", "attachment;filename=${properties.getProperty("IMG_FILE")}")
    .addHeader("Authorization", "Basic $authStr")
    .post(multipartBody)
    .build()
val responseWP : Response = client.newCall(requestEyeCatch).execute()

リクエストが正常に受け付けられると、レスポンスとして「メディアID」が返却されます。
記事本文を登録する際に利用することで、アイキャッチ画像を指定できます。

Gutenbergに対応した本文の投稿

以下の方法で本文を投稿できます。

本文の作成

本文の作成します。ここではトリプルクォートを利用して本文を生成しています。
ポイントとなるのは「」のようなHTMLコメントです。
このコメントを指定することで「Gutenberg」の各ブロックに変換されます。

var content: String =
    """
        <!-- wp:heading {"level":2} -->
        <h2>ここに見出しが入ります</h2>
        <!-- /wp:heading -->
　　〜 省略 〜
        <!-- wp:paragraph -->
        <p>ここに本文が入ります その2</p>
        <!-- /wp:paragraph -->
    """.trimIndent()

コメントを抜いてしまうと、以下のようにクラシックとして認識され、1つのブロックにまとまってしまいます。

投稿用JSONの準備

WordPress記事投稿用のオブジェクトに各種情報を設定し、JSON文字列を生成します。
ここで、先ほどのメディアIDを設定することで、記事にアイキャッチ画像を指定することができます。

        // 記事データの作成
        val post : WPPost = WPPost(
            "タイトル",  // タイトル
            content,  // 本文
            "publish", // 公開として登録
            1, // カテゴリID(未分類を指定)
            media.id // アイキャッチ用画像のID
        )

        // 記事データの投稿
        val json = Json.encodeToString(post)

記事を投稿する

あとは先ほどと同じく、POSTメソッドでREST APIにリクエストを送信すれば本文の投稿を行うことができます。
記事投稿用のエントリポイントは「/wp-json/wp/v2/posts」になります。

        // 記事をポストする
        val mediaType : MediaType = "application/json; charset=utf-8".toMediaType()

        val body : RequestBody = json.toRequestBody(mediaType)
        val requestWP: Request = Request.Builder()
            .url(properties.getProperty("WORDPRESS_POST_URL"))
            .addHeader("Content-Type", "application/json")
            .addHeader("Authorization", "Basic $authStr")
            .post(body)
            .build()
        val responseWP : Response = client.newCall(requestWP).execute()