CAM TECH BLOG

株式会社CAMのエンジニア・デザイナーの活動を綴るブログです

株式会社CAMの技術ブログです。 エンジニアとデザイナーの活動や組織文化を綴ります。

19新卒エンジニアがAngelHack2019に出場してみた!

f:id:cam-engineer:20190708181720p:plain

こんにちは! CAM 19 新卒のフジケンだいきです。

去る2019年6月29日、世界規模のハッカソン、AngelHack Tokyo 2019 に出場してきました!会の様子や出場して体験した内容について、レポートします!

|参加者プロフィール|
f:id:cam-engineer:20190708140144p:plain:w100:leftフジケン
19新卒のバックエンドエンジニア。圧倒的メタル好き。最近はフジケンドリック・ラマーと呼ばれている。
f:id:cam-engineer:20190708132414p:plain:w100:leftだいき
19新卒のフロントエンドエンジニア。同期エンジニアで初の記事を執筆、精力的に知識を吸収中。  


AngelHack Tokyo 2019概要

AngelHack Tokyo とは?

AngelHack Tokyo とは、世界最大のハックコミュニティ・AngelHack 主催の IT/スタートアップ界のワールドカップともいうべきハッカソン(『Global Series』)の東京地区予選です。

f:id:cam-engineer:20190708181717p:plain

世界65カ国106都市で同時期開催され、この大会をきっかけに115社以上の新規事業が世に出た実績があるため、野心的な技術者や起業家がビッグチャンスを狙って参加します。

主催による AngelHack Prizeを受賞すると、世界最高峰のハッカーチームと投資家たちが集う決勝戦(Global DEMO DAY)への参加可能性が拓かれるという、大きな夢と希望に満ちた大会です。

www.routexinnovation.com

参加所感

 Q: 参加してみてどうだった?

f:id:cam-engineer:20190708140144p:plain:w80:left

今回のハッカソンは協賛企業も多くて、
参加者のレベルの高い大会だったね!

f:id:cam-engineer:20190708132414p:plain:w80:right

確かに!
IBM、AWS、メルカリ、EMURGO ...etc
名だたる企業が


f:id:cam-engineer:20190708181725p:plain
▲ いくつかの協賛企業からのプライズも用意されている


f:id:cam-engineer:20190708140144p:plain:w80:left

そうそう、参加者の半分くらいは外国人だったし、
会場で出会って、一緒にチームを組んだ J さんもフランスの方だったし

f:id:cam-engineer:20190708132414p:plain:w80:right

J さんの通訳ナイスだったね笑、まさにグローバル!!
会場はもうエレベーターから豪華だったよね!バーみたいな!

f:id:cam-engineer:20190708140144p:plain:w80:left
BINARYSTAR って名前だったね。
僕、あんなきれいなとこで深夜開発途中にステージで寝ちゃった...
(※ 大会は2日間に渡って開催)

f:id:cam-engineer:20190708132414p:plain:w80:right

熱中しすぎ!笑 席も自由 (畳、バーカウンター、etc...)
どこでも開発しておk的なところがシリコンバレーっぽかった!
(銀座だけど!笑)

f:id:cam-engineer:20190708140144p:plain:w80:left

まさにそんな感じ!

f:id:cam-engineer:20190708181713p:plain



 Q: どんなプロダクトを作った?


f:id:cam-engineer:20190708140144p:plain:w80:left

僕たちが作ったプロダクトは結果的には賞は取れなかったけど、
良いアイデアだったと思う。

f:id:cam-engineer:20190708132414p:plain:w80:right

チームみんなで得意分野のハッピーセット作る! 的な

f:id:cam-engineer:20190708140144p:plain:w80:left

I’m Lovin’ it ! 具体的には省エネ対策に
Amazon Rekognitionという画像解析ツールでアプローチするもので、
個人が気づかない節電対策を可視化するものだった。


f:id:cam-engineer:20190708181730p:plain
▲ アップロードした部屋の写真を Rekognition で処理、節電可能な家電を教えるというプロダクト


f:id:cam-engineer:20190708132414p:plain:w80:right

部屋の写真をアップロードしたらそれを Rekognition で処理して
節電できる家電の名前を教えてくれる
やつ、、、便利か!

f:id:cam-engineer:20190708140144p:plain:w80:left

アーキテクチャはこんな感じ。


f:id:cam-engineer:20190710122510p:plain



次に、各々が担当したパートについての所感です!

【バックエンド】

バックエンドを担当した フジケン です。

f:id:cam-engineer:20190708140144p:plain
▲ メタルが好きなフジケン です

バックエンドはAWSのサービスを用いてサーバレスに構築しました。

その中でも、ハマりポイントについてお話します。

1. API Gateway と Lambda での CORS 設定

2. lambda 関数のデプロイされるステージ

3. lambda の return の形式

1つ目

結構ハマってる記事がありますね。 公式見ても API Gateway の cors を有効にするというものしか見当たらず、しばらく考えた結果、lambda の response の header 要素に ’Access-Control-Allow-Origin’ を追加したことで解決しました!

ちなみ API Gateway の cors 設定はこちら

docs.aws.amazon.com


2つ目

API をデプロイして画面遷移したときに出てくる URL はデプロイしたステージの URL で、実際の API の URL は、そのステージの下にある(ステージ名横をプルダウンしないと見れない)ので、API の PATH を間違えていました。


f:id:cam-engineer:20190709151604p:plain

internal server error と表示されていたため、なかなか気づきませんでした。


3つ目

lambda の関数内で値を return しているのになんで response が返ってこないんだ??

公式にありました。

aws.amazon.com

Lambda 関数 の response はこの形式じゃないといけないみたいです。


【フロントエンド】

フロントエンドを担当した だいき です。

f:id:cam-engineer:20190708132414p:plain
▲ 2度めの登場・だいき です

フロントエンド側は AWS Amplify を使用することが条件で、Vue と Amplify を使ったフレキシブルな Web 画面を構築しました。

Amplify は Auth(サインアップ、サインインの処理)、Analytics、API、PubSub、XR、etc... のようなことができ、サーバーレス API を使用したアプリケーション開発で使用されます。

ハマりポイントについてお話します。今回 S3 に接続して画像をアップロードする関係で、

セキュリティ KEY を dotenv ファイルで管理していたところハマった

ここ、本当に詰まりました汗

Vue-cli を使って Vue を使用している場合、dotenv は以下のようにするようです。

<例>

const dotenv ファイルでの Value が入る変数 = process.env.”DotFile での KEY”

通常:const hoge = process.env.hogehoge;

Vue.jsの場合:const hoge = process.env.VUE_APP_hogehoge;

始めは何度も dotenv 側の公式を読んでいたのですが、フレームワーク側の問題だったとは盲点でした。

【まとめ】

f:id:cam-engineer:20190708140144p:plain:w80:left

ハッカソンって、技術力は勝利条件ではなくて、
アイデアの新規性やプロダクトのビジネスロジックなどが大事で、
実際にサービスを作り上げるときに必要な力が身につくと思うな

f:id:cam-engineer:20190708132414p:plain:w80:right

ただ革新的なプロダクトを思いのままに作り上げるには
技術力が必要
だし、今回は技術力も課題だったかもね

f:id:cam-engineer:20190708140144p:plain:w80:left

それね。普段の作業や課題を通して技術力をあげて、
次に出場するハッカソンでは最高なプロダクトが作れるようにしたいね!


関連記事:

tech.cam-inc.co.jp