OUCCの部室について

(この記事はOUCC Advent Calendar 2014 2日目の記事です。 昨日は@susisu2413さんによる非実用 say コマンドでした。)

こんにちは、@spring_rainingです。OUCC Advent Calendar 2014 2日目の記事は、OUCCの部室についてお送りしたいと思います。

OUCCの部室

は、大学の外にあります。大学の外にあるので、24時間365日滞在し放題です。

しかし、部室が学外にあることを伝えると、「なにやら怪しいことをしているサークルなのではないか」という誤解を与えてしまうことが時たまあります。 このエントリによって、部室の紹介を通してOUCCの内情を少しでも知ってもらえたらと思います。

設備

部室はこの建物の3階で、外観はやや広いプレハブ小屋といった感じです。この中に、キッチン・布団・コタツ・扇風機・酒・PC・プリンタ・技術書・ゲーム・漫画・ボードゲームといった各種生活必需品が備わっています。

f:id:spring_raining:20141202131518j:plain

冷蔵庫

f:id:spring_raining:20141202131544j:plain

布団です。だいたい週末には何人か転がっている。

f:id:spring_raining:20141202131635j:plain

雀卓は2卓立ちます。

f:id:spring_raining:20141202131710j:plain

ボードゲームと漫画

f:id:spring_raining:20141202131724j:plain

PCはただいま故障中です。

f:id:spring_raining:20141202131804j:plain

ゲームはPS3, Xbox360, WiiU, SFCなどが備わっています。

最近プロジェクターが導入されたので、各種勉強会・上映会が大画面でできます。

メリット

この部室によって、

  • 各種遊び道具使い放題
  • 終電を逃しても泊まれる
  • 夏と冬、有明からの怪しいブツを実家に届けずに済む

などのメリットが享受できます。しかし、本当に部室が使えることのメリットはこれだけなのでしょうか?

あつまりの場としての部室

実際に部室に来てみればお分かりになると思いますが、部室ではめいめいが思い思いの活動をしています。

最近は大体PC・麻雀・TCG・ゲームなどをやってる人が多いけれど、来る者は拒まず、去る者は追わず、人が集まっているとはいえ部室で特別決まった会話をすることはありません。誰かと話したい時は会話をし、一人でいたい時は会話をしません。

このような場所は、探してみると意外と見つからないと思います。

- - - -

基本的に、大学生は中学や高校に比べてしがらみが無く自由であるため、いわゆるコミュ障である僕が大学で過ごすのは、本来は快適なものです。

しかし残念ながら不本意ながら、僕の実感としては、他人との関わりが全くない大学生が無事に大学を卒業する事は、さまざまな理由から困難であるのが実情です。真のぼっちは大学生活では致命傷なのです。

OUCCには、大学生活を快適に送る手助けをする保証はありませんが、少なくとも手助けの場はあります。 少ないながらも過去問のストックもあります。

コミュ障もぼっちもギークも単位ヤバい人も、あるいはそうでない人も、ぜひOUCCに遊びに来てください。 あらゆるコミュニケーションを放棄できるこの生温い空間を、あなたは気に入ることでしょう。 お待ちしています。

監禁部屋を作った

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

f:id:spring_raining:20141118010524j:plain

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

f:id:spring_raining:20141118010548j:plain

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

f:id:spring_raining:20141118010610j:plain

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

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

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

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

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

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

f:id:spring_raining:20140908150944j:plain

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

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

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

最高の昼食

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

f:id:spring_raining:20140927095038j:plain

f:id:spring_raining:20140927095104j:plain

金曜日はカレーです

f:id:spring_raining:20140927095128j:plain

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

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

まかない日記

インターン前半

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

前半の講義で学ぶことはPerl、データベース(MySQL)、JavaScriptiOSアプリ開発(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テーマとして公開しています。よければご利用ください。

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

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

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

インターン後半

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

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

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

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

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

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

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

追記(9/30)

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

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

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

まとめ

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

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

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

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

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

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

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

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

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

追記

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


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

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

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

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

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

つまり、全てのクラスをwindow.Foowindow.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 --joinCakefileを用いて、複数の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.coffeehoge.fuga.coffeethree.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?

js/main.coffeeの先頭に入ります。これにより、各ファイルのクラスは問題なく宣言・参照することができます。

その後js/main.coffeejs/main.jsコンパイルされるので、html側からは

<script src="js/main.js"></script>

で読み込むことで1つにコンパイルされたjsファイルを使うことができます。

Cakefile参考資料

Cakefileについては、

CoffeeScript付属の軽量ビルドツールcakeを使ってみる - SELECT * FROM life;

が参考になりました。あと、Cakefileのテンプレートとして

GitHub - twilson63/cakefile-template: This is a cakefile template for coffeescript, docco and mocha

を使いました。