フレームデコ2
title
ウェブサイトつくった【後編】

ウェブサイト制作の後編です!
後編では、公開までの流れと公開後の調整について書こうと思います。大きく分けて、サーバーのやりとり、reCAPTCHAとGoogle Search Consoleです!

※ここに書いてあることは初心者の迷走なので、正しいとは限りません!真似しないでください!

サーバーとの格闘

ウェブサイトが完成したので、ついにレンタルサーバーを契約…。
調子に乗って独自ドメインも取ってしまった…。何と浅はかな…。
嬉しい半面、個人情報が漏れたりしてたらどうしようなどと不安でもあります。
しかし、サーバーにファイルをアップロードしない限り、URLを入れても何も表示されない!!!
怖い!!!でもやらなきゃ!!!行くぞ!!!!

と言っても大したことはしていないので、短く書こうと思います。
私はサーバー関係が詳しくないので、YouTubeを参考にして行いました。Visual Studio Codeのプラグインを使い、SFTPでまとめてファイルを送っています。一部のファイルだけ、読み取りや書き込みの設定を変えたかったので、レンタルサーバー側のFTPを使い、手動でアップロードしました。

しかし、一度だけサーバー関連で困ったことがありました。
あれは確か…reCAPTCHA(後で出てきます)を導入していたときのこと……。サイト内で正しく動くか確かめていたのですが……なんと!特定のページに移ると背景だけしか表示されないのです!

どうしよう(汗)!!!!バグかもしれない(涙)!!!!!
それから1時間以上設定やコードを確認しても、それらしきミスは見つかりません。むしろ他のスペルミスに気付いて落ち込まされるだけ…。しかし、ふとレンタルサーバーのFTPを見たときに原因がすぐにわかりました。

手動であげたファイルがない(怒)!!!!!!
つまり、原因は私!!!
ファイル更新のためにFTPで全ファイルを削除してから、SFTPでアップロードし直すという愚行をしでかした私のせいでした。というか、わざわざFTPで更新前にファイルを消す必要はないのです。Visual Studio Codeは更新されたファイルだけアップロードしてくれるから!
脳筋みたいなやり方で作ってたらいつかバックアップすら消し飛ぶぞ…。

その日寝る前に私はこの言葉を胸に誓いました。
「ダメ!全削除!」

こうして、サーバーとの付き合い方を学んだのでした。
次のページで、reCAPTCHAについて書きます。

このページではセキュリティについて少し書きます。
※ここに書いてあることは初心者の迷走なので、正しいとは限りません!真似しないでください!

reCAPTCHAの導入

憧れている方の個人サイトにCONTACTがあったので、私もつくったのですが、スパムが来ないか怖すぎる。ということで、CONTACTページにreCAPTCHAを導入したので、そのことを書きます。

「reCAPTCHA」とは、Googleが提供している無料のセキュリティサービスで、人間か不正な自動プログラム(bot)かを判定してくれるものです。無料枠では、月10,000件まで判定を行ってもらえます。個人サイトにメッセージを送ってくださる方は月に10人いるだけですごいと思うので、無料枠でも十分対応できると思います。contactフォームでのセキュリティを調べた際に一番導入しやすそうだったので、まずこれだけ入れてみました。

導入方法は以下の通りです。
①Google reCAPTCHAでサイトを登録
②表示されるサイトキーとシークレットキーを自サイトのPHPに組み込む(ChatGPT先生の力を借りながら)
③実際にページにreCAPTCHAのマークが表示されるか、reCAPTCHAの公式サイトで合計リクエスト数が変動しているかを確認

合計リクエスト数とは私のサイトにおいて、reCAPTCHAが判定した数、つまりメッセージを送った回数を指します。導入した直後は、合計リクエスト数が反映されず、焦っていたのですが、1日後に反映されました。完全に導入できているか確認するまでは少し時間がかかるかもしれません。(合計リクエスト数が32件もありました…焦ってメッセージを送りすぎてます)

reCAPTCHAを導入したことで、少しはセキュリティ良くなったかな…?と思っています。あまりSNSやサービスの利用を行わず、迷惑メールやスパムに困らされた経験はないのですが、怖いので来てほしくない…!こんな小さなサイトにスパム送らないでー!
しかし、reCAPTCHAが正常に働いているか見るために、来てほしい気持ちも少しだけあります。自分でスパム作るわけにはいかないし…。もしかして、こういう状況で狂科学者は生まれるのか…?

とはいえ、どんな手段を講じても不安は消えないので、時間が許せば他の手法も導入してみたいと思います。いい方法があれば教えてください!

次ページで、Google Search Consoleについて書きます。

このページではGoogle Search Consoleについて少し書きます。
※ここに書いてあることは初心者の迷走なので、正しいとは限りません!真似しないでください!

Google Search Consoleの登録

サイトができて、reCAPTCHAも導入できて完璧じゃん!と思い、試しにGoogleで自サイトを検索してみたのですが……ヒットしない(涙)。ヒットしなければ人が来ないので安心ですが、せっかく作ったならヒットするところを見てみたい!と思い、Google Search Consoleで自サイトを登録することにしました。

「Google Search Console」とは、Google検索でのウェブサイトの表示状況や掲載順位を無料で分析してくれるツールです。これに登録することで、検索エンジンに早くインデックス(登録)してもらいやすくなるそうです。どの検索ワードでヒットしているか分析できるらしいので、企業向けだと思います。

導入して2日…まだ望んだ結果は得られず、設定できていない部分もあるのですが、そのようなツールがあること自体知らなかったので勉強になりました。メタディスクリプション(ブラウザで検索したときにタイトルの下に出る説明文)を少ししか書いていないので、時間があるときに増やしてみようかと思います。
※まだ不明点が多いので、今後Google Search Consoleで良い結果が得られれば、追記したいと思います。

ーブラウザ様へー
漢字3文字でヒットする日を夢見て、私は今日もサイトにアクセスしています。
私のサイト名を覚えていただけますように。
ー無仁帰ー

さて、ウェブサイトの制作過程&運用過程を書きましたが、最後にまとめを書きたいと思います。

最後にまとめです。

サイト作ったまとめ

ここまでウェブサイトの制作過程と&運用過程を書きましたが、いかがでしたか?
きっと長文&サイトの青枠が邪魔という理由で、最後まで読む人はいないでしょう。誰にも読まれない想定で書こうと思います。

ここまで本格的にサイトを作ったことは初めてで、毎日困難に直面していましたが、作品の居場所と備忘録を残す場所ができてとても安心しています。あとはスパムとサイトの改竄、迷惑メッセージ、レンタルサーバーの停止……etcがなければ今後も幸せに運用できるでしょう。
今回は一からコーディングして作りましたが、おそらく最近の個人サイトはwordpressで作るのが主流だと思います。きっとその方が楽なんだろうな…と思いながら、制作していました。さすがに全部の仕組み作るのはきつかったです(涙)。しかし、一連の流れを経験したことで今後活かせそうな知識をたくさん学べたので、勉強という意味では価値があったと思います。また時間があれば、本サイトのデザインや表示、セキュリティなどなど改善していきたいと思います!

長文&稚拙な文章でしたが、ここまでご覧いただき、ありがとうございます!
今後も文章力改善を兼ねて更新しようと思うので、良かったら遊びに来てください!

フレームデコ2