テーマを選んでハッカソン！~オンライン開発合宿vol.6~

7月のハッカソンテーマは「テーマを選んでハッカソン！」

下記の複数のテーマから1つ選び、ハッカソンを行ないます。
今回のテーマはこちら！

①世の中を楽しくする
②世の中を便利にする
③無駄開発
④スマホアプリ
⑤ゲーム
⑥オンラインコミュニケーション
⑦開発/スキル支援
⑧ハード/組み込み
⑨インフラ/セキュリティ
⑩AI/データ解析
⑪事業家目指してます

引用：https://note.supporterz.jp/n/n96996b7caa67

（チーム代表ひとことでめっちゃチームメンバーに褒めてもらえた(´；ω；`)ｳｩｩ）

技育展とは

サポーターズ

技育展2022

技育展は、アウトプットの促進を目的としたエンジニアを目指す学生のためのピッチコンテストです。自らのアウトプット（作品）を…

技育展は、アウトプットの促進を目的としたエンジニアを目指す学生のためのピッチコンテストです。
自らのアウトプット（作品）を展示（プレゼン）し、もの創りの楽しさ、厳しさ、可能性を知ることができます。

※各テーマ12作品を事前審査にて選抜

引用：https://talent.supporterz.jp/geekten/2022/

使用技術

django

python

jquery

javascript

css/html

bootstap

django-channels

leaflet.js

mapbox

heroku（無料プラン終了によりチームメンバーの自宅サーバーを使用）

Github

heartrailsAPI　（ジオコーディング、フロントでの住所選択に使用）

openmeteoAPI（wbgtの計算に必要な気温、湿度、輻射熱の計算に使用）

国土地理院API（フロントからの住所選択をバックにもっていき、それを用いた逆ジオコーディングに使用）

技術選定理由

・全員がPython使いだったこと、APIやオープンデータを使用するためデータ分析のしやすいPythonをそのままかけるDjangoを選定

・マップclickには私がもともとある程度経験のあったleaflet.jsを選定

・ヒートマップにはleafletより見た目がおしゃれ、timeスライダーを使用した記事が多く参考にできそうなものも多いということでmapboxを使用

・モダンなフロント技術を覚えなおす時間がなかったため、知見のあった生cssなどを使用

・部品等が検索しても多くヒットする、比較的古くからあるJquery,生js,生cssを使用

工夫点・機能

気温を表示するだけでなくwbgt（暑さ指数）を計算し表示

temperature = body["hourly"]["temperature_2m"][index]
humidity = body["hourly"]["relativehumidity_2m"][index]
direct_radiation = body["hourly"]["direct_radiation"][index] / 1000
diffuse_radiation = body["hourly"]["diffuse_radiation"][index] / 1000
windspeed_10m = abs(body["hourly"]["windspeed_10m"][index] * 1000 / 3600)

wbgt = (
0.735 * temperature +
0.0374 * humidity +
0.00292 * temperature * humidity +
7.619 * (direct_radiation + diffuse_radiation) -
4.557 * (direct_radiation + diffuse_radiation) ** 2 -
0.0572 * windspeed_10m - 4.064 )

wbgts_list.append(round(wbgt, 3))

暑さ指数全国map

マップclick→任意の地点の警戒度を表示

※暑さ指数や気温の任意の地点を見れるのは競合他社にはない機能

※24時間後までグラフでチェックもできる

住所選択から任意の地点の警戒度表示

暑さ情報の共有（Twitter）機能　※「暑さ指数」の認知度をUP

地点ブックマーク機能

詰まった点

gunicornインストール後、procfileの記述が正しくかけておらず、デプロイできない現象が起きていた（凡ミス）

web: gunicorn TemperatureSenseForecastMap.wsgi

https://devcenter.heroku.com/ja/articles/django-app-configuration

.envファイルを用意しておらず、APIkeyなど隠さないといけないものをgithubにもろ出ししていた時期があった

デプロイしているのにcssなど反映されていない状態

※STATIC_ROOTなど設定し忘れている部分があり、デプロイしているのにcssなど反映されていない状態で悩んだ時期があった（凡ミス）

herokuのR15 – Memory quota vastly exceeded (メモリ割り当てを大幅に超過しました)エラーが発生した

※wbgt（暑さ指数）を更新しているときにmatplotlibのグラフも生成していおり、それがherokuのメモリ消費の原因だった（分離させたら無事治まった）

共通のヘッダ/フッタの導入ができていなかった

※mapboxやleafletなどcssやbootstrapのバージョンがかち合うことがあり、結局時間もなかったためインラインframeでかちあわないように処理した

トップページがごちゃごちゃしており、UIUXがよくなかった

※ごちゃごちゃ感を分離させるべく説明ページを別に用意

https://wbgt-map.herokuapp.com/about/

ヒートマップがおかしな分布になっていた

※当初DD形式で扱っていたが、実はAPIから取れるアメダス気象観測所の緯度経度がDMM形式だったためそれに気づかずおかしな分布になっていた

座標に関して
緯度、経度はアメダス気象観測所の緯度、経度を表しています。国土地理院発行の5万分の1の地図等から世界測地系を用いて求めており、単位は0.1分です。形式は度分DMMですので使用用途によって緯度経度の値を表計算ソフトなどで変換してください。DMM形式からDD形式にするためには「=度のセル+分のセル/60」の数式で変換することができます。

緯度経度の一般的な形式
度（DD）: 41.40338, 2.17403
度分秒（DMS）: 41°24’12.2″N 2°10’26.5″E
度分（DMM）: 41 24.2028, 2 10.4418

今後の課題

SNSの「暑さ」に関する投稿を地点ごとに表示（ついったーAPI 等で会得してきたい）

計算式を変更し暑さのみならず寒さ対策機能もやってみたい

モバイルアプリ版も作ってみたい

まとめ

全体を通しgit,githubを用いたチーム開発、短期間で仕上げる流れなど学べるものはたくさんありましたが、何より開発の楽しさを再認識できた・かけがえのない仲間に出会えたことが一番の収穫だったと思います。

今後時間があれば機能の追加、仲間と飲みに行く（皆住がばらばらなためオフ会できていない）などしたいと考えています。

【Tempature Sense Forecast Map】技育展優秀賞　vol6ハッカソン努力賞

概要

vol6ハッカソンとは