GASとWordPressを連携してみる

WordPressへ記事を投稿するウェブアプリを作ってみた。（ほとんどAIが書いてくれたよ）

GAS側

メインのコード

// HTMLテンプレート
function doGet() {
  return HtmlService.createHtmlOutputFromFile('index');
}

// 投稿関数
function postMarkdownToWordPress(title, markdownContent) {
  var url = 'https://gc-fc-web.com/wp-json/markdown/v1/create-post';
  var username = PropertiesService.getScriptProperties().getProperty('user'); // WordPressのユーザー名
  var password = PropertiesService.getScriptProperties().getProperty('pass'); // 生成したアプリケーションパスワード
  
  var options = {
    'method' : 'post',
    'contentType': 'application/json',
    'payload' : JSON.stringify({
      'title': title,
      'content': markdownContent
    }),
    'headers': {
      'Authorization': 'Basic ' + Utilities.base64Encode(username + ':' + password)
    }
  };

  try {
    var response = UrlFetchApp.fetch(url, options);
    Logger.log('Response code: ' + response.getResponseCode()); // ステータスコードをログに記録
    Logger.log('Response text: ' + response.getContentText()); // レスポンスの内容をログに記録
  } catch (e) {
    Logger.log('Error: ' + e.message);
  }
}


function createPost(title, content) {
  postMarkdownToWordPress(title, content);
  return "投稿が完了しました!";
}

スクリプト プロパティでuser、passをそれぞれ設定してね。

index.html

<!DOCTYPE html>
<html>
  <head>
    <base target="_top">
  </head>
  <body>
    <h1>Markdown Article Poster</h1>
    <form id="postForm">
      <label for="title">Title:</label>
      <input type="text" id="title" name="title" required><br><br>
      <label for="content">Markdown Content:</label><br>
      <textarea id="content" name="content" rows="10" cols="50" required></textarea><br><br>
      <input type="button" value="Submit" onclick="submitPost()">
    </form>
    <div id="output"></div>

    <script>
      function submitPost() {
        var title = document.getElementById("title").value;
        var content = document.getElementById("content").value;

        google.script.run.withSuccessHandler(function(response) {
          document.getElementById("output").innerHTML = response;
        }).createPost(title, content);
      }
    </script>
  </body>
</html>

デプロイしてウェブアプリへアクセスしてみるとこんな感じ。

タイトルとコンテツ（マークダウン形式）を入力して送信すると後述のAPIへ送信される。

WordPress側

プラグインを作成してインストールしてみる。

ディレクトリ構成はこんな感じ。parsedownは別途ダウンロードしてね。

GAS-Markdown-Publisher
│
├─ GAS-Markdown-Publisher.php
│
└─ parsedown
        composer.json
        LICENSE.txt
        Parsedown.php
        README.md

GAS-Markdown-Publisher.php

<?php
/*
Plugin Name: GAS Markdown Publisher
Description: A plugin to create posts from Markdown files received from a web app.
Version: 1.0
Author: Your Name
*/

// Add custom endpoint to receive Markdown
add_action('rest_api_init', function () {
    register_rest_route('markdown/v1', '/create-post', array(
        'methods' => 'POST',
        'callback' => 'create_markdown_post',
        'permission_callback' => '__return_true',
    ));
});

function create_markdown_post($data) {
    $markdown_content = $data->get_param('content');

    // Convert Markdown to HTML
    $html_content = markdown_to_html($markdown_content);

    // Create post object
    $new_post = array(
        'post_title'    => wp_strip_all_tags($data->get_param('title')),
        'post_content'  => $html_content,
        'post_status'   => 'publish',
        'post_author'   => 2, // ID of the author
        'post_category' => array(1) // Default category
    );

    // Insert the post into the database
    $post_id = wp_insert_post($new_post);

    return new WP_REST_Response($post_id, 200);
}

function markdown_to_html($markdown) {
    // Use Parsedown or any other Markdown parser library
    require_once plugin_dir_path(__FILE__) . 'parsedown/Parsedown.php';
    $Parsedown = new Parsedown();
    return $Parsedown->text($markdown);
}
?>

post_author は2になっているけど、デフォルトの管理者なら1。

この番号はユーザープロフィールページのURLのクエリパラメータを見ると分かる。

?user_id=2

zipにしてプラグインをWordPressにアップロード＆インストール。そして有効化で完了。

タグ: , , ,