new new new new year

http://nnnny.jp/

をすごく微妙にアップデートした。元々つなぎで作ったサイトで、jsonファイルに画像のパスとかタイトルだけ書いたら、グリッド状にレイアウトしてくれるみたいなフレームワークを作ってたんだけど、画像数も増えてきたので一定数のエントリで区切って必要に応じて継ぎ足すようにした。

画像をクリックすると元画像にリンクしてたんだけど(グラフィックの詳細が見れていいと思う)、ついでにlightbox系のビューアもつけた。以前はFancyBoxとか使ってたんだけど、新しいバージョンにしようと思ったらライセンスがCC BY-NC 3.0になってたので自作した。ポモドーロテクニックを使って、画像だけなら見積もり通り5ポモドーロでできた。完成後に見つかったバグ修正やYouTube貼付け機能の追加は入れてないので実際はもう少しかかってる。テストないしWindowsで確認してないのでバグがあるかも知れない。ひどいと思うけど、今のところ「こんなことやってましてね」って対面で見せるために作ってるので…。これがバージョン2で、データベースを使ったバージョン3を開発中。

まだまだ整理されてないところもあるけど、それなりに去年身につけたことを反映できたのではないかと思う。今までは割と変数名やメソッド名が適当で、メソッド名が示すことの以上のことを平気でやってしまったりしていたのだけど、そういうところを意識して設計や命名を適宜修正するよう心がけた。

ビューア、レイアウト、ページ継ぎ足しを組み合わせたシンプルなギャラリーフレームワークがようやくできそうな雰囲気が掴めた。もうちょっと色気のある見せ方をしたいのと、ちゃんとテストも書いて、ファイルの最適化もしたい。Yeomanとか使うと良さそう。クロスブラウザ対策もSauceとか使ってみたい。

という訳で去年と今年のKPT

Keep

• デザインとかファッションに興味を持ち続ける
• HTML, CSS, JavaScript, ActionScript3, Objective-C
• Ruby, Python, PHP
• データベースの勉強
• 次の仕事探し

Problem

• インターネット見過ぎ
• プログラムの設計
• スケジュールの見積もり
• 部屋の片付け
• ごみ捨て忘れ
• 近しいはずの人ほど適当に扱いがち
• 自動化足りてない

Try

• 関数型言語で何か作る
• 技術だけでなくマネジメントも勉強する
• データドリブンなグラフィックデザイン
• ゲームを作る
• 音楽を作る
• お金を稼ぐ

どうせこんなことを書いていても今日の夕方には忘れるし見返したりもしないので、折に触れてリマインドする仕組みが必要ですね。「問題を根性で解決するな、エンジニアリングで解決しろ」ということです。

今年もよろしくお願いします。

Designing Tumblr

Tumblr解説本、Designing Tumblrを献本していただきました。ありがとうございます。僕が関わったKAKATO、梅川良満さんのTumblrも紹介してもらってます。あとthirozumiさんのページで投稿されてるのが僕のTEE PARTYの商品です。

で、KAKATOで使ったURLをランダマイズするスクリプトの掲載部分が中途半端だったので、補足しておきます。urls配列に入れたURLをダウンロードボタンとして使っているa要素(id="downloadURL")にセットするところ。

var urls = ["ダウンロードURL1","ダウンロードURL2","ダウンロードURL3"];
var a = document.getElementById("downloadURL");
a.href = urls[Math.floor(Math.random() * urls.length)];

アップロード先のサーバが混雑してたり落ちてたらURLだけ分散しても意味ないので、実際にこのような目的で使う場合はアップロード先も分散しておいた方がよいと思います。

本当は技術的なレビューとか面白いTumblrのセレクションで参加する予定だったのですが忙し過ぎで何一つできなかったので、代わりにと言うか何と言うか、せっかくなので書籍を参考にTumblrのテーマを作ろうかと思います。

今まではCustomizeのEdit HTMLで編集してた(もしくはローカルのHTMLからコピー&ペースト)んだけどストレス溜まるので、ローカルで開発環境を整えたい。

書籍にはfumblrが紹介されてたんだけど、環境の問題かすんなり動かなかったので深追いせずにThimbleを使うことにした。PHP製なのでXAMPPとかですぐ動かせる。どっちも微妙に古くて新しいタグに対応してなさそう。仕組みとしてはテンプレートタグをパースしてるだけっぽいので、自分で拡張すればよいかも。とりあえずforkしておいた。

CSS3のbackground-sizeプロパティを試す

CSS3で追加されたbackground-sizeプロパティに、contentかcoverを指定すると画像をウィンドウいっぱいに表示してくれるので、写真をでかく見せたい場合に使えそう。

Perfect Full Page Background Image

JavaScriptで切り替えられるようにしてみた。Chrome推奨です。
動作サンプル
https://gist.github.com/3473035

addEventlistenerのとこ、以前だったら何も考えずimg要素それぞれにイベントリスナーを登録してしまっていたけど、バブリングを利用するようにした。
How JavaScript Event Delegation Works

ステートフルJavaScriptで出てきた。

現状だと画像をそのまま引き延ばすので元データの解像度が低いと荒れてしまう。最大表示する際に画像を差し替えるなど工夫が必要。シンプルに使えるようにライブラリ化しておきたいところ。