えーきのテクニカルメモ

OBSBOT Tinyを使ってますが、ウェブカメラとしてはけっこう綺麗な画質で手軽に使えてなかなか便利。オンラインMTGでは画質は関係なくて表情が分かればOK、とはいえ、やっぱり画質が良いに越したことはない（笑）

そんなOBSBOT Tinyですが、ちゃんと使うためには操作するためのアプリケーション「OBSBOT Center」が必要。これでリモートで向きを変えたり拡大率を調整して良いアングルを作ります。

ところが久しぶりに使おうと思いOBSBOT Centerを立ち上げたら、タスクバー上では起動しているのに画面にウィンドウが出てこないので操作できない。Windowsでたまにある画面外に移動してしまって見えてない状態だろうと思い、あれこれ試すけどまったくダメ。

ここで結論を書いてしまうと、OBSBOT Centerには「バグ」と言って良いレベルの欠陥があるらしい。

Windowsでは画面の見やすさのために、モニター表示を200％や300％など拡大して表示する設定が可能ですが、100％以外で設定するとOBSBOT Centerは画面外に追いやられてしまうとのこと。

私の環境ではノートに外部モニタを接続して、ノート画面は300％、外部モニタは100％の設定で使用しています。OBSBOT Centerはずっと外部モニタに置いて使っていたから気が付かなかった。

何が理由なのかは不明だけど、今は立ち上がると必ずノート画面の右上基準でウィンドウが開く状態。これだといつもの300％表示では画面外になるし、いちいち100％に戻してどうのこうのというのも手間なので、しばらくOBSBOTはお蔵入りな感じです。

クライアントのWordPressを更新しようとサイトを開き、上部のツールバーから管理画面に行こうとしたらエラーが出て困った。サーバがロリポップだったので「それが原因か？？」と疑って無駄に時間を使ってしまったのでメモメモ。

結論から書くと、ロリポップには全くの濡れ衣で、一度ログアウトしてから改めてログインすればOKのどうという事のない話でした。ロリポップごめんね（笑）

何が起きていたかというと、、、

• 前回編集時に「ログインしたままにする」にチェックを入れてログインしたため、今日は最初からログイン画面を経由することなく上部ツールバーが表示されている状態だった。
• さらにセキュリティのため、プラグイン「SiteGuard」の機能「管理ページアクセス制限」をONにしているので、WordPressがこちらのIPアドレスを記憶していた状態。
• そしてここで、実は今日は施設点検のために停電となったのでルータがリセットされ、IPアドレスが変更となった。

その結果、WordPressが記憶していたIPは前回ログイン時のものなのに、今日は別のIPだったために弾かれていた状態でした。なので、いったんログアウトして再ログインすることでWPが記憶しているIPをリセットすればOKという事でした。

Swiper.js を実装するさいの覚え書きです。

◆まずは導入してみる時に見るページ
初心者向け！JSライブラリ「Swiper」の使い方ガイド

◆いろいろカスタマイズするためのオプション一覧
【Swiper】カスタマイズ用オプションまとめ一覧

bxSliderが便利で、何かといえばこれを使ってきた。ライブラリとしてはすっかり枯れていていわば完全乾燥で狂いが来ないのでとても楽ちん。
しかしすでに開発は止まっているし、他にも良いものが出ているので、そろそろ他のものを導入しようと検討。

◆Swiper.js
モバイル対応・タッチ操作・豊富なトランジション
純粋なJS。更新頻度高く、最も人気

◆Slick.js（jQuery）
カスタマイズ性・レスポンシブ・軽量
安定性は高いが更新は停止気味

◆Splide.js
https://ef-techmemo.makeit2.co.jp/2025/09/bxslider.html
軽量・高性能・アクセシビリティ対応
日本製でドキュメントも充実

◆Glide.js
シンプル・高速・レスポンシブ
軽量で直感的なAPI

◆Owl Carousel 2
タッチ対応・アニメーション豊富
jQuery依存。やや古めだが安定

◆Slider Pro（jQuery）
高度なカスタマイズ・動画対応
多機能だがやや重め

◆lightSlider.js（jQuery）
ギャラリー向け・スワイプ対応
軽量で導入が簡単

***************
選定のヒント

jQueryを使わない構成に移行するなら
　　→ Swiper.js, Splide.js, Glide.js が最有力。

既存のjQueryベースの構成を活かすなら
　　→ Slick.js や Owl Carousel 2 が移行しやすい。

アクセシビリティやSEOも意識するなら
　　→ Splide.js はARIA属性やキーボード操作にも対応。

プラグイン「ACF」は開発側のゴタゴタはありつつ、やっぱり「ネ申」プラグインで、めっちゃ便利（笑）最近はこれ一つでカスタム投稿タイプもカスタムタクソノミーも作れるようになったので尚更。

さて、某案件ではACFで作成したカスタムタクソノミーをチェックボックス選択式にして使っていた。そして今回は新しくカスタム投稿タイプを増やして、既存のカスタムタクソノミーを流用というか共用して設定することに。

ところが管理画面であれこれ設定しても、新しいほうのカスタム投稿タイプにいっこうに反映されなくてグダグダとしてしまったので原因をここにメモメモ。

理由としては「register_post_type()」や「register_taxonomy()」なんかの設定は、管理画面での設定よりもfunctions.phpでの記述が優先されて、競合していると管理画面での設定が無効になってしまうからとのこと。

今回の場合は、チェックボックス選択式にするさいにfunctions.phpへの記述で対応していたために、こちらが優先されていたのが原因。これを削除してすべての設定をACFからのGUIで行うことで解決した。

選択式にするには hierarchical を true にすれば良いだけの話なので、分かっている方には「何でそんな事をしてたの？？」案件でしょうが、長くやっていると以前からの作業フローで非効率なやり方が残ってしまっているケースはあるものです（笑）

お問い合わせフォームならWordPressで使えるContactForm7が人気だし、reCAPTCHA v3 にも対応しているので私もよく使っています。ただ時々、細かい事をしようとして不便な場面があったり、そもそもWordPressではない時もあったりで、そんな時に使わせてもらっているのがPHP工房さんの「【MailForm01】PHP多機能メールフォーム　フリー（無料）版」。

https://www.php-factory.net/mail/01.php

基本機能がしっかりしていて「余計なお世話」な余分なところも無いシンプルさでめちゃくちゃお気に入りなんですが、今のところは残念ながらreCAPTCHAには対応していません。このところスパムメールの激しさでreCAPTCHAが必須な感じになってきたので、カスタマイズして実装してみました。

いちおう「ご利用規約」をチェックすると、「改変等は自由ですが、自己責任でお願いします。」とのこと。ただし「プログラム自体の再販は禁止」で「設置費用として（クライアントへ）請求するのは問題ありません」という事なので、クライアントワークの場合はちょっと取扱いに気を使う必要あり。製作者さんへのリスペクトを忘れずにね。

設置方法の手順と考え方

最初にお断りしておきますが、前提知識の無い方に実装できるような親切な書き方はせず、ざっと流れを提示するにとどめています。自分ではできないが、どうしてもこれを実装したい場合はMailForm01配布元のPHP工房さんが各種カスタマイズを請け負っておられるようなので、このページを示して依頼するとスムーズと思います。

-----
さて、まずはreCAPTCHAの「サイトキー」「シークレットキー」を取得する必要があります。下記から進んでごにょごにょして取得してください。

https://www.google.com/recaptcha/admin/create?hl=ja

以前は完全無料でしたが、今は評価数が月間1万回を超えると有料となります。1万回を超えない場合でも、登録の際にクレジットカードなども必要となるので、クライアントワークの場合はお客様に取得してもらうと良いでしょう。

細かい取得方法はここでは省きます。

-----
参考ページ：「reCAPTCHA v3 を5分で実装」（WEB担当者の備忘録）
https://liapoc.com/recaptcha-v3.html
※reCAPTCHAのキー取得の仕方もここに詳しく解説してあります。

上記ページを参考に、MailForm01にソースを仕込んでいきます。

-----
下記の2点は、MailForm01の確認画面のHTMLの箇所に仕込んでいきます。
HTMLの知識があり、jQueryなどの実装経験があれば簡単だと思います。

• フォーム内にhiddenを追加
• reCAPTCHAのトークンを取得するためのJavaScript追加

-----
下記は、MailForm01の冒頭付近、各種設定をするあたりに入れます。

• サーバー側での処理

そして「成功時の処理」「失敗時の処理」として、適当な変数でフラッグを作っておきます。ここで処理を書くと、確認画面が表示される前に失敗時の処理が動いてしまうので（笑）

-----
最後に、確認画面を表示して問題無くメール発送する処理をするあたりを探し、そこに「認証失敗だったら処理を止める」みたいな分岐処理を入れればOKです。

「認証に失敗しました」みたいなページを作ってそこに飛ばせばなお親切でしょう。

なお、動作検証時に「認証失敗」をどうやって再現するかは一工夫必要です。ただ、このページのような簡単な説明で実装できる人であれば、自分なりに再現できると思うので解説を省きます（笑）

----------

いかがでしょう？「MailForm01」は1ファイルで完結するシンプルでスマートな作りなので、必要な箇所を探すのも知識のある方なら簡単だと思います。

最後に、このプログラムを配布してくださっているPHP工房様と、reCAPTCHA v3実装方法を解説してくださっているWEB担当者の備忘録様に感謝いたします。

HTML5からrequired属性が追加されている。使い方はカンタンで、<input>タグなどに属性を付与するだけ。

例）
<input type="text" required>
又は
<input type="text" required="required">

【余談】
今回、別のフォームからコピペして、required属性を付与して新しいフォームを作成したところ、このrequired属性が効かなかった。原因は元のフォームに「novalidate」属性がついていたこと。

他にも、下記の場合に効かないケースがある。Copilot先生の作ってくれたチェックリストを参考まで。

1. フォームが `<form>` タグで囲まれていない
- `required`はフォーム送信時にバリデーションされるため、`<form>`タグがないと機能しません。
- 対処：必ず`<form>`タグで囲み、`<input>`や`<select>`などをその中に配置。

2. `type="submit"` のボタンが使われていない
- JavaScriptで送信している場合、ブラウザのネイティブバリデーションがスキップされることがあります。
- 対処：`<button type="submit">`を使うか、JS送信前に`form.checkValidity()`で手動バリデーション。

3. `novalidate`属性がフォームに付いている
- これがあると、すべてのHTML5バリデーションが無効になります。
- 対処：`<form novalidate>`を削除。

4. JavaScriptで送信を強制している
- `form.submit()`を使うと、バリデーションをバイパスします。
- 対処：`form.submit()`ではなく、`form.requestSubmit()`や`form.checkValidity()`を使う。

5. `input`タグの構文ミス
- `required`のスペルミスや閉じタグの不備など。
- 例：`<input requiredd>` → 効かない
- 対処：HTML構文を検証ツール（例：W3C Validator）でチェック。

6. `display: none` や `visibility: hidden` が使われている
- 非表示のフィールドにはバリデーションがかからないことがあります。
- 対処：必要なら`aria-hidden`や`hidden`属性の使い方を見直す。

7. ブラウザの互換性や拡張機能の干渉
- 古いブラウザや拡張機能がバリデーションを妨げることも。
- 対処：別ブラウザでテスト、拡張機能を無効化して確認。

覚えてしまえばどうという事はないけど、毎回探してしまうので手順をメモメモ。

動画撮影で、本体では録画しないがHDMIスルーでATEMに出したり外部レコーダーで録画したりしたい。が、出荷時の設定そのままだと省電力機能が効いて数分程度で画面が真っ暗になってしまう。

それをキャンセルするには、カスタムメニューC3「パワーオフ時間」の「半押しタイマー」の設定を「制限なし」に設定する。

-------------------------

なお別の話になるけれど、Z50はUSB給電の機能が無いので、ダミーバッテリー＆AC電源が必要になる。ところが、カメラ本体のバッテリー部の蓋にはコードを出せる溝が切ってあるにも関わらず、純正品でのAC電源キットが無い。

なので自分は仕方なく社外品の下記をAmazonで購入。今のところ問題無く使えています。

Raeisusp EP-5G DC カップル EN-EL25 EN-EL25a ダミーバッテリー + EH-5A USBケーブルコネクタ + QC3.0 USB アダプター Nikon Z30 Z50 ZFC カメラ用
https://www.amazon.co.jp/dp/B09TR168JL?ref=ppx_yo2ov_dt_b_fed_asin_title

セミナーイベントを撮影するときに、スライドを見やすくするために周囲の光を落として、結果的に喋っている登壇者にライトが当たらなくて顔が暗くなってしまうのは「あるある」でしょう（笑）

スライドを画面中央に映してPinPの小窓で顔を抜くにせよ、一画面でスライドと登壇者を収めるにせよ、登壇者にライトが当たっていないとどうにも見栄えがしない。大きなスポットライトで照らせとは言わないけれど、ちょっとだけ登壇者の顔に光を当たっていたらと撮影者なら思うでしょう。

気の利いた会場なら天井に照明器具用のレールがあって、小さいスポットライトを付けることができたりしますが、会議室の延長の会場ではそうもいきません。

そんな時には、登壇者用のPCを置く演台にスタンドライトを置くと良い。アーム式で光の向きを自由に変えられると尚良し。さらにトレーシングペーパーで行燈にして拡散させて顔にも光を回してあげるとさらに良い感じになります。

動画用の照明機材を準備するとか大げさな事を考えたりするのだけれど、実はこんな簡単な事でもある程度は対応できるというお話でした。

プレミアで音ズレが発生。書き出した動画だけでなく、プレミアでの編集時点ですでにズレている。しかもコマ単位の微妙なものではなく、分単位でのズレ。

読み込ませた「メディア」の時点でズレているようで、15分ほどの尺の途中で音声だけ最初に戻って再生されているという状況。読み込ませる前の動画を確認すると、そんな症状はなくて正しい状態。

結論としては「メディアのキャッシュをクリア」することで解決。

プレミアでは動画素材を読み込ませると、キャッシュを作成することで動作の高速化を図っているらしい。このキャッシュを強制的に再作成させることで今回の問題は解決した。

【手順】（Windowの場合）
「編集」＞「環境設定」＞「メディアキャッシュ」
から、開いたWindowの中でごにょごにょするとメディアキャッシュを削除できる。
※プロジェクトをすべて閉じておく必要があるので注意。