CyberAgentさんのWebFrontendChallengeに参加してきました
CyberAgentさんのWebFrontendChallengeに参加してきました
こんにちは、最近恐ろしく運動する機会が減ったのでなるべく移動は徒歩にしているたじまです。
今回、CyberAgent さんの Web Frontend Challenge に参加してきたのでブログにまとめようと思います！
この記事の要約
めっちゃ楽しかったのでまた挑戦したいです。
今回作ったアプリです。 レビューいつでも受け付けています！！
参加したきっかけ
このインターンに参加する前にサポーターズさんの合同座談会に参加してきたんですが、そのイベントに参加していたサイバーの方に紹介していただきました。
サイバーにいけるのは優秀なエンジニアばかりだと思っていたので、とりあえず応募しておくかと応募したら受かりました。とても嬉しいしびっくりしました。
参加するまで
実は今回面接が水曜日で、その週の土日にあったので、行くことが決まってからは新幹線の予約や電車の時間をしらべ、週末のバイトにお休みの連絡をいれるなど大忙し、幸いなことにホテルは用意してもらったのですがとてもドタバタしました。
ちなみに初日渋谷駅からオフィスまで迷わずに5分とあったのですが、20分かけて集合時間ぎりぎりでした。
開発開始
初日、最初にお題発表がありその後インプットのためのLTを聞き、そのご作業開始という流れでした。
じゅんじゅん「僕がイケメンだと思う人」
— Yanagi Kota🐶PAGU (@pagu0602) March 9, 2019
#ca_wfc pic.twitter.com/rMNgQoaWcn
LTの様子(冗談です)
お題
写真一覧(アルバム) のUIをつくる
最低条件
- 画像APIをつかって画像の一覧ができている
- 一覧から画像詳細一覧を開ける
デザインは自由！
Googleフォトなどの既存アプリを参考にするもよし、オリジナリティを出すのもよし !
評価ポイント
- 最低条件を達している
- UIのつくりこみ
- デザイン、アニメーションの工夫、アクセシビリティなど
- 技術的アプローチ
- その他
- 最低条件以外の昨日のオリジナリティ
APIも用意されていたので最低条件は簡単にできそうだからオリジナリティとこだわり点が重要だなという印象でした。
1日目
- 進めたこと
- vue cli でプロジェクト作成、buefyいれる
- 最低条件の画像一覧と詳細画面をつくる
- 画像一覧の写真をクリックすると詳細画面に飛べるようにする
- 大変だったこと
- 実は画像を扱うことが初めてだったので思い通りに表示させるまでbulmaと戦ってました
- いつも苦労するのですがfetch使う時に最初errorが出てて大変でした
ここまで進めてワークタイムがおわりました。 こうして書き出すと全然進められてなくてしんどいですね、、、
高画質ドーナツ#ca_wfc pic.twitter.com/gQLFEzWjPC
— Mori Atsushi 📷 (@at_sushi_at) March 10, 2019
しんどいのでお口直しに差し入れのドーナツを挟んでおきます。
このあとアパホテルに泊まってた組とそのとき一緒に帰ろうとしてたインターン生でごはんにいきました。参加していたのが半数以上20卒だったので就活のどろどろした話などで盛り上がりました。
- ホテルについてから
- LTで知ったlazy load を導入。
- ビルドされたURLを用意するためにherokuを導入
いつもnowというものを使っていたのですがgithubと連携すればpushすると自動でビルドしてくれるというのを聞いて初めて使ってみました。infinite scroll をいれたかったのですが睡魔に襲われました。
2日目
- 進めたこと
- infinite scrollを導入(ここで転び午前中すべて消化)
- 時間が少なくなったので一覧画面をやめて、buefyのmodalを採用。
- 大変だったこと
格言にしたい社員さんのお言葉「公式ドキュメントを読め」
結果発表
発表順番はランダムで決められ私は5番目でした。私は最低条件をやっと満たせたレベルでしたが、一緒に参加していた数々の猛者たちの作品で気になったものを勝手に紹介していきます。
GitHub - dora1998/ca2019-wfec: Web Frontend Challenge 2019
こちらは最優秀賞をとったどらくんの作品で、唯一アルバム機能をつくったりiOSの写真アプリのような使い心地でダントツの最優秀賞でした。
GitHub - kobakazu0429/CA_PhotoAlbum
こちらは唯一未成年者で高専生2年のこばくんの作品。印象に残ったのが画像にあった緯度経度から地図にまとめて表示していたのが印象でした。
他にも検索機能をつけたりアクセリビリティのためにvoice over を立ち上げたりといろいろなアイデアがあり、それぞれ違ったこだわりポイントがありすごかったです。
懇親会
二日間作業づめのお酒は美味かった。社員の方々とからのアドバイスやサイバーさんの裏話などなかなか聞けないようなことを聞けて楽しかったです。 正直この業界では飲み会にいくと男子大多数女子一人か二人で圧倒的に孤立してしまうので、今まで二次会などは参加しなかったのですが、そんな心配何処吹く風でめちゃめちゃ盛り上がったので楽しかったです。
余談ですが、500円で飛露喜がのめるなんて最高じゃんって思いこのくじなんども頼んだのですが(若干引かれてた)、そんなもの当たるわけなくウコンの力などでした。米焼酎を初めて飲んだのですが美味しかったです。
おわりに
今回フロントエンドのインターンで、フロントエンドを専門にしているフロントエンドのエンジニアといっぱい話せたのがいい体験でした。 会津大学にもすごい先輩がいっぱいいますが、サーバーサイドが好きな人がおおく裏話やあるあるやお得情報など耳にする機会がないのでとてもためになる時間でした。
今回はまだ、「ここがこだわりポイントです！！！」ってアピールできるほどの余裕や慣れがなかったのでこつこつと経験を積んでいきたいと思いました。
次までの目標
今回のアプリにあと、
- 検索機能
- 日付でソートする
- issue を直す
を実装して次に取り掛かろうと思います。
あと、CSSも慣れるといいぞと教わったので次つくるアプリはCSSは書いていこうと思います。
最後まで読んでいただきありがとうございました！
Silicon Valley Internship Program に行ってきた感想とプロダクト紹介
こんにちは、田嶋幸智子です。
今年の夏休みに会津大学で行われてる、シリコンバレーインターンシッププログラムに参加してきました。
ひと段落ついたのでブログにまとめてみようと思います。
参加するきっかけ
私は今まで、何かを開発したことがなくものをつくる経験がない初心者だったので、このインターンに参加すればアメリカにもいけるしいいじゃんと軽い気持ちで応募してみました。
正直なところ、IoT関連の知識が一切なく英語も得意でなかったので、面接の時に留学生にボロボロにされ（あとでわかったんですが留学生じゃなくて日本人でした）絶対落ちたと思ってたので、合格メールがきて飛んで喜びました 笑
事前研修
実際にアメリカへ飛び立つ前に、Aizu FaboさんでSV勢はみんな1週間の事前研修を受けました。 朝9時から午後6時まで（昼休みあり）みっちり3Dプリンタやレーザーカッターの使い方の基礎から、arduinoやラズパイのLチカからはじまりandroidからラズパイカーの操縦まで一通りみっちり教わります。
そしてこの研修の最終日に、チームを組んでプロトタイピングをしました。 私はみっさー、星くん、大川原くんの三人でチームを組みました。
これは実際に作ったのが入れ物になった姿です。
と、言うのも、ケースとラズパイの準備は良かったものの、私の担当していたアイテムを出すはずだったandroidも、念の為に星くんに作ってもらっていたPCからアイテムを出すほうも完成できず、絶望のまま完成形を撮るのを忘れていたからです。
みんな本当にすみません。。。
（ケースを作ってくれたみっさー本当に天才）
私の書いたコードはgithubにあげてたので公開します。
（でも多分もう一生androidは触らないです。）
シリコンバレーにて
現地についてからはまず、空港で向こうでお世話になる水野さんとその助手(?)のちょうらんと合流してから、ホテルにチェックイン後 Hacker Dojoに行きました。
ご存知の方も大勢いると思いますが、Hacker Dojo というコアワーキングスペースで2週間開発をします。
ここは3Dプリンタなど数々の施設や煮詰まった時の卓球台などまさにエンジニアの天国のようなところです。
作業開始
はじめに私たちはそれぞれのアイデアを出し合いました。 私の出した案、なんか光る綺麗な積み木的なオブジェに星くんがきてくてれて、一緒ににしゅんじ先輩もきてくれたので、三人で開発することになりました。
水野さんがちょうどよいarduinoを持っていたので、それを使うことになりました。
もともとこれはドローンを作ろうとしていたそうです。
まずはじめに考えていた案として、
- ブロックはもともと光っていて、積み木を組み合わせることで色を共有したり色を混ぜ合わせた色になる。
- ブロックをつかって街を作る。陸の部分にのせると緑色になったり、海の部分にのせると青になったりする。
- ブロック一つ一つが音を持っていて組み合わせると、音楽になる。（ドラム + タンバリンなど）
これらの案を実現するなかで、一番の課題だったのが、arduinoが互いにくっついていたり離れていたりをどうやって認識させるかということでした。
ここで考えついたのがラズパイを一つサーバー的な感じで設置し、それとarduino同士をなんらかの方法通信して、arduinoの挙動を監視する、という方法です。 しかし、ラズパイとarduinoの通信方法をいろいろと探っていたのですがうまく行きませんでした。。。
そこで水野さんからヒントをいただき、ラズパイとarduinoをシリアル通信してからarudino同士をBluetooth Low Energy (BLE) を使って通信する方が簡単で楽だと教えていただき、通信することにしました。
ここでarudino側が困難を極め、みんな疲れ果てた末に、「これ寿司ゲームにしたら面白くね？」と星くんとしゅんじ先輩が謎のテンションで盛り上がり始め、期限も迫っていたので寿司ゲームになりました。
こんなイメージ
どんなゲームかというと、
- 寿司ブロックを振ることで、ネタを変えられる。
- ネタとシャリを合わせて振り、寿司をつくる。
- 寿司下駄において完成！
完成や寿司作りのときに、ディスプレイいん表示したり「へいおまち！」と音を出したり、など色々考えましたが、簡単なのに行こうということでまず作ってるっぽい音をながすことにしました。
ここで、arduinoのほうが難しそうだったので、しゅんじ先輩と星くんに任せ、私はラズパイとラズパイについてるarduino(親機)を担当しました。
ラズパイと親機の動きとして、
- 親機が子機(寿司のarduino) から、BLE通信でネタがなにか、握っているか、握って降っているかを受け取る
- 親機は受け取った値+BLEのrssi値をラズパイにおくる。
- ラズパイは受け取った値によって音を流す
こんな感じです。
そしてできたものがこちら。
見栄えは悪いですが一応完成しました。
マイクロソフトの食堂でプレゼンをしてきました。
中には特許とらなきゃ！なんて声もあり嬉しかったです。
私が書いていたコードがこちら
機会があればもっと機能追加したいです。 ちなみに現地ではPython2系で書いていて、帰ってきてから3系で書き換えました。
終わりに
シリコンバレーですが、結果として行けてよかったです。
いろいろとトラブルもあり大変でしたが、IoTについて知識がついたし、普段知り合わない先輩や現地での友達もできてすごい楽しかったです。
英語力がなく、話しかけられてもほとんど会話を任せっきりで微笑んでただけだったので、それだけが心残りでした。
事前研修でお世話になった、Aizu Faboの島影さん、佐々木さん、
そして現地でとてもお世話になった、水野さんやちょうらん！三菱さんたちもろもろ！笑
あと、援助をしてくださったSGUの皆様に感謝の心をこめて終わりにします。
