驚きのCSS技！現在地の空をリアルグラデーションで表現！
引用元：https://news.ycombinator.com/item?id=44846281
HTML Day 2025向けに、CSSグラデーションで現在地の空を表示するWebサービスを作ったよ。色のシミュレーションは大気吸収・散乱係数を使ってオンデマンドで生成。クライアントJavaScriptなしで毎分更新されるんだ。
ソースコードはGitHubにあるよ: https://github.com/dnlzro/horizon
HTML Dayについてはここね: https://html.energy/html-day/2025/index.html
すごいね。昔、3Dナビゲーションソフトで空を描くのが仕事だったんだけど、先輩は「昼は青い四角、夜は濃い灰色の四角でいい」って。でも俺は頑張って、環境や時間に基づいてリアルな空モデルを作ったんだ。星も入れたし速かったよ。
でも上層部には「競合の空は青いのに！」って不評で、結局青い四角にしろって言われちゃった…悲しいけど、このサイトは素晴らしいね！
Preethamの論文はここ: https://courses.cs.duke.edu/cps124/fall01/resources/p91-pree…
革新的な人を「バカ鞭」で叩き潰すんだね。最高のマネジメントだ。
仕様とデザインが重要ってことだね。すぐに理解できる慣習があって、複雑すぎる視覚表現は混乱を招くよ。空が霞んでたら地図が読み込み中か迷うし、余計な認知負荷がかかるだけ。星も夜には機能的意味ないでしょ。
Google Earthみたいな惑星ビューなら素晴らしいけど、ナビゲーションには現実性よりシンプルさと明確さが最優先だから、これは逆効果だね。
商業ソフトウェア開発の根本的なテーマとして、企業はこういう細かい革新を求めてないってことを痛感するよ。9割の会社は競合を真似てチェックリストを消化してるだけ。顧客が返品しないレベルの品質しか気にせず、ひたすら早くソフトを作らせて、みんなでボーナスもらってジェットスキーに乗りたいだけなんだ。
もし「棚の裏側まで磨きたい」タイプの開発者なら、超レアな会社を見つけるか、趣味でやるしかないね。
「仕様とデザインが重要」って話に加えて、「オーディエンスを知る」って言葉も当てはまるね。「豚に真珠」を投げる意味はないよ。
あと、製品に加えたどんな凝った機能も、その後維持する必要があるってことだよ。その機能を開発した人が会社を辞めた後でさえね。
でも、たまに上層部が実際のユーザーとは違ったり、理解してなかったりすることもあるよね。このケースだと、上層部は室内でアプリを見て開発者の仕事ぶりを評価してたかもだけど、実際のユーザーは車の中で本物の空と並べて「現実とどれだけ一致するか」って視点で見てたはずだよ。
そうだね、もし太陽を描くなら黄色に、雲のない日中の空を描くなら青にするべきだ。いつもそうとは限らないけど、もし空がアプリの主役じゃないなら、リアルな空はただの邪魔になるだけだよ。
でも、そういうところがソフトウェアを「楽しい」ものにするんだよ。開発者の評価、モチベーション、生産性、製品への愛着も大きく高まるしね。
でもまあ、機能のチェックボックスを埋めることしか気にしないなら…どうぞ、不幸な人たちとクソみたいなソフトウェアを作って。でも、倒産する準備はしておきなよ。
星の位置が変わるには何千年とかかるから、GPSのユーザーがそこまで車を使うわけないし、気にする必要ないんじゃない？って思うよ。
昔の同僚がゲーム『Cobalt』でリアルっぽい星の物理演算にめっちゃ時間かけたんだってさ。Usabilityの都合でそういう細かいこだわりが消えるのはわかるけど、それが最終製品の魅力になることも多いんだよね。URL: https://en.wikipedia.org/wiki/Cobalt_(video_game)
面白いけど、もし本気なら、変わるのは星じゃなくてソフトウェアのフレームワークとか、新しい画面サイズ、色の深度、アンチエイリアス用にグラフィックライブラリをアップグレードしたときのバグとかのことだよ。
「太陽は黄色に描くべき」って話、昔の空はどんだけ汚かったら太陽が黄色に見えたんだろうね。太陽を黄色く見せるガスって何？呼吸するのが地獄だったんじゃないかな。
要するに、リアルなスカイボックスってGPSソフトには良くないってことだよ。様式化されたモードの方が、背景色が予測しやすくて、その上に何か表示するときに便利なんじゃないかな。
ああ、勘違いしてるね。君はユーザーが開発者の視聴者だと思ってるんだろ！って皮肉だよ。
皮肉なことに、今イングランド南部にいて空は快晴なのに、サイトではもっと暗くて美しい夕焼けになってるみたいだよ。まあ、実際は1時間くらいしかずれてないけどね。
一番困るのはさ、Neil DeGrasse Tysonから「お前の空は間違ってる！」ってメッセージが来ることだよね。URL: https://duckduckgo.com/?t=ffab&q=neil+degrasse+tyson+gives+j…
これがOP（記事の作者）が学んだ教訓なんじゃないかな！
誰も頼んでないことに時間をかけすぎだよな。空の正確な描写はクールだけど、今回は不要だし、イノベーションでもない。家をリフォームする時、角を丸くするのにやたら時間かける職人みたい。んで、”客はバカばっか”って文句言うんだろ？
大企業では、細かいとこまで気にしないってのは違うんだよな。新機能作っても、その後のサポートやセキュリティ、レビューが大変なんだ。担当者が辞めたら誰が面倒見るんだよ？スタートアップが成功するのは、長期サポートを気にせず「YOLO」してるからってのもあるよね。
これはプロとしてありえない態度だよな。プログラマーは職人だけど、システィーナ礼拝堂の配管工みたいなもんだ。仕事は自己満足のためじゃないし、自分のエゴのために壮大なものを作るなんて、プロとして未熟だよ。俺が一番苦労して学んだ教訓だね。
それは全く違うだろ。イノベーションは、色々と試してるところから生まれるもんだぞ。
俺も開発者とマネージャー両方の経験があるけど、そんな単純な話じゃないんだよ。車のナビみたいに安全が大事なものは、シンプルが一番だし、法律や責任も絡む。俺も過去にWiFiアプリ作ったけど、会社のプロセス無視したら潰された経験があるんだ。でもマネージャーとしては、やる気ある奴は応援してたぜ。
俺も仕事で人がやりすぎちゃう問題に直面するけど、難しいよな。情熱を奪いたくはないけど、プロジェクトには範囲があるから。”ただの青い四角を描いて”って指示が無視されがちだよね。
すでに売られてるデバイスには関係ないな。将来のデバイス開発者がもし扱えないって言うなら、そいつらはクビにするべきだろ。
会社での意思決定って、管理職の誰かが”わざとダメにしよう”って決めることが多いんだよ。それに抵抗すると、燃え尽きるか、クビになるかのどっちかだな。
システィーナ礼拝堂の配管工って例えだけど、配管にも品質の幅があるんだよ。細かい点が職人の腕を示すんだ。俺がやり方にこだわるのは、エゴじゃなくて、ちゃんとやらないと後で俺が直すことになるからだ。プロダクト側が技術負債の解消時間くれず、新機能ばかり要求するのはマジで失礼だよな。
色んなとこから来てるよ。R＆Dへの大規模投資とかね。何の話かによるけどさ。
デベロッパーは真実と美を混同してるみたいだね。俺たちはありのままより、こうだったらいいなって空を見たい時があるんだ。これは美的な問題で、「誰が計算できるか」じゃない。「やったね、大気中の粒子量を正確にシミュレートしたから、このスモッグのひどい冬の朝は文字が読めないよ！」ってね。でもさ、gpがやったことは最高だと思うし、いつもリアリズム全開モードにしたいな！
もっとコメントを表示（1）
＞「あまり知られてないmeta http-equiv=”Refresh” HTMLタグ」ってさ。俺は隅っこで骨が砕けるのを笑いながら見てるよ。俺が始めた頃は、ページを自動更新したかったらこれしかなかったんだ。素晴らしい仕事だね！形式的なミニマリズムの最高の例だよ。
もちろん、「http-equiv」ってのは、このタグが同等のHTTPヘッダーの代わりってことだから、「Refresh: 60」ヘッダーを送れば同じことができるよ :)
確かに、Apacheの設定とか、ホスティングプロバイダーにやってもらう必要があったらね。頼み方を知ってて、待つのも平気で、プロバイダーがやり方を知ってたら…って感じだけどさ。
何を言ってるのか分かってないのは君の方だと思うな。まず、ヘッダーはリクエストじゃなくてレスポンスに追加する必要がある。次に、多くの環境（マネージドホスティングとか）では、レスポンスにヘッダーを追加する簡単な方法（というか、方法自体が）ないんだよ。
＞「多くの環境（マネージドホスティングとか）では、レスポンスにヘッダーを追加する簡単な方法（というか、方法自体が）ない」って話だけど、それは改善されつつあるよ。ほとんどのサーバーレスホスト（このサイトが使ってるCloudflareも含む）は、「(req: Request) =＞ Response」パターンに従ってて、これは定義上、ヘッダーの送信を許可してるからね。
何言ってるんだ？ 非静的ホスティングなら、プレーンなPHP関数でヘッダーを指定できるだろ。どんな基本的な共有ホスティングでも、20年＋前からそういう制御を提供してるぞ。
それってサーバーの上書き用のドットファイルでできたっけ？なんだっけ、.htaccessとかだっけ？
Apacheの設定とかホスティング業者とやり取りするのって大変だったんだよ。そういうのがわかってて頼んだとしても、待たされたり、向こうがやり方を知らなかったり、やる気がなかったり…昔の共有ウェブホスティングって今の基準からするとびっくりするくらい貧弱だったんだ。だから俺のLinodeアカウントが2004年にできて以来、今や酒が買える年になったってわけ。月20ドルでウェブサーバー設定をある程度自由にできるようになったのは、当時としてはめちゃくちゃ価値があったんだ。俺も当時、自分で共有ウェブホスティングを管理してたから（ウェブデザインの仕事と一部かぶってたんだ。客によってはBYOが好きだったからね）、管理者が扱いにくいからって責める気はないよ。あの頃はセキュリティなんて後回しにされてたし、みんなそうせざるを得ない理由があったんだ。でも、クライアントにちょっとヒントを出して、そういう面倒な手続きを全部スキップするのが魅力的だった理由が、これで少しはわかったんじゃないかな。
でもそれってドットファイルのポイントだったんじゃないの？ルート設定にアクセスしなくてもvhostsがデフォルトのサーバー設定を変えられるようにするためだったんでしょ。Vhosts専用に設計されたわけじゃないかもしれないけど、俺の主な使い方はそれだったし。
マジで意味わかんないんだけど。質問しただけじゃん。気分を害したならゴメン。質問したからって、お前の知識を疑ってるわけじゃないっての。個人的な経験から明確にしたかっただけだよ。質問に答える時間がないとか、全能のthrowanem様の発言を疑うなんて失礼だ、って思うならネットに投稿するのやめた方がいいんじゃない？
いや、それはN-Gate（安らかに眠れ）の方が近いよ。これ見てみて。
http://n-gate.com/hackernews/
Nginxで試したことある？add_headerが全然思った通りに動かないのがわかるよ。それに、パフォーマンスとかセキュリティの問題でドットファイルでの上書きも許してないしね。
サーバープッシュってのもあったね。
https://www.oreilly.com/openbook/cgi/ch06_06.html
framesetsの存在を知ったらどうなるか楽しみだね。
ありがとう！
年寄り扱いするわけじゃないけど、setTimeout(() =＞ location.reload(), ...)が広く使われるようになった頃、俺まだ生まれてなかったと思うわ。
全然気にすんなよ、俺だけじゃなくてさ。
どの世代も経験を通して年を取ることを学ぶんだよ。
お前ら若いのが、俺がとっくに忘れたことを独自に再発見するのを見るのが、俺にとってはいつも喜びなんだ。
正直、ちょっとかわいいね。
http-equivのこと、すっかり忘れてたわ。
これ開いて20秒くらい何か起きるの待ってたんだけど…
あっ、ここ今夜中だったわ、って思い出した。
俺より賢い誰かが、夜空に星を追加して、ただの真っ黒じゃなくしてくれるといいな。
星図の投影を分割してオーバーレイとして適用する方法を考えてたんだ。
あまり頻繁にやらないから素早くはできないけど、どうやればいいかは想像つく。
ゲーム開発の人は星図に座標を適用する仕組みを素早く作れそうだけど、純粋なCSSでやるなら、SVGの正方形として座標付きで全部エクスポートして、JSでページに繋ぎ合わせる必要があるだろうね。
昔、シンプルなWebベースの夜空ビューアを書いたよ[1]。データファイルから750個の明るい星と月を座標で描画するんだ。
D3.jsを使ってクライアント側でSVGレンダリングしてるけど、サーバー側でSVGファイルにレンダリングするよう簡略化もできる。
星を追加するなら投影法を決める必要があって、ブラウザの縦横比も考慮しないといけないのが主な問題点だと思う。
[1] https://github.com/mpetroff/nightsky
作者への提案なんだけど、屋外で空が真っ黒な場所ってないと思うんだ。
グレーが良いかどうかもわからないけど、星とか、夜の雲とか、それかやっぱりグラデーションとか？
https://www.google.com/search?sca_esv=58e7983bf9f21fcd&udm=2…
めっちゃクールだね！
俺たちは窓の内側に取り付けて、空の色を測定して室内の天窓や照明器具に送信するセンサーを開発中なんだ（innerscene.comを見てね）。これで屋内で全く同じものを再現できる。
今のコードの問題点は、雲や霞、煙をモデル化してないから、レンダリングされた空が外と違うことだね（HNのコメントでも指摘されてる）。衛星画像で部分的に修正できるけど、超正確にするのは難しいから、俺たち独自のセンサー開発につながったんだ。
市販のCCTセンサーは指向性＋拡散＋反射光しか測れないけど、空の色は40,000kまで上がるからね。
ここに実際のセンサー読み取り値から一日を通して空の色がどう変化するかのプロットがあるよ。30秒間隔だから、素早く変化する。
https://www.innerscene.com/built_pages/cs_specsheet/cct/cct_…
もっと情報はこちら：
https://www.innerscene.com/SpecHelp/CircadianSky/cct/cct.htm…
最新のウェブ技術に詳しくない昔からの人間なんだけど、const { latitude = ”0”, longitude = ”0” } = Astro.locals.runtime.cf || {};がどうして動くのか知りたいな。
AstroでCloudflareの機能を使って緯度経度を提供してるのはわかるんだけど、実際にどういう仕組みでそれらが手に入るのかが、ドキュメントをかなり調べても見つからなかったんだ。詳しく教えてくれない？
目に見える仕組みがないから、それこそ魔法みたいなんだよ！Astroは色々なサーバーランタイム（例えばVercel、Cloudflare、Netlify）向けのアダプターを提供していて、基本的にはプラグアンドプレイなんだ。
CloudflareのアダプターはAstro.locals.runtimeを通じてたくさんのバインディングを公開してるんだよ。これらは各リクエスト時にアクセスできるんだ。cfバインディングには、緯度経度を含む受信リクエストのプロパティが入ってるんだ。
これらのバインディング（少なくとも一部）は、Cloudflare Workers以外の環境でローカル開発する時もモックされるよ。
[1] https://developers.cloudflare.com/workers/wrangler/api/#supp…
[2] https://developers.cloudflare.com/workers/runtime-apis/reque…
Cloudflareの魔法を使わないで、完全にクライアント側でこれをやる方法って何かアイデアあるかな？
時間ベースで十分で、緯度はロンドンみたいな感じで近似値でいいんだけど。
素晴らしい説明だったよ、ありがとう。
Cloudflareには、ユーザーのIPアドレス（と他の要因？）に基づいておおよその緯度経度をHTTPヘッダーとして元々のリクエストに挿入する機能を有効にできるんだ。
「このマネージドトランスフォームは、訪問者のIPアドレスに関する場所情報（都市、国、大陸、経度、緯度など）をHTTPリクエストヘッダーに追加します。」
https://developers.cloudflare.com/network/ip-geolocation/
Suncalcの作者だけど—僕のコードがこんな風に使われてるのを見るのが本当に大好きだよ、シェアしてくれてありがとう！
ちょっとした注意なんだけど、君の素晴らしいhttps://suncalc.net/がGoogle Maps APIトークンの期限切れでエラーを表示してるよ。
地図技術には深い知識があるのは知ってるけど、もしよかったらGoogle MapsからProtomapsに切り替えることを検討してみない？https://github.com/protomaps/protomaps-leaflet
じゃあね！
もっとコメントを表示（2）
うん、あのウェブサイトはLeafletの最初のバージョンをリリースするよりも前に最後に更新したと思う。今はすごく忙しいけど、近いうちにそこに取り掛かって全部現代化したいと本気で思ってるよ。
作者なの、それとも貢献者？
それにしても、こんなに素晴らしい作品は大好きだよ！
14年前に書いたんだ！https://github.com/mourner/suncalc/
ちょっと放置しちゃってるけど、近いうちに手入れするつもりだよ…
予想以上に高度だね。この技術は、この研究論文に基づいているらしいよ: https://github.com/ebruneton/precomputed_atmospheric_scatter…
スマホを窓にかざしたら、妻を呼んで確認してもらったんだ。今の晴れた空と100%一致してるって！本当にすごいね、おめでとう！
ページを更新して、JSを有効にして、また更新して…結局、過負荷で読み込めないんだと思って諦めたんだ。でも、コメントを読んで気づいたんだけど、外が夜だから背景が真っ黒なだけで、最初からちゃんと動いてたんだね…
ああ、これ、まさに僕がhttps://ant.care/で欲しかったものなんだ！アリの巣の背景を、ユーザーの現在の環境を反映するようにしたかったんだけど、単純なアプローチしかできなかったんだ。いつか君のアプローチを取り入れてみるかもね！Rust/WASMで全部やるか、Rustでコアシミュレーションだけやって、残りはJS/HTMLに任せるか、まだちょっと迷ってるけどね。
これ、スマートホームのダッシュボードの背景にしたら最高だね！
地下室のフェイク窓に使うとすごく良さそうだね！
北緯60度では、今の時期のこの時間にしては暗すぎるね。でも、今日の午前中はバッチリ合ってて、すごくクールだったよ！
おお、ライブデスクトップの壁紙にしたらどうかな！
これ、1995年頃にIthaca NYにあった、同じようなウェブページを思い出すな。そのページは、ただの静的な灰色だったけどね。
ノートPCを窓のそばに置いたら、空がドンピシャでびっくりしたよ！ Chrome Dev Toolsを開いても何もなかったのが一番衝撃だったな。
最近、山火事の煙がひどくて、空への期待が変わっちゃったよ…天気も考慮できたらどうかな？
それはかなりの依存関係になっちゃうね。空は緯度／経度と現在の日時だけで計算できるよ。天気を加えるなら外部の天気サービスに問い合わせることになるからね。
便利だね、実際の空を見なくて済むし。
これってhttps://html.energy/html-day/2025/index.htmlの背景が今の空を表示してるの？ ポストにもGitHubリポジトリにも明記されてないから、ちょっと混乱したよ。
追記：これhttps://sky.dlazaro.ca/だね！ OP、HNポストとGitHubリポジトリの最初にこれ入れて！ グッドジョブ。
こういうちょっとした情報があるから、HNはほとんどの場合、最高のインターネットの場所なんだよ。これは本当にクールだね。Chromiumの新しいタブの背景に設定できないか試してみるつもりだよ。
もし気に入ってくれたら、このiOS/iPadOS用ショートカットで、この素敵なツールを基に壁紙を現在の空に設定できるよ：https://www.icloud.com/shortcuts/c8ba254a0272453cbe39357b144…
最後の（または唯一の）iDeviceのホーム画面が“image”タイプに設定されてるか確認してね。
すごくクールだね、でも夜に開いたら真っ黒だったよ。時間を調整して、違う時間帯だとどう見えるか確認する方法はあるかな？
今試したんだけど、外は一面完全にグレーなのに、sky.dlazaro.caでは澄み切った青空になってるよ。このズレはどこから来てるんだろうね！ コンセプトは超ナイスだけどね！
現在の天気状況を考慮してくれたらクールだね。サイトが表示した空より、今はもっとグレーだよ。
