tag:crieit.net,2005:https://crieit.net/tags/hackathon/feed Crieitでタグ「hackathon」に投稿された最近の記事 2018-11-02T16:08:43+09:00 https://crieit.net/tags/hackathon/feed tag:crieit.net,2005:PublicArticle/14586 2018-10-27T06:46:52+09:00 2018-11-02T16:08:43+09:00 https://crieit.net/posts/2-3-web <p>こんにちは、2z（Twitter： <a target="_blank" rel="nofollow noopener" href="https://twitter.com/2zn01">@2zn01</a> ）です。<br /> 今回、初めてちゃんとしたハッカソンに参加し、2日間で3つのwebアプリを作ってきました！</p> <h2 id="参加してきたハッカソン"><a href="#%E5%8F%82%E5%8A%A0%E3%81%97%E3%81%A6%E3%81%8D%E3%81%9F%E3%83%8F%E3%83%83%E3%82%AB%E3%82%BD%E3%83%B3">参加してきたハッカソン</a></h2> <p>2018年10月20日～21日の週末の2日間でNASAの「Space Apps Challenge」に参加してきました！</p> <h4 id="「Space Apps Challenge」とは"><a href="#%E3%80%8CSpace+Apps+Challenge%E3%80%8D%E3%81%A8%E3%81%AF">「Space Apps Challenge」とは</a></h4> <blockquote> <p>Space Apps Challengeは、米国航空宇宙局（NASA）や、宇宙航空研究開発機構（JAXA）などが公開している宇宙・地球環境・衛星関連のデータを使ったアプリを開発するハッカソンイベントである。世界各国の複数の都市で同時に開催されている。</p> </blockquote> <ul> <li>Wikipediaより<br /> <a target="_blank" rel="nofollow noopener" href="https://ja.wikipedia.org/wiki/Space_Apps_Challenge">https://ja.wikipedia.org/wiki/Space_Apps_Challenge</a></li> </ul> <h2 id="テーマ"><a href="#%E3%83%86%E3%83%BC%E3%83%9E">テーマ</a></h2> <p>毎年、NASAからテーマが提示されます。<br /> 今年のテーマは以下のサイトに翻訳された一覧がまとめられています。</p> <ul> <li>横浜クイズ協会 NASA Space Apps Challenge 2018<br /> <a target="_blank" rel="nofollow noopener" href="http://quiz.yokohama/spaceapps.html">http://quiz.yokohama/spaceapps.html</a></li> </ul> <p>これらのテーマのうち、チャレンジしたものは以下の3つです。</p> <h3 id="1. 【C-2】山火事マップ"><a href="#1.+%E3%80%90C-2%E3%80%91%E5%B1%B1%E7%81%AB%E4%BA%8B%E3%83%9E%E3%83%83%E3%83%97">1. 【C-2】山火事マップ</a></h3> <p>市民が山火事を早期発見、通知、検証、追跡、視覚化に貢献するためのクラウドソーシングツールを構築してください。</p> <h3 id="2. 【B-1】地球アート作品"><a href="#2.+%E3%80%90B-1%E3%80%91%E5%9C%B0%E7%90%83%E3%82%A2%E3%83%BC%E3%83%88%E4%BD%9C%E5%93%81">2. 【B-1】地球アート作品</a></h3> <p>NASAの地球画像データを使用してアート作品を作成するか、画像を加工してユニークなアート作品を作成できるツールを作成してください。</p> <h3 id="3. 【A-3】ミッションインフォメーション"><a href="#3.+%E3%80%90A-3%E3%80%91%E3%83%9F%E3%83%83%E3%82%B7%E3%83%A7%E3%83%B3%E3%82%A4%E3%83%B3%E3%83%95%E3%82%A9%E3%83%A1%E3%83%BC%E3%82%B7%E3%83%A7%E3%83%B3">3. 【A-3】ミッションインフォメーション</a></h3> <p>国際ロケット打上げ情報を追跡するためのツールを開発してください。</p> <h2 id="今回作ったもの"><a href="#%E4%BB%8A%E5%9B%9E%E4%BD%9C%E3%81%A3%E3%81%9F%E3%82%82%E3%81%AE">今回作ったもの</a></h2> <h3 id="1. Disaster Map（災害マップ）"><a href="#1.+Disaster+Map%EF%BC%88%E7%81%BD%E5%AE%B3%E3%83%9E%E3%83%83%E3%83%97%EF%BC%89">1. Disaster Map（災害マップ）</a></h3> <ul> <li>テーマ：【C-2】山火事マップ</li> </ul> <blockquote class="twitter-tweet" data-lang="ja"><p lang="ja" dir="ltr">【作ったもの①】Disaster Map（災害マップ）災害の状況を写真でアップするとExifから位置を取得し、AIが写真からどヤバいレベルを分類して、ヤバいところほど赤くヒートマップで可視化します！BingのAPI＋自力で学習データを集め、災害の被害度をディープラーニングで学習させました。<a target="_blank" rel="nofollow noopener" href="https://twitter.com/hashtag/spaceapps?src=hash&ref_src=twsrc%5Etfw">#spaceapps</a> <a target="_blank" rel="nofollow noopener" href="https://t.co/pSPTDJXIds">pic.twitter.com/pSPTDJXIds</a></p>— 2z＠AIメーカー開発者 (@2zn01) <a target="_blank" rel="nofollow noopener" href="https://twitter.com/2zn01/status/1054143200821006337?ref_src=twsrc%5Etfw">2018年10月21日</a></blockquote> <h3 id="2. Moon Emoji Art"><a href="#2.+Moon+Emoji+Art">2. Moon Emoji Art</a></h3> <ul> <li>テーマ：【B-1】地球アート作品</li> </ul> <blockquote class="twitter-tweet" data-lang="ja"><p lang="ja" dir="ltr">【作ったもの②】Moon Emoji Art写真をアップロードすると、その写真を月の絵文字を使ったモザイクアートに変換するツールです！月の絵文字への変換は以下の記事を参考にしました。<a target="_blank" rel="nofollow noopener" href="https://t.co/n15KTyw6i7">https://t.co/n15KTyw6i7</a><a target="_blank" rel="nofollow noopener" href="https://twitter.com/hashtag/spaceapps?src=hash&ref_src=twsrc%5Etfw">#spaceapps</a> <a target="_blank" rel="nofollow noopener" href="https://t.co/JQoDpHe23s">pic.twitter.com/JQoDpHe23s</a></p>— 2z＠AIメーカー開発者 (@2zn01) <a target="_blank" rel="nofollow noopener" href="https://twitter.com/2zn01/status/1054146163580952576?ref_src=twsrc%5Etfw">2018年10月21日</a></blockquote> <h3 id="3. Tweet Rocketer"><a href="#3.+Tweet+Rocketer">3. Tweet Rocketer</a></h3> <ul> <li>テーマ：【A-3】ミッションインフォメーション</li> </ul> <blockquote class="twitter-tweet" data-lang="ja"><p lang="ja" dir="ltr">【作ったもの③】Tweet RocketerTwitterからロケットの打ち上げに関するツイートを取得し、位置情報つきツイートをヒートマップで可視化。以下のAzureサービスもシステムへ組み込められればと構想。・Custom Vision Serviceで画像からロケット判定・Text Analyticsによるツイート解析<a target="_blank" rel="nofollow noopener" href="https://twitter.com/hashtag/spaceapps?src=hash&ref_src=twsrc%5Etfw">#spaceapps</a> <a target="_blank" rel="nofollow noopener" href="https://t.co/rnAxkXBXYw">pic.twitter.com/rnAxkXBXYw</a></p>— 2z＠AIメーカー開発者 (@2zn01) <a target="_blank" rel="nofollow noopener" href="https://twitter.com/2zn01/status/1054149332813803521?ref_src=twsrc%5Etfw">2018年10月21日</a></blockquote> <h2 id="画面イメージ／仕組み"><a href="#%E7%94%BB%E9%9D%A2%E3%82%A4%E3%83%A1%E3%83%BC%E3%82%B8%EF%BC%8F%E4%BB%95%E7%B5%84%E3%81%BF">画面イメージ／仕組み</a></h2> <h3 id="1. Disaster Map（災害マップ）"><a href="#1.+Disaster+Map%EF%BC%88%E7%81%BD%E5%AE%B3%E3%83%9E%E3%83%83%E3%83%97%EF%BC%89">1. Disaster Map（災害マップ）</a></h3> <p><img width="743" alt="disaster-map.png" src="https://qiita-image-store.s3.amazonaws.com/0/273248/553a2a0b-15ac-be4f-f091-e0681d94498e.png"></p> <ol> <li>ユーザーが災害マップを作成</li> <li>災害の写真をとってシステムへアップロード</li> <li>アップロードされた写真よりExifから位置情報を取得</li> <li>事前に学習させたディープラーニングの画像分類モデルから災害の被害度を数値化</li> <li>地図へヒートマップとして可視化（被害度が大きいところほど赤く表示する）</li> </ol> <p><img width="747" alt="disaster-map-2.png" src="https://qiita-image-store.s3.amazonaws.com/0/273248/24951916-60d8-81d0-9a60-0bea61f678d3.png"></p> <h3 id="2. Moon Emoji Art"><a href="#2.+Moon+Emoji+Art">2. Moon Emoji Art</a></h3> <p><img width="664" alt="moon_emoji_art.png" src="https://qiita-image-store.s3.amazonaws.com/0/273248/b515acc6-c323-8618-b6a2-e74b6d76f69a.png"></p> <p>画像を月の絵文字へ置き換える処理については、以下の記事を参考に作らさせて頂きました！</p> <ul> <li>月で絵を描きたいだと？それならpythonに任せなさい🌝<br /> <a target="_blank" rel="nofollow noopener" href="https://qiita.com/wataoka/items/261fc12c956a517049d8">https://qiita.com/wataoka/items/261fc12c956a517049d8</a></li> </ul> <p>これをもとにwebアプリ上から利用できるようにし、アップロードされた画像を月の絵文字へ置き換え、ブラウザ側でhtml2canvasのJSライブラリを使って画像化しています。</p> <p><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"></p> <p><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"></p> <h3 id="3. Tweet Rocketer"><a href="#3.+Tweet+Rocketer">3. Tweet Rocketer</a></h3> <p><img width="713" alt="tweet_rocketer.png" src="https://qiita-image-store.s3.amazonaws.com/0/273248/4c6aca74-4f50-d97d-ba45-a510de30d17e.png"></p> <ol> <li>Twitterから"launch"というキーワードをもとに民間ロケット発射のツイートを取得</li> <li>ツイートの位置情報をもとに地図へヒートマップとして可視化</li> <li>該当するツイートが多い場所ほど赤く表示される</li> </ol> <h2 id="最後に"><a href="#%E6%9C%80%E5%BE%8C%E3%81%AB">最後に</a></h2> <p>このハッカソンで2つの賞を頂き、NASAのグローバル審査へ出して頂けることになりました！</p> <blockquote class="twitter-tweet" data-lang="ja"><p lang="ja" dir="ltr">2日間の NASA Space Apps Challenge Toyohashiで2つの賞を頂きました！なんとNASAのグローバル審査へ出して頂けることに！ちなみにチームのモットーは「Fight for win!」超絶ださいｗｗ けど、なんとか勝ちました！<a target="_blank" rel="nofollow noopener" href="https://twitter.com/hashtag/spaceapps?src=hash&ref_src=twsrc%5Etfw">#spaceapps</a> <a target="_blank" rel="nofollow noopener" href="https://t.co/hA3Wgcds9J">pic.twitter.com/hA3Wgcds9J</a></p>— 2z＠AIメーカー開発者 (@2zn01) <a target="_blank" rel="nofollow noopener" href="https://twitter.com/2zn01/status/1054027487728951302?ref_src=twsrc%5Etfw">2018年10月21日</a></blockquote> <p>今まで作ってきたものがベースにあったので、なんとか2日間で3つのwebアプリを作ることができました！ただし、とりあえず作ったレベルなので、まだ一般公開できるようなものではございません。</p> <p>また、開発ばっかりに目がいってしまったのが反省点です。<br /> ハッカソンなのでもっと周りとうまく協力しながらできればと思います。</p> <blockquote class="twitter-tweet" data-lang="ja"><p lang="ja" dir="ltr">2日間で3つも作るなんて常人の沙汰ではなかったです。。発表の30分前に何とか、とりあえず動くところまでしか持っていけなかったので悔しい。また、開発ばっか気をとられてる時点でハッカソン参加者としてダメだったと反省。。でも開発サポートにより、ちょまどさん賞もらえたので、すべて良し！！ <a target="_blank" rel="nofollow noopener" href="https://t.co/ho1cWpvGWh">https://t.co/ho1cWpvGWh</a></p>— 2z＠AIメーカー開発者 (@2zn01) <a target="_blank" rel="nofollow noopener" href="https://twitter.com/2zn01/status/1053998287089364993?ref_src=twsrc%5Etfw">2018年10月21日</a></blockquote> <p>今回のハッカソンでプロトタイプ作りをした際に感じたこととして、自画自賛にはなっちゃいますが、、ディープラーニングの画像分類をしようとしたときに、AIメーカーがサクッと使えて結構便利でした！</p> <p>とりあえず作ってみるというときには手軽に利用できるので、ぜひ皆さんも気軽に遊んでみてください！</p> <p>■AIメーカー<br /> <a target="_blank" rel="nofollow noopener" href="https://aimaker.io/">https://aimaker.io/</a></p> <blockquote class="twitter-tweet" data-lang="ja"><p lang="ja" dir="ltr">AIメーカーでオープンイノベーションを！！みんなのAIプラットフォームとして自分の考えている構想、実現したいことをまとめましたので、ぜひご覧ください！（あと、1いいねで600いいね😀）on <a target="_blank" rel="nofollow noopener" href="https://twitter.com/Qiita?ref_src=twsrc%5Etfw">@Qiita</a> <a target="_blank" rel="nofollow noopener" href="https://t.co/73fNAWyBtz">https://t.co/73fNAWyBtz</a><a target="_blank" rel="nofollow noopener" href="https://twitter.com/hashtag/AI%E3%83%A1%E3%83%BC%E3%82%AB%E3%83%BC?src=hash&ref_src=twsrc%5Etfw">#AIメーカー</a></p>— 2z＠みんなのAI「AIメーカー」開発中 (@2zn01) <a target="_blank" rel="nofollow noopener" href="https://twitter.com/2zn01/status/1028299281139023872?ref_src=twsrc%5Etfw">2018年8月11日</a></blockquote> <p>興味をもって頂けましたら、ぜひフォローやいいね、リツイートで応援お願いします！</p> <ul> <li>Twitter： <a target="_blank" rel="nofollow noopener" href="https://twitter.com/2zn01">@2zn01</a></li> </ul> <h5 id="・画像認識"><a href="#%E3%83%BB%E7%94%BB%E5%83%8F%E8%AA%8D%E8%AD%98">・画像認識</a></h5> <blockquote class="twitter-tweet" data-lang="ja"><p lang="ja" dir="ltr">今話題のAIをweb上で誰でも気軽に作れる「AIメーカー」を開発しました！①AIに覚えさせたいタグを入力②タグから自動で画像データを収集③AIがデータから学習の３ステップで誰でも簡単にAIを作れます！動画では手相占いのAIに挑戦！みんなもAIを作って遊んでみてね！<a target="_blank" rel="nofollow noopener" href="https://t.co/66DFU7GRZ2">https://t.co/66DFU7GRZ2</a> <a target="_blank" rel="nofollow noopener" href="https://t.co/ie1LmioyA1">pic.twitter.com/ie1LmioyA1</a></p>— 2z＠AIメーカー (@2zn01) <a target="_blank" rel="nofollow noopener" href="https://twitter.com/2zn01/status/1019741210217365504?ref_src=twsrc%5Etfw">2018年7月19日</a></blockquote> <h5 id="・文字起こし"><a href="#%E3%83%BB%E6%96%87%E5%AD%97%E8%B5%B7%E3%81%93%E3%81%97">・文字起こし</a></h5> <blockquote class="twitter-tweet" data-lang="ja"><p lang="ja" dir="ltr">みんな～！「AIメーカー」で文字起こし機能をリリースしたよー！以下の方法で簡単に文字起こしを試せるので、ぜひ使ってみて～！！📺YouTubeから文字起こし🔗画像、音声、動画から文字起こし🎙️録音で文字起こしAIをうまく使って少しでも面倒な作業から解放だぁ～！<a target="_blank" rel="nofollow noopener" href="https://t.co/qo13Wo6Yli">https://t.co/qo13Wo6Yli</a> <a target="_blank" rel="nofollow noopener" href="https://t.co/gsRigVROnK">pic.twitter.com/gsRigVROnK</a></p>— 2z＠みんなのAI「AIメーカー」開発中 (@2zn01) <a target="_blank" rel="nofollow noopener" href="https://twitter.com/2zn01/status/1030652280914173953?ref_src=twsrc%5Etfw">2018年8月18日</a></blockquote> 2z＠AIメーカー