ハクソク

世界を動かす技術を、日本語で。

Show HN: あなたの近くの現在の空をCSSグラデーションで表現

289日前原文(sky.dlazaro.ca)

概要

  • HTML Day 2025向けに 新しいウェブサービス を開発
  • 現在地付近の 空の色 をCSSグラデーションで表示
  • 大気吸収・散乱係数 を用いた色のシミュレーション
  • クライアント側JavaScript未使用 で毎分更新
  • GitHubに ソースコードと詳細情報 を公開

HTML Day 2025向け「horizon」ウェブサービス概要

  • HTML Day 2025イベント用の 独自ウェブサービス の開発
  • 現在地の緯度・経度から空の色を CSSグラデーション でリアルタイム表示
  • 色の計算には 大気吸収係数 と 散乱係数 を利用
  • サーバーサイド処理 のみで、クライアント側JavaScriptを一切使用しない設計
  • サービスは 毎分自動更新、常に最新の空の色を反映

技術的特徴

  • IPアドレス などからおおよその位置情報を取得
  • 物理モデル に基づく色のシミュレーション
    • 大気中の光の吸収・散乱を考慮
    • 時刻や太陽高度による色変化を再現
  • CSSグラデーション で表現されたビジュアル
    • 軽量かつ視覚的に美しい表現
  • JavaScriptなし で動作
    • クライアント側の負荷軽減
    • セキュリティやアクセシビリティの向上

ソースコード・追加情報

  • GitHubリポジトリ: https://github.com/dnlzro/horizon
    • 実装詳細や技術解説
    • 導入手順や利用例のドキュメント
  • プロジェクトページ: https://html.energy/html-day/2025/index.html
    • デモやイベント情報の掲載

今後の展望・応用可能性

  • 気象データ連携 によるさらなるリアルさの追求
  • 教育用途 や デザインツール としての応用
  • 他の ノーJavaScript Webサービス 開発の参考例

Hackerたちの意見

あまり知られていない meta http-equiv="Refresh" HTML タグ ああ、気にしないで。私はここで骨が粉々になるのを見ながら、苦笑いしてるから。昔は、自動でページをリフレッシュさせたければ、これが唯一の方法だったんだ。素晴らしい作品！フォーマルなミニマリズムの最高の例だね。

└

ありがとう！それと、あなたを年寄りに感じさせたくはないけど、setTimeout(() => location.reload(), ...) が広まった時、私はまだ生まれてなかったと思う。

└

フレームセットのこと聞いたら、楽しみだな！

すごい！キャリアの初期に、3Dのターンバイターンナビゲーションソフトを作ってたんだけど、その時の仕事の一つが背景の空を描くことだったんだ。チームの先輩が、「昼は青い長方形、夜は暗い灰色の長方形を描いて終わりでいいよ」って言ったんだけど、もちろん私は難しい方を選んで、環境や緯度、経度、時間帯に基づいた空のレンダリングに関する文献を調べたんだ。その時は Preetham の「A Practical Analytic Model for Daylight」を参考にして、ソフト用に完全にリアルな空モデルを作ったよ。ハードコーディングした天体表を基に、目立つ星も追加したし、かなり速かったんだ。でも、上層部はもちろんそれを嫌がって、なぜ地平線がかすんだり、黄色っぽくなるのか混乱してた。「うちの競合の空は青い！」ってね。「目を使って外を見ろ」って答えは気に入らなかったみたい。結局、全部捨てて青い長方形を描けって言われた :( それを言いたかっただけ、サイトの出来は素晴らしいよ！

└

面白い（でも面白くない）話 :)

└

イースターエッグとしてもダメなの？ビンセント・ヴァン・ゴッホの絵が星の位置を正確に描いているって言って、それにインスパイアされて空の色を再現したって売り込めたかもしれないのに。

└

Cobaltで働いてた元同僚が言ってたんだけど、ゲームの空に星を実装するのにめっちゃ時間かけたらしいよ。リアルっぽい星の物理も考慮してたみたい。使いやすさの問題があるなら、そういう細かい部分を削るのも分かるけど、そういう小さな要素が積み重なって、最終的にはすごく大事な部分になるんだよね。見つけたり探検したりするのが楽しいし。

└

アヒルを追加すればよかったのに。

└

バカな発明家を叩きのめすの、いいマネジメントだね。

ノートパソコンを窓のそばに置いたら、ぴったりだった。何が一番驚いたかって、Chromeのデベロッパーツールを開いたら、何も表示されなかったこと。

これを開いて、何かが起こるのを20秒くらい待ってた… そしたら、ここは真夜中だってことを思い出した。

└

もしかしたら、私より賢い誰かが夜空に星を追加してくれるかもね。真っ黒じゃなくなるし。

思ったよりも洗練されてるね。研究論文に基づいてるみたい。

窓にスマホを当てたら、妻を呼んで確認してもらったんだけど、100%一致したよ（今は晴れてる）。すごいね、おめでとう！

これ、スマートホームのダッシュボードの背景にしたら最高だね！

おお、これをライブデスクトップ壁紙にしたらどうかな！

お、いいね！実はこれ、https://ant.care/のためにすごく具体的に欲しかったものなんだ。アリの巣の背景の空をユーザーの現在の環境に反映させたかったんだけど、単純なアプローチしかできなかった。いつか君のアプローチを取り入れようかな :) Rust/WASMで全部やるべきか、コアのシミュレーションだけRustでやって、できるだけJS/HTMLに任せるべきか、まだちょっと迷ってる。

美しいね、ありがとう！