Web / Server
ウェブサイトを公開していると、ブラウザのアドレスバーに「保護されていない通信」と表示されることがある。これは、サイトのURLが http:// のままで、https://(暗号化通信)に切り替わっていないときに起きる。
Xサーバー(レンタルサーバー)のSSL機能はすでにONにしていたのに、なぜか警告が消えない。調べると、httpからhttpsへの自動リダイレクト(転送)が設定されていないことが原因だとわかった。
それと同時に、コンタクトフォームの問題も気になっていた。従来の実装は「送信ボタンを押すとメールアプリが起動する」という方式で、デザインが途中で途切れてしまう。今日はその2つをまとめて解決することにした。
まず、コンタクトフォームの仕組みを変えた。今回作ったのは3ファイルのセット。
contact.php — フォームの送信内容を受け取って、指定のメールアドレスに送るプログラム(PHPはサーバー上で動く言語)。
thanks.html — 送信が完了したあとに表示されるページ。10秒後にトップページへ自動で戻る。
contact.html — コンタクトフォームの画面。後でprofile.htmlの下部に統合した。
これによって、送信から完了まですべてサイトのデザイン内で完結するようになった。ブラウザの外に飛ばされることなく、体験がつながる。
フォームのデザインも磨いた。アイコン選びには少し時間がかかった。絵文字の「✉️」は環境によって白く潰れることがあるし、Font Awesome(アイコンフォント)の衛星のマークは複雑すぎる。
最終的に選んだのは「🛸」——UFO。
この言葉遊びがすごく気に入った。宇宙人への最初の接触という意味の「ファーストコンタクト」を、お問い合わせフォームにかける。edencode.jpらしい演出になった。
「保護されていない通信」が消えなかった原因を整理すると、こういうことだった。
Xサーバーの管理画面でSSL証明書(暗号化のための仕組み)は発行済みだった。だから https://edencode.jp に直接アクセスすれば鍵マークが出る。
でも http://edencode.jp のままアクセスしてくる人は自動でhttpsに切り替わらない。これが問題の正体だった。
解決策は .htaccess というファイルを使うこと。これはサーバーに置くと「このサイトへのアクセスルールを変える」という効果がある設定ファイルだ。
このファイルを edencode.jp と propeller7go.jp の両方に配置した。これで「保護されていない通信」の表示が完全に消えた。
FTPで両サイトにファイルをアップロードし、実際にフォームから送信テストをした。
hello@edencode.jp と hello@7go.jp の両方にメールが届いたことを確認。ただ、最初はゴミ箱に入っていた。新しいドメインからの初めてのメールは、迷惑メールフィルターが反応することがあるらしい。実際には届いているので、実運用に問題はなし。
このセッションを通じて、ちょっと面白い一言が生まれた。
クラリス・クロコ・クローラーと旅するエデニーの孤独と面白さを一言で表した言葉。AIが3人いても、それを動かす人間は自分一人だ。
edencode.jp と propeller7go.jp の2サイトに対して、コンタクトフォームのPHP化・SSL常時化(.htaccess)を施し、Xサーバーへ本番アップロード。メール受信も確認済み。
「🛸 ファーストコンタクト」という言葉遊びでフォームを演出できたこと、そして 「みんなで一生懸命やってます。でも人間は一人。」 というEdenCodeの本質を突いた一言が生まれた日でもあった。のっぱらに、小さな基地ができた。