目を休めるサイトを作ってみた

エンジニアなので仕事中はずっと画面を、本を読むときはiPadをずっと見ています。
さすがにずっと近くばかり見ているので、遠くを見るときにピントが合いづらい感じがしてきました。
部屋の窓から遠くの山とかが見えればいいのですが、残念ながらそんな景色ではないので擬似的に遠くを見る効果が得られる簡単なサイトを作ってみました。
PCでも見れますが、慣れないうちはスマホやタブレットがおすすめです。

focusgram.net

立体視が良いらしい

2枚の同じような絵を寄り目で見ると文字が浮き出るような画像を見たことはありますか。簡単に言うとあれが立体視です。
脳は左右の目の微妙な見え方の違いから立体感や奥行きを感じるようになっているため、微妙に差異のある2つの画像を重ね合わせると立体に見えます。
この立体視のうちの平行法という見方をすると、近くを見ているのに遠くを見ているような効果があります。
視力回復しているかというとちょっとまだわからないですが、ピントは合いやすくなるような気はします。たぶん…。

ということでネットで調べてときどき眺めていたんですが、同じ画像を見ているとだんだん飽きてきます。
しかも文字が浮き出る系とかはむしろ目が疲れる気がするので、いい感じに立体視ができる風景画像とかがランダムで出てくると良いなという気持ちになってきました。
しょうがない、自分で作るか。

※サイトの方に説明はもう少し詳しく書いてあるので良かったら見てみてください

immersity AIで立体視画像が作れる

www.immersity.ai

そもそも立体視の画像ってどうやって作るんだろうと思っていたのですが、全部自動でやってくれるサービスがありました。
無料版だとウォーターマーク（透かし）が入って商用利用もできないのですが、課金をすれば商用利用ができます。月額とかではなくクレジット制なのもありがたいですね。
ちなみに画像の奥行きを解析するサービスなので、2D画像から簡易な3Dモーションに変換するのとかがメインっぽいです。
ChatGPT Plusに加入すれば画像生成ができるので、Dall-E 3で画像を作成→ immersity AIで立体視画像化という流れです。

Cloudflareは便利だぞ

画像さえ作ってしまえば普通に画像アプリとかで眺めても良いのですが、ランダム表示にしてWebサイトにしてもペラ1枚でできてしまうので、せっかくだし公開してみることにしました。
サイトをどこに置こうかな、レンタルサーバとかかなと考えていたのですが、それなりのアクセスでも無料で色々とオールインワンなのでCloudflareを選んでみました。
結論から言うととても便利でした。

ざっくり手順

ここからはこんなことをやったというのを簡単にメモします。詳しい設定方法などは書きません。

Cloudflareのアカウントを作る

メールアドレスで登録できます。登録時点ではクレカの情報とかも特にいりません。

ドメインを取る

Cloudflareのドメイン登録から簡単にドメインが購入できます。
仲介手数料みたいなのはないみたいなので良心的です。
ちなみにドメインは登録情報が公開されますが、見えるのは住所のうちの都道府県だけで他はCloudflare名義になるので個人情報の観点でも良いですね。

GitHubのリポジトリを作る

CloudflareがGitHubと連携できる機能があるので、コードはGitHubで管理します。
プライベートリポジトリでも問題なく連携できるので、とりあえずリポジトリを作っておきます。

ページを作る

Pagesで新しいサイトを作ります。
Gitに接続というボタンがとてもわかりやすく表示されているので、これに従って作ったリポジトリと連携します。
CI/CDの設定は変更できますが、普通にポチポチしていけばmainにプッシュ（もしくはマージ）すると勝手にデプロイしてくれます。便利だなー。
サイト名は別になんでもいいんですが、「【名前】.pages.dev」っていうドメインが勝手に公開されるのであんまり推測しやすいと変なルートで入ってくるかも…？

サイトを作る

今回はHTML+CSS+JSのシンプルなページです。特に変わったこともないですが、メタタグはちゃんと書いたほうが良いかなくらいです。
画像はサイト上で表示するロゴ、アイコン、OGP画像あたりが必要になります。

Google Analyticsのタグを埋め込む

アクセス解析がしたいので、GoogleAnalyticsにアナリティクスアカウントを作ってタグを埋め込みます。
詳しく書いてくれているページがたくさんあると思うので手順は省略。

GitHubにプッシュする

連携が済んでいれば勝手にデプロイしてくれます。

ドメインと紐づける

pagesのカスタムドメインのタブから取得したドメインとの紐づけを行います。
ポチポチするだけでCNAMEがプロキシされるようになって、もうできたの？と不安になる簡単さです。
これでもうサイトとしては普通に公開されています。

メールアドレスを作る

一応お問い合わせ用のメールアドレスを作ります。
Email Routingでアドレスを作成して、宛先を指定するだけで転送されるようになります。とても楽で良い。

Google Search Consoleに登録する

Google Analyticsはサイト内のアクセス解析ができますが、Google Search Consoleはどんなキーワードで検索されたかなどを見ることができます。また、サイトマップ送信などもできます。
今回は1枚ページなのでサイトマップは送らないですが、Google Search Consoleに登録しないとそもそもクローラーが来てくれないので検索にヒットしません。
こちらもあまり詳しい手順は書きませんが、ドメインで登録するとCloudflareのDNSレコードを登録をしますか？みたいに聞かれて簡単に登録できます。

ちなみにどこからも全くリンクを貼らなくても検索流入してきたりするのかなと思ってしばらく放置していたのですが、サイト名で検索しない限りヒットしないのでちょっと厳しそうですね。
流入があってこその評価ですからね。

Google AnalyticsとGoogle Search Consoleの連携

Google Analytics側の設定からGoogle Search Consoleと連携をしておくのが良いかと思います。
アナリティクス側で検索パフォーマンスなども一緒に見れるようになります。

SSLの設定

エッジ証明書の「常に HTTPS を使用」を有効にしておくとhttpsにリダイレクトされるので有効にしておきます。
ついでに「HTTP Strict Transport Security (HSTS)」も有効にしておくと良い気がします。

その他

今回特に設定していないですが、Cache Rulesの設定をしたり、DDoSのブロック設定をしたり、URLリライトをしたり、HTTPヘッダの設定をしたり、わりと何でも揃っています。さすが。

わりとサクッと公開できたぞ

というわけでサイト公開できました。
面倒なことはだいたいCloudflareがなんとかしてくれるのがとてもありがたいです。
画像を増やすのはそんなに大変ではないので、ときどき追加しようかな。

目を休めるサイトなので、広告とかを貼るのも違うよなと思ってマネタイズができていません。
アクセスが多くなれば来る人は画像をじっと見てくれると思うので、ウォーターマークのところにロゴとかを出すのも面白いかなとも思いますが。

現時点ではサイトの一番下に気持ちばかりのAmazonのアフィリエイトリンクを貼りました。心優しい人がリンクから何かを買ってくれることを願ってみようかと思います。
そんなに収益を得るようなコンテンツではないですが、微妙にコストはかかっているので維持のためにプラマイゼロくらいにはなると嬉しいですね。