「推し活でファンサイトを作った話」シリーズでは、高校生の自分がどのようにコストを抑えてサイトを作成していったかを技術的視点で記していきます。

今回のテーマ

とりあえずアクセスできるサイトを作ったところまで
2024/05/15ぐらいからの話。

ドメイン

ドメインはXdomainで取得しました。3年契約で4000円ぐらいだったはず。
すでに自分は自分の名義のサイトのドメインをここで取得していたため、安かったです。
すでにドメインを持っているなら、購入場所はそろえるべきでしょう。

お名前.comやCloudflare等どこで買ってもほぼ同じです。

💰費用 1600円程度/年

サーバ

シンフリーサーバを使用しました。以前GithubPages経由で最初のドメインを登録していたためすぐ終わりました。

AWSを使用しなかった理由として、

いくら金がかかるかわからない
設定をミスると大変なことが起こりうる
推しのファンの層的にアクセスは日本国内からにほぼ限定される (ため分散型じゃなくていい)

事が挙げられます。

世界中からすぐにアクセスできる事よりコストと安定性を取りました。新しいものが必ず最高だとは限らないので。

シンフリーサーバは無料で使うことができます。

シンフリーサーバのメリット

ずっと無料
無料でSSLも使える
広告なし
WordPressなどを簡単に導入できる (使わなかったけど)

シンフリーサーバのデメリット

容量が10GB (ほかの自分のドメインと合計) であるため湯水のように使えない
サポートがない
MySQL・PHPのバージョンなどに制約がある
無料でついてくるSSLしか使えない
メールがない

デメリットの中で問題なのは「無料でついてくるSSLしか使えない」ことです。
後々CDNを導入するときにちょっと厄介なことになりました。

逆にSQLなんていくつも使うもんじゃないし、PHPも新しいサイト運営で5.xなどを使う義理もないし、SSL以外の問題は気になりませんでした。

メールがない問題は後で解決します。

💰費用 0円/∞

CDN

CDNはCloudFlareの無料プランを使いました。

CloudFlareのメリット

脅威を緩和してくれる(はず)
AIクローラーへの対応なども簡単に行える
アクセス数などを簡単にみられる (Google Search Consoleやサーバのやつより詳しい)
メール機能を追加できる (ただし受信のみ)

CloudFlareのデメリット

シンフリーサーバの無料独自SSLの更新を邪魔してしまう
場合によってはアクセス時にチャレンジを求められ、訪問者に恐怖を与える (推しの対象層は若い人が多いため特に重要)

サーバ側のSSLの更新に失敗し、メールでこんなのが送られてきます。

━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
【シンフリーサーバー】■重要■ [無料独自SSL]SSLサーバー証明書
 (hogehoge.net) 更新未完了のお知らせ
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━

シンアカウントID ： hogehgoge
メールアドレス　　　： hogehoge@gmail.com

平素は当サービスをご利用いただき誠にありがとうございます。
シン/wpX カスタマーサポートでございます。


サーバーID「hogehoge」で利用中の下記SSLサーバー証明書に関し、
当サポートで有効期限の延長をするための更新作業を行いましたが、
正常に完了することができませんでした。

────────────────────
■SSL更新情報

【SSLブランド】　 ： Let's Encrypt
【独自IPアドレス】： -
【サーバーID】　　： hogehoge
【コモンネーム】　： hogehoge.net
【サイトURL】　　 ： https://hogehoge.net/
【有効期限日】　　： 2024年12月13日
────────────────────

解決策は、手動でCloudFlareを一時的に無効にして手動で更新をおすことです。面倒です。

チャレンジが表示される件については、地域や条件などを設定できるので、そこでうまいこと頑張ります。

💰費用 0円/∞

CMS

CMSソフトウェアは基本的に使っていません。WordPressは手に余るので手書きにしました。
手動でhtmlを書いてFilezillaで投稿しています。

ただし、いくつかの部分で動的な要素があります。

※今後、独自開発のCMSを導入する予定があります

例1 配布エリア

二次創作の配布エリアでは、記事一覧と個別ページの生成に自作のPHPシステムを使用しています。
細かいニーズなら自分とChatGPTで作るぐらいがちょうどいいです。

配布エリアのリスト部分。
"abellate.net/upload/index.php"が、uploadフォルダ内のすべてのフォルダからデータを参照してリストを生成している。

配布エリアの個別ページ部分。
"abellate.net/upload/*/define.txt"を参照してページを生成している。
※define.txtは見られることを想定してないので化けてますが平気。

注意ですが、自分とChatGPTで作ったようなシステムは自分が管理しているデータを扱うことに限定させることが重要です。

今回は実装していないため縁はありませんが、他人が自由にアップロードできるような場所ならばウイルスや変なインジェクションの可能性を考えないといけません。

例2 Wiki

一部ページにはMediaWikiを用いたWikiページがあります。
これについては別パートで解説します。

💰費用 0円/∞

まとめ

現状ではファンサイトをドメイン代以外は無料で持続的な運用ができています。

自分で把握できないモダンなものは採用しない
オーバースペックにしない
対象の層を絞る (今回なら日本国内の特定の推しを推している層向け)
金にはケチであれ
AIは使っても問題ない場所で使い倒す

ことで、高校生にも簡単にサイトを作成できます。