ハッカソンの2日間で3つのwebアプリを作った話

こんにちは、2z（Twitter： [@2zn01](https://twitter.com/2zn01) ）です。
今回、初めてちゃんとしたハッカソンに参加し、2日間で3つのwebアプリを作ってきました！

## 参加してきたハッカソン

2018年10月20日～21日の週末の2日間でNASAの「Space Apps Challenge」に参加してきました！


#### 「Space Apps Challenge」とは

> Space Apps Challengeは、米国航空宇宙局（NASA）や、宇宙航空研究開発機構（JAXA）などが公開している宇宙・地球環境・衛星関連のデータを使ったアプリを開発するハッカソンイベントである。世界各国の複数の都市で同時に開催されている。

* Wikipediaより    
https://ja.wikipedia.org/wiki/Space_Apps_Challenge


## テーマ

毎年、NASAからテーマが提示されます。      
今年のテーマは以下のサイトに翻訳された一覧がまとめられています。

* 横浜クイズ協会 NASA Space Apps Challenge 2018    
http://quiz.yokohama/spaceapps.html



これらのテーマのうち、チャレンジしたものは以下の3つです。

### 1. 【C-2】山火事マップ

市民が山火事を早期発見、通知、検証、追跡、視覚化に貢献するためのクラウドソーシングツールを構築してください。

### 2. 【B-1】地球アート作品

NASAの地球画像データを使用してアート作品を作成するか、画像を加工してユニークなアート作品を作成できるツールを作成してください。

### 3. 【A-3】ミッションインフォメーション

国際ロケット打上げ情報を追跡するためのツールを開発してください。



## 今回作ったもの

### 1. Disaster Map（災害マップ）

* テーマ：【C-2】山火事マップ


<blockquote class="twitter-tweet" data-lang="ja"><p lang="ja" dir="ltr">【作ったもの①】<br>Disaster Map（災害マップ）<br><br>災害の状況を写真でアップするとExifから位置を取得し、AIが写真からどヤバいレベルを分類して、ヤバいところほど赤くヒートマップで可視化します！<br>BingのAPI＋自力で学習データを集め、災害の被害度をディープラーニングで学習させました。<a href="https://twitter.com/hashtag/spaceapps?src=hash&amp;ref_src=twsrc%5Etfw">#spaceapps</a> <a href="https://t.co/pSPTDJXIds">pic.twitter.com/pSPTDJXIds</a></p>&mdash; 2z＠AIメーカー開発者 (@2zn01) <a href="https://twitter.com/2zn01/status/1054143200821006337?ref_src=twsrc%5Etfw">2018年10月21日</a></blockquote>
<script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>



### 2. Moon Emoji Art

* テーマ：【B-1】地球アート作品


<blockquote class="twitter-tweet" data-lang="ja"><p lang="ja" dir="ltr">【作ったもの②】<br>Moon Emoji Art<br><br>写真をアップロードすると、その写真を月の絵文字を使ったモザイクアートに変換するツールです！<br>月の絵文字への変換は以下の記事を参考にしました。<a href="https://t.co/n15KTyw6i7">https://t.co/n15KTyw6i7</a><a href="https://twitter.com/hashtag/spaceapps?src=hash&amp;ref_src=twsrc%5Etfw">#spaceapps</a> <a href="https://t.co/JQoDpHe23s">pic.twitter.com/JQoDpHe23s</a></p>&mdash; 2z＠AIメーカー開発者 (@2zn01) <a href="https://twitter.com/2zn01/status/1054146163580952576?ref_src=twsrc%5Etfw">2018年10月21日</a></blockquote>
<script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>



### 3. Tweet Rocketer

* テーマ：【A-3】ミッションインフォメーション

<blockquote class="twitter-tweet" data-lang="ja"><p lang="ja" dir="ltr">【作ったもの③】<br>Tweet Rocketer<br><br>Twitterからロケットの打ち上げに関するツイートを取得し、位置情報つきツイートをヒートマップで可視化。<br>以下のAzureサービスもシステムへ組み込められればと構想。<br>・Custom Vision Serviceで画像からロケット判定<br>・Text Analyticsによるツイート解析<a href="https://twitter.com/hashtag/spaceapps?src=hash&amp;ref_src=twsrc%5Etfw">#spaceapps</a> <a href="https://t.co/rnAxkXBXYw">pic.twitter.com/rnAxkXBXYw</a></p>&mdash; 2z＠AIメーカー開発者 (@2zn01) <a href="https://twitter.com/2zn01/status/1054149332813803521?ref_src=twsrc%5Etfw">2018年10月21日</a></blockquote>
<script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>



## 画面イメージ／仕組み

### 1. Disaster Map（災害マップ）

<img width="743" alt="disaster-map.png" src="https://qiita-image-store.s3.amazonaws.com/0/273248/553a2a0b-15ac-be4f-f091-e0681d94498e.png">

1. ユーザーが災害マップを作成
2. 災害の写真をとってシステムへアップロード
3. アップロードされた写真よりExifから位置情報を取得
4. 事前に学習させたディープラーニングの画像分類モデルから災害の被害度を数値化
5. 地図へヒートマップとして可視化（被害度が大きいところほど赤く表示する）

<img width="747" alt="disaster-map-2.png" src="https://qiita-image-store.s3.amazonaws.com/0/273248/24951916-60d8-81d0-9a60-0bea61f678d3.png">


### 2. Moon Emoji Art

<img width="664" alt="moon_emoji_art.png" src="https://qiita-image-store.s3.amazonaws.com/0/273248/b515acc6-c323-8618-b6a2-e74b6d76f69a.png">

画像を月の絵文字へ置き換える処理については、以下の記事を参考に作らさせて頂きました！

* 月で絵を描きたいだと？それならpythonに任せなさい🌝    
https://qiita.com/wataoka/items/261fc12c956a517049d8

これをもとにwebアプリ上から利用できるようにし、アップロードされた画像を月の絵文字へ置き換え、ブラウザ側でhtml2canvasのJSライブラリを使って画像化しています。

<img width="744" alt="moon_emoji_art-2.png" src="https://qiita-image-store.s3.amazonaws.com/0/273248/e9cfa7db-e440-a1f0-0a81-46bbf479527a.png">

<img width="715" alt="moon_emoji_art-3.png" src="https://qiita-image-store.s3.amazonaws.com/0/273248/98dee8c7-f120-fa2e-4663-913d2c248b4d.png">


### 3. Tweet Rocketer

<img width="713" alt="tweet_rocketer.png" src="https://qiita-image-store.s3.amazonaws.com/0/273248/4c6aca74-4f50-d97d-ba45-a510de30d17e.png">


1. Twitterから"launch"というキーワードをもとに民間ロケット発射のツイートを取得
2. ツイートの位置情報をもとに地図へヒートマップとして可視化
3. 該当するツイートが多い場所ほど赤く表示される


## 最後に

このハッカソンで2つの賞を頂き、NASAのグローバル審査へ出して頂けることになりました！

<blockquote class="twitter-tweet" data-lang="ja"><p lang="ja" dir="ltr">2日間の NASA Space Apps Challenge Toyohashiで2つの賞を頂きました！<br>なんとNASAのグローバル審査へ出して頂けることに！<br><br>ちなみにチームのモットーは「Fight for win!」<br>超絶ださいｗｗ けど、なんとか勝ちました！<a href="https://twitter.com/hashtag/spaceapps?src=hash&amp;ref_src=twsrc%5Etfw">#spaceapps</a> <a href="https://t.co/hA3Wgcds9J">pic.twitter.com/hA3Wgcds9J</a></p>&mdash; 2z＠AIメーカー開発者 (@2zn01) <a href="https://twitter.com/2zn01/status/1054027487728951302?ref_src=twsrc%5Etfw">2018年10月21日</a></blockquote>
<script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>



今まで作ってきたものがベースにあったので、なんとか2日間で3つのwebアプリを作ることができました！ただし、とりあえず作ったレベルなので、まだ一般公開できるようなものではございません。

また、開発ばっかりに目がいってしまったのが反省点です。
ハッカソンなのでもっと周りとうまく協力しながらできればと思います。

<blockquote class="twitter-tweet" data-lang="ja"><p lang="ja" dir="ltr">2日間で3つも作るなんて常人の沙汰ではなかったです。。<br>発表の30分前に何とか、とりあえず動くところまでしか持っていけなかったので悔しい。<br>また、開発ばっか気をとられてる時点でハッカソン参加者としてダメだったと反省。。<br><br>でも開発サポートにより、ちょまどさん賞もらえたので、すべて良し！！ <a href="https://t.co/ho1cWpvGWh">https://t.co/ho1cWpvGWh</a></p>&mdash; 2z＠AIメーカー開発者 (@2zn01) <a href="https://twitter.com/2zn01/status/1053998287089364993?ref_src=twsrc%5Etfw">2018年10月21日</a></blockquote>
<script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>


今回のハッカソンでプロトタイプ作りをした際に感じたこととして、自画自賛にはなっちゃいますが、、ディープラーニングの画像分類をしようとしたときに、AIメーカーがサクッと使えて結構便利でした！

とりあえず作ってみるというときには手軽に利用できるので、ぜひ皆さんも気軽に遊んでみてください！

■AIメーカー
https://aimaker.io/

<blockquote class="twitter-tweet" data-lang="ja"><p lang="ja" dir="ltr">AIメーカーでオープンイノベーションを！！<br>みんなのAIプラットフォームとして自分の考えている構想、実現したいことをまとめましたので、ぜひご覧ください！<br>（あと、1いいねで600いいね😀）<br>on <a href="https://twitter.com/Qiita?ref_src=twsrc%5Etfw">@Qiita</a> <a href="https://t.co/73fNAWyBtz">https://t.co/73fNAWyBtz</a><a href="https://twitter.com/hashtag/AI%E3%83%A1%E3%83%BC%E3%82%AB%E3%83%BC?src=hash&amp;ref_src=twsrc%5Etfw">#AIメーカー</a></p>&mdash; 2z＠みんなのAI「AIメーカー」開発中 (@2zn01) <a href="https://twitter.com/2zn01/status/1028299281139023872?ref_src=twsrc%5Etfw">2018年8月11日</a></blockquote>
<script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>


興味をもって頂けましたら、ぜひフォローやいいね、リツイートで応援お願いします！

* Twitter： [@2zn01](https://twitter.com/2zn01)


##### ・画像認識

<blockquote class="twitter-tweet" data-lang="ja"><p lang="ja" dir="ltr">今話題のAIをweb上で誰でも気軽に作れる「AIメーカー」を開発しました！<br>①AIに覚えさせたいタグを入力<br>②タグから自動で画像データを収集<br>③AIがデータから学習<br>の３ステップで誰でも簡単にAIを作れます！<br>動画では手相占いのAIに挑戦！<br>みんなもAIを作って遊んでみてね！<a href="https://t.co/66DFU7GRZ2">https://t.co/66DFU7GRZ2</a> <a href="https://t.co/ie1LmioyA1">pic.twitter.com/ie1LmioyA1</a></p>&mdash; 2z＠AIメーカー (@2zn01) <a href="https://twitter.com/2zn01/status/1019741210217365504?ref_src=twsrc%5Etfw">2018年7月19日</a></blockquote>
<script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>

##### ・文字起こし

<blockquote class="twitter-tweet" data-lang="ja"><p lang="ja" dir="ltr">みんな～！「AIメーカー」で文字起こし機能をリリースしたよー！<br>以下の方法で簡単に文字起こしを試せるので、ぜひ使ってみて～！！<br>📺YouTubeから文字起こし<br>🔗画像、音声、動画から文字起こし<br>🎙️録音で文字起こし<br><br>AIをうまく使って少しでも面倒な作業から解放だぁ～！<a href="https://t.co/qo13Wo6Yli">https://t.co/qo13Wo6Yli</a> <a href="https://t.co/gsRigVROnK">pic.twitter.com/gsRigVROnK</a></p>&mdash; 2z＠みんなのAI「AIメーカー」開発中 (@2zn01) <a href="https://twitter.com/2zn01/status/1030652280914173953?ref_src=twsrc%5Etfw">2018年8月18日</a></blockquote>
<script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>