2014-11-18

監禁部屋を作った

この前見たアニメに影響されて、監禁部屋を作りました。

f:id:spring_raining:20141118010524j:plain

この一角は自室のクローゼットにあり、掃除も兼ねて棚の2, 3段目を片付けた跡を机にしています。

f:id:spring_raining:20141118010548j:plain

2段目に机、3段目にPCと分けて置くことで、だらだらとネットを見続けないようにしています。

f:id:spring_raining:20141118010610j:plain

クローゼットの扉を閉じれば監禁部屋の完成です。

監禁されたい気分の時におすすめです。

2014-09-27

はてなサマーインターンに参加してきました(写真多めで)

以前の日記に書いたとおり、8月11日から9月5日までの間行われたはてなサマーインターンに参加したので、インターンでの出来事や感想について書きたいと思います。

はてなサマーインターンの内容については、インターンに参加した他の方々が素晴らしいエントリを発表されているので、このエントリでは文章はほどほどに写真多めでお送りいたします。

はてなインターンについて

f:id:spring_raining:20140908150944j:plain

<a href="http://hatenacorp.jp/recruit/intern2014/">はてなサマーインターン2014</a>

はてなサマーインターン2014

はてなインターンは京都にある本社にて行われるので、インターン生は期間中自宅もしくは近くのホテルから本社に向かいます。

僕の自宅はギリギリ京都まで通える所にありますが、毎日長時間通勤するのは辛かろうとのことで、はてなの方に期間中ホテルを手配していただきました。太っ腹です。

最高の昼食

はてなでは毎日手作りの昼ご飯が振る舞われ、無料で食べることができます。

f:id:spring_raining:20140927095038j:plain

f:id:spring_raining:20140927095104j:plain

金曜日はカレーです

f:id:spring_raining:20140927095128j:plain

毎日健康的な食事を摂ることができ、顔のニキビも若干治りました。

もっとはてなのまかないの写真を見ておなかを空かせたい方はこちらをどうぞ。

<a href="http://macanai.hatenablog.com/">まかない日記</a>

まかない日記

インターン前半

はてなインターンでは前半2週間でWebサービスについての講義や実習を行い、後半2週間では実際にはてなのサービスの開発を行います。

前半の講義で学ぶことはPerl、データベース(MySQL)、JavaScript、iOSアプリ開発(Objective-C)と盛りだくさんですが、プログラミングについてだけではなく、以下のようにWebサービスを立案するためのワークショップなども行いました。

まず新しい機能のアイディアを3分でたくさん付箋に書き出していき、

f:id:spring_raining:20140927100819j:plain

その中でビビッと来たものをテンプレートに収まるようにまとめていきます。

f:id:spring_raining:20140927101232j:plain

そして、そのアイディアについて30秒で他のインターン生に発表していき、意見をもらいます。（エレベーターピッチと言うそうです）

もらった意見を元に最終的に作る機能を1つ選んだら、紙に実際に作るサイトの大まかな構成を書いていきます。（ペーパープロトタイピングと言うそうです）

f:id:spring_raining:20140927101258j:plain

ペーパープロトタイプが出来上がったら、今までの実習で作成してきたブログサービスを改造して、独自のブログサービスを作ります。

そして出来上がったのはこんな感じのブログ

f:id:spring_raining:20140927103737j:plain

このブログサービスは、コンセプトを引き継いでTumblrテーマとして公開しています。よければご利用ください。

<a href="http://spring-raining.hatenablog.com/entry/2014/09/17/112359">背景に画像がでっかく表示されるTumblrテーマを作りました。 - harusamex.blog</a>

背景に画像がでっかく表示されるTumblrテーマを作りました。 - harusamex.blog

ありがたいことに、このブログは社内投票によって最優秀賞に選ばれ、はてなTシャツとPressoマグカップをいただきました。

個人でWebサービス開発のためのプログラミングだけでなく、テストや機能立案の方法まで勉強することはそう出来ることではないので、本当に貴重な経験でした。

インターン後半

後半ははてなブックマークチームに配属され、id:doughnutomoさんとはてなブックマークの新機能開発に取りかかりました。

インターンといえども、本当に利用されているサービスに手を加えることになるため、当然本番運用されているソースコードを見ることになります。

詳細は述べませんが、はてなブックマークのあんなソースやこんなソースが丸見えであり、今日はどんな機能を入れてやろうがグヘヘといやらしい笑みを浮かべながら毎日コードを書くことができました。（言うまでもないですが、全てのコードは社員の方の厳しいレビューにより品質が保たれています）

f:id:spring_raining:20140927114009j:plain 息抜きは大事

今回自分の力不足のため、残念ながら期間中に新機能をリリースすることは出来ませんでした。しかし、最終日に行った新機能のプレゼンテーションでは良い反応を頂き、社内投票では2位にまで上り詰めることが出来ました。

今回開発をはじめた機能は、はてなブックマークチームの方々が開発を継続するとのことですので、後日リリースされるかも？しれません。

はてなブックマーク、ご期待ください。

追記(9/30)

本日はてなブックマーク公式ブログにて、新機能『「あとで読む」機能』が正式に発表されました！

<a href="http://bookmark.hatenastaff.com/entry/2014/09/30/112357">「あとで読む」機能を追加しました。タグ「あとで読む」または「後で読む」を付けてブックマークした記事のうち、未読の記事を一覧で確認できます - はてなブックマーク開発ブログ</a>

「あとで読む」機能を追加しました。タグ「あとで読む」または「後で読む」を付けてブックマークした記事のうち、未読の記事を一覧で確認できます - はてなブックマーク開発ブログ

この機能、個人的には通知される曜日・時間が指定できる点がミソであると思っています。毎日朝に読んだり、休日の昼にまとめて読んだり、いろいろな使い方ができるので、ぜひ自分の生活サイクルに合わせてご利用ください！

まとめ

f:id:spring_raining:20140927120320j:plain 最終日のTGIF

1ヶ月という期間の長いインターンシップでしたが、終わってみればあっという間でした。期間中はメンターや社員がつきっきりでバックアップしていただけるため、とても安心してコーディングすることが出来ました。本当にお世話になりました！

はてなサマーインターンでは、Webサービスの作り方についてプロフェッショナルに教えてもらえて、交通費宿泊費昼食代全部無料で、後半課程に進めば10万円の給料までもらえるので参加しない手はありません。興味のある方は来年ぜひ参加しましょう！！

↓↓↓他インターン生の素晴らしいエントリはこちらです↓↓↓

<a href="http://biscuitomo.hatenablog.com/entry/2014/09/08/103415">「はてなインターン」という革命について - どーなつの連続性定理</a>

「はてなインターン」という革命について - どーなつの連続性定理

<a href="http://masawada.hatenablog.jp/entry/2014/09/08/071415">はてなインターンに参加してクレジットカードを作ってアイロンを買った話 - あんパン</a>

はてなインターンに参加してクレジットカードを作ってアイロンを買った話 - あんパン

<a href="http://windymelt.hatenablog.com/entry/2014/09/11/003128">打ちのめされるようなすごいインターン - はてなサマーインターンに行ってきました - Lambdaカクテル</a>

打ちのめされるようなすごいインターン - はてなサマーインターンに行ってきました - Lambdaカクテル

<a href="http://mactkg.hateblo.jp/entry/2014/09/24/123345">はてなインターンに行って高2から使ってるはてなブログのコードを触った - 半空洞男女関係</a>

はてなインターンに行って高2から使ってるはてなブログのコードを触った - 半空洞男女関係

2014-09-20

CoffeeScriptファイルどうやって分けるか問題

追記

お恥ずかしい限りですが、この記事はWebpackやBrowserify等、複数のJavaScriptやCoffeeScriptなどのファイルをまとめるツールが世にあることを知らない頃に書いた記事となっています。以前の内容も参考までに掲載しますが、多くのケースではこれらのツールを使って管理をする方が得策でしょう。

今開発しているアプリケーションのCoffeeScriptファイルが500行を越えてしまい、そろそろファイルを分割しておかなければならない気配がしたので、ここ数日でCoffeeScriptファイルをどうやって分割するか方針を考えていました。

ネット上を探すと、おおよそ3つの手法に分かれていたような気がします。

1. クラス名の先頭に`window.`を付けて、htmlからコンパイルしたjsファイルを全て読み込む

すぐに分かる CoffeeScript によるクラスの書き方｜ Developers.IO

このサイトを参考にしました。

つまり、全てのクラスをwindow.Foo、window.Barという感じにwindowのプロパティにしておいて、html側で

<script src="js/foo.js"></script>
<script src="js/bar.js"></script>

とまとめて読み込む方法です。

利点

一番楽そう

欠点

ファイルが増えたときにいちいちhtmlファイルに書き込まなければならない
htmlファイルの読み込み順を考えなければならない
クラスを入れ子にする場合、先に親クラスを定義する必要がある

2. require.jsを使う

jsファイルは別々にコンパイルしておくが、RequireJSというライブラリを用いてそれぞれのjsファイルを動的に読み込むという方法です。

利点

requireという関数を用いて、簡単に別のjsファイルを読み込むことができ、依存関係も分かりやすい
不必要なjsファイルを読み込むことがない

欠点

ライブラリを用いるため、学習コストが上がる
jsファイルの読み込み順を指定できない
require.jsに関連する問題が発生した時に解決が大変そう

3. 複数のCoffeeScriptファイルをまとめて1つのjsファイルにコンパイルする

coffee --joinやCakefileを用いて、複数のCoffeeScriptファイルを1つのjsファイルにコンパイルする方法です。ただしCoffeeScript 1.8からはcoffee --joinはdepricatedになったようです*1。

利点

1.の案からhtmlに書き込む手間がなくなる
window.は必要なくなる

欠点

Cakefileを書く手間
CoffeeScriptファイルの接続順を考えなければならない
クラスを入れ子にする場合、先に親クラスを定義する必要がある

3つの案のうち、最初は2.にしようと考えていましたが、開発するアプリケーションがシングルページのため、jsファイルを非同期で読み込むメリットが薄そうだったので、結局3.の方法を使うことにしました。

参考：RequireJSをプロジェクトで使ってみての所感 - ダーシマ・ヱンヂニヤリング

結局どうしたか

以下のようなCakefileを書いてcakeすることで複数のCoffeeScriptファイルをまとめることに成功しました。

jsDir以下のCoffeeScriptファイルをまとめてdestFileにコンパイルするやつ

長くなってしまいましたが、大まかに説明すると、jsDir以下のディレクトリのうち、ignoreDirsを除いたものからCoffeeScriptファイルを探して、それらのCoffeeScriptファイルをいい感じに接続したものをdestFile + '.coffee'に保存した後、そのファイルを同名のjsファイルにコンパイルするというのを行っています。

例えば、以下のようなファイル構成とします。

app
├── index.html
├── Cakefile
└── js
    ├── lib
    │   └── someLibrary.coffee
    ├── foo
    │   ├── bar.coffee
    │   └── hoge.fuga.coffee
    └── one.two
        └── threeFour.coffee

このとき、各ファイルの内容は

# js/foo/bar.coffee
class Foo.Bar
  ：
# js/foo/hoge.fuga.coffee
class Foo.Hoge.Fuga
  ：
# js/one.two/threeFour.coffee
class One.Two.ThreeFour
  ：

のようなクラスが書かれているものとします。

ここでcake buildを行うと、js/以下のうちlib/を除いたbar.coffee、hoge.fuga.coffee、three.coffeeを連結したものがjs/main.coffeeに保存されます。

ただ、このままでは親クラスを定義しないでいきなり子クラスを書き始めることになるので、js/main.coffeeの先頭にはディレクトリ構成に応じて何行かコードが自動的に挿入されて名前空間の確保を行います。

上の例では、

Foo = {} unless Foo?
Foo.Bar = {} unless Foo.Bar?
Foo.Hoge = {} unless Foo.Hoge?
Foo.Hoge.Fuga = {} unless Foo.Hoge.Fuga?
One = {} unless One?
One.Two = {} unless One.Two?
One.Two.ThreeFour = {} unless One.Two.ThreeFour?