Wordpress で記事予約の cron を正しく実装する

サイトアクセス時にcron実行するのは、無駄な負荷がかかる点と、キャッシュを設定した場合は適切なタイミングで実行されないため、選択はあり得ません。

サイトアクセス時の cron 実行を 無効化

vi ./wp-config.php

// こちらで無効化
define( 'DISABLE_WP_CRON', true );

実行処理

以下の方法ではうまくいきませんが、模範的な方法。
定期実行するスクリプトを用意。なんらかの方法で定期的に起動してください。

事前に wp-cli をインストールした状態になっている前提です。

vi ./cron.sh

#! /usr/bin/env bash
wp cron event run --allow-root --quiet --due-now
マルチサイトの場合
#! /usr/bin/env bash

for url in = $(wp site list --allow-root --field=url --deleted=0 --archived=0)
do
  if [[ $url == "http"* ]]; then
    wp cron event run --allow-root --quiet --due-now --url="$url"
  fi
done

こちら、全ての条件を調べてはいませんが、記事の予約が公開にならない現象が起きます。
例えばアップデートが実行されるときは、記事の公開処理は実行されないことを確認しています。
コードを見て調査していませんが、他の条件もありそうです。

上記の公開されない場合に対応するには、プラグインの利用が考えられると思いますが、
存在するいくつかのプラグインは、ユーザーがサイトアクセス時に、公開されていないものを公開する、という処理になっており、こちらは選択肢になりません。

適切ではないかと考える対応方法

#! /usr/bin/env bash

for url in = $(wp site list --allow-root --field=url --deleted=0 --archived=0)
do
  if [[ $url == "http"* ]]; then
    echo $url

    table_prefix=$(wp eval --allow-root --url="$url" 'global $table_prefix; echo $table_prefix;')
    post_ids=$(wp db query --allow-root "select ID from ${table_prefix}posts where post_status = 'future' AND post_date_gmt < UTC_TIMESTAMP()" | awk '{print $1}' | grep -v 'ID')

    for post_id in $post_ids; do
      echo "post ID = ${post_id}"
      wp eval --allow-root --url="$url" "wp_publish_post(${post_id});"
    done
  fi
done

Carrierwave + carrierwave-vips 利用時、webp の変換に対応する

carrierwave-vips を利用し、画像を変換する場合、libvips が対応しているフォーマットであっても、

class ImageUploader < CarrierWave::Uploader::Base
    process convert: "webp"
end

例えばこのように、jpg, jpeg, png 以外の、webp を指定してしまうと、ArgumentError が固定で発生する。

現在 gem "carrierwave-vips" で install できるバージョンでは、フォーマットがハードコードされていて、回避する手段がない。
git の master にコミットされているものでは、これに対する設定項目が増えているため、まず git ブランチから gem をインストールする必要がある。
github.com

gem "carrierwave-vips", github: "eltiare/carrierwave-vips"

さらに設定ファイルを追加する。

config/initializers/carrierwave_vips.rb

CarrierWave::Vips.configure do |config|
  config.sharpen_mask = [ [ -1, -1, -1 ], [ -1, 24, -1 ], [ -1, -1, -1 ] ]
  config.sharpen_scale = 16
  config.allowed_formats = %(jpg jpeg png webp)
end

libvips で heic フォーマットの変換に対応する

apt-get install libvips

で install した libvips は、heic フォーマットに対応していない。

例えば ruby-vips で使うような場合は、以下のようにソースコードからコンパイルする必要があります。

FROM ruby:3.2.2-slim as base

# ==============================
# libvips
# ==============================
FROM base as libvips

RUN set -ex \
  && apt-get update \
  && apt-get install -y curl automake libtool cmake libglib2.0-dev meson \
  && apt-get install -y libspng-dev libopenjp2-7-dev libjxl-dev librsvg2-dev libwebp-dev libtiff-dev libexif-dev libimagequant-dev libffi-dev

WORKDIR /usr/local/src

RUN curl -sL https://github.com/strukturag/libde265/archive/refs/tags/v1.0.15.tar.gz | tar -xz && \
    cd libde265-1.0.15 && \
    ./autogen.sh && \
    ./configure && \
    make && \
    make install

RUN curl -sL https://github.com/videolan/x265/archive/refs/tags/3.4.tar.gz | tar -xz && \
    cd x265-3.4/build && \
    cmake ../source && \
    make && \
    make install

# 1.17 だと実行時エラーが出る
RUN curl -sL https://github.com/strukturag/libheif/archive/refs/tags/v1.16.2.tar.gz | tar -xz && \
    cd libheif-1.16.2 && \
    mkdir build && \
    cd build && \
    cmake --preset=release .. && \
    make && \
    make install

RUN curl -sL https://github.com/libvips/libvips/archive/refs/tags/v8.15.1.tar.gz | tar -xz && \
    cd libvips-8.15.1 && \
    meson setup ./build && \
    cd build && \
    meson compile && \
    meson install

vuetify v-tabs 利用時、アニメーションを変更、停止する方法

ドキュメントには書いてないので、どうやってv3で切り替えアニメーションをオフにするのか調べたが、

https://vuetifyjs.com/en/api/v-tabs/#props

`transition="none"` `reverse-transition="none" `の2つを指定する。
v2では、`transition="false"` だけでよかったが、2つになっていました。
そもそも`v-tab-item` が `v-window-item` になっていますが、それはドキュメントに書いてあります。

<template>
  <v-card>
    <v-tabs
      v-model="tab"
      bg-color="primary"
    >
      <v-tab value="one">Item One</v-tab>
      <v-tab value="two">Item Two</v-tab>
      <v-tab value="three">Item Three</v-tab>
    </v-tabs>

    <v-card-text>
      <v-window v-model="tab">
        <v-window-item transition="none" reverse-transition="none" value="one">
          One
        </v-window-item>

        <v-window-item transition="none" reverse-transition="none" value="two">
          Two
        </v-window-item>

        <v-window-item transition="none" reverse-transition="none" value="three">
          Three
        </v-window-item>
      </v-window>
    </v-card-text>
  </v-card>
</template>

AWS copilot のバージョンを上げた後デプロイエラーが発生する

install されている copilot を、既存のプロジェクトで途中からアップデートした場合、
copilot deploy の実行時エラーが発生することがある。

✘ execute svc deploy: upload deploy resources for service app: put addons artifact to bucket stackset-hogehoge-in-pipelinebuiltartifactbuc-39393939zoo: upload manual/addons/app/bc123423423423423423495c78234234234.yml to bucket stackset-hogehoge-in-pipelinebuiltartifactbuc-39393939zoo: AccessDenied: Access Denied
	status code: 403, request id: HOGEHOGEHOGE2, host id: gvEGNa6FXnAHogeHOGEHOgeA8+Gt+mfwHOGE1D6Jl01/OM313J0Q=
Error: Process completed with exit code 1.

これは、copilot を実行しているユーザーでは無く、管理用の *****EnvManagerRole というロールに権限が無いため発生しています。
こちらのRoleに自動で権限を付け直すコマンドは無いため、手動で修正が必要です。

どのような権限を設定するべきかは、別の env を作るなどして、再度デプロイ。その時作られたRoleを参考に、違う部分を修正する必要があります。

AWS Elemental MediaConvert で、hls を 生成時、iOS で再生されない

動画をStreaming再生させたい時、AWS Elemental MediaConvert で hls に変換を行った。

特徴 - AWS Elemental MediaConvert | AWS

変換後の動画情報や変換状態は、EventBridge から取得出来るが、COMPLETE event に含まれる、変換後のURLが2種類ある。

これのどちらを使えばいいのかわからなかった。

API 送信先 - Amazon EventBridge

この中の2つ、outputFilePaths playlistFilePaths

playlistFilePaths から手に入る URL であっても、Android のブラウザや PC の Safari、PC の VLCなどでは普通に再生出来る。
ただし、iOSsafari では 壊れたファイルのような表示になる。

outputFilePaths から手に入る URL では、問題なく再生された。

ちなみに、playlistFilePaths のファイルの中には、outputFilePaths のファイル名が書かれている。

React で Swiper を使うため、react-id-swiper を利用したが動かない

react-id-swiper@4.0.0 を利用したときに、不具合があったり、使いづらかったりした点がありました。

スタイルが反映されない

swiper@6.8.4 であれば以下のように書けば、スタイルが反映されますが、 swiper@7.0.6 では、

@import "swiper/swiper-bundle.css";

のような styleの読み込みがエラーになります。
そもそもバージョンにかかわらず、style は、グローバルに読み込むしか方法がなく、styled-components や、CSS modules を利用することができないのは不便です。

pagination、navigation などが機能しない

pagination、navigation を利用する場合は、option に指定するだけでは機能せず、以下のように設定しなければ動かない。

import { Pagination, Navigation, Swiper } from "swiper";
Swiper.use([ Pagination, Navigation ])

しばらく更新もないので、今後も修正されない可能性がありそうです。