LoginSignup
8
9

More than 5 years have passed since last update.

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

Last updated at Posted at 2018-10-25

こんにちは、2z(Twitter: @2zn01 )です。
今回、初めてちゃんとしたハッカソンに参加し、2日間で3つのwebアプリを作ってきました!

参加してきたハッカソン

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

「Space Apps Challenge」とは

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

テーマ

毎年、NASAからテーマが提示されます。

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

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

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

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

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

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

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

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

今回作ったもの

1. Disaster Map(災害マップ)

  • テーマ:【C-2】山火事マップ

2. Moon Emoji Art

  • テーマ:【B-1】地球アート作品

3. Tweet Rocketer

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

画面イメージ/仕組み

1. Disaster Map(災害マップ)

disaster-map.png

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

disaster-map-2.png

2. Moon Emoji Art

moon_emoji_art.png

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

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

moon_emoji_art-2.png

moon_emoji_art-3.png

3. Tweet Rocketer

tweet_rocketer.png

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

最後に

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

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

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

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

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

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

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

・画像認識
・文字起こし
8
9
2

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
8
9