mizdra's blog

ぽよぐらみんぐ

はてなサマーインターン2018に参加してクイズ大会で優勝してきた

はじめに

大学3回生の id:mizdra です. 普段はJavaScriptを触っていて, Webアプリケーションを作って遊んでいます.

8月から9月にかけて約1ヶ月間, はてなサマーインターン2018に参加してきました. この記事はその体験記となります.

developer.hatenastaff.com

f:id:mizdra:20180924133406j:plain:w400

応募

僕は普段からはてなブログやはてなブックマークを利用している「はてなユーザ」の一人で, はてなに愛着を持っています. また, Hatena Developer Blogに見られるはてなの技術に対する姿勢が大好な「はてなのファン」でもあります. はてなユーザ/はてなのファンとして, はてなのサービスに直接関わってみたい, はてなの社内の様子を直接見てみたい. そうしたことが動機で, インターンに応募しました. また, 大学の先輩方 (id:miki_bene, id:hogashi) が過去のはてなインターンに参加していて, とても楽しそうにしている様子を見ていたことも応募のきっかけの1つだったりします.

志望動機やポートフォリオを書いて応募すると, 選考面談を受けることになります. 面談ではCTOの id:motemen さんと共に何故はてなをインターンシップ先に選んだのか, 今までどんな技術を学び/扱ってきたかなどについて話しました. 自分が今までに作ったアプリやツールの話をしながら「良い〜」「良いですね〜」などと楽しくお話をさせて頂きました.

その後無事インターンに参加できることが決まったので, 新幹線で埼玉から京都へと向かいました.

新幹線車内で朝食を食べている時の様子です.

前半 (1週目〜2週目)

インターンの前半では技術やはてなに関する講義を受け, その講義で学んだことを活かして演習を解きます. メンターの補助を受けながら, はてなの中の人による講義を受けることができます. *1

特に, 初めの1週間はWebアプリケーションに関する講義があり, 演習を進めていくと日記サービスが完成するというカリキュラムになっています. 加えて2周目ではAWSから講師をお招きしてAWSハンズオンが開催され, 1週目で作った日記サービスを本番環境にデプロイします. 講義でWebサービスを支える技術を網羅的に学び, 学んだことを元に自分の力で実際に稼働するWebサービスを作っていく. このような体験が出来るのは, はてなインターンならではだと思います. 特に, 僕のように普段Webフロントエンドばかりやっていて, DBやWebサーバについてあまり学習する機会が無い, という人にとっては絶好の学習の機会です. はてなインターンの講義は, そうした「Webサービスを支える技術を網羅的に学びたいけど, まだ手が出せてない人」に是非オススメしたいと思える内容でした.

f:id:mizdra:20180924184608p:plain
GraphQLの講義を受けている時の様子です.

また, 今回のはてなインターンでは従来のPerlやScalaをベースとする講義資料が, Golangをベースとするものへと一新されています. 新しいものを触ることが好きな人にもオススメです.

後半 (3週目〜4週目)

配属

インターンの後半2週間は開発チームに配属され, 実際に稼働しているサービスの開発を行います. 僕は第一志望だったコンテンツプラットフォームコースに当たるマンガチームに配属されました. マンガチームではスマホ向けのマンガアプリや, Web向けのマンガビューワ「GigaViewer」などを開発をしています. 今回は一緒に配属された id:YaaMaa さんと共に, GigaViewerの開発を行いました.

GigaViewerについては, 以下の記事で紹介されているので是非読んでみて下さい *2.

developer.hatenastaff.com

開発の様子

マンガチームでは, 主に id:hitode909 さんや id:onk さんとメンタリングしながら開発しました. まずは実際にサービスを使ってみて, どんな機能があったら嬉しいかというユーザ視点の思いをチーム内で共有し, 次にその機能はどういうデザインであるべきか, 実現するにはどういう技術を用いれば良いのか, という議論をしていきます. デザインについては, デザイナーの id:swimy1113 さんと相談しながら決めていきます. その後, 本当に挙げられた技術で機能を実現できるかどうかを詳しく調査し, 実装へと移ります.

実装の過程では, 同じチームに配属された id:YaaMaa さんと2人で手分けしながら開発を進めました. 僕がのんびり開発していたら id:YaaMaa さんがシュッと仕上げていることが多々あり, ヒッとなっていました. すごかった.

ちなみに僕はWebフロントエンドのロジック周りを主に担当していて, id:Pasta-K さんや id:hitode909 さんに相談しながら開発していました. お2方とも的確なアドバイスをして下さり, 爆速で開発を進めることができました. ありがとうございました.

リリースした機能

3つの機能をリリースしました. 全てとなりのヤングジャンプでのみ利用可能です.

  1. 閲覧済み作品の新着エピソード更新通知機能
  2. 新着エピソードのレコメンド機能
    • ビューワの最後のページに更新通知で表示されているエピソードがレコメンドされる
  3. ビューワページのSPA化
    • ビューワページ間の遷移に限定して, シームレスな遷移ができる
    • 遷移速度の改善以外に, 全画面表示状態が遷移後も維持されるなどの効果もある

f:id:YaaMaa:20180910221611p:plainf:id:YaaMaa:20180910221909p:plain
リリースした機能のスクリーンショット*3

「閲覧済み作品の新着エピソード更新通知機能」は「作品の更新を知りたい」という僕の思いから実装されたものです. トップページにアクセスするだけで, 以前見た作品の最新話が出ているかどうか, ひと目で判断できます. 実装にあたっては, 会員未登録のユーザにも更新通知を出したいという難しい要件や, 利用したいAPIがブラウザで実装されていない問題など, 様々な困難に遭遇しましたが, 機能を制限するなど問題を回避できるよう方向転換して*4何とか実装することができました. とても思い入れのある機能です.

また, レコメンドの改善やSPA化は id:YaaMaa さんが提案したアイデアを元に実現されました. SPAの実装は, 技術的に非常に面白い課題でした. どちらもユーザの体験を改善する良い機能だと思います.

f:id:mizdra:20180924152908g:plain
機能をリリースすると, オフィスに転がってるくす玉でお祝いします.

マンガチームの世界観

マンガチームのスペースの中央には木魚が置いてあり, 叩くとチームメンバーがバッと集まってきます. 困ったらこの木魚を叩いて助けを呼びます. また, 木魚の横には id:Pasta-K さんのアクリルブロックが置いてあります. 何だかよく分からないですが, そういう世界が広がってます.

f:id:mizdra:20180924133555j:plain
Suzuriで買えます.

同じ階にはあの「飲み会IoTボタン」が置いてあります.

成果発表

インターン最終日には「ほたて」と呼ばれる「ットなスクをがけた」チームを社員が投票して投票し, 表彰する会があります. インターン生はインターンでの成果をここで発表し, 🏆表彰🏆されます *5.

cybozushiki.cybozu.co.jp

マンガチームは5チーム中, 2位という結果になりました. 準優勝めでたい 🎉🎉🎉. 優勝した id:gazimum さん, おめでとうございます. 次は負けません ⚔️.

f:id:mizdra:20180924133701j:plain

おわりに

今まで経験したことのない最高の夏を過ごすことができました. こんなにインターン生のことを考えているインターンは他には無いと思います. この記事を読んでいる皆さんも, 是非来年以降応募して最高の夏を過ごしましょう.

最後になりますが, インターンを通して本当に色々な方のお世話になりました. メンターや講師の方々, マンガチームの方々, その他インターンを支えて下さった方々, 本当にありがとうございました!

おまけ

白熱する優勝争いの様子です.

https://twitter.com/meteor_saan/status/1032952399256670208

※Mackerelチームのインターン生です.

※大規模チームのメンターです.

https://twitter.com/meteor_saan/status/1032982397539643392

※マンガチームのインターン生 (僕) です.

あわせて読みたい

e-ntyo.hatenablog.com

https://blog.meteors.me/entry/2018/09/08/112050blog.meteors.me

tomoyaf.hatenablog.com

yaamaa-memo.hatenablog.com

turtar-fms.hatenablog.com

noahorberg.hatenablog.com

guni1192.hatenablog.com

*1:僕の場合は僕の大学の先輩にあたる id:miki_bene さんがメンターで, とても丁寧に質問などに対応して下さいました. ありがとうございました 🙏.

*2:余談ですが, GigaViewerのことはインターンに行く前にこの記事を読んで知っていて, 「はてな社ではこんな最高便利なマンガビューワを作っていたのか〜」という感想を持っていました. まさかその開発に携われるとは思っていなかったので, 配属が決まった時は嬉しかったです.

*3:引用元: はてなインターン2018に参加した - 見返すかもしれないメモ

*4:個人的にはインターンシップ一番のハイライトでした.

*5:実は僕はインターンの最後の2日間体調を崩してしまい, 残念ながら成果発表会に参加することができませんでした. 色んな人にめちゃめちゃ心配されたり気遣いして頂いて, お陰さまで今は元気です. ありがとうございました 🙇

ポケットモンスター・ポケモン・Pokémon・は任天堂・クリーチャーズ・ゲームフリークの登録商標です.

当ブログは @mizdra 個人により運営されており, 株式会社ポケモン及びその関連会社とは一切関係ありません.