観光者向けサイトなどの”場所”に関係する WEB サイトを作成する際に、日出や日没の時刻をWEBサイトに表示したいことがあります。 本稿では、そのような場合に利用できる太陽や月の位置に関する計算をしてくれる JavaScript ライブラリ「SunCalc」を紹介します。
SunCals
SunCalc は Vladimir Agafonkin 氏が GitHub で公開している JavaScript ライブラリです。 GitHub のプロジェクトはこちらです。 SunCalc は、日出・南中・日没などの時刻、太陽の位置などを簡単に計算できる JavaScript ライブラリです。
日の出・日没時刻を計算してみよう
それではさっそく SunCalc を利用して、日の出と日没の時刻を計算してみましょう。 ここでは例として、東京都港区お台場にある「お台場海浜公園」の日没時間を計算してみようと思います。 SunCalc では、計算したい場所の位置座標(緯度と経度)をパラメータとして利用しますので、あらかじめ目的の場所の位置座標を知っておく必要があります。 「お台場海浜公園」の位置座標は、緯度 35.6275256, 経度 139.7714723 です。
// 第一引数 : 日の出・日没を計算したい対象の日 // 第二引数 : 緯度 // 第三引数 : 経度 var times = SunCalc.getTimes(new Date(), 35.6275256, 139.7714723); window.document.write(times.sunset.getHours() + ":" + times.sunset.getMinutes());
上のコードを実行すると、この記事を執筆した日は「18:49」という日没時刻が算出されました。 このサンプルプログラムの1行目で返却値を times という変数に代入しています。 変数 times はオブジェクトで、上の例では sunset というプロパティにアクセスしているのがわかります。 sunset 以外にも以下のプロパティがあります。
| プロパティ | 説明 |
|---|---|
| sunrise | 日出時刻 (太陽の頭が地平線から現れる時刻) |
| sunriseEnd | 日出時刻 (太陽の全てが地平線から現れる時刻) |
| goldenHourEnd | 朝のゴールデンアワー(マジックアワー)が終了する時刻 |
| solarNoon | 南中時刻 (太陽の高さが一番高い位置にある時刻) |
| goldenHour | 夕方のゴールデンアワー(マジックアワー)が始まる時刻 |
| sunsetStart | 日没時刻 (太陽が地平線にくっつく時刻) |
| sunset | 日没時刻 (太陽の全てが地平線に沈む時刻) / 市民薄明開始時刻 (太陽が隠れても外で活動できる時刻) |
| dusk | 航海薄明開始時刻 |
| nauticalDusk | 天文薄明開始時刻 |
| night | 夜の開始時刻 |
| nadir | 夜の最も暗い時間の開始時刻 |
| nightEnd | 夜の終了時刻 |
| nauticalDawn | 朝の航海薄明開始時刻 |
| dawn | 朝の航海薄明終了時刻 |
利用上の注意
プログラムする上での注意点としては、JavaScript の日付型の特性上、利用しているマシンの日時設定(タイムゾーン)における時間が計算されます。 日本時間設定で動いているマシンなら日本時刻で計算結果が取得されます。 もしマシンに依存しない時刻を表示したいのであれば、タイムゾーンを考慮した時刻の変換が必要です。 本稿では割愛しますが「Moment Timezone」などのライブラリを利用すれば手間なく実現できるはずです。
おわりに
本稿では太陽の時刻に関する例を示して SunCalc を紹介しました。 他にも太陽や月の角度を計算する関数も用意されています。 詳しく知りたい方は、公式ホームページのサンプルプログラムをご覧になると良いでしょう。
