あなたの概ねの位置情報から現在の空をCSSグラデーションで表示するサービス

 (sky.dlazaro.ca)
4 ポイント 投稿者 GN⁺ 2025-08-10 | 1件のコメント | WhatsAppで共有
  • ユーザーのIPアドレスを活用して、現在の自分の位置情報を推定する
  • その位置に合った空の色と雰囲気をCSSグラデーションで視覚化して表現する
  • 別途地図や複雑な入力は不要で、ウェブサイトにアクセスするだけですぐに結果を確認できる
  • インターフェースがシンプルかつ軽量なため、誰でも簡単にアクセスできる
  • 実際の天気情報は反映せず、位置ベースのタイムゾーンと太陽位置を中心に色を決定する

サービス概要

  • このウェブサービスは、ユーザーがアクセスした際に現在の概ねの位置（緯度・経度）をIPアドレスで推定する
  • 推定された位置情報と現地時間を用いて、太陽の位置およびタイムゾーンに応じた空の色味を計算する
  • 計算された空の色はCSSグラデーション形式でウェブサイトの背景としてレンダリングし、リアルタイムで空の雰囲気を表示する
  • 追加のデータ入力なしに、単にウェブサイトにアクセスするだけで自動的に動作する

機能および特徴

  • 地図、天気API、アカウント登録などの複雑な手順はない
  • リアルタイム可視化を実装: 現在地のタイムゾーン変化に応じて空の色が動的に変化する
  • CSSグラデーションのみで構成されているため、非常に高速で軽快なユーザー体験を提供する
  • 実際の危険な気象情報や雲、降水などは反映せず、基本的に太陽角度と時刻を中心としたアルゴリズムを適用する

利用目的および意義

  • 天気アプリや地図サービスのような複雑なものではなく、シンプルな視覚情報提供ツールである
  • ウェブベースのアートワークや個人のデモプロジェクトとしての活用価値が高い
  • ローカライズされた視覚的ヒントを自動提供するため、「今ここは空がどうだろうか」という疑問をすぐに解消するのに適している

関連記事

1件のコメント

 
GN⁺ 2025-08-10
Hacker Newsのコメント

  • キャリアの初期、3Dターンバイターンのナビゲーションソフトを作っていた頃、空の描画を担当した記憶がある

    • 上司は「昼は青、夜は濃い灰色の四角で処理すれば完了」と言っていたが、私は環境、緯度、経度、時間で変化する実際の空をしっかり描きたくて、Preetham論文[リンク]を参考に現実的な空のモデルを実装した

    • 星座はハードコーディングされた天体表で、処理速度もかなり良かった

    • ただ上の方々は、地平線がうっすら黄味がかるなどリアルな効果に驚き、「競合の空は青い」と言って私の実装を気に入らなかった。私の「自分で外を見ろ」という返答も通じなかった

    • 結局、全部消して青い四角だけを残した

    • この経験があるから、こういうサイトを見ると本当にかっこいいと思える

    • そのため、仕様書とデザインの重要性を理解した

      • 直感的に理解できる慣習が重要で、あまりに多くの視覚的ディテールを入れると混乱を増やすだけ
      • 空が青でなく薄暗くて黄色っぽくなると、空なのかページがまだ読み込み中なのか分からなくなる。星も同じで、夜には機能的な目的がない
      • このようなリアルな効果はGoogle Earthのような実世界ビューに合う。実際に作ってみると楽しいが、ナビゲーション向けビューならシンプルさと明確さが最重要。リアリティより実用性が優先される

    • 前に一緒に働いていた人から、Cobalt[リンク]のゲームで星システムを物理ベースで実装するのにかなり時間をかけたと聞いた

      • ユーザビリティに問題が出るなら、締め切り前にこうした要素を落とすこともできるが、こうした細かい要素が積み重なることで完成度が上がり、ユーザー側で探索する楽しさが生まれると考える

    • このような場合、趣味でプログラミングするよりも職業としてやる方がむしろ退屈に感じる

      • 時々会社でそんな素晴らしいものを作る機会はあるが、だいたいは上から「リアルな空でOKR指標が0.1%上がる」というような研究結果が出たときだけ本当に通る
      • ただ、楽しい仕事ができるニッチな領域は常にあり、それがゲーム業界が情熱に比べて低賃金・過労な環境になっている理由でもある

    • 経営陣がイノベーターの創造性を無視する、なんてこった典型的な愚かな経営だ

    • 最低でもイースターエッグとして入れることはできなかったのだろうか

      • Vincent Van Goghの絵は星座の実際の位置まで正確に反映されている、という説明をして、その着想でリアルな空色再現に挑戦したとアピールしていたらよかったと思う

  • 私たちは窓の内側に設置するセンサーを発売中だ。このセンサーは空の色を小さなコーン角で測定し、その結果をskylightと室内のwindow fixtureへ送信して、室内で同じ空の明かりを再現するソリューションだ[innerscene.com]

    • モニターで実装することもできるが、RGB光源ではなく全スペクトルを使わないため、室内光が均一にならないのが限界だ
    • さらに、現行コードの問題点は雲、靄、煙といった変数が反映されないため、実際の外の景色と違ってくる可能性がある（多くのHNコメントで指摘されている）
    • リアルタイム衛星画像を使えば部分的に補えるが、完全に正確にするのは難しく、最終的に我々は独自センサーを開発することになった
    • 市場には既に様々なCCTセンサーがあるが、通常は指向性＋散乱＋反射光のみを測定し、上限は約7500Kだが、実際の空は4万Kまで変わる
    • 実際のセンサー測定値で時間帯ごとに空色がどう変化するかを示すプ

  • meta http-equiv="Refresh"のHTMLタグが言及されているので笑ってしまう

    • 昔はページの自動リロードが必要ならこの方法しかなかった

    • このプロジェクトはフォーマル・ミニマリズムの秀逸な見本だと思う

    • 実際、"http-equiv"の意味は同等のHTTPヘッダーとして、"Refresh: 60"ヘッダーを送信しても同じ効果がある

    • frameset（フレームセット）機能を知ればもっと驚くだろう

    • 感謝している！そして申し訳ないが、私が生まれた頃にはすでに setTimeout(() => location.reload(), ...) が広く使われていた時代だった

  • 最近の最新Web技術を知らない昔ながらの開発者として、astro/cloudflare/wranglerの組み合わせで以下のコードがどのように動くのか気になっている

    • const { latitude = "0", longitude = "0" } = Astro.locals.runtime.cf || {};

    • cloudflareの機能がastroにラップされて緯度・経度を与えているように見えるが、どんな内部処理があるのか知りたい

    • ドキュメントも探したが明確な答えが見つからなかったので、詳しく説明してほしい

    • 内部処理が見えないのは、実際、魔法のように動作するからだ

      • AstroはVercel、Cloudflare、Netlifyなど、複数のサーバーランタイム用アダプターを提供しており、シンプルにプラグアンドプレイできる
      • Cloudflareアダプターは、さまざまなバインディングをAstro.locals.runtimeに公開し、その中のcfバインディングに緯度、経度など多様なリクエスト値が含まれる[リンク1, リンク2]
      • 一部のバインディングはCloudflare-Worker環境でない場合、ローカルでモック処理される

    • Cloudflareでユーザーの緯度・経度を（大まかにIPベースなどで）HTTPヘッダーに自動追加する機能を有効化できる[リンク]

      • 「この管理トランスフォームは訪問者の都市、国、大陸、緯度、経度情報をHTTPリクエストヘッダーに添付する」

  • サイトを開いて20秒間「いつ変わる？」と待っていたが、ふと今が真夜中だと気づいた

    • 夜はただ黒い画面だけが出るので、もう少し賢い誰かが追加してくれるといいなと思った

  • SunCalcの作者だ。自分のコードがこの用途で使われている例を見て、本当に嬉しい

    • 参考までに、suncalc.netはGoogle Maps APIトークンの有効期限切れでエラーを出している[suncalc.net]

      • 地図技術がよく分かるようなので、小さな提案としてProtomaps[リンク]への移行を検討するといい

    • 作者か貢献者かはさておき、なんとも素晴らしい作品で、本当に好き。こういったデモを見ると楽しい

  • ページをリロードし、JSを有効化し、再びリロードを繰り返したら、結局サーバーがダウンして表示されないのかと思った

    • コメントを読んでから、画面が黒いのは外が夜だったからだと気づき、結局最初からうまく動いていたことに気づいた

  • 予想よりもはるかに精巧な実装だ。研究論文[リンク]に基づいている

  • 携帯を窓に当てて確認したところ、実際の空（現在は快晴）と100%一致しており、妻まで呼んで見せた。ほんとうに素晴らしいと思う。祝う

  • ant.care[リンク]を作っている人だが、背景の空を実際の環境と同期することが目標だったものの、これまではかなりシンプルにしか実装していない

    • いつかこの方式も適用してみたい。Rust/WASMで全体をやるか、核心だけRustで実装して残りをJS/HTMLに任せるかはまだ悩んでいる