2019年爆速振り返り

今年も風のように早かった2019年を思い出だけにしたくないので爆速で何やったか振り返ってみます。

この写真選んでるときすでに年越してしまったのですが、忙しかった記憶をそのまま思い出にしたくなかったので目次録としてまとめてみました。

f:id:tjmschk:20200101040224j:plain
君がHOPEだ！

1月30日 (多分)新年LT?

  • (多分)zliの新年LTにでました。記憶にないです。
  • canvasでソートアルゴリズムの可視化したLTしました。

docs.google.com

3月9,10日 Web Frontend Challenge

  • CA開催のWFCに参加しました。
  • 初めてのインターンだったのでとても緊張してました。この時初めてCAさんにお世話になったのがきっかけでのちのCATechJOBに参加しようと決心しました。

f:id:tjmschk:20200101003705j:plain
wfc集合写真

tjmschk.hatenablog.com

3月19日 追い出しLT in aizu

  • 23期メンバーが卒業するので追い出しLTを企画&運営しました。
  • たしかこのLTが私が初めて企画&運営したLTです。

f:id:tjmschk:20200101004001j:plain
oidashi_lt

4月10日 welcomeLT

  • 気合いのある一年生をZliに入れようと開催したLT。
  • このとき来てくれた何人かの一年生は今や立派なzli部員です。

f:id:tjmschk:20200101004820j:plain

4月30日 平成最後のハッカソン by CA

f:id:tjmschk:20200101023843j:plain
平成ファイル

5月18日 inside frontend 参加

  • CAさんがスカラーシップ枠で募集をかけててフロントエンドをちょうどやってて興味があったので応募したらうかりました。
  • ご覧の通りモチベーションがすごい高い状態で行ったわけじゃないんですがフロントエンドのいろんな技術を勉強できてフロントに対するモチベがあがりました。

当時何がやりたいのかわからないけどとりあえず流れでフロントやってるみたいな感じだったんですが極めたくなったきっかけはこの辺だった気がします。

f:id:tjmschk:20190520212856j:plain
首からさげるやつ

5月29日 モブプロでTDD

  • その時期授業でTDDをやることがあったのですが、Twitterで TDDでモブプロ会 という方のイベントをみて、楽しそうだなとおもい開催しました。

想像以上に上級生の方々がいっぱい来て嬉しかったです。

f:id:tjmschk:20200101024659j:plain

6月29日 初夏の大LT in aizu

  • 皆さんご存知の大LTです。

ほんとは春にやる予定だったのですが、運営の準備が遅れ初夏のLTになってしまいました。また、とてもギリギリまで準備をしていたので自分自身のLT内容がすごく薄くなってしまいました。

内容が薄いのは言い訳になってしまうのですが、やはりLTの内容を作る際はちゃんと事前準備期間を設けたいと思いました。

f:id:tjmschk:20200101025530j:plain
集合写真

8月12日 ~ 30日 Treasure

  • 楽しかったし勉強になったし同学年の同じようなことをやっている仲間と知り合えたのはほんとにいいインターンでした。

今でもtreasureの仲間たちの活動をtwitterでみて、自分も頑張ろうと背中を押されています。

詳細はこちら

tjmschk.hatenablog.com

9月15日 ~ 20日 北海道バイク旅

  • 人生の夏休み

ちょっと頑張りすぎてたので念願のバイク旅に1人で行ってきました。

大学生らしい夏休みを送りたいなとおもいバイクでひとり、カプセルホテルやゲストハウスなどに寝泊泊まりました。

雨が多くて寒かったのが少し残念です。またいきたい。

f:id:tjmschk:20200101031056j:plain

9月21日 Summer Intern LT 2019

  • ｶｰｰｽﾞ君方が企画する100人規模のLT会に登壇してきました
  • バイク旅が終わり北海道から帰ってきた足で東京にいきました。なかなかハード。

VOYAGE GROUPのインターン参加者代表として登壇してきました。参加者の生の声を聞く、という趣旨で開催されたLT会でしたが、ここまでの規模のLT会で登壇するのは初めてだったのでいい機会になりました。

【学生限定】サマーインターン参加者によるLT会 - connpass

f:id:tjmschk:20200101031627j:plain
登壇写真

6月 ~ 9月 ATOM ハッカソン

  • 会津バスが主催する Aizu Transportation Open-data Marathon という長期型ハッカソンに参加していました。
  • 唯一のチームメイトが音信不通になったり、結局北海道行く前に1週間ハッカソンをしてしあげたりと大変でしたが、準優勝しました。

f:id:tjmschk:20200101032007j:plain

10月2日 インターン報告会&進捗どうですかLT

  • 後輩主催で手伝いをしました。

f:id:tjmschk:20200101032321j:plain

10月4日 エンジニア女子会

  • サポーターズCoLabの主催する女子会に参加してきました。

ここで繋がったエンジニアの方とまた後日BBQに誘っていただいて、コミュニティの輪を広げることができました。

周りが男性ばかりなのに不満があるわけではないんですが、やはり同性と話す機会が少ないのは参ってしまうので参加してよかったです。

f:id:tjmschk:20200101032611j:plain f:id:tjmschk:20200101032618j:plain

10月26日,27日 JPHacks

zliの仲間たちとハッカソンに参加してきました。

プロダクトとしてはすごいちゃんと仕上がったんですがインパクトに欠けたせいか思い通りの結果には至りませんでした。

f:id:tjmschk:20200101033101j:plain
首から下げるやつ

11月2日 秋の大LT 2019 in aizu

  • 皆さんご存知の大LTです

この会は今までの大LTからはかなり改変し、改善していったのですごい大変でした。

結果的にうまく行ったのですがやはり早めに準備しなければとおもいました。

f:id:tjmschk:20200101033351j:plain

11月7日 ~ 29日 CA Tech JOB in CATS

  • 皆さんご存知 #catechjob に参加してきました。

一言では言い表せない学びがありました。

まだ振り返りブログ書いてないぞ？？？？ この辺後日ブログのリンクに差し変わります。

f:id:tjmschk:20200101033716j:plain
catechjob

11月10日 パソコン甲子園 zli展示

  • PCKに展示させてもらいました。

f:id:tjmschk:20200101035702j:plain

12月14日, 15日 温泉ハッカソン

結果温泉施設でハッカソンではなかったんですが、一泊二日山奥にこもって開発&みんなで豚汁をつくるという最高の環境をつくることができました。

f:id:tjmschk:20200101034026j:plainf:id:tjmschk:20200101034111j:plain

12月22日 HOPE Day by NewsPicks

  • NewsPicks主催の未来の若者のためのイベント。

自分の視野を広げるために参加してきました。 会津は情報単科大学なので、大学で情報系じゃないことを学びんでいる学生が今何を考えているのかを知るために参加してきました。

f:id:tjmschk:20200101035940j:plain
HOPE Day by NewsPicks

12月24日 未来大 x 会津大 対バンLT会

  • よく外に行くと会津とはこみがよく比べられ、ライバル認識せざるを得なかったはこみさんとクリスマスイブにLT会をしました。

一言でいうと楽しかったです。 やりたかったLT会のライブ配信もできました。

f:id:tjmschk:20200101034324j:plain

おわりに

振り返って反省してみると、私はやりたいと思ったことをどんどん企画してしまい忙しすぎて倒そうということが度々起こっていました。

私は旅行に行くときに予定をつくらず行き当たりばったりに行動するタイプなんですが、周りに迷惑をかけることもあってしまったので、ちゃんと事前に計画をしようと思います。

また自分の実力をちゃんと見極めてイベント企画しすぎで自分の時間がなくなる、ということがないように気をつけようと思います。

ここまでありがとうございました。 それではよい2020年を！

vue-routerのナビゲーションガードを使う

はじめに

この記事は Treasure Advent Calender 2019 16日目の記事です。 大幅に遅刻(２回目)して大変申し訳ありません。

adventar.org

今回は、12/24 のクリスマスイブに行った、未来大 x 会津大 対バンLT会 で扱ったネタを書いていこうと思います。

speakerdeck.com

はじめていきます。

今回簡単なテストアプリのリポジトリはこちらです。

github.com

やりたいこと

認証が必要なAPIを使用している際、 session token が切れていた時に、/login に飛ばしたい。

アプリ構成としては以下な感じです。

f:id:tjmschk:20191228000535p:plain
architecture

各PageComponentのcreatedで、vuexのactionをdispatchし結果をstateにcommit、 Pageの生成時にstateの値を参照するという流れです。 今回はコンポーネントの greet: の後の文章を非同期で生成しています。

とりあえずtokenが有効かどうかを調べる isValidToken APIを生やしてもらいました。

solution1

方法

App.vue の created で、isValidToken を呼び、無効だったら /login に飛ばす。

結果

目的だった tokenが無効なら /login に飛ばす という処理はできたのですが、isValidToken 関数が非同期通信をしているため、tokenが無効というのが返ってきてから/login へ飛ばす処理の前にComponentのインスタンスが作られ、createdで呼んでいたAPIでのエラーが表示されていました。

Image from Gyazo

図としては以下の感じ。

f:id:tjmschk:20191228185437p:plain

solution2

方法

vue-routerの グローバルビフォーガード を使う。

グローバルビフォーガードとは

いつナビゲーションがトリガーされようとも、グローバル before ガードは作られた順番で呼び出されます。ガードは非同期に解決されるかもしれません。そしてそのナビゲーションは全てのフックが解決されるまで 未解決状態 として扱われます。

全てのフックが解決されるまで未解決状態として扱われます つまり非同期に解決されたとしてもインスタンスが作られず /login に飛ばせます。

ただし、この場合ナビゲーションがトリガー毎にリクエストを飛ばすのでパフォーマンス重視のアプリならやらない方がいいのかもしません。

追加したコード
const router = new VueRouter({
  routes
});

router.beforeEach((to, from, next) => {
  if (!store.state.isLoggedIn && to.path != '/login') {
    next('/login');
  }
  next();
});

※ 最初っからこっち使えよってわかるんですが↑の時は知りませんでした。無知の知！

結果

Image from Gyazo

うまくいきました〜

おわりに

vue-routerのナビゲーションガードを使った場合、APIでの認証系エラーを表示せずログイン画面に遷移することができるようになりました。 しかし、ブログの途中でも言及しましたがこの方法だと画面遷移毎にリクエストを飛ばす必要があるためパフォーマンスを考えるとそんなよくなかったりするかも？

もしもっといい方法があったら教えてもらえると嬉しいです 🙇‍♀️

そしてTreasure2019のみなさん、アドカレ超遅刻してしまい申し訳ありませんでした。 迷惑かけた人には土下座するのでTreasureN次回誘ってください。

canvasでtypescript を入門してみた

はじめに

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

この記事は Aizu Advent Calender 2019 の 12/9 の記事です。

すっごい遅刻で申し訳ない orz

adventar.org

つくったもの

f:id:tjmschk:20191218200930j:plain
THE MATRIX

以前、CAのインターンの時に初めてtsを触りその安全さ(jsと比べて)と設計をしっかりしていればパズルのように楽に書けて感動したのでもう一度触ってみたかったのと、

canvasでtsは型がしっかりしているから楽だよという話を聞いたので、matrixのあのeffectをcanvasで作ってみました。

完成したのはこちら。

https://matrix.schktjm.now.sh/

www.youtube.com

実装

絵画のループ処理をするのに以前は setInternal を使っていたのですが、 今回はWindow.requestAnimationFrame を使ってみました。

Window.requestAnimationFrame とは

The window.requestAnimationFrame() method tells the browser that you wish to perform an animation and requests that the browser calls a specified function to update an animation before the next repaint. The method takes a callback as an argument to be invoked before the repaint. --MDN

特徴として以下の点があります。

  • ブラウザの絵画更新と同時に呼び出される
  • タブがバックグラウンドや非表示の <iframe> の場合、パフォーマンス改善のためにFPSが下がる。

setIntervalはブラウザがアクティブの有無に関わらず、常に一定間隔で実行されるため今回のような場合は requestAnimationFrame のほうが優しいかなと思い使いました。 (それでもchromeは何回か落としてしまいましたが)

実装方法

f:id:tjmschk:20191218161014p:plain

今回、この縦の文字列を１つの状態としてそれを配列で持ち requestAnimationFrame でそれをforEachでループしレンダリングしました。

持っていた状態として

interface Oneline {
    fontSize: number, 
    x: number, // x座標
    delay: number,  // 降りてくるタイミング
    v: number, // 速度
    color?: RGB,
}

難しかった点

はじめにやろうとした方法は、各 line がxミリ秒ごとにy fontSize分下がるという実装を想定していたため、各line で 絵画のタイミングを計算しようとしていたため、絵画のタイミングを下のようにしていました。

    const step = (timestamp: DOMHighResTimeStamp) => {
 
            lines.forEach(x => {   
                if (Math.floor(timestamp - x.delay) % x.v == 0) {
                    // レンダリング
                }
            })
        }

        window.requestAnimationFrame(step)
    }
    window.requestAnimationFrame(step);

しかし、requestAnimationFrame はcallback関数が呼ばれるのはブラウザのリフレッシュレートによるところが多いため、一定間隔で呼ばれず上記の方法で実装すると時々(しょっちゅう) カクついたりしていました。

参考

The number of callbacks is usually 60 times per second, but will generally match the display refresh rate in most web browsers as per W3C recommendation. --MDN

そこでxミリ秒ごとに更新じゃなく、xミリ秒の時にどこにいるかを計算する方向に変えました。ただし、呼び出し毎に更新をすると文字が見えないレベルで早すぎたので 30ミリ秒毎に更新するようにしました。

    let lastTime: number = null;
    const step = (timestamp: DOMHighResTimeStamp) => {
        if (lastTime === null) lastTime = timestamp;
        if (timestamp - lastTime > 30) {
            lastTime = timestamp;

            lines.forEach(x => {
                const height = (timestamp - x.delay) / x.v * x.fontSize;
                // レンダリング
            })
        }

        window.requestAnimationFrame(step)
    }
    window.requestAnimationFrame(step);
};

文字列の状態はレンダリング関数中でランダムに生成していたので、一文字ごとに降りるという想定していたアニメーションはできませんでしたが、やってみたらこっちのほうがmatrixぽかったので最初からこっちにすればよかったです 笑

おわりに

10日も遅れてしまってすごい申し訳ない。:pray: この記事に対するコメント、ツッコミ大歓迎です。

typescript入門するはずがアニメーションのレンダリングで詰まっていたのが多かったのでリファクタリングしてもう少し型の優位性を理解したいと思います。

f:id:tjmschk:20191218223833j:plain
型の優位性を理解しているのか？！

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日 、実際３日(金曜に課題が出て月曜発表。なるほど。土日は？)

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

チーム開発

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

プロダクト紹介

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

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

実装

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

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

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

Treasureに感じたVOYAGE GROUPの社風

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

感想

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

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

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

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

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

f:id:tjmschk:20190909192629j:plain

Inside Frontend に参加してきました

WebFrontend conference ScholarShip InsideFE

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

この度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に参加してきました

インターン WebFrontend

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を導入(ここで転び午前中すべて消化)
    • 時間が少なくなったので一覧画面をやめて、buefyのmodalを採用。
  • 大変だったこと
    • 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