WordPressでvideoタグを埋め込む際に、自動でjsonldを書き出す方法を模索した。ここで言うvideoタグはYouTubeなどの外部サービスではなく、自分のサーバー内にアップロードしたオリジナル動画を指す。

プラグインは使わない方向で、新規投稿だけではなく過去記事にも対応させる。

## 必要なjsonldを確認

VideoObjectに必要なjsonldの項目は以下。詳細は[Google](https://developers.google.com/search/docs/data-types/video)にも書かれている。

- name（ビデオタイトル）
- description（ビデオの説明）
- thumbnailUrl（サムネイル画像）
- uploadDate（ビデオのアップロード日をISO 8601形式）
- contentUrl（実際のビデオファイルのURL）

contentUrl以外は必須項目。サムネイルは1つだけでもいいが、動画のサイズに合わせて複数用意も可能。この場合はGoogleが自動で最適なサムネイルを選択してくれる。

## サムネイル

上記で厄介なのが**サムネイル**。これはvideoタグ内の`poster`属性で設定ができるが、必須ではない。自分もposter属性は手に余裕があるときしか設定していない。

設定していないということはthumbnailUrlにセットする値がないため、その場合は適当なプリセット画像を用意しておくのが一般的かと思う。

```javascript
"thumbnailUrl": [
    // プリセット画像を使用（それぞれ1:1, 4:3, 16:9のサムネイル）
    "https://example.com/photos/1x1/photo.jpg",
    "https://example.com/photos/4x3/photo.jpg",
    "https://example.com/photos/16x9/photo.jpg"
   ], 
```

ただし、この場合は書き出すjsonldにサムネイル値はあるが、本体のHTMLにはサムネイルはセットされていない状態となる。jsonldという手段が目的になってしまっている気がして個人的にあまり好きでない。本来HTMLが実体であり、そこにメタデータが存在するのが正しい形なんじゃないかなと。

そこでjsonld書き出しの前に、videoタグに自動でサムネイルをセットする機能を実装する。プラグインやアイキャッチを利用する手もあるが、今回は独自フィルタを作成して実現した。以降、jsonld部分も含め以下の流れ組みます。

1. videoタグにposterが設定されていれば、それをjsonldのthumbnailUrlで使う
2. posterが設定されていなければ動画のアスペクト比を計算する
3. 計算したアスペクト比が用意したプリセット画像（16:9, 4:3, 1:1）のいずれかにマッチすれば、そのURLをvideoのposter属性としてHTMLに埋め込む
4. プリセットにない場合はposter属性は空とする

4は仕方がないのでサムネイルはjsonldの中でのみセットする。適当なサイズの画像を割り当ててもいいがが、アスペクト比の合わない画像をセットすると見栄えが良くない。

このためプリセット画像に合わないものは、HTML側にサムネイルをセットしないようにした。以下がサムネイルをセットするフィルタ部分となる。

```php
// 最大公約数を求める関数
function gcd($x, $y) {
    if ($y === 0) { return $x; }
	    return gcd($y, $x % $y);
}

// ショートコードフィルタ
function responsive_wp_video_shortcode($output, $atts, $video, $post_id, $library) {
    if ( empty($atts['poster']) ) {
        $w = intval($atts['width']);
        $h = intval($atts['height']);
        $g = gcd($w, $h);
        // アスペクト比を計算
        $x = $w/$g;
        $y = $h/$g;
        $ratio = array($x, $y);
        $poster = '';
        switch ($ratio) {
            case array (16, 9):
                $poster = get_template_directory_uri() . '/img/poster_16-9.png';
            break;
            case array (4, 3):
                $poster = get_template_directory_uri() . '/img/poster_4-3.png';
            break;
            case array (1, 1):
                $poster = get_template_directory_uri() . '/img/poster_1-1.png';
            break;
            default: // セットしない
            break;
        }
        if ( !empty($poster) ) {
            $output = str_replace( '<video', "<video poster=\"${poster}\"", $output);
        }
    }

    // その他のコード整形などの処理（略）

    return $output;
}
add_filter( 'wp_video_shortcode', 'responsive_wp_video_shortcode', 10, 5 );
```

これでvideoタグに可能な限りサムネイル画像がセットされることとなる。尚、上記でアスペクト比を求めるために最大公約数を求める関数`gcd()`を定義しているが、PHPにはGMPライブラリに`gmp_gcd()`という関数も用意されている。もし利用できる環境ならば、そちらを使用した方がいいと思う。

## ビデオメタタグの生成

videoのjsonldを作成するためには、videoのメタデータ（投稿日やタイトル）が必要となる。videoのメタデータを取得には、`get_attached_media()`を使用した。これは第1引数にメディアの種類、第2引数に投稿IDを指定すると、その投稿内に添付されたメディアタイプを返してくれる。

```php
$video_list = get_attached_media( 'video', $post->ID );
```

例えば、以下のようなデータが得られる。

```php
{
"2661": {
	"ID": 2661, 
        "comment_count": "0", 
        "comment_status": "open", 
        "filter": "raw", 
        "guid": "https://xxx.com/wp-content/uploads/myvideo.webm", 
        "menu_order": 0, 
        "ping_status": "closed", 
        "pinged": "", 
        "post_author": "1", 
        "post_content": "", 
        "post_content_filtered": "", 
        "post_date": "2018-03-10 17:53:45", 
        "post_date_gmt": "2018-03-10 08:53:45", 
        "post_excerpt": "",
        "post_mime_type": "video/webm", 
        "post_modified": "2018-03-10 17:53:45", 
        "post_modified_gmt": "2018-03-10 08:53:45", 
        "post_name": "My Video", 
        "post_parent": 2646, 
        "post_password": "", 
        "post_status": "inherit", 
        "post_title": "Peek 2018-03-10 17-53", 
        "post_type": "attachment", 
        "to_ping": ""
    },
// (略)
}
```

ここにある値を使えば簡単にjsonldを構築できる。

- `guid`をcontentUrl
- `post_date`をuploadDate
- `description`をdescription
- `post_title`をname

descriptionはメディアの追加時に入力していない場合もあると思うので、もし空ならば`post_title`をdescriptionにも設定すればいいと思う。

```php
$description = $video->post_content ? $video->post_content : $video->post_title
```

問題は上を見てわかるように**メタの中に`poster`は含まれていないという点**。このため、posterを別途取得する仕組みを作る必要がある。これがかなり面倒。

まず、posterを取得する方法が`get_media_embedded_in_content()`ぐらいしかない。この関数は第1引数にメディアデータを含む文字列（投稿のコンテンツ内容）、第2引数にメディアタイプ（今回はvideo）を指定すると投稿内に存在するvideoタグの配列を取得することができる。

見やすいように一部IDやclassを取り除いているが、概ね以下のような内容となる。

```html
<video poster='posterのURL1' preload="metadata" controls="controls">
<source type="video/webm" src="xxx.webm?_=1" />
<a href="https://xxx.com/wp-content/uploads/myvideo.webm">
http://xxx.com/wp-content/uploads/myvideo.webm</a>
</video>

<video preload="metadata" controls="controls">
<source type="video/webm" src="yyy.webm?_=1" />
<a href="xxx.com/movie.webm">http://xxx.com/wp-content/uploads/movie.webm</a>
</video>
```

これは実際に埋め込まれるHTMLなので、この解説の最初でフィルタを設定している場合、アスペクト比が対応していない場合を除き`poster`がセットされています。勿論、手動でposterをセットした場合も含め。

ただし、2つ目のvideoタグのようにposter属性が存在しない。つまりフィルタ処理でどのアスペクト比の画像ともマッチしなかった場合もある。その際は別途jsonldに先に用意した3つのプリセット画像を配列形式でセットする。この場合、Googleは動画のアスペクト比に1番近い画像を自動的に選択してくれる。

### メタデータとvideoタグの一致

次は**HTMLタグ内のvideoとメタデータオブジェクトをどうマッチさせるか**。上の出力HTMLを見てわかるように各動画ファイルがどのメタデータと等しいのかは、HTMLから直接取得できない。ただし、アンカータグのhref属性とメタデータのguidが等しいものは同じ動画を指していることがわかります。

```php
// メタデータの方のプロパティ
"guid": "https://xxx.com/wp-content/uploads/myvideo.webm", 

// videoタグ内のaタグ
<a href="https://xxx.com/wp-content/uploads/myvideo.webm">
```

これを条件式にすればメタデータに該当するposterは取り出せる。あとはその仕組みを作ればOK。自分の場合はvideoタグを含むHTMLを各要素単位で分割し配列に格納。メタデータの反復の中でguidと等しいかのチェックを行った。パスすればvideoタグのposterの値を取り出してthubnailUrlにセットする。条件に一致しない場合やその他の例外でthubnailUrlが空の場合、先に記述したようにプリセット画像を配列形式でセットする。

```php

// video(HTML)の配列を取得
$embeds = get_media_embedded_in_content( $content , 'video');
$split_tags_ary = [];

// video要素単位でループさせ、各要素を分割する
foreach ( $embeds as $elem ) {
    preg_match_all("/\<\w[^<>]*?\>([^<>]+?\<\/\w+?\>)?|\<\/\w+?\>/i", $elem, $matches);
    $split_tags_ary[] = $matches[0];
}

// videoメタデータを反復させてjsonldを作成
foreach ( $video_list as $video ) {
    $thumbnailUrl = '';
    $poster_pattern = '@poster="([^"]+)"@';

    if ( !empty($split_tags_ary) ) {
        foreach ( $split_tags_ary as $split_tag ) {
             foreach ( $split_tag as $tag ) {
                if ( (strpos($tag, $video->guid) !== false) && 
                   (preg_match($poster_pattern, $split_tag[0], $matches)) ) {
                    $thumbnailUrl = $matches[1];
                    break 2;
                 }
             }
        }
    }

    if ( empty($thumbnailUrl) ) {
        $thumbnailUrl =  array(
        get_template_directory_uri() . '/img/poster_16-9.png',
        get_template_directory_uri() . '/img/poster_4-3.png',
        get_template_directory_uri() . '/img/poster_1-1.png'
    );
}
```

以上でVideoObjectに必要な値はすべて用意できました。

```php
$schemaVideo = array (
	"@context" => "http://schema.org",
    "@type" => "VideoObject",
    "name" => $video->post_title,
    "description" => $description,
    "thumbnailUrl" => $thumbnailUrl,
    "uploadDate" => $video->post_date,
    "contentUrl" => $video->guid
);
```

あとは`json_encode()`で書き出すだけです。

## 問題点

問題点があるとすれば、`get_attached_media()`で取得できるオブジェクトは過去に添付した動画の場合は、再び取得できないという点です。例えばAという記事にvideo1という動画を添付し、その後にBという記事にvideo1という動画ファイルを添付した場合、`get_attached_media()`はこの動画のメタデータを取得できない。勿論、B記事に新しくvideo2という動画を添付した場合は、その記事内で取得可能。

これはバグなのか仕様なのか自分のテーマの組み方によるミスなのかわからないが、重複も回避できるのでとりあえず現状はこのまま利用している。


Wordpressでvideoタグを埋め込む際に、VideoObjectとしてjsonldで構造化データを書き出す方法を模索した。

WordPressでvideoをjsonldで書き出す

当ブログはWordPressで構築されています。テーマや周辺機能の見直しを年1程度で行っており、今回は2018年版として軽量化やマイクロデータの見直しなどを行いました。

WordPressメンテナンス@2018冬

WordPressで「メディアプレイヤーを埋め込む」を使うと、エディタ上では以下のようなショートコードが挿入される。

```php
[video width="1920" height="1080" webm="http://xxx/cast.webm"][/video]
```

実際の投稿では以下のような感じで出力される。

```php
<div style="width: 1920px;" class="wp-video">

<video class="wp-video-shortcode" id="zzz" preload="metadata" controls="controls" height="1080" width="1920">
<source type="video/webm" src="xxx/cast.webm?_=1"></source>
<a href="xxx/cast.webm">http://xxx/cast.webm</a>
</video>
</div>
```

内部の属性は編集可能で、`mp4="file.mp4"`のように追加すれば対応する`<source>`が挿入される。

## 出力内容を編集

出力タグ上の`class`をリネームしたかったのでフィルタを通してみた。

```php
function responsive_wp_video_shortcode($output, $atts, $video, $post_id, $library) {
    $replace_ptn = array(
            '/class="wp-video"/i',
    );
    $replace_val = array(
            'class="myClass"',
    );
}
add_filter( 'wp_video_shortcode', 'responsive_wp_video_shortcode', 10, 5 );
```

今回利用していないが`$atts`にはショートコードで記述した属性値などが入っている。 例えば`$atts['width']`のような形で取得でき、正規表現でvideoコード内を編集するとき便利。

WordPressのVide ShortCodeを編集してみる。

Video Shortcodeの編集

WordPressのアクションフックで[template\_redirect](https://codex.wordpress.org/Plugin_API/Action_Reference/template_redirect "template redirect")というものがある。タイミングはページを表示する直前で、よく利用するwp\_headなどよりも若干早い。

1. wp
2. **template\_redirect**
3. get\_header
4. wp\_head
5. wp\_enqueue\_scripts
6. wp\_print\_styles
7. wp\_print\_scripts

投稿データは取得できており、投稿内容に応じて後の処理を分岐させることができる。

## 個人的な使い方

例えば表示ページの中に特定のタグやクラスが含まれるかを判別し、存在するならば特定のスクリプトコードやスタイルシートを読み込むといったことが可能。このブログも特定のコードが出てきたときのみ、必要なJavascriptとCSSを読み込むようにしている。以下は必要分のみ簡単に抜き出したコード。

```php
// グローバルなフラグ
var $my_flag = false;

// 記事の中に特定のタグがあるか判別する
function my_template_redirect() {
  global $my_flag;
  $queried = get_queried_object();
  if ( is_single() ) {
    $cont = $queried->post_content;
    $ptn = //"何かしらの正規表現";
    if ( preg_match($ptn, $cont) ) {
      $my_flag = true;
    }
  }
}
add_action( 'template_redirect', 'my_template_redirect' );

// JavascriptとCSSの読み込み
function my_load() {
  global $my_flag;
  if ( !is_admin() ) {
    // 個別ページでフラグがTRUEならコードを読み込む
    if ( is_single() && $my_flag ) {
      wp_enqueue_style( 'xxx-css', get_template_directory_uri() . '/css/xxx.css');
      wp_enqueue_script( 'xxx-js',  get_template_directory_uri() . '/js/xxx.js');
    }
  }
}
add_action('wp_enqueue_scripts', 'my_load', 1);
```

こうすることで不要な外部ファイルを読み込まないようにして、HTTPリクエストの数を減らすことができる。要はデータベース処理のように、必要なときに必要な分だけ取ってくるという感じで使える。ただし、正規表現のため負荷はかかる。1000文字程度の記事だとほとんど変わらないけれども、あまりにも長文で解読に負荷がかかりすぎるものの場合は、素直に外部ファイルをロードした方がいいかもしれない。

WordPressのtemplate_redirectが便利。

template_redirectが便利

デフォルトでは、WordPressに画像を埋め込むとimgはpで囲まれる。一昔前はpタグを削除するという記事をよく見たが、ここではimgを囲むpに独自のクラスを定義する方法を記述する。

## 独自クラスを追加

少し修正してはいるが、[WordPress Development](http://wordpress.stackexchange.com/questions/16033/apply-class-to-every-paragraph-that-holds-image "WordPress Development")で見つけた方法は以下。pの中にimgタグがあった場合、pに独自クラスを追加するという方法。

通常はこのコードで十分だと思う。

```php
// imgを囲んでいるpにimgWrap classを追加
function img_p_class_content_filter($content) {
  $ptn = "/(<p[^>]*)(\>.*)(\<img.*)(<\/p>)/im"
  $content = preg_replace($ptn, "\$1 class='imgWrap'\$2\$3\$4", $content);
  return $content;
}
add_filter( 'the_content', 'img_p_class_content_filter' ,20);
```

やや問題なのは、正規表現部分を見ればわかるが、pに他のクラスを定義した上で記事を投稿すると、classが2回定義_クラスの複数定義とは意味が異なる_されてしまう点。

自分の場合、CSS関係で少し問題があったためこれに対応することにした。

### 方法の選択肢

- 定義したクラスにimgWrapクラスを追加（複数クラス）
- 独自クラスが定義されてないときのみimgWrapを追加

前者が理想的だがコードが長くなるのと、画像を囲むp自体のCSSを切り替えたかったので、後者の方法を取ることにした。

## クラスが定義されていない場合にのみ適用する

```php
// imgを囲んでいるpにimgWrap classを追加
function img_p_class_content_filter($content) {
  $ptn = "/(\<p)(?!\sclass)(.*\>.*)(\<img.*)(<\/p>)/im"
  $content = preg_replace($ptn, "\$1 class='imgWrap'\$2\$3\$4", $content);
  return $content;
}
add_filter( 'the_content', 'img_p_class_content_filter' ,20);
```

現状、問題なく動作する。


WordPressでimgを囲むpに独自クラスを設定する。