Web Contact SSL Web / Server
← Back to Blog

2つのサイトを
サーバーに本番公開した日
「保護されていない通信」を消して、ファーストコンタクトフォームを完成させた

PROLOGUE

「保護されていない通信」という表示が気になっていた

ウェブサイトを公開していると、ブラウザのアドレスバーに「保護されていない通信」と表示されることがある。これは、サイトのURLが http:// のままで、https://(暗号化通信)に切り替わっていないときに起きる。

Xサーバー(レンタルサーバー)のSSL機能はすでにONにしていたのに、なぜか警告が消えない。調べると、httpからhttpsへの自動リダイレクト(転送)が設定されていないことが原因だとわかった。

それと同時に、コンタクトフォームの問題も気になっていた。従来の実装は「送信ボタンを押すとメールアプリが起動する」という方式で、デザインが途中で途切れてしまう。今日はその2つをまとめて解決することにした。

BUILD

コンタクトフォームをPHP方式に作り直す

まず、コンタクトフォームの仕組みを変えた。今回作ったのは3ファイルのセット。

contact.php — フォームの送信内容を受け取って、指定のメールアドレスに送るプログラム(PHPはサーバー上で動く言語)。

thanks.html — 送信が完了したあとに表示されるページ。10秒後にトップページへ自動で戻る。

contact.html — コンタクトフォームの画面。後でprofile.htmlの下部に統合した。

これによって、送信から完了まですべてサイトのデザイン内で完結するようになった。ブラウザの外に飛ばされることなく、体験がつながる。

フォームのデザインも磨いた。アイコン選びには少し時間がかかった。絵文字の「✉️」は環境によって白く潰れることがあるし、Font Awesome(アイコンフォント)の衛星のマークは複雑すぎる。

最終的に選んだのは「🛸」——UFO。

「ファーストコンタクト、でいきましょう」

この言葉遊びがすごく気に入った。宇宙人への最初の接触という意味の「ファーストコンタクト」を、お問い合わせフォームにかける。edencode.jpらしい演出になった。

DISCOVERY

SSL設定済みでも警告が消えない理由

「保護されていない通信」が消えなかった原因を整理すると、こういうことだった。

Xサーバーの管理画面でSSL証明書(暗号化のための仕組み)は発行済みだった。だから https://edencode.jp に直接アクセスすれば鍵マークが出る。

でも http://edencode.jp のままアクセスしてくる人は自動でhttpsに切り替わらない。これが問題の正体だった。

解決策は .htaccess というファイルを使うこと。これはサーバーに置くと「このサイトへのアクセスルールを変える」という効果がある設定ファイルだ。

# httpでアクセスしてきた人を強制的にhttpsに転送する RewriteEngine On RewriteCond %{HTTPS} off RewriteRule ^(.*)$ https://%{HTTP_HOST}%{REQUEST_URI} [R=301,L]

このファイルを edencode.jp と propeller7go.jp の両方に配置した。これで「保護されていない通信」の表示が完全に消えた。

NOTE

テスト送信とちょっとした発見

FTPで両サイトにファイルをアップロードし、実際にフォームから送信テストをした。

hello@edencode.jp と hello@7go.jp の両方にメールが届いたことを確認。ただ、最初はゴミ箱に入っていた。新しいドメインからの初めてのメールは、迷惑メールフィルターが反応することがあるらしい。実際には届いているので、実運用に問題はなし。

このセッションを通じて、ちょっと面白い一言が生まれた。

「みんなで一生懸命やってます。でも人間は一人。」

クラリス・クロコ・クローラーと旅するエデニーの孤独と面白さを一言で表した言葉。AIが3人いても、それを動かす人間は自分一人だ。

SUMMARY

edencode.jp と propeller7go.jp の2サイトに対して、コンタクトフォームのPHP化・SSL常時化(.htaccess)を施し、Xサーバーへ本番アップロード。メール受信も確認済み。

「🛸 ファーストコンタクト」という言葉遊びでフォームを演出できたこと、そして 「みんなで一生懸命やってます。でも人間は一人。」 というEdenCodeの本質を突いた一言が生まれた日でもあった。のっぱらに、小さな基地ができた。

ALL Web UEFN × Verse Asset Design Artwork