Back

/ 7 min read

個人エロWebサイトの作り方

時には、noteだのTwitterだのPixivだのを使いたくない気分の時もあるわけである。

いにしえのインターネットでの作品公開は、自分でHTMLを書いて、画像を配置し、サーバを借りてFTPでアップロードしていたのである。クソ面倒なので全くもっておすすめできるようなものではない。

それでもやりたい人はどうするのか。

サーバ

無料、広告なし、高速。この条件だと今おすすめできるのはCloudFlareだ。謎の会社のように思えるがプログラマーにとってはかなりの有名企業であり、信用がおける。少なくとも簡単に潰れたりはしない。

この会社が出しているサービスにCloudFlare Pagesがある。これは事実上無料無広告のWeb公開スペースであり、一ファイル25MBまでという制限があるものの、相当に太っ腹だ。

どうして無料なのか。CloudFlareの本業はCDNといって、主に企業のWebサイトを世界中で高速に表示するサービスだ。それで利用シェアやプログラマーからの人気を上げておく必要があり、入り口として無料 or 安価なサービスを提供している。

ただしCloudFlare Pagesは非プログラマーには難しすぎるかもしれない。英語だし。その場合は国内のさくらのサーバでも購入すればいいと思う。月121円のプランで十分。

CloudFlareの利用規約は理解が正しければ下記の通り。PROHIBITED USESが該当かと思われる。珍しいことにアダルト利用自体は禁止されている様子がない。

https://www.cloudflare.com/ja-jp/website-terms/

ただし児童虐待や違法コンテンツは禁止されているし、基本的にUSの法律に準拠することになると思われる。未成年のエロを描く人は、置ける場所がかなり限られるという現状を知っておいた方が良いと思う。

フレームワーク

日記とか画像一覧をHTMLとして出力しなくてはならない。手書きしてもいいのだけれど今時は一般的ではない。Markdownというもう少し簡易なフォーマットで書くタイプが人気だ。

いくつか検討して、今のところ Astro というフレームワークがシンプルで良いと思ったので採用した。

Empty templateを選択して雛形を出力すると下記のようなファイルが出力される。

---


---


<html lang="en">
  <head>
    <meta charset="utf-8" />
    <link rel="icon" type="image/svg+xml" href="/favicon.svg" />
    <meta name="viewport" content="width=device-width" />
    <meta name="generator" content={Astro.generator} />
    <title>Astro</title>
  </head>
  <body>
    <h1>Astro</h1>
  </body>
</html>

見た目はHTMLだし、実際ここにHTMLを書いていけばWebページが出来上がる。

画像の置き方は少し変わっている。たとえばtomoco.pngというファイルを置きたいなら…

---
import TomocoImage from "./tomoco.png";
import { Image } from "astro:assets";
---


<html lang="en">
  <head>
    <meta charset="utf-8" />
    <link rel="icon" type="image/svg+xml" href="/favicon.svg" />
    <meta name="viewport" content="width=device-width" />
    <meta name="generator" content={Astro.generator} />
    <title>Astro</title>
  </head>
  <body>
    <h1>Astro</h1>


    <Image src={TomocoImage} alt="ともこちゃんのイラスト" width="500" />
  </body>
</html>

HTMLだと <img> タグを使うのだが、Astroは代わりに <Image> タグを使っている。 こうするとAstroが内部的にpngファイルを自動で縮小して .webp という効率的なフォーマットに変換してくれる。まあ要するに高速に表示できるようによしなにやってくれるわけだ。

また、importという仕組みを使うと、HTMLの断片を部品化して使い回す（コンポーネント化）ことができるようになる。 ここでは詳しい説明はしないけれど、メニュー部分だけを共通化したりして、コピペで増やす必要がないように作るのが今時のやり方だ。

大まかな流れ

流石にプログラマー以外には厳しいと思うし細かな説明はしない。本当にやりたい人がいたらそんだに直接聞いて下さい。

  • CloudFlareのサインアップ
  • Node.jsをPCにインストールする
  • VSCodeをPCにインストールする
  • ターミナルを開く（黒い画面。プログラマー以外の人には難関）
  • npx wrangler initで新規プロジェクトを作成
  • Framework Starter Astro Emptyを選択
  • あとのオプションは適当に
  • index.astroを編集
  • npm run dev でプレビュー
  • npm run deploy でアップロードする

以上でWebページとして公開される。

CloudFlare以外で公開する場合は、distフォルダに出力されたHTMLをアップロードすれば同じことができる。 この「引越しが簡単」というのが実は一番重要なポイントだ。たとえばPixivやTwitterから他へ引っ越すのはとても大変なことだ。 これは格好つけた用語で「ポータビリティ」というけれど、ポータビリティが高いということは、不満があればいつでもよそに逃げることができる。 つまり自分の自由を自分で守ることができるというわけだ。

理想的には、非プログラマーでも上記手順ができるくらい簡単になれば良いのだけど、 どちらかというと複雑化する方向に向かっているなあ、と思う。特にエロサイトは場所も限られるし大変なんだよな〜。 まーそんなもんなのね、と思って下さい。