えーきのテクニカルメモ

お問い合わせフォームなら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の中でごにょごにょするとメディアキャッシュを削除できる。
※プロジェクトをすべて閉じておく必要があるので注意。

謎の仕様が発覚したのでメモメモ。

Z8でサイレントモードの場合にストロボが発光しないことが発覚。勝手な想像で、一般的な一眼カメラの場合は機械式シャッターを使わないとシンクロできないから、それに引っ張られての事だろうとは思うのだけれど、Z８はそもそも電子シャッターしかなくて、サイレントモードはシャッター音のON/OFFだけだから関係ないと思って試したらダメでした。

覚えておかないと、肝心な時に「ストロボ光らない！なんでだ？？」となりそうなのでメモメモ。

以下の記事は、その後あれこれ試したところ何か間違ってる感じですが、今後の自分の試行錯誤のために削除せずに残してあります。

フラッシュでTTL撮影するとき、Aモードで焦点距離に合わせたSSを選択する設定にしていて、望遠レンズをつけているので1/200で撮りたいのだけれど、なぜか限界設定した「1/60」になり、さらにはISOオートにしているのに64固定になっている感じの症状。何かしらの設定だろうとあれこれググったり試したりしたのでメモメモ。

今回の結論としては、「MENU」＞「カスタムメニュー」＞「e4：フラッシュ使用時の感度自動制御」を「被写体のみ」としていたのが原因らしい。「被写体と背景」に切り替えることで意図した動作になった。

なぜ何どうしてこういう動作になったのか不可解さは残るので、他の設定も絡んでいるような気はするのだけれど、いったんここまでをメモに残し、新しい何かが出てきたら追記します。

ダンプデータを取るだけとか、DB内をちょいと覗きたいだけとか、ちょっとだけDBをいじりたい時。
ログイン情報は手元にあるけどphpMyAdminをインストールするのはメンドクサイ時なら「Adminer」がお勧め。

使い方はすごく簡単。軽いphpファイルを一つアップロードしてブラウザから開き、ログイン情報を入力するだけで最低限の事が一通りできる。

自分は、必要な時にアップロードして使い終わったら削除することでセキュリティを確保している。

----------

◆Adminer - PHPファイルひとつで動作するデータベース管理ツール
https://www.adminer.org/ja/

◆参考サイト｜Adminerを利用してたった1つのPHPファイルで簡単にデータベースを管理する方法
https://kinsta.com/jp/blog/adminer/

案件ごとに「作業メモ」なるテキストファイルを作って、あれこれちょっとしたメモを残しているんだけれど、そのうちの一つが突然文字化けするようになった。

基本的に「UTF-8」で保存されているはずなのに、なぜかそのファイルを開くと「Latin-1」で開かれてしまう。どうも前回記述した内容の何かに引っ張られてLatin-1になっているような感じ。使っているエディタはサクラエディタなので、「開き直す」コマンドでUTF-8に変更すれば正しく開くけれど、毎回それではしんどい。

ググったところ「BOM」付きで保存すると文字コードを明示的に指定できるらしい。

以下、Copilot先生の解説

BOM（Byte Order Mark）とは、テキストファイルの先頭に付けられる目印のようなデータで、「このファイルはUnicodeで書かれていて、文字コードはこれですよ」とコンピューターに伝える役割を持っています。

もう少し詳しく言うと...
- **Unicode系の文字コード（UTF-8, UTF-16など）**では、文字をバイト列に変換して保存します。
- そのとき、バイトの並び順（エンディアン）や文字コードの種類を明示するために、ファイルの先頭に数バイトの特別なデータを付けることがあります。それがBOMです。
- たとえば、UTF-8のBOMは EF BB BF という3バイトです。

BOMのメリット
- テキストエディタやアプリケーションが文字コードを正しく判別しやすくなる。
- 特にWindowsのメモ帳やExcelなどでは、BOM付きのUTF-8でないと文字化けすることがあります。

BOMのデメリット
- 一部のプログラム（特にWeb系やスクリプト言語）では、BOMがあると不具合を起こすことがあります。
- たとえばPHPやJavaScriptでは、BOMがあると「予期しない文字」として扱われることがあります。

豆知識
- BOMなしのUTF-8は「UTF-8N」と呼ばれることもあります（日本独自の表現です）。
- Webページやプログラムのソースコードでは、BOMなしが推奨されることが多いです。

という事で、うかつにBOMを付けるとjsやPHPでは不具合の元になりそうだけれど、.txtで文字化けが心配なときには便利な機能のようだ。

ちなみに、サクラエディタの場合は新規保存や名前を付けて保存の際のウィンドウにBOMを付けるかどうかのチェックボックスボックスがある。

今さらではあるのだけれど、時々使う時に「あれ？どこから作るんだっけ？」となるのでメモメモ。

Googleマイマップとは、例えば商店街のウェブサイトなら所属する商店をGoogleマップ上でマークしたものを公開できるもの。

他にも、チェーン店が店舗をマークして所在地を一覧できるようにしたり、観光協会が各観光地をマークしてモデルコースの順路を作ったりと、応用範囲は広い。

さて、じゃぁというとその作り方。これは実に簡単。Googleアカウントでログインした状態で下記のページにアクセスして、あとはごにょごにょと作っていくだけ。

「Googleマイマップ」 https://mymaps.google.com/

例えばこんなごにょごにょ

• レイヤを作って店舗クリックすると店舗の情報がポップアップするので「地図に追加」してマークしていく。
• マークの図柄や色を変えることもできる。
• 別のレイヤには「ルートを追加」ボタンからルートを作っていくなど。
• 最後に「共有」から共有方法をごにょごにょすると公開できる。

まぁ、難しいこともなく感覚的に操作できるのでまずはやってみるべし。