フォント読み込み完了のタイミングで処理を実行する

ブラウザにフォントが読み込まれたタイミングで JavaScript の処理を実行したいと思ったとき、以前であればサードパーティー製のライブラリを使っていた *1 けど、最近はブラウザの標準 API だけで読み込みタイミングの判定ができるようだ。
Document.fonts を使う。

使用例

document.fonts.ready を参照すると Promise が取れる。

document.fonts.ready.then(function(fontFaceSet) {
  // フォント読み込み完了後に実行される
  console.info({ fontFaceSet });
});

ブラウザ対応

ブラウザ対応状況

Document API: fonts | Can I use... Support tables for HTML5, CSS3, etc

例によって IE11 ではサポートされていない。

IE11 の時にかぎって DOMContentLoaded イベントをリッスンすることで、それっぽい動きをさせることはできるだろう。

if ('fonts' in document) {
  document.fonts.ready.then(function(fontFaceSet) {
    // Do something.
  });
} else {
  // IE11 のとき
  window.addEventListener('DOMContentLoaded', (event) => {
     // Do something.
  });
}

まとめ

Document.fonts はブラウザの標準 API なのでサードパーティー製のライブラリを読み込むことなく即時に使えるのがいい。

というか、標準 API が Promise 返すことがあるのか。
Promise 自体が標準仕様に組み込まれたから妥当か。

私からは以上です。

*1:例えば Web Font Loader など

WP-Cron を cron から叩く

WP-Cron を cron から叩くとサイトの表示が若干軽くなるとのことでやってみた。
結論、問題なく動いている。

やりかた

すでに多くの人が解説しているので割愛。 やるべきことは、

• define('DISABLE_WP_CRON', true); を設定してデフォルトの動作を止める
• cron 設定で wp-cron.php を定期的に叩くようにする

具体的にはこちらのサイトを参考に、 hacknote.jp

注意点

cron 設定について、

• cron を毎分実行するように設定しようとしたら「毎分実行は負荷が大きくなりがちなので制限をかけるかも」と注意喚起された *1
• なので5分に一度 cron 実行するように設定を変えた
• そうすると WP-Cron の実行も最大で5分遅延する恐れがある

PHP の実行時、

• php コマンドで wp-cron.php を叩く場合、 $_SERVER['SERVER_NAME'], $_SERVER['REQUEST_METHOD'] などが取得できない。場合によっては PHP スクリプトの修正が必要になるかも
• curl https://example.com/wp-cron.php とかすれば回避できるけど、特定の IP からしかアクセスを許していない条件下では使えない

補足

ちゃんと動作するか最初は不安だと思うので、 WP Crontrol を使ってタスクやログをウォッチしながらやると安心できる。

私からは以上です。

*1:共用サーバー (エックスサーバー) を利用しているのでこのような注意喚起が出たみたいです

ラジオボタンのコーディングは

ラジオボタンのコーディングは、

<div>
  <input type="radio" name="foo" value="hoge">
  <input type="radio" name="foo" value="fuga">
  <input type="radio" name="foo" value="piyo">
</div>

ではなく

<div>
  <input type="hidden" name="foo" value="">
  <input type="radio" name="foo" value="hoge">
  <input type="radio" name="foo" value="fuga">
  <input type="radio" name="foo" value="piyo">
</div>

と書こう。

送信先の画面で

<?php
echo $_GET["foo"];

みたいに値を参照できるので便利です。
(Undefined index の Notice が出ない)