Treasure 2019 に参加してきました

f:id:tjmschk:20190905215240j:plain

こんにちは、たじまんこと田嶋幸智子です。

voyagegroup.com

この夏、VOYAGE GROUPさんの Treasure というインターンに参加してきました。 この記事は、私がTreasureでどんなことしてきたかを書き綴っていきたいと思います。 Treasureに参加できなかったけど気になってる方や、Treasure気になってるけどどんな感じなんだろう?と思ってる方の助けになれば嬉しいです。

VOYAGE GROUPって?

渋谷にある中規模ベンチャーです! 主に アドテクだったりポイントメディアだったりを要に事業を展開している会社です。詳しくはHPの 事業紹介 が参考になるかと思います。

Treasureって?

業務型でなく、VOYAGE GROUP現役エンジニアのメンターやインターン生で「ものづくり」をするインターンです!

雑に言うと Webアプリケーションの全部 をやります。詳細は下で書きますが、予想をはるかに超える壮絶なインプットとアウトプットです。業務型ではないため、同年代エンジニア学生との会話があり、メンターさんたちの設計思想討論がありとすごい楽しくて為になるインターンです。

詳細としてはこんなかんじ HPから引っ張ってきました↓

概要 .
開催期間 2019年8月12日(月)~8月30日(金)
時間 10:00~18:00
場所 VOYAGE GROUP本社(東京・渋谷)
待遇 3週間で1人12万円支給 ※遠方の方は上限4万円までで交通費支給
人数 約30名
参加資格 - 大学3年生、大学院修士1年生、高専専攻科1年生を対象(文理不問)。※アツイ思いがあれば他学年でもOK!- チームで開発に取り組みたい人- 自らの想像をカタチにしたい人- エンジニアリングやものづくりが好きな人- 将来、社会的に影響力のあるエンジニアになりたい人

待遇情報

みんな気になる待遇情報を載せておきます。 拘束時間は 10:00 ~ 18:00 で、遅くなるときはメンターさんに言ってねーという感じでした。

私は遠方参加の唯一の女性だったので三週間のあいだなんとオフィスから徒歩圏内のビジネスホテルに宿泊、9:30におきても余裕です。

ランチには社食が300円で食べられます! あと、オフィスにカフェがあってそこで美味しいコーヒーが飲めるので最高でした。

定時の18:30をすぎるとAjitoにあるお酒を自由に飲むことができます。 私はよくその日の復習をお酒のみながらしてました。(この写真のお酒は個人所有ので隣にちゃんと優しいお酒があります)

f:id:tjmschk:20190910135533j:plain
Ajitoにあったぽしゃけ

参加したきっかけ

Treasureを知ったのはサポーターズさんの就活イベントでした。

内容も気になっていたし、知り合いや先輩にたくさんのTreasure卒業生がいたのと、どの先輩も褒め言葉しか口に出さないのでどんなものかと思い応募しようと思ったのがきっかけです。

Treasureのながれ

Treasureは主に講義パートとチーム開発パートに分かれています。

それぞれをさらっと書いていきます。

講義パート

Go言語講義 [1, 2.5)日目

1日目に事前課題の復習でhttpサーバ、DBとの接続、2日目でAPIサーバ完全理解しました。バックエンドの経験がないのでTAの力を召喚しまくりでした。

フロントエンド講義 [2.5, 3]日目

フロントエンドの歴史から始まりテストやPromiseまわりのエラーハンドリングなどを触りました。

DB講義 4日目

前半講義と後半チームでモデリングと言った内容で、前半はRDB, KVS, ACID などDBの用語を勉強しました。後半のチームでモデリングは他の受講生の意見を聞ける貴重な時間で楽しかったです。

中間課題 [5,6.5)日目

5日目で中間とは何事!?とおもいながら中間課題の日。

中間課題 1日 、実際3日(金曜に課題が出て月曜発表。なるほど。土日は?)

VOYAGE GROUPの夏インターンTreasureに参加した - 心の声と垂れ流す場所

ほんまこれ。私は習ったこと全部使ってTODOリストを作ろうとしました。

結果 : Vue.js + FirebaeDB になりました。

悔しいのでちゃんとバックエンドも実装します。

セキュリティ講義[6.5,7)日目

個人的にXSSを見つけてaleart出すのは楽しかったです。

認証講義[7,7.5)日目

超特急のとっとこハム太郎でした。 Auth周りの知識をさらっとやり、Cookie認証をGoで実装し、よくあるトラブルをまなびました。 結論 : Authの実装は必要ないけど技術選定に知識は必要なので誰か一人は持っていた方がいい

インフラ講義(7.5,8)日目

CI/CDは習慣

イデア講義 (8.5,9)日目

これはいままでやったアイデア出しの中で最高に納得できて心からそのアイデアを押したくなる手法でした。

詳しい内容が知りたい方はほかのトレジャー生の記事を参考にしてみてください!

note.mu

チーム開発

私達のチームはフロント二人、バックエンド二人、インフラ一人の超絶役割がわかれててちょうどいい5人でした。

プロダクト紹介

私たちのチームのプロダクトは「eeNotes」です。 ひとことで説明すると、ノート共有型SNS

私たちが普段、Evernoteやメモ帳、hackmdで集めてる授業ノートを1つのプラットフォームに集め、さらにSNSとして共有することで大学ごとや講義で見れるようにしたサービスです。

実装

フロント : React.js, バックエンド : Go言語, DB : MySQL,

チームのみんな何かしら得意分野があり、それぞれ各々が得意なことをできたのがすごく熱かったです。 私はフロントエンドを担当していたのですが、フロントの比重が重く、ほぼ初心者のバックエンド担当もフロントに回ってペアプロを組んだりしながら開発してました。 特に初心者からバケツリレーの達人になったぎーたかには心からの拍手を送りたいです。

惜しくも優勝を逃してしまい最高に悔しかったです。 リリースしたいと話をつけ、お金の部分は現在なみさんと交渉中です。

Treasureに感じたVOYAGE GROUPの社風

前後半いろんなメンターの方々の助けを借りて、いろんな方と語り合って感じたのが、VOYAGE GROUPには個性が強いひとが多いなっという印象でした。

感想

始まる前はどんなにつよつよのエンジニアがいるのだろうと生まれたての子鹿のように震えていたのですが、みんな優しく力の持ったエンジニアたちでいっぱい助けてもらい感謝の嵐です。

前半のインプットの量が多く、脳みそフル回転オフィスで復習してからホテルに帰った瞬間に熟睡を繰り返していました。

チーム開発でもアイデアに半端なくこだわっていて、解釈の違いで衝突する時がありました。でも、絶対に 一発当てたる と全員が思っていた所以だと思います。

本当に優勝できなくて悔しいし、私自身このサービス使いたいのでどうにかしてリリースまでもってって自慢してみんなに使ってもらいたいです。

最高に楽しくて濃い三週間でした。 最後まで読んでいただき、ありがとうございました!

f:id:tjmschk:20190909192629j:plain

Inside Frontend に参加してきました

こんにちは、たじまです。

この度CyberAgentさんのスカラーシップ枠で、Inside Frontend に参加してきました。

f:id:tjmschk:20190520212856j:plain
inside frontendのタグ

目次

参加したきっかけ

今回はサイバーエージェントさんがTwitterで募集していたスカラーシップで参加してみました!交通費・参加費・宿泊費を負担してくれるとのことで応募だけするか〜のノリで応募してみました、行けてよかったです。

Inside Frontend とは

Webフロントエンドの現場とこれからをつなぐカンファレンス Web技術の可能性が広がると共に、Webフロントエンドと呼ばれる領域は多様化しています。さまざまな現場が今どうのような個別の問題に取り組んでいるのか、同時にWebが今後どのように発展していく可能性があるのか、これらを一緒に考えていく場です。 本イベントでは、各社の現場で得られたノウハウや、これからの Web 技術について見る、聞く、話すなどして参加者同士の濃いコミュニケーションが生まれることを期待しています。 --Inside Frondend

まさにこんな感じでした! 各40分のセミナーの後にAMAという質問時間があり、根掘り葉掘り聞けました。

f:id:tjmschk:20190521011559j:plain
ステッカーたち

ためになった発表

聞いたセミナーの中でも印象に残ったものです。

"Web App Checklist ~高品質のWebアプリケーションをつくるために~"

これめちゃめちゃ良かったです。みてていいってよりも同じプロジェクトで働いてみたいと思うようなセミナーでした。パフォーマンスやアクセシビリティをつきつめる話だったのですが、個人開発ではあまり触らない話だったので良い知見になりました。セミナーは20 / 36 項目のみだったらしいので全部見てみたいです。

お昼すぎの一番眠い時間だったのですが、勢いとこだわりに圧倒されましたw

"Loading Performanceとの向き合い方"

パフォーマンスのことだったのでどんなものかと入ってみました。最初はみんなよく知る日経さんでめずらしいなーな感じだったのですがセミナー聞いてるうちに共感の嵐でした。

ほんとにこれで、これ聞く前はVueやReactなどのフレームワークがモダンでイケイケなんだ〜みたいなイキリ小学生な気持ちだったんですが、日経電子掲示板は

- 静的なサイトである
- 速さが大事

などの理由から WebComponents を選択するっていう工程でなるほどなぁってなりました。

AMAの時間は他のところにも行ってみたのですが、この時間帯のセミナーは面白そうなのばかりだったのでYouTube待機です。

最後に

楽しかったです!スカラーシップ枠の他の学生やエンジニアの方々と懇親会の時にお話できたのと、気になっていたチェックリストの原さんと話せたのがいい機会になりました。

休学してインターンするというツワモノや、2dayインターンシップのときの方々と久しぶりに会えたおかげで懇親会の時にぼっちにならずにすみました笑

そしてパフォーマンスチューニングこれからやっていきます。

f:id:tjmschk:20190520212604j:plain
荷台に乗った大量のピザ

最後に、今回交通費と参加費と宿泊費をだしてくれたサイバーエージェントさんとスタッフのみなさんありがとうございました!

CyberAgentさんのWebFrontendChallengeに参加してきました

CyberAgentさんのWebFrontendChallengeに参加してきました

f:id:tjmschk:20190313172506j:plain
サイバーさんの水

こんにちは、最近恐ろしく運動する機会が減ったのでなるべく移動は徒歩にしているたじまです。

今回、CyberAgent さんの Web Frontend Challenge に参加してきたのでブログにまとめようと思います!

www.cyberagent.co.jp

この記事の要約

めっちゃ楽しかったのでまた挑戦したいです。

github.com

今回作ったアプリです。 レビューいつでも受け付けています!!

参加したきっかけ

このインターンに参加する前にサポーターズさんの合同座談会に参加してきたんですが、そのイベントに参加していたサイバーの方に紹介していただきました。

サイバーにいけるのは優秀なエンジニアばかりだと思っていたので、とりあえず応募しておくかと応募したら受かりました。とても嬉しいしびっくりしました。

参加するまで

実は今回面接が水曜日で、その週の土日にあったので、行くことが決まってからは新幹線の予約や電車の時間をしらべ、週末のバイトにお休みの連絡をいれるなど大忙し、幸いなことにホテルは用意してもらったのですがとてもドタバタしました。

ちなみに初日渋谷駅からオフィスまで迷わずに5分とあったのですが、20分かけて集合時間ぎりぎりでした。

開発開始

初日、最初にお題発表がありその後インプットのためのLTを聞き、そのご作業開始という流れでした。

LTの様子(冗談です)

お題

写真一覧(アルバム) のUIをつくる

最低条件

  • 画像APIをつかって画像の一覧ができている
  • 一覧から画像詳細一覧を開ける

デザインは自由!

Googleフォトなどの既存アプリを参考にするもよし、オリジナリティを出すのもよし !

評価ポイント

APIも用意されていたので最低条件は簡単にできそうだからオリジナリティとこだわり点が重要だなという印象でした。

1日目

  • 進めたこと
    • vue cli でプロジェクト作成、buefyいれる
    • 最低条件の画像一覧と詳細画面をつくる
    • 画像一覧の写真をクリックすると詳細画面に飛べるようにする
  • 大変だったこと
    • 実は画像を扱うことが初めてだったので思い通りに表示させるまでbulmaと戦ってました
    • いつも苦労するのですがfetch使う時に最初errorが出てて大変でした

ここまで進めてワークタイムがおわりました。 こうして書き出すと全然進められてなくてしんどいですね、、、

しんどいのでお口直しに差し入れのドーナツを挟んでおきます。

このあとアパホテルに泊まってた組とそのとき一緒に帰ろうとしてたインターン生でごはんにいきました。参加していたのが半数以上20卒だったので就活のどろどろした話などで盛り上がりました。

  • ホテルについてから
    • LTで知ったlazy load を導入。
    • ビルドされたURLを用意するためにherokuを導入

いつもnowというものを使っていたのですがgithubと連携すればpushすると自動でビルドしてくれるというのを聞いて初めて使ってみました。infinite scroll をいれたかったのですが睡魔に襲われました。

2日目

  • 進めたこと
    • infinite scrollを導入(ここで転び午前中すべて消化)
    • 時間が少なくなったので一覧画面をやめて、buefymodalを採用。
  • 大変だったこと
    • infinite scroll で本当につまづいたこと。(結局公式ドキュメントに全て書いてあった)
    • infinite scrollでバグって、表示はされないけど永遠にリクエストを投げ続けファンがウィンウィンなりchromeが閉じられなくなりmacを強制終了させたこと。
    • CSSフレームワークに頼りきりだったので謎の隙間や謎の左寄りに悩まされたこと

格言にしたい社員さんのお言葉「公式ドキュメントを読め」

結果発表

f:id:tjmschk:20190313172819p:plain

f:id:tjmschk:20190313173001p:plain
詳細画面

発表順番はランダムで決められ私は5番目でした。私は最低条件をやっと満たせたレベルでしたが、一緒に参加していた数々の猛者たちの作品で気になったものを勝手に紹介していきます。

GitHub - dora1998/ca2019-wfec: Web Frontend Challenge 2019

こちらは最優秀賞をとったどらくんの作品で、唯一アルバム機能をつくったりiOSの写真アプリのような使い心地でダントツの最優秀賞でした。

GitHub - kobakazu0429/CA_PhotoAlbum

こちらは唯一未成年者で高専生2年のこばくんの作品。印象に残ったのが画像にあった緯度経度から地図にまとめて表示していたのが印象でした。

他にも検索機能をつけたりアクセリビリティのためにvoice over を立ち上げたりといろいろなアイデアがあり、それぞれ違ったこだわりポイントがありすごかったです。

懇親会

f:id:tjmschk:20190313170535j:plain
懇親会で行ったお店の写真

二日間作業づめのお酒は美味かった。社員の方々とからのアドバイスやサイバーさんの裏話などなかなか聞けないようなことを聞けて楽しかったです。 正直この業界では飲み会にいくと男子大多数女子一人か二人で圧倒的に孤立してしまうので、今まで二次会などは参加しなかったのですが、そんな心配何処吹く風でめちゃめちゃ盛り上がったので楽しかったです。

f:id:tjmschk:20190313171223j:plain
500円のくじです

余談ですが、500円で飛露喜がのめるなんて最高じゃんって思いこのくじなんども頼んだのですが(若干引かれてた)、そんなもの当たるわけなくウコンの力などでした。米焼酎を初めて飲んだのですが美味しかったです。

おわりに

今回フロントエンドのインターンで、フロントエンドを専門にしているフロントエンドのエンジニアといっぱい話せたのがいい体験でした。 会津大学にもすごい先輩がいっぱいいますが、サーバーサイドが好きな人がおおく裏話やあるあるやお得情報など耳にする機会がないのでとてもためになる時間でした。

今回はまだ、「ここがこだわりポイントです!!!」ってアピールできるほどの余裕や慣れがなかったのでこつこつと経験を積んでいきたいと思いました。

次までの目標

今回のアプリにあと、

  • 検索機能
  • 日付でソートする
  • issue を直す

を実装して次に取り掛かろうと思います。

あと、CSSも慣れるといいぞと教わったので次つくるアプリはCSSは書いていこうと思います。

最後まで読んでいただきありがとうございました!

Silicon Valley Internship Program に行ってきた感想とプロダクト紹介

こんにちは、田嶋幸智子です。

今年の夏休みに会津大学で行われてる、シリコンバレーインターンシッププログラムに参加してきました。

ひと段落ついたのでブログにまとめてみようと思います。

参加するきっかけ

私は今まで、何かを開発したことがなくものをつくる経験がない初心者だったので、このインターンに参加すればアメリカにもいけるしいいじゃんと軽い気持ちで応募してみました。

正直なところ、IoT関連の知識が一切なく英語も得意でなかったので、面接の時に留学生にボロボロにされ(あとでわかったんですが留学生じゃなくて日本人でした)絶対落ちたと思ってたので、合格メールがきて飛んで喜びました 笑

事前研修

実際にアメリカへ飛び立つ前に、Aizu FaboさんでSV勢はみんな1週間の事前研修を受けました。 朝9時から午後6時まで(昼休みあり)みっちり3Dプリンタやレーザーカッターの使い方の基礎から、arduinoやラズパイのLチカからはじまりandroidからラズパイカーの操縦まで一通りみっちり教わります。

そしてこの研修の最終日に、チームを組んでプロトタイピングをしました。 私はみっさー、星くん、大川原くんの三人でチームを組みました。

f:id:tjmschk:20181111232917j:plain

これは実際に作ったのが入れ物になった姿です。

と、言うのも、ケースとラズパイの準備は良かったものの、私の担当していたアイテムを出すはずだったandroidも、念の為に星くんに作ってもらっていたPCからアイテムを出すほうも完成できず、絶望のまま完成形を撮るのを忘れていたからです。

みんな本当にすみません。。。

(ケースを作ってくれたみっさー本当に天才)

github.com

私の書いたコードはgithubにあげてたので公開します。

(でも多分もう一生androidは触らないです。)

シリコンバレーにて

現地についてからはまず、空港で向こうでお世話になる水野さんとその助手(?)のちょうらんと合流してから、ホテルにチェックイン後 Hacker Dojoに行きました。

f:id:tjmschk:20181112000332j:plain

ご存知の方も大勢いると思いますが、Hacker Dojo というコアワーキングスペースで2週間開発をします。

ここは3Dプリンタなど数々の施設や煮詰まった時の卓球台などまさにエンジニアの天国のようなところです。

作業開始

はじめに私たちはそれぞれのアイデアを出し合いました。 私の出した案、なんか光る綺麗な積み木的なオブジェに星くんがきてくてれて、一緒ににしゅんじ先輩もきてくれたので、三人で開発することになりました。

水野さんがちょうどよいarduinoを持っていたので、それを使うことになりました。

f:id:tjmschk:20181112112608j:plain

もともとこれはドローンを作ろうとしていたそうです。

まずはじめに考えていた案として、

  • ブロックはもともと光っていて、積み木を組み合わせることで色を共有したり色を混ぜ合わせた色になる。
  • ブロックをつかって街を作る。陸の部分にのせると緑色になったり、海の部分にのせると青になったりする。
  • ブロック一つ一つが音を持っていて組み合わせると、音楽になる。(ドラム + タンバリンなど)

これらの案を実現するなかで、一番の課題だったのが、arduinoが互いにくっついていたり離れていたりをどうやって認識させるかということでした。

ここで考えついたのがラズパイを一つサーバー的な感じで設置し、それとarduino同士をなんらかの方法通信して、arduinoの挙動を監視する、という方法です。 しかし、ラズパイとarduinoの通信方法をいろいろと探っていたのですがうまく行きませんでした。。。

そこで水野さんからヒントをいただき、ラズパイとarduinoをシリアル通信してからarudino同士をBluetooth Low Energy (BLE) を使って通信する方が簡単で楽だと教えていただき、通信することにしました。

ここでarudino側が困難を極め、みんな疲れ果てた末に、「これ寿司ゲームにしたら面白くね?」と星くんとしゅんじ先輩が謎のテンションで盛り上がり始め、期限も迫っていたので寿司ゲームになりました。

f:id:tjmschk:20181112121934p:plain

こんなイメージ

どんなゲームかというと、

  • 寿司ブロックを振ることで、ネタを変えられる。
  • ネタとシャリを合わせて振り、寿司をつくる。
  • 寿司下駄において完成!

完成や寿司作りのときに、ディスプレイいん表示したり「へいおまち!」と音を出したり、など色々考えましたが、簡単なのに行こうということでまず作ってるっぽい音をながすことにしました。

ここで、arduinoのほうが難しそうだったので、しゅんじ先輩と星くんに任せ、私はラズパイとラズパイについてるarduino(親機)を担当しました。

ラズパイと親機の動きとして、

  • 親機が子機(寿司のarduino) から、BLE通信でネタがなにか、握っているか、握って降っているかを受け取る
  • 親機は受け取った値+BLEのrssi値をラズパイにおくる。
  • ラズパイは受け取った値によって音を流す

こんな感じです。

そしてできたものがこちら。

f:id:tjmschk:20181112171746j:plain

見栄えは悪いですが一応完成しました。

f:id:tjmschk:20181112191728j:plain

マイクロソフトの食堂でプレゼンをしてきました。

中には特許とらなきゃ!なんて声もあり嬉しかったです。

私が書いていたコードがこちら

github.com

機会があればもっと機能追加したいです。 ちなみに現地ではPython2系で書いていて、帰ってきてから3系で書き換えました。

終わりに

シリコンバレーですが、結果として行けてよかったです。

いろいろとトラブルもあり大変でしたが、IoTについて知識がついたし、普段知り合わない先輩や現地での友達もできてすごい楽しかったです。

英語力がなく、話しかけられてもほとんど会話を任せっきりで微笑んでただけだったので、それだけが心残りでした。

事前研修でお世話になった、Aizu Faboの島影さん、佐々木さん、

そして現地でとてもお世話になった、水野さんやちょうらん!三菱さんたちもろもろ!笑

あと、援助をしてくださったSGUの皆様に感謝の心をこめて終わりにします。

f:id:tjmschk:20181112193618j:plain