Node.js+Expressでブラウザ上でアニメGIFを作るための便利ツール作った

日本人なら皆、日常的にアニメーションGIFを作って遊んでいると思う。野球、相撲、反原発デモに並ぶ国民的スポーツと言っても過言ではない。

スマートフォンアプリだとGifBoomという革命的便利ツールがあるからいいんだけど、PCで作ろうとなると良いツールがなくてimagemagickを直接叩くとかしなければならなくて困ってた。
アニメGIFを作るためのブラウザ上で動く何かがあればいいと思って作った。

名前は2012年に発売された革命的デバイスにちなんで"gifkobo"。

機能

主にできることとしてはこんな感じ。

• コマンドから画像素材のあるディレクトリをコマンドから起動
• アニメGIFに使いたい画像をクリックで選択するGifBoomっぽいUI
• Delay（アニメを表示するときの遅延時間）とSize（生成するアニメの幅と高さ）の指定
• 生成されるGIFのcanvas上での逐次プレビュー（生成されるGIFの大まかな様子が右の画面で分かる）
• ドラッグ&ドロップで画像素材をアップロード

試しに動かすときに使えるようにid:catatsuyの画像素材が付録としてexample/にある。パブリックドメインなので、どうぞご自由にお使いください。

使い方

npmモジュールとして公開してる。素材にしたい画像のあるディレクトリを指定して起動する。

$ npm install gifkobo -g
$ gifkobo /path/to/your/images/

デフォルトでは3000番ポートにサーバーが起動する。
http://localhost:3000/にアクセスすると指定した素材画像を使ってアニメGIFが作れる。

技術的なこととか

使ったNode.jsのモジュールはこれくらい。express以外は一部で利用するくらいでそんなに使ってない。

• express
• hogan.js
• imagemagick
• async
• request

今回は画面遷移のない小さいWebアプリケーションだったから、expressのようなシンプルなフレームワークを使うのはすごく楽だった。

感想

個人的に便利に使えてるし作って良かった。他の人にとっても便利かどうかはよく分からない。

割と適当に作ったから問題点は割とある。

• Canvasでのプレビューの解像度がよくなくてぼやけた感じになる（canvasで伸縮してるから???）
• Canvasでのプレビューと生成されるアニメGIFに結構差がある
• UIあまり良くない
• アニメGIFを素材として使おうとするとよく分からない挙動をする

色々あるけど、使ってるうちに困ったらその都度直していこうと思う。

Github

詳しくはGithubに書いてる。
uiureo/gifkobo · GitHub

色分けして表示するIRCログビューアをつくった

uiureo/osirco · GitHub

IRCログの見るのであんまり気に入るのがなかったからRailsで作った。発言者の名前によって色分けをしたり、無限スクロールしたりする。データベースにログを放り投げるBotを適当に立てて使う。

色分けには前に作った文字列から色を生成するJS - 夢想ヒッチハイカを使った。

たぶん探せばこんなのいくらでもあると思うし、他の人が使えるようなものでもないから本当に個人用なんだけど自分では結構便利だと思って使ってる。

昼夜逆転を一日で元に戻すためのたったひとつの方法

　最近まで何ヶ月も朝6時に寝て昼15時に起きるという完全な昼夜逆転生活をしていた。でも最近になって社会と関わる必要性を認識し始めるにともなって、昼夜逆転している生活に不便さを感じるようになった。15時に起きると明るい間に活動することは困難だし、何か買い物しに行こうと思ってもベッドの上でゴロゴロしている間にお店が閉まってしまう。生活リズムを朝に起きて夜に眠る生活に一度戻したくなった。
　朝に起きるために夜24時くらいに寝ようとするんだけど、脳が覚醒していてまったく眠れない。無理やりにでも寝たいからベッドの上でずっと目を閉じて寝転がっているんだけど、頭の中で考えごとが収まらなくて何時間たっても眠れない。

眠るために試みた方法

ただ寝ようとするだけではダメだと分かってネットで検索したり人に聴いたりしてあらゆる方法を試したけどまったく眠れなかった。

寝る前に風呂に入る

ただ体がスッキリした気分になるだけでまったく眠気が襲ってこない。風呂の中で考えごとをする習慣があるので脳が覚醒してむしろ眠れなくなった。
風呂の中で将来のことなんかを考え始めたら不安になって眠るどころじゃなくなる。

徹夜して次の日の夜まで眠らない

昼ごはん食べた後くらいに力尽きて昼夜逆転が悪化した。徹夜は生きていて気分が最悪だし二度としたくない。死んだほうがマシな気分になれる。

運動して疲れる

普段まったく運動をしないから全身筋肉痛で眠れなくなった。眠れない上に全身筋肉痛だからベッドに寝転がってひたすら天井を見つめてた。辛かった。

後頭部に意識を集中させる

2chのまとめブログで見つけた。頭の後ろの奥に意識を集中させると知らない間に眠ってしまってるという話だった。
数十秒くらい意識を集中したら、スパゲティと吐瀉物が混ざったようなモヤモヤとしたイメージが浮かんできて怖かった。意識を集中させるのをやめても同じようなモヤモヤとしたイメージが襲ってきてすごく不安になった。

眠くなる飲み物を飲む

ホットミルクを飲んだ。おいしかった。眠いような気分にはなったけど、結局眠れなかった。本当に気休めにしかならなかった。

たったひとつの方法

開き直って薬に頼る

もうどうしようもないと思ったから、ちょっと不安だったけど睡眠導入剤に頼ることにした。
医者に行って貰うのもアレなので市販の薬を使うことにした。
使ったのはレスタミンコーワ糖衣錠 220錠 【ケンコーコム】でドリエルという睡眠薬と同じ成分で8倍以上安い薬。アレルギー薬の副作用を利用して眠くなるだけだから飲み過ぎたりしてもそれほどひどくならない。
ドリエル買うならレスタミンなの？ - ぼくはまちちゃん！(Hatena)

これを寝る3時間前くらいに3錠ほど飲んだらこれまでの不安がなかったかのようにぐっすり眠れて、数カ月ぶりにちゃんと朝に起きれた。2日くらい続けて飲んだあとは薬を飲まずとも夜24時に眠れるようになった。
朝9時に起きて夜24時に寝る生活になってからは、もう勝ちまくりモテまくりな気分で何事も順調にうまくいってるような気がする。

どうしても眠れない人は薬に頼ってみることを考えるべきかも。

文字列から色を生成するJS

文字列それぞれがそれに対応する色を持っていたら楽しそうだと思ったから作った。Webサイトで見出し毎に色分けするときなどに使える。
文字ごとに色を持たせるようになっている。できるだけ異なる文字は違う色になっていて、大文字と小文字の色は近くなるようにした。

ASCIIコード表をもとに色分けをしているため、順に並べると鮮やかに見える。

文字列の場合は個々の文字の色を混ぜあわせて新しい色を作ってる。

漢字にも対応している。

内部的にHSV色コードを使っていてそれをRGB色コードに変換する式が思ったよりも複雑で面倒だった。色コードの扱い方がよく分からなかったから調べたけど、どれも複雑そうだった。なんとなく色コードはどれもシンプルで簡単そうなイメージを持っていたから意外だった。

デモは下のリンクにある。フォームに入力するとその色が下に出る。
http://uiureo.github.com/chame/demo/

ソースコードはGithubに置いてる
uiureo/chame · GitHub

大学生のための講義情報共有サービスLecanaをリリースしました

http://lecana.net/
『カニバリズム山脈』という名前で提供していたサービスの後継として新しくWebサービスをリリースしました。
簡単に説明すると、大学生が時間割を組んだり、講義の情報を共有したりすることのできるサービスです。
コードをゼロから書き直し、デザインも新しくなりました。チーム3人で開発を行って、僕は主にバックエンドの開発を担当しました。
開発にあたって意識したのは次の3点です。

• 年度が更新されても講義の情報が蓄積されるようにすること
• 複数の大学に提供できるようにすること
• 機能をできる限りシンプルに保つこと

現在は京都大学のみに対応だけれど、他の大学にも対応していこうと思っています。

技術的には、Rails3.1 / CoffeeScript / Haml / Sassを使った。特にHamlを使ったおかげでViewがすっきりして変更がしやすくなった。RspecでModel周りのユニットテストは書いたのだけど、仕様があまり決まってなかったこともあって他の部分ではあまりTDDできなかったのが心残り。

思ったよりもプロジェクトが遅延したこともあって、リリースするまでは心理的負担もかなり大きかったんだけど、なんとか4月初めにリリースできてよかった。
メンバーがコミットしてきたコードがカオスすぎて爆笑しながらリファクタリングしたのはすごく貴重な体験だった。
それ以来、彼には将来的に変更する可能性のない部分のコードのみを任せている。

「多分動くと思うからリリースしようぜ」

時間割で大学生を分類する [カニバリズム山脈クラスタリング ]

カニバリズム山脈(http://cannibalism.jp/)という大学生の時間割を共有するサービスを京大学内向けに運営している。
多くの学生の時間割のデータが集まっているので、これをデータ・クラスタリングして大学生を分類できないかと思ってやってみた。
データ・クラスタリング - Wikipedia

動機としてはどちらかというと試験期間前の現実逃避という色が強い。

説明

使ったデータは、ユーザーの名前（Twitter ID）とそのユーザの登録してる授業科目のIDで、数はおよそ300ユーザーくらい。
クラスタリングには『集合知プログラミング』のコードをPythonからRubyにほとんどそのまま書きなおしたプログラムを使った。データにうまく対応させるために書き換えたりした部分もある。

データを分類するためには時間割の類似度を測ることが必要なのだけど、これにはTanimoto係数を使った。Tanimoto係数は集合の類似度を測る指標で、単純に集合の共通部分の要素数を和集合の要素数で割ることで求められる。

Aの要素数 Bの要素数 AとBの共通部分の要素数

結果

下は階層的クラスタリングしてデンドログラムというグラフにしたもの。時間割の類似度が高いユーザ間ほど直線で直接結ばれやすくなる。
詳細画像：http://i.imgur.com/GAjcm.png

次のはどの塊がどの学部学科に対応するかデンドログラムに手動で注釈をつけてみたもの。同じ学部回生がクラスタに集まってることが分かる。
専門科目の多い学部学科ほどうまく分類しやすいみたい。
詳細画像：http://i.imgur.com/s53nB.png

次のは多次元尺度構成法を使って2次元平面に写しだしたもの。時間割の似ているユーザほど近くに位置して、似ていないユーザほど遠くに位置するようになる。
デンドログラムと比べるとはっきりしないけど、同じ学部学科や学年が集まりやすいことが分かる。
詳細画像：http://i.imgur.com/t8r5Q.png

まとめ

時間割という枠の限られたデータだからうまくいかないかもしれないかと思ったけど、意外とうまくクラスタリングできて良かった。
類似度を用いると同じ学部学科の人間を推測できたりして色々と楽しそうなことができるので、これからのサービス開発に役立てていけたらいいなと思う。

『集合知プログラミング』にはデータ・クラスタリングなどの機械学習のトピックを分かりやすく説明されている素晴らしい本なので、大学生の人はつまらない試験勉強なんかせずにこの本を読みましょう。

コードとか

集合知プログラミング

今年やったバイト

今年、大学に入ってから初めてバイトをした。偶然の巡りあわせで貰った仕事が多くて、面白い経験をしたのでまとめておく。

共感覚実験

前のエントリ*1にも書いたけど、大学の授業に出たことがきっかけで貰った。
だいたい月に1回くらい研究室に通って実験を受けた。実験を受ける時間は1回につき1時間くらい。時給は1000円。
暗い部屋の中で明るいディスプレイを見つめないといけないから目がかなり疲れる。思ったほど楽なバイトじゃなかった。
名古屋にまで実験に行ったことで区切りはついたみたい。もしかしたら続きがあるかも？

Redmineプラグインの開発

サークルの飲み会の席でOBを通じて貰った仕事。Ruby on Railsを使ってRedmine*2のプラグインを作るという案件で人手が足りないから手伝って欲しいとのことだった。
8月から9月にかけての短期のバイトとして貰った。どこで作業してもいいという話だったので、帰省中の実家で仕事をした。
仕様を満たす機能を作るには、MVCを無視しなきゃいけなかったり黒魔術を使わなきゃいけなかったりで、クリーンで楽しい感じの開発ではなかった。
受託開発の下請けみたいな感じの仕事だったので、受託というのはこういう物なのかと参考になったし良い経験だった。時間単価じゃなかったけど、時給に換算すると給料もかなり良かった。でも、Redmineの開発はもうやりたくないなぁ。

ソーシャルゲームの開発

6月に思ったよりも大学がつまらなかったので、バイトでも始めようと思ってあるWeb企業の面接に行ったらなぜか別の会社を紹介されて、その会社に面接に行って貰った仕事。
GREEなどで動いてるソーシャルゲームを多数作ってる会社で、僕はそのうちの一つのチームに配属されている。やってる仕事はソーシャルゲームの開発というよりもそのゲームを管理するためのツールを開発しているという感じ。これもRailsを使って開発してる。
環境がとても良くて、オフィスがとても綺麗でかっこいいし大学からも近い。お菓子が常備されているから、あんまり食べないようにしないといけないと思いつつもついつい食べてしまう。
ソーシャルゲームという今流行の分野ということもあって、時間の流れるスピードはとても速いように思う。多数のアクセスを裁くために様々な新しい技術が使われていて、ソースコードを読んでいて感心することが多い。初めて読む業務のソースコードということもあって、プログラマとして参考になることが多かった。
7月から始めて週に二回くらい行ってる（なかなか行けないときもあるけど）。何度か長く休んだりしたけど、一応今も働いてることになってる。
ちなみにここ。
http://www.happyelements.co.jp/

これから

実験を除くとどちらもRails2での開発だったので、来年はRails3やJavaScriptや他の言語の仕事もやってみたいと思ってる。
お金がそれほど欲しいわけじゃないのに、なんでバイトやってるんだろうと時々思うけど、それはたぶんその仕事が刺激的で楽しいからで、そういう刺激がなくなってしまうと辞めてしまうんだろうなぁと思う。刺激的で楽しい仕事を来年もやることができたらいいなと思う。