blog

WordCamp Kansai 2025 ふりかえり

2025年11月1日(土)〜2日(日)に開催された WordCamp Kansai 2025 に実行委員として参加しましたので、ふりかえり記事をここに残しておきたいと思います。

私の役割としては、委員長チーム・スポンサーチーム・会場/当日チームを担当しました。
また、自社株式会社Webの相談所はブロンズスポンサーとして参加しました。

今回の WordCamp はイベント全体を通して、関西の WordPress コミュニティらしさを感じられるいい WordCamp だったのではないかと思っています。

その証拠に開催から1週間が経過した今でも、X のハッシュタグ #wckansai2025 に「ふりかえりのブログ記事を投稿した!」というポストがあることは、実行委員としてとてもうれしいことです。(ふりかえりブログ記事一覧は公式サイトにもまとめられています。)

参加者のみなさんにお願いしたアンケートにも快くご回答いただき、満足の声を続々と寄せてもらって、安堵しています。本当にありがとうございます。

私はYouTubeにアップロードされたセッション動画をゆっくりと視聴しながら、停滞している仕事に追われる日々を過ごしています。

アフター・ドラマで日本初開催の WordCamp としてのふりかえり

WordCamp Kansai 2025 は WPDrama が起こった WordCamp US 2024 (2024/09/20)よりも前から企画が進められていました。

運悪く?このタイミングに当たってしまった WordCamp の実行委員としてはこの点にも触れておかないといけないという想い、そして日本国内で開催されるこれからのWordCamp のために私たちが何をしてきたのかを残しておきたいと思います。

この記事にたどり着いた人の中には、通称「WPDrama」をご存知でない人も多いと思うので、その場合は国内で最も信頼できる WordPress メディアの Capital P の記事をどうぞ。

会場予約・予算レビュー

「WordCamp を開催するぞ」という気持ちだけでは、WordCamp Central へ開催予定を掲載することはできず、金額の最も大きい会場の予約やイベント全体の予算計画の審査を経ていくことになりますが、ドラマ直後の最も混乱したタイミングと重なって、とても複雑な気持ちで進めたことをよく覚えています。

WordCamp の予算レビューを担当してくれる Automattic の担当の人には「グローバルスポンサーの費用をあまりあてにせず、ローカルでしっかりスポンサーを集めるように」と言われる中、WordCamp にはドラマの影響で様々な方針変更が加えられてくことになったのでした・・・。

参加者への変更点(2024/12/20あたり)

WordCamp の参加チケットを購入するには WordPress.org へのアカウント登録が必須となりました

この変更は一部の WordCamp 参加者への参加ハードルを引き上げ、主催者としては制限の多いWordCampサイトの中で、せめてもと注意文を掲載する対応を実施しました。

WordCampに参加するためにチケットを購入するにはWordPress.orgへのアカウント登録が必須となったせいでWordCampのチケット購入ページに掲載された注意文。「チケットの購入にはWordPress.orgのアカウントが必須となります。こちらのリンクより事前に作成をお願いします。」と記載されている
WordCampに参加するためにチケットを購入するにはWordPress.orgへのアカウント登録が必須となったせいでWordCampのチケット購入ページに掲載された注意文。

参加者としてチケット購入をしようと思ったら、WordPressのログイン画面が表示された時にどのように感じるでしょうか?

ある人は、ご自身の管理する WordPress のユーザーID・パスワードを入力してエラーになり、またある人は「なんでイベントに参加するためによく分からない WordPress にユーザー登録をしないといけないの?」と思ったことでしょう。
そして、パイナップルをピザに〜云々のチェックボックスの意味が分からずに離脱してしまった人もいるでしょう。

参加者アンケートにもその点について触れる声を寄せて頂いていますが、実行委員としては何も手を討つこともできず、「 WordCamp は変わった・・・」としか言えなかったもどかしさがあります。

※ちなみに、経緯・目的は依然としてすっきりしない感じです

※ WordCamp と同じく、WordPress 公式コミュニティの WordPress Meetup への参加には WordPress.org へのアカウント登録の必要がありません・・・。

スポンサーへの変更点(2025/1/1から)

事前に聞いていたものの、Matt 氏からのお年玉となった、

今後の WordCamp スポンサーは全部俺たち( Matt 氏 & Mary 氏 )が審査するよ宣言

・・・正直なところ、頭を抱えました。

WordCamp の予算レビューを担当してくれる Automattic の担当の人にも「一部の国ではスポンサー集めに苦戦している」ということを聞かされる一方で、ほんのり厳しくなったことを感じさせる予算レビューでは、「やりたいことを全部やるならローカルのスポンサーを集めよ」とのプレッシャーもありました。

例年 WordCamp にスポンサーとして参加してくれる企業さんには、スポンサー申し込みを開始する前から事前に連絡して経緯を説明したり、実行委員内で事前審査をしたりもしました。

いちボランティアが企業の Web サイトをチェックし、 WordPress という単語・ WordPress ロゴの使用状況をチェックし、修正依頼をする・・・。

・・・正直なところ、「これはボランティアでやっていいことなのか?」と何度も思いました。(今でもその思いは変わらず

最終審査は Matt 氏・Mary 氏のどちらかで行われているらしいが、多忙な彼らが世界中の WordCamp スポンサーをくまなく審査する余裕があるはずもなく、実際は Automattic の社員が日本語の Web サイトを翻訳しながら「仮チェック」をしていく運用がおこなわれていました。

その「仮チェック」の結果をそのままスポンサーに伝えるべきか、実行委員内で解釈を汲み取ってから伝えるか、いろいろな悩みがありました。(なんせ相手は機械翻訳で審査して、機械翻訳で変更指示を伝えてくる。)

・・・正直なところ、「これはボランティアでやっていいことなのか?」と何度も思いました。(今でもその思いは変わらず

そんな中でも、WordCamp を支えてくれるためにご対応いただき、参加いただいたスポンサー企業のみなさまには心からの感謝を申し上げたいと思います。本当にありがとうございました。

また、WordPressコミュニティとしては「WordPress に関連するビジネスを展開していない企業の方が審査が通りやすく、スポンサーになりやすい」という事実と向き合う必要があると思っています。

これは、WordPress に関連するビジネスを展開していない企業であれば、100%GPLの宣誓や商標の問題を難なく乗り越えることができてしまうということですが、そのような企業が WordCamp のスポンサーになること自体は何の問題でもなく、結局はその時の実行委員が判断するしかありません。
関連ビジネスを展開していなくても、 WordPress ユーザーとして応援してくださる企業さまもいらっしゃいますしね。

どのような企業が WordCamp へのスポンサーになるのがふさわしいかについては、WordCamp オーガナイザーハンドブックの資金の調達ページに記載されている内容を引用しつつ自分の想いを書き出しておくことにしますので、あなたが判断に迷ったときに思い出してもらえると嬉しいです。

スポンサーの金銭的支援は寄付金であり、イベントを応援するために支払われるものです。資金を提供してくれる方々を「スポンサー(出資者)」と捉えるのではなく、「サポーター(支援者)」と考えましょう。

実行委員内部でも「スポンサー」ではなく「サポーター」と呼ぼうか?という意見はありました。

過去のイベントにおいてこういった企業はスポンサーと呼ばれ、WordCamp 運営チームによって様々な段階のスポンサーシップレベルが設定されていました。貢献する金額のレベルが上がるほど特典(多くはマーケティング向け)が高くなるというケースが一般的でした。しかし、この傾向によって多くの WordCamp が商業的になりすぎるという弊害が生まれました

「商業的になりすぎた WordCamp 」はあまり見たくないと個人的には思っています。

スポンサーになってもらう企業に金銭的支援をしてもらう対価としてイベントの参加者に対してマーケティングや広告をしても良いという考え方はしないでください。こういったことをすると、結果的には WordCamp のスポンサーシップが広告の購入であるという形になり、WordCamp Foundation や WordCamp 運営チームの非営利性が失われることにつながります。

ローカルの WordCamp はビジネスイベントではないので、参加者としてもスポンサーとしても、こういった商業的な目的での参加は Flagship WordCamp と呼ばれる WordCamp への参加をお勧めするのがよさそうです。
WordCamp Asia 2025(フィリピン・マニラ)・WordCamp EU 2025(スイス・バーゼル)・WordCamp US 2025(ポートランド・アメリカ)と2025年に開催されたFlagship WordCamp 全てに参加した者としての意見です。

最後に

「せっかく楽しかったイベントなのに愚痴っぽい」と感じられてしまったら大変申し訳ありませんが、私個人的には今後の日本国内での WordCamp が都市圏だけではなく、以前のように地方でも開催されることを楽しみにしていますし、そのために協力できることがあれば、これからも喜んでお手伝いしたいという前向きな気持ちでいます。

WordPressプラグイン「BASE Item List」をバージョン2にアップデートしました

BASEのAPIを使って商品情報をWordPressに埋め込むことができるプラグイン「BASE Item List」をアップデートしました。

主な変更点としては、検索APIの新規受付を停止したことによるAPI認証方式の変更です。

検索APIはいろいろ問題があったらしく、BASEさんから直接お問い合わせを頂くこともあり、今回のアップデートに至りました。

V2にアップデートするとAPI認証をやり直す必要があります。

プラグイン設定画面に新方式のAPI認証の説明を記載しているので、移行をお願いします。

BASE Item List V2の設定ページのスクリーンショット

ショートコード[BASE_ITEM]はそのまま使えますが、パラメータがAPI仕様にもとづいて変更になったので注意してください。

最後に

本プラグインへのサポートについて。

本プラグインはWordPress.orgに公式プラグインディレクトリにオープンソースとして公開しています。

無償で公開していますが、設置サポート等はすべて有償にて承っております。

設置サポートについては、BASE APIの登録が終わっている状態で、ショートコードを利用した商品リスト表示(デフォルトテンプレート使用)まで一律 33,000円(税込)となります。

上記ご確認頂き、お問い合わせフォームより送信をお願いします。

Simple GA Ranking For Shifter Static

Shifter Advent Calendar 2020の20日目の記事。Simple GA RankingをShifter Static でも使いたい!という検証です。

この記事はShifter Advent Calendar 2020の20日目の記事です。

Shifterって?という方はShifterの中の人の赤塚さんによる1日目の記事を読むとよいでしょう。


Simple GA Ranking ?

Simple GA RankingはWordPressとGoogle Analyticsを連携させて人気記事ランキングを取得するプラグイン。

Google Analyticsからデータを取得するので、記事へのアクセスごとにデータベースに書き込むプラグインと比べて軽量に動作する。

公式サイトにはマニュアル動画も用意されていて、セットアップもこの手順通りにやればだいたい迷わずに設定できる。

Simple GA Ranking の設定マニュアル動画。クセになるBGMだ。

mt8もプラグインメンテナーとしてこのプロジェクトに参加している。(更新ができていないのは追々、、、)

Shifter Static でも使える(、、だが!)

Shifter StaticでもSimple GA Rankingを設定して使用することは可能だ。

ただし、表示されるランキングはShifterでジェネレート(静的書き出し)を行った時点で取得したものとなる。

つまり、ジェネレートを頻繁に行わないサイトの場合だとランキングの表示が次にジェネレートするまで変わらないということになる。

・・・惜しい。これはどうにかしたい。

Shifter Staticで静的化されたWordPressサイトからGoogle Analyticsの最新データが取得できれば人気記事だけではなく、関連記事なども実現できる可能性がある

これはどうにかしたい、、、!


ちなみに

静的化する上で避けられないWordPress運用における動的処理の代表格である「お問い合わせフォーム」・「サイト内検索」・「コメント」については

Shifterが公式ブログで外部サービスとの連携する方法を紹介してくれているので是非確認してほしい。

https://support.getshifter.io/en/collections/1394677-contact-forms

https://support.getshifter.io/en/articles/762156-integrating-algolia-search-with-wordpress

https://support.getshifter.io/en/collections/1394686-wordpress-comments

解決したい内容を整理してみる

「Shifter Staticで人気記事ランキング」を実現させるために必要となる要件を書き出しておく。

  • 静的化されたサイトに人気記事ランキングを埋め込む
  • ランキングデータはGoogle Analyticsと連携する
  • サイトアクセス時の最新のランキングを表示する

以上を実現するために、この記事ではSimple GA Ranking for Shifter Staticができないか実験していく。


Simple GA Ranking for Shifter Static

STEP1:WordPressの設定

Shifterにサインアップ・サイト追加をし、WordPressを立ち上げたらパーマリンク設定を以下にしておいた。

/%post_id%/

これで https://example.com/{記事ID}/ で静的書き出しが行われる。

STEP2:Google Analyticsアカウント

アカウント作成時の注意点としては「プロパティ」をユニバーサルアカウントとして作成すること。

手順は以下

①、「プロパティの設定」で”詳細オプションを表示”する

「プロパティの設定」から、詳細オプションを表示する

②、「ユニバーサルアナリティクス プロパティの作成」にチェックを入れる

「ユニバーサルアナリティクス プロパティの作成」にチェックを入れる

STEP3:カスタムディメンションの設定

記事の詳細ページへのPVのみをランキングデータとするためにGoogle Analyticsのカスタムディメンションを設定しておく。

ここでは次のように設定しておいた。

名前post
範囲ヒット
アクティブチェック(有効化しておく)
カスタムディメンションの設定
カスタムディメンションを定義

この設定をしておくことでGoogle Analyticsに記事詳細ページのPVであることを明示的に送信することができる。

作成したカスタムディメンションの「インデックス」の数値はこのあと使うので覚えておく。(スクショの場合は1)

STEP4:WordPressからGAにPVカウントを送信

以下のコードで、記事詳細へのアクセス時にGoogle AnalyticsにPVカウントを送信した。

https://gist.github.com/mt8/42b9bf291a968a29a161608f85ce2677#file-1-php

参考記事:gtag.jsでページビューのときにカスタムディメンション送信

カスタムディメンションが意図した通りに送信されているかは

Google Analtytics > 行動 > サイトコンテンツ > すべてのページ にアクセスし

「セカンダリディメンション」から作成したカスタムディメンションを選択する


もしくは、公式レポートツールのQuery Explorerを使ってもよいだろう。

次のようなパラメータで実際にサイトで取得したいランキングを問い合わせてみる。

idsga:から始まるビューID
start-dateyesterdayPV集計期間From
end-datetodayPV集計期間To
metricsga:pageviewsPVを取得
dimensionsga:pagePath, ga:pageTitleパス, タイトルを取得
sort-ga:pageviewsPVの降順で取得
filtersga:dimension1==postカスタムディメンションはpost

実行してデータが取得できていればカスタムディメンションが計測されていることになる。


Google Analytics APIをどのように実行するか

サイト訪問者がアクセスした時点でのランキングをリアルタイムに表示させたいので、Google Analytics APIはブラウザ側(javascript)から実行させることにする。

しかし、通常API実行のためのアクセストークン取得にはOAuth2認可を行う必要がある。これにはGoogleログインが必要で取得できるトークンには期限がある。

また、javascriptはソースコードが公開されるため、取得したトークンをソースコードで公開するのは問題がある。

そんなときに、GoogleのEmbed APIのページにServer-side Authorizationというページを見つけた。

具体的には以下のような手順となっていた。

  • GCPでサービスアカウントを発行しキーのjsonファイルを取得する
  • GAでサービスアカウント 発行時に作成されたメールアドレスに表示と分析権限を付与する
  • サービスアカウントのキーjsonファイルからサーバーサイドでAPIへのアクセストークンを取得する

※サービスアカウント 取得からAPI実行まではこちらの記事が参考になる:【2019年版】Google Analytics API v4 の使い方(PHP)

この例では取得したトークンをjavascriptソースに記述するようになっており、注釈として以下が添えられていた。

Important!  When you add an access token to the source code of your page, your site’s visitors could use that access token to run any query the service account could run. If your account contains sensitive information, considering adding the service account only to a specific view. You may also want to add a view filter to limit what data the service account can access.

Embed API Server-side Authorization

・・・サーバーサイド?

サーバーレスなShifterを使っているのにサーバーを用意するなんてとんでもない

そこで、今回は以下のようなAPIをserverless frameworkで構築することにした。

  1. サービスアカウントのAPIアクセストークンを取得
  2. アクセストークンを使ってGoogle Analyticsからランキングデータ取得

(このAPIを SGA4SS API と呼ぶことにする。)

SGA4SS APIをserverless frameworkで構築

serverless framework ?

Serverless Advent Calendar 2020の18日目の記事:Serverless Framework はじめの一歩という記事を読んでみるといいだろう。

ここではserverless frameworkの詳しい解説はしないが、ソースコードはGithubに上げておいた。

https://github.com/mt8/sga4ss

※なんでPython?:Embed APIのサーバーサイド認証のサンプルコードがそうだったから

このAPIの注意点

実際にAPIを公開するときにはスロットリングやキャッシュなどをきっちり管理した方がよいと思われる。(APIのURLは公開するので誰でも実行可能)

GA側ではフィルタ機能などを使って、「見られてもいいビュー」を作っておくのがよいと思われる。

***ご利用は自己責任でお願いする***


SGA4SS WordPress Pluginでデータ取得・表示

用意したSGASS APIはWordPress側では [sga4ss] というショートコード でデータを取得してリスト表示することにした。

コードは以下のようなものになる。

https://gist.github.com/mt8/42b9bf291a968a29a161608f85ce2677#file-2-php

・・・記事ランキングにアイキャッチ画像も付けたい

アイキャッチの取得についてはShifterの場合だと少し工夫が必要だった。

なぜならGoogle Analyticsから取得できるのはページパス(投稿ID)だけで、javascriptからでは投稿IDだけ取得できてもアイキャッチ画像を取得することはできない

Shifterサポートのお兄様たちに相談したところ、以下の方法を教えてもらった。(1時間で解決した)

①、/wp-json/wp/v2/posts/{ID} にアイキャッチ画像のURLを含める

以下のコードで、WP REST APIの/posts/{ID}にアイキャッチ画像のURLを追加することができる。

https://gist.github.com/mt8/42b9bf291a968a29a161608f85ce2677#file-3-php

②、/wp-json/wp/v2/posts/{ID} も静的書き出し対象に含める

以下のコードでShifterの静的ファイル出力対象にアイキャッチがある投稿については/post/{ID}をjsonファイルとして含めることができる。

https://gist.github.com/mt8/42b9bf291a968a29a161608f85ce2677#file-5-php
参考:Appending URLs to the artifacts

これでGA APIから取得した投稿IDからアイキャッチ画像を取得することができた。

抜粋になるが、コードだと以下の部分になる。

https://gist.github.com/mt8/42b9bf291a968a29a161608f85ce2677#file-6-js

最後に

実際にShifter Staticで書き出したサイトを貼っておく。

ページ最下部の人気記事ランキングの部分が紹介した方法で実装した部分だ。

https://dazzling-mestorf7276.on.getshifter.io/

いつまで残すかは未定

今回作ったコードは以下に上げているので同じようなことにチャレンジする人の参考になれば嬉しい。

SGA4SS API (Serverless framework): https://github.com/mt8/sga4ss

SGA4SS (WordPress Plugin): https://github.com/mt8/sga4ss-wp

***ご利用は自己責任でお願いする***

Shifterで対応してくれたら嬉しいこと – oEmbed –

この記事はShifter Advent Calendar 2019の18日目の記事です。

前日の記事はmiminariさんのShifterとgridsomeと私とNetlifyと(Gutenbergと)です。

Shifterって何?という方は赤塚さんによるShifter Advent Calendar 1日目、はじめてのShifterをチェックしてみましょう。


静的ジェネレーターが故の制限

ShifterはWordPressを静的ファイル群に変換し、ホスティングを行うサービスです。WordPressサイトはShifterの管理画面から必要な時だけ起動し、記事の作成などが終わったら停止させておくことができます。

WordPressを常時稼働させる必要がないため、セキュアに運用することができます。そしてWordPressコアは起動する度に最新のバージョンに自動的にアップデートされます。

ShifterでのWordPress運用の基本フローは次の通り。

  1. Shifterにログイン
  2. Shifter内で作成しているWordPressを起動・ログイン
  3. 記事作成などを行う
  4. WordPressを停止
  5. 静的ファイルに変換・配信

ステップ5でWordPressは静的ファイル群に変換されることになります。

静的ファイルに変換されるため、公開サイトでは当然PHPプログラムを動作させることはできません。

そのため、以下のようなWordPress機能やプラグインを使う動的な仕組みを使用することができません。

  • お問い合わせフォーム
  • コメント
  • サイト内検索

それらの制限に対するShifterからの提案

これらの機能を使わなければならないサイトの場合、Shifterを利用することができないのか?

いいえ。Shifterチームはそれらに関していくつかの方法を提案をしてくれています。

例えばお問い合わせフォームの場合、ShifterチームがWordPress公式プラグインディレクトリに公開しているWP Serverless Formsを使用することで、Shifter内で作成したWordPressで使い慣れたContact Form 7を使うことができるようになります。

またコメントの場合はDisqus Comment Systemを、

サイト内検索の場合は、Algoliaなどのサービスを使用することができます。


対応してくれたら嬉しい「 oEmbed」

oEmbedとはサイトのコンテツを他のサイトに埋め込むための統一規格です。

詳細な仕様はhttps://oembed.com/で定義されています。

WordPressが提供しているoEmbedの機能は次の通りです。

  • 自サイトコンテンツ内にoEmbed対応コンテンツを展開する
  • 他サイトからのoEmbed埋め込みに対応する

自サイトコンテンツ内にoEmbed対応コンテンツを展開する

YouTubeの場合、埋め込みたい動画URLをエディタ内に記述するだけで展開されます。

YouTube動画のUR:Lhttps://youtu.be/LezbkeV059Q を本文に埋め込むと展開される。

oEmbedによる他サイトのコンテンツ埋め込みは、2009年12月(10年前!!)にリリースされたWordPress 2.9に搭載されました。

リリースノート(日本語訳)には次のように記載がありました。

より簡単な動画埋め込み機能により、URL を独自の行にペーストするだけで適切な埋め込みコードに魔法のように変換できるようになりました。oEmbed に対応している YouTube、Daily Motion、Blip.tv、Flickr、Hulu、Viddler、Qik、Revision3、Scribd、Google Video、Photobucket、PollDaddy、WordPress.tv の URL が使えます(次のリリースでもっと増える予定です。

https://ja.wordpress.org/2009/12/19/wordpress-2-9/

現在サポートされているoEmbed埋め込み先は公式ドキュメントにまとめられています。

この、他サイトのoEmbed埋め込み機能はShifterでも使用可能です。

コンテンツに埋め込んだURLがoEmbedに対応している場合は、静的ファイル作成時に埋め込みコンテンツが展開された形で保存されます。


他サイトからのoEmbed埋め込みに対応する

2015年12月にリリースされたWordPress 4.4から、oEmbedに対応しているサイトのコンテンツを埋め込めるだけではなく、WordPress自身もoEmbedに対応して他サイトからの埋め込みに対応しました。

oEmbedプロバイダーとして振る舞えるようになったということですね。

リリースノート(日本語訳)には次のように記載がありました。

他の WordPress サイトに投稿を埋め込めるようになりました。エディターに投稿の URL を入れるだけで、設定したタイトル、抜粋、アイキャッチ画像を備えた埋め込みプレビューがすぐに表示されます。さらに、サイトアイコンやコメント・共有用リンクも含まれます。
投稿の埋め込みに加えて、WordPress 4.4 では新しい oEmbed プロバイダを5つ追加しました。Cloudup、Reddit コメント、ReverbNation、Speaker Deck、VideoPress です。

https://ja.wordpress.org/2015/12/10/clifford/

では、WordPressはoEmbedプロバイダーとしてどのように振る舞うのでしょうか?

oEmbedに対応しているページのソースコードを確認すると次のコードが<head>タグ内に出力されていることが確認できます。

<link rel="alternate" type="application/json+oembed" href="https://ja.wordpress.org/wp-json/oembed/1.0/embed?url=https%3A%2F%2Fja.wordpress.org%2F2015%2F12%2F10%2Fclifford%2F" />

これはoEmbedプロバイダーとして振る舞うためのoEmbed Provider APIのエンドポイントに記事URLをパラメータとして渡しているものとなっており、次のようなレスポンスが返されます。

{
"version": "1.0",
"provider_name": "日本語",
"provider_url": "https://ja.wordpress.org",
"author_name": "odyssey",
"author_url": "https://profiles.wordpress.org/odysseygate/",
"title": "WordPress 4.4 “Clifford”",
"type": "rich",
"width": 600,
"height": 338,
"html": "
WordPress 4.4 “Clifford”
\n\n<!--//--><![CDATA[//><!--\n\t\t/*! This file is auto-generated */\n\t\t!function(d,l){\"use strict\";var e=!1,o=!1;if(l.querySelector)if(d.addEventListener)e=!0;if(d.wp=d.wp||{},!d.wp.receiveEmbedMessage)if(d.wp.receiveEmbedMessage=function(e){var t=e.data;if(t)if(t.secret||t.message||t.value)if(!/[^a-zA-Z0-9]/.test(t.secret)){var r,a,i,s,n,o=l.querySelectorAll('iframe[data-secret=\"'+t.secret+'\"]'),c=l.querySelectorAll('blockquote[data-secret=\"'+t.secret+'\"]');for(r=0;r<c.length;r++)c[r].style.display=\"none\";for(r=0;r<o.length;r++)if(a=o[r],e.source===a.contentWindow){if(a.removeAttribute(\"style\"),\"height\"===t.message){if(1e3<(i=parseInt(t.value,10)))i=1e3;else if(~~i<200)i=200;a.height=i}if(\"link\"===t.message)if(s=l.createElement(\"a\"),n=l.createElement(\"a\"),s.href=a.getAttribute(\"src\"),n.href=t.value,n.host===s.host)if(l.activeElement===a)d.top.location.href=t.value}}},e)d.addEventListener(\"message\",d.wp.receiveEmbedMessage,!1),l.addEventListener(\"DOMContentLoaded\",t,!1),d.addEventListener(\"load\",t,!1);function t(){if(!o){o=!0;var e,t,r,a,i=-1!==navigator.appVersion.indexOf(\"MSIE 10\"),s=!!navigator.userAgent.match(/Trident.*rv:11\\./),n=l.querySelectorAll(\"iframe.wp-embedded-content\");for(t=0;t<n.length;t++){if(!(r=n[t]).getAttribute(\"data-secret\"))a=Math.random().toString(36).substr(2,10),r.src+=\"#?secret=\"+a,r.setAttribute(\"data-secret\",a);if(i||s)(e=r.cloneNode(!0)).removeAttribute(\"security\"),r.parentNode.replaceChild(e,r)}}}}(window,document);\n//--><!]]>\n

"
}

WordPressのエディタはこのjsonレスポンスからコンテンツの展開を行います。

/wp-json/oembed/1.0/embedエンドポイントのバックエンド処理はPHPの役割となり、Shifterで作成された静的ファイルからはこの機能を使用するこができません。

Shifter開発チームに「oEmbed埋め込み使えたらいいのになー」とそれとなくお願いしてみたところ、2019年11月22日のリリースにoEmbedに関する内容がありました。

静的化時に外部埋め込み用(embed)ページの生成が追加されました
これまでShifterでWordPressサイトを静的化した際に、 「 https://パーマリンク/」のみ出力されていましたが、「https://パーマリンク/embed/」 も一緒に出力可能になりました。
これにより、Shifter上のサイトを「https://パーマリンク/embed/」を利用して他のサイトに iframe 埋め込み可能になります。

Shifterで静的化したサイトにカテゴリ・タグのフィードと外部埋め込み用(embed)ページが含まれるようになりました。

これはどういうことかというと、oEmbedプロバイダーとして振る舞えるようになったWordPress4.4からは「記事URL/embed」というエンドポイントが追加されており、この記事「URL/embed」も静的ファイル出力時の対象するようになったのです!(出力はオプション)

先ほどのWordPress 4.4のリリース記事(日本語版) を例にすると、以下のURLとなります。

https://ja.wordpress.org/2015/12/10/clifford/embed/

アクセスすると埋め込み用のカード形式のHTMLが出力されているページであることが分かります。

/embedにアクセスした際の表示

右下の共有ボタンをクリックすると、このページを埋め込むためのオプションが表示されます。

/embedページの埋め込みオプション

この「HTMLでの埋め込み」には、/wp-json/oembed/1.0/embedエンドポイントのjsonレスポンスの”html”に相当するHTMLコードがセットされているので、埋め込みに使用することができます。

実際にこのコードを埋め込んだ例が以下となります。


WordPress 4.4 “Clifford”


実用する上では、iframeの高さを調整するなどが必要ですが、埋め込むことはできました。

もう少し!

URLを貼りつけるだけで埋め込むことができるというoEmbedプロバイダーの本来の振る舞いをするにはもう少し工夫が必要そうです。

Shifterでジェネレートされたサイトの記事URLを、他のWordPressのエディタに貼り付けたときに自動で展開されるのが理想です。

ただ、Shifterチームは先ほどのリリースノートで次のように書いてくれているので楽しみですね!

※ JSON-APIによるWordPress連携(WordPress Embed)は今後対応予定です。

https://www.digitalcube.jp/shifter/10776/

WordPressとAWSサーバーレスアーキテクチャを得意とするShifterチームがどのようなアプローチでこの機能を実現してくれるかとても気になりますね!

ちなみに、WordPressを静的出力するプラグインや、他の静的ジェネレーターサービスでこのoEmbedにしっかり対応できているものは今のところ存在しないようです。(当方調べ)

個人的には対応していると便利かなと思っているのですが、どうでしょうか?


最後に

19日目はkamesanzzzさんによる、「失敗しまくった話の予定・・・」です!

WordPressの書籍を執筆しました。

WordPressの書籍を執筆しました。