現在地から月の方角がわかるWEBアプリをリリースしました
初投稿でいたらぬ点もあるかもしれませんが、よろしくお願いします。
現在地から月がどの方向にあるか、満ち欠けはどのくらいかがわかるWEBアプリを作成しました。
2021年6月21日追記
URL移転しました！画像とURLが違いますが気にしないでください。あと今コード見たらひどすぎて泣けてきますね…笑
使い方
使い方は簡単です！使用している端末から、ブラウザの位置情報を許可してボタンを押すだけで簡単にわかります。
(赤く塗りつぶしているところにはその時の日時がリアルタイムで表示されています。)
現時刻で月の位置を出力するを押すと、こんな感じで表示されます。
月のおおよその満ち欠けと、方角が出力されます！
自分で日時を指定して、月の位置と満ち欠けを表示することもできます。
正確な方角を知りたいときは詳細に表示されている角度を見ていただくと、正確な角度がわかります。(コンパスアプリなどに書いてある方角にあわせてください)
補足にも記載していますが、現在地を外部に送信したり、製作者が位置情報を取得できるような設計にはなっていません。安心してお使いください。
なぜ作ろうと思ったか
このアプリを作成しようと思ったきっかけはある満月の日のことでした。
〜LINEにて〜
友「今日の月めっちゃきれいだよ！」
私「ほんとに！？確認するわ！」
私 （月ってどの位置にあるんだろう…ベランダから見える位置にあるのか、それとも玄関から外に出た位置にあるのか…）
ここでスマホで調べるのですが、今の月がどの位置にあるのかがわかるサイトがないんですよ。あるにはあるんですが、緯度・経度を入力しないと使えなかったり…
ここで私は「ないなら作るか」となりました。
実装方法
ここからは少し技術的なお話になります。
JavaScriptで本アプリは開発しました。
はじめになにで作るかを考えたときに、月の位置を計算で求めるならやはり計算しやすい(私が使い慣れている)Pythonで作ろうかと考えました。
「あ、そういえばJavaScriptで1つくらいアプリ作れって教授に言われてたな」と思ってJavaScriptで作ることを決意します。まぁこれといって深い理由はないということです。
次に月の位置を計算で求める方法を探しました。この記事を見つけました。
私「ふむふむ、なるほど。完全に理解した。(理解したとはいっていない)」
はい。私はあまり数学が得意ではないんですよ。
ん〜頑張って実装するか〜となっていた時に、「JavaScript 月の位置 ライブラリ」とGoogle先生に聞いてみます。そしたらあるんですよ。
mourner氏が作成しているライブラリです。こちらをありがたく使わせていただいて、実装しました。
あとは端末の位置情報を取得するGeolocation APIを使用して、緯度経度を取得します。
取得したあとはmourner氏のsuncalcライブラリを使って取得したラジアンを度に変換したり、なんやかんやします。
Geolocation APIはHTTPS通信ではないと位置情報を取得できないので、HTTPSに対応したサーバでテストする必要があります。開発段階からサーバと独自ドメインを用意するのはお金の面から嫌だったので、Azure for Student のApp Serviceを利用してテストしていました。HTTPSに対応したサーバを用意してくれるのでありがたいです。あとはApp ServiceにGitHubのリポジトリを関連付けて完了です。
このApp Service × GitHubのおかけで爆速で開発・テストが出来ました。リポジトリにpushするとAppServiceのほうに反映されるので、とてもありがたかったです。JavaScriptをほとんど触ったことがなかった私が3日程度でリリースまで出来ました。これも技術をブログやQiita等で解説してくれている先人たちのおかげです。ありがとうございます。
今後の改善
このあとは、コンパス機能を本アプリに導入して、同じページ内だけで月の位置が特定出来るようにしたいです。今のままだと、コンパスを使うか外部のコンパスアプリを使わないといけないので…
他にも現在地だけではなく、住所を指定して月の位置がわかるようにしたいです！
おわりに
最後まで読んでいただいて、ありがとうございます！
面白いなと思っていただけたら、「スキ」やSNSでの拡散をお願いします！
この記事が気に入ったらサポートをしてみませんか？