#daiizメモ

Scrapboxに夢中

はてなサマーインターンが終わり、エンジニアへの道が始まった

最高の夏が終わって一週間が経ちました。
今年の夏、8月10日 〜 9月4日の間はてな京都オフィスで開催された「はてなインターン2015」に参加しました。

感謝

メンターをしてくださった id:amagitakayosi さん、後半過程でご指導くださった id:hitode909 さん、id:ueday さん、 インターン期間を通して楽しい時間をつくってくださった id:hakobe932さん、ありがとうございました。 はてなの皆さま、大変お世話になりました。ありがとうございました。

ここからは、インターンの進み方や、学んだり感じたことなどをレポートしていこうと思います。以下に目次が生成されていますので*1、気になるところから読んでいただければ嬉しいです。今後も随時追記していきます!!

参加するまでの気持ち

「自信をつけたかった」、この一心で応募しました。
過去のインターンレポートなどを読んで、 「はてなでウェブサービスの基礎を学んでプロダクトの開発を体験する」という一連のインターンを終えた暁には、自分の技術力と新たな技術を学ぶ体力に自信が付いているはずだと思っていました。その通りでした!!

インターン前半(講義期間)

前半期間は、はてなでの開発に必要なスキルを一気に詰め込みました。終わったときは、まさか一週間だけでPerlの基礎、SQLデータベースの基本操作、HTTP, WAF、JavaScriptを学なぶことができるとは、、という感想でした。
これまで、新しい何かで面白いものを作ってみようと思い立ったとき、 書店で見つけた入門本で勉強するとなかなかHello worldより先に進めなかったり、逆に高度すぎる本を買ってしまうと言語や仕様設計の理論は詳しく学べるのだけど、具体的にどうやったらサービスを作れるかなどの手順は得られなかったりという経験をしていました。また、インターネットにはたくさんの情報がありますが、これらの中から自分に必要なものを見極めることも大変だと感じていました。

インターンで使用されたHatena-Textbook講義はウェブサービスを作るために当面必要になる知識だけを上手くまとめてくれていました。まだ今年度版は一般公開されていないようなので、公開されたら是非読んでみてほしいと思います。

講義期間は午前中に講義を受け、昼食後から定時(定時越えもOK)までいっぱいかけて課題に取り組むというスケジュールで行われました。今日の課題で作ったものが明日の課題でそののまま使われる形式だったので緊張感がありました。明日の自分のために綺麗なコードを書こうと心掛けたつもりでしたが、とりあえず動くものを作ることに精一杯であまり綺麗でないのコードを書いてしまった気がします。こんなコードでも毎回丁寧にレビューしてくださったid:amagitakayosi さんに感謝しています。 お菓子のビスコの袋が上手く開けられなくなるまで疲れた日もありましたが、毎日最高の環境でプログラミングをできる幸せ感が圧勝でした。

前半期間の最終日は、これまでの講義+各自で加えた面白便利機能を通して仕上がった「日記ウェブサービス」の発表会が行われました。みんなの作品が最高に凄すぎてビックリしました。たいへんいまさらですが、作ってみたい日記アプリがだんだん思いついてきたので機会があれば作ってみようと思います。

この章のまとめ

  • はてな教科書は最高
  • 課題量は多かったが、こんなに達成感と満足感のある課題をこなしたことは、未だかつてない(今後もないと思う)
  • 気になったらすぐに質問できる環境は素晴らしい
  • やったらやっただけレビューをもらえる課題だった
  • CUIで日記が動いたときが最高瞬間テンションだった
  • 個人的な感想として、「課題ができなくて定時を超えてしまう」のではなくて、「あれもこれもやってみたいと思ってコードに触っているうちに定時を超えていた」という感覚だったので、他の感想エントリなどを読んで定時超えていても怖がらなくて良い!

インターン後半(実践期間)

無事にめでたく全員で、後半過程に進むことができ、それぞれのコースに配属されました。 今年は応募時に希望のコースが聞かれ、インターン開始前に配属先が決定している状態でした。予め決まっていると、前半のうちに後半で作りたいもののアイデアを練ったり、前半で辛くなってときに乗り越えるためのモチベーションになったりして良かったと思います。

はてなブログチーム

配属された日の夜にブログチームの社員さんに美味しい焼肉をごちそうしていただきました。この席で、はてなブログとその開発についていろいろ教えてもらいました。サービス開発の心得として、id:hitode909さんが仰っていた「自分たちのサービスだから、自分たちが一番使って、よく知っていないと。」という言葉が印象に残っています。

後半開始の日の日記

つくったもの

配属された翌日の朝に、最高のブレインストーミングをして期間中に取り組むテーマを決めました。 いろいろと案が出てきて議論の結果、「引用機能」に決まりました。僕がこの機能の種となるアイデアを出してから、さらにアイデアを出しあって、勢い良く最高の機能のストーリーが出来上がりました。後述するリリースエントリでも詳しく説明されていますが、この機能を使うと、はてなブログ上の引用したいフレーズを

  • マウスでドラッグして選択
  • ストック
  • 執筆中の記事に貼り付け

の手順で簡単に引用することができます。「インターネットの引用のフォーマットを正しく良くしていこう!」と考えたときに様々な提案方法があると思うけれど、「引用の正しいフォーマットを解説する記事を公開して、HTMLテンプレートをコピペしてもらって、、」という世界よりも、サービスの一機能を使っていたら自然と良いフォーマットで書いてくれて、集中して記事を書いた後から「へえ、引用ってこう書くのが正しいんだ」というくらい無意識に学んでいけるような体験が素敵だなと僕は思っていたので、この機能が動き始めたときにはとても嬉しかったです。

リリース第1弾

ほっと一息つく間もなく、次の機能の開発に取り掛かりました。最初に想定していたよりも開発熱意が盛り上がってきて、考えることがどんどん増えてきました。 次に取り組んだのは、

  • 記事中の引用を引用する機能
  • 言及の一覧*2にて、引用されたフレーズもお知らせする機能
  • 引用されたコトバをはてなブログトップページで紹介する「新着フレーズ」機能

です。 記事中のblockquoteタグの内容を引用するためのボタンを表示するとき、そのblockquoteがすべて正しい文法で書かれているかどうかは分からないため、なるべく多くの表記を解釈できるように工夫することが大変でした。本来は必要だけれども記載されていない情報などは、可能な限り引用機能が補充して、正しいフォーマットで再び引用できるようになっています。

リリース第2弾

引用されたフレーズをきっかけに新しい記事に出会うことができる「新着フレーズ」欄も最高だと思っています。是非ご覧ください!



開発した機能のイメージを付箋に書いて増やしていった図

開発の進み方

最初の方はid:akiym さんとペアプロをしていましたが、ある程度方針が固まった時点から、サーバーサイドのPerlはakiymさん、ブラウザ側のJavaScriptは僕が書くように分担して進めました。akiymさんがすばやくAPIを用意してくれるので、それに追いつこうと頑張りました。 はてなブログのコードを初めて見たとき、これまで扱ったことのないくらいのファイルの多さに驚きました。その晩は、しばらくコードを眺めて、普段使っているブログの機能の名前と似ている変数名やクラスを見つけたりして楽しんでいました。翌日早速開発が始まると、自分が手を付けるべきファイルを探しているうちに迷子になったりしてその度にid:amagitakayosi さんに助けてもらっていました。ありがとうございました。

ブラウザ側では、機能の操作のイメージを掴むために仮画像のボタンなどを埋め込んだりして作業していたのですが、ある程度まで実装が進むとデザイナーのid:ueday さんがやって来てくれて、あっという間にデザインを当ててくれたことには驚きました。

僕が作っていた無機質なパネルがこのようになったのを見たとき、「ああ、はてなだ!!!」と思いました。機能に生命が吹き込まれた感じがしました。

この章のまとめ

  • サービス開発はどんなときもユーザーさんの視点で考えることが第一。
  • アイデアが浮かんだら他の人に話してみると良い。より面白くしてくれたり、自分が気づいていない落とし穴を見つけてくれたりする。
  • ペアプロは予想以上に緊張するけれど、楽しい。
    • 最初の方は緊張しすぎたが、慣れてくると「こんな感じな設計にしようと思うんだけどどうかな」とか「良い変数名思い浮かばない」とか気軽に相談できて良かった。
  • 絵を描きながら考える。(uedayさんに教えてもらったこと)
  • 実際のサービス開発を通して、これから勉強することは山ほどあるということに気付き、また、何から学ぶべきか、目標をどこに設定するかなども具体的に見えてきた。

イベントなど

インターン期間中、たくさんの企画がありました。特に印象に残ったものをほんの少しだけ紹介します。

金曜日のLT大会

みんな好きなことを話しますが、そのレベルが高くてすごかったです。僕も自作のツールApricotについて話しました。 来年インターンの方も楽しいので話すと良いと思います。ちなみにApricotはフルスクラッチで書き直し、Apricot 2.0 が生まれる予定です。

Hatena Design Hour

デザインの勉強をせずに言うのも大変失礼なのですが、僕はウェブサイトやウェブアプリなどのデザインにも興味があり、はてなデザイナーワークショップにも参加させてもらったことがあります。 会場の後ろのほうで、B!KUMAのデザインや、はてなブログのデザインに関する興味深いお話を聞かせていただきました。

はてなブックマーク10周年

おめでとうございます!
id:hakobe932さんが記念ステッカーを配りに回って来られたとき、 10周年記念の日に京都に居られるということは、なんだか、ものすごくありがたい感じがしました。

鴨川からの大文字送り火観賞

一度見てみたいと思っていたので感動しました。少し遠目からの観賞だったため、小さくしか見れませんでしたが、文字ははっきりと読めました。このときの雰囲気を再現し、ここでも小さめに観賞できるように、このブログのファビコンに設定しておきました。ブックマークバーでお楽しみください!

食事

昼食はオフィスで美味しいMacanaiが食べられました。マイ・ベストMacanaiは8月25日でした。

http://miil.me/p/6e5ll
緑豆春雨のチャプチェ

夕食も社員さんに美味しいお店に何軒も連れて行っていただき大感謝です。ありがとうございました。朝食は、ホテルの近くに「やよい軒」という良いお店があり良い感じでした。

はてなランチはもちろんのこと、京都での食事は美味しいものばかりだったので食べたものは記念写真に残しておきました。

すき焼き

最終日翌日のお昼にインターン生みんなで行った高級すき焼きのことは絶対に忘れません! 予約が最後までバタバタしてすみませんでした!!

http://miil.me/p/6goi3

昨日ステーキガストのステーキを撮って気付いたのですが、今回のインターンを通して、牛肉の写真の撮り方が向上したように思います。

これから

はてなインターンという大変貴重な経験を通して得た技術、知識や考え方などを今後の開発でしっかりと生かしていかねばならないと感じています。 コードレベルではすぐには成果を出せないかもしれないけれど、何かを作ろうと企てたときの設計の仕方や方針を落ち着いてまとめたり、また、テストはどう書こうと考えるようになったことなど、考え方の部分では既にインターンでインプットしたものが少しずつ染み出てきている気がします。設計やコード綺麗になったねと言われる日を目指して頑張ります。これからが勝負だ。

http://miil.me/p/6gkrz

最高のインターン仲間

はてなインターンの素晴らしさのひとつに、一緒に参加しているインターン生みんながとにかくすごいという点があると思いました。ホテルからオフィスへ向かう途中、ランチや飲み会のとき、つねに何らかのプログラミングの要素がありそうなことを話していた気がします。それぞれが自分の興味のあることに関するプロフェッショナルなので、僕にはすぐに理解できないことばかりだったので、いつか挑戦しようと思い毎晩帰ってからノートに書き留めていました。新たな視点や刺激を受けるには最高の環境でした。

ここでは、一緒に約一ヶ月のインターン期間を過ごした仲間の感想エントリを紹介します。

  • tom__bo さん
tombo2.hatenablog.com
  • Lepton さん
leptont.hatenablog.jp

揃い始めたら、引用させてもらいつつ新たな振り返りを加筆してゆく予定です。また、良い感じに写真を増やしていきたいと思っています。

関連記事

  • 後半過程の日記

*1:目次記法を使いました: http://staff.hatenablog.com/entry/2015/09/09/152158

*2:「言及の一覧」は昨年のインターンで開発された機能です!