• Reading time:10 mins read

WordPressをローカル環境で「作って遊ぼ」するなら『Local』だよね! と、激ホメ・激推しした私(@saosaoyamayama)です。記事はこちら。

「他にも面白い仕掛けがあったんですよ〜」という、若手2.5次元俳優との交際を匂わすB級女優みたいなことを書きました。

今回は有言実行、その辺りを書きます。

Localで自作問い合わせフォームを動かしたらメールは誰に届くのか篇」です。

こんなかたに向けた内容

  • Localを使ってWordPressをいじり始めたかた
  • 自作問い合わせフォームのテスト送信がうまくいかないかた
  • ド素人がハマった落とし穴を見てほくそ笑みたい上級者

自作問い合わせフォームのテスト送信がうまくいかない

WordPressには「メールフォーム」のプラグインがたくさんあります。自分でイチから組み立てる必要はありません。

たとえば現在運営中の別サイトではNinja Formを使っていますし、Contact Form 7なんかも有名でしょうか。

Ninja Forms – Your Drag & Drop WordPress Form Builder

You can build beautiful WordPress forms without being a developer or web designer. Use Ninja Forms to build professional forms in minutes, no code required!

Contact Form 7は「サイトが重くなる」という評判をよく耳にしますが、それでもユーザーは多いですよね〜。

私はデザイン面の自由度が下がる(cssがうまくいかない)のがイヤだったので、プラグインを使わず自分で作ろう! と思い立ち、チクチクとphpで組み立てていきました。

が……。

テスト送信がうまくいかーん!

何をしてうまくいかんのか

フォームは無事完成(形の上で)しました。他人のフリして問い合わせしてみるわけですよ。

  1. フォームに入力
  2. 入力内容確認画面に遷移
  3. 送信ボタンを押す
  4. 問い合わせ完了画面表示
  5. 問い合わせ完了メールが送られてくる
  6. 問い合わせがあったよメールが送られてくる(サイト管理者)

4まではうまくいきました。でも5と6のメールがね……待てど暮らせど送られてきません。

自信がないから全面書き直す

毎度書きますが、私はコーダーでもプログラマーでもありません。htmlは比較的スラスラ書けるようになりましたが、phpはまだまだ。

そのため、コードを丸っと見せてくれるレクチャーサイトをお手本にして、自サイトに落とし込んでいます。

お手本コードに手を加えているわけですから、何かがうまくいかなければ「自分が加えた手のせい」です。コードを見返したものの、なにが悪いのかさっぱりわからない。

結果、3つのサイトを参考にして3回書き直しました。参考にするサイトを変えたので全面書き直し3回

しかーし、実はいずれも正常に動作していたことが後で判明したのでした。

Localで問い合わせフォームの動きを確認する方法

問い合わせフォーム
問い合わせフォーム

御託並べは後にして、先に主題からいっちゃいます。

Localを使ったローカル環境でWordPressを立ち上げ、「問い合わせフォームのテスト送信の確認」を行う方法でーす。

長いな……。

  • LocalでWordPressを立ち上げている
  • Localがローカルホストに接続できている
  • サイトに問い合わせフォームがある(プラグインでもOK)
  • そのフォームは、問い合せによってメールの送受信が行われる

前提はこのあたりでしょうか。問い合わせフォームを作ったけれど、きちんと機能するかどうか知りたい! というステージに立っている状況ですね。

1. 問い合わせフォームから問い合わせる

まずは他人のフリして問い合わせてください。

問い合わせを送ると何が起きるのか、把握しておきましょう。たとえば私の場合は……。

  1. 問い合わせた人宛に、問合せ完了メールが届く
  2. サイト管理者に、問い合わせ通知メールが届く

この2つが発生すればフォームの正しい動きだといえます。自動返信ナシにしているかたもるでしょうし、フォームによって異なりますわな。

2. Localの「Tools」を開く

デフォルト機能のひとつらしい
デフォルト機能のひとつらしい

Localのサイト名下にある「Tools」を選択してください。

その下に、インストール済みの拡張機能(やデフォルトツール)が表示されます。

この中に「Mailhog」という項目がありますので、クリックします。

3. MailHogを開く

Mailhog
Mailhog

Mailhog/Open MailHogの2つが並んでいるはずです。この時点ではMailhogが選択されています(白字)。

緑色の「Open MailHog」をクリックしましょう。

そうするとブラウザが立ち上がります。ちょっとびっくりするんですけどね。

4. メール一覧が表示される

MailHogにメールが!
MailHogにメールが!

ほらー! あったでしょ、あったでしょ。

メールフォームを1回送信した結果、MailHogには2通のメール送信履歴が残っていますね。タイトルは「サイト名Mail from Form」となっています。これはphp側で指定した記述です。

ではまず、管理者宛てのメール(上)を開いてみましょう。

問い合わせno通知
問い合わせno通知

こちらは「問い合わせ通知」ですね。

送信元のメールアドレスは「Localのユーザー名@PC名.local」でした。

PC名ってのは、AirDropを送るときなんかに表示される「○○のMac mini」「○○のiPhone12」みたいなヤツです。きちんと「〜の」が「〜no」になっているのが面白い。

では下のメールを開いてみましょう。

3営業日とか書かなきゃいいのにね
3営業日とか書かなきゃいいのにね

はーい、自分の首を絞める自動返信メールです。

送信元は1通目と同じでした。LocalのWordPressから送信するメールはすべて、このアドレスを送信元とするのでしょう。

ということで、Local内で問い合わせフォームを動かすと、Local内で「自作自演」の動きが取られ、「MailHog」というツールでメールの状況が確認できます!

もちろん、本番環境で絶対にうまくいく保証はないので、本番環境でもテストは必須だと思いますヨ。

Localのローカル環境から外部にメールは送れません!

紙飛行機のオブジェクト
https://unsplash.com/photos/guiQYiRxkZY

ド素人が世界の常識に感動しているみたいで恐縮ですが、結論。

ローカル環境から通常のメールは送信できません! 以上!

じゃあ、なぜなのかって話。

なぜローカル環境から外部にメールが送れないのか

Localで立ち上げたWordPressはローカル環境、つまりPC内でのみ動きます(大げさな書き方ですが)。

ここにメールフォームを設置して、自分が普段使っているメールアドレスに自動返信が送られるようにする。これ、できません。できませんでした。

世の中で送受信されるメールはすべて「メールサーバ」を経由します。Localは外の世界と繋がる術を持たないので、メールサーバにアクセスできません。

だから「世の中」におけるメール送受信ができません。シンプルですね、はい。

ただ、ローカル環境から外部へのメール送信が絶対できないわけではありません

ローカル環境から外部にメールを送る方法はある

ローカル環境を作るソフトは沢山あります。私はWordPress限定だったのでLocalにしましたが、「XAMPP」もインストールしたことがあります。

XAMPP Installers and Downloads for Apache Friends

XAMPP is an easy to install Apache distribution containing MariaDB, PHP and Perl.

XAMPPには、外部にメールを送るツールが同梱されているとのこと。またXAMPP自体に「Mercury」というメールサーバがあるんだって。ふむふむ。

さっぱりわからない。

さっぱりわからないので、プラグイン入れるか……と諦めかけました。

じゃあ、私が送った問い合わせフォームの内容はどこに送られたんだろうか。疑問に思いました。確かに送信のアクションが完了しているわけで、そのデータはどこに行ったのか。

ふと思い出したのが「管理者メールアドレス」です。

LocalのWordPressの管理者は誰?

https://unsplash.com/photos/B0tAwAQUbzA

WordPressには必ず「管理者メールアドレス」が登録されています。

たとえばプラグインでメールフォームを作る場合、任意のメールアドレスを指定しなければ、WordPressの管理者メールアドレスが自動的に適用されることがほとんどです。

私が作った問い合わせフォームも、管理者メールアドレスを認識して動いているのではないか? と。で、WordPressのメールアドレスを確認してみました。

Localの管理者メールアドレス

出身地はドットローカル
出身地はドットローカル

末尾が「.local」でした。Localで作ったWordPressのURLは「サイト名.local/」なので、まあ、出身地は同じ

ということは、おそらくLocalのアプリケーションのどこかにメールが送られているんだろうなと予想はつきました。

管理者メールアドレスは変更できない

メールの確認ができないので変更もできない
メールの確認ができないので変更もできない

デフォルトのメールアドレスは削除可能だったので、別のメールアドレスを記入してみましたが、当然ながらメールアドレスは変更できません。

変更後のメールアドレス宛に送られるメールで「承認」しなければならず、Localは外部にメールを送信できないわけですから、まあ、全然無理です。

当たり前なんですけども!

ただ、「管理者メールアドレス」とMailHogの送信元メールアドレスは一致しません。MailHogでは「Localのユーザー名@PC名.local」から送ったことになっていますが、管理者メールアドレスはデベロッパー的な名前です。

千里の道も一歩からっていうから地道に知ろう

スニーカーの足下
https://unsplash.com/photos/syCb2MGaegI

WordPressに限らずですが、本当に勉強不足な状態でさまざまなことに取り組むクセがあります。

そのせいで失敗するし回り道もするんですが、「何をどう考えて何をやってどうミスったか」を振り返るのってとても重要で、これこそが勉強です。

独学ですから誰かが説明してくれるわけではないので、自分で調べないといけません。

「へー、めっちゃ基本のキじゃん」と新しいことを知り、今まで「点」として存在していたスキルとスキルが、知識という糸で結ばれていくのを感じるわけですよ。

わー、まともなこと書いておる……。

私の失敗をワールドワイドウェッブ上にさらけ出すことで、困っているかたの「助かった〜!」に繋がればいいなと感じつつ、今日も今日とて失敗を積み重ねます!

S.Nakayama

一帖半執筆工房代表。 デジタルマーケ企業のフリーランスPMとして計9サイトのコンテンツ制作を並行指揮した経験を持つ。 現在は企業の人材育成コンサルやメディア進行管理をしながら、グラフィックデザイン・文章校閲・校正者・ライターとしても活動中。 DigitalCameraWorld認定フォトグラファー、臨床検査技師。