2012年 10月 01日

関連エントリー (画像)

gerry++

YAPC::Asia 2012 の LTソンで話したやつです

LTソン、面白かったので無理矢理当日資料をつくって話させてもらいました。

2012年 10月 02日

関連エントリー (画像)

2012年 10月 03日

関連エントリー (画像)

micro-template.js について

LTソンでちょっと喋れたのはいいけど、ちょっと説明不足の部分があって、あーと思ったので書き残しておきたいと思います。

これは John Resig 氏が 2008 年 (!) に書いたテンプレートと互換性を持つテンプレートエンジンで、以下のような特徴があります。

  • 既存の John Resig 氏の tmpl() を置き換えて使用することが可能
  • 実行時エラーが発生した場合に、エラーが発生した行数を表示可能
  • source map に対応していれば、syntax エラーも行数を表示可能
  • 割と早い
  • デフォルトでHTMLエスケープ

そもそもの動機としては「エラーメッセージちゃんと出したい」というもので、なんとなく「無理矢理こうしたらうまくいきそう」というアイデアを実装してみた、というものを元に少々の改良を加えたものになっています。

with() 最適化

John Resig 氏の tmpl() に互換にするためには、with() で変数を展開するというのが不可欠になってきます。パフォーマンス的には with() を使わずに

  1. あらかじめテンプレートで使う変数名を列挙
  2. 特定のオブジェクトに全ての変数をプロパティとしてセット

などしたほうがいいのですが、互換を目指す以上 (あるいは使い勝手という意味で) with() で変数を展開するというのははずせませんでした。

しかし with() のパフォーマンス劣化は非常に有名なほど著しいものなので、できれば十分高速にしたいと思い、既知の変数に関しては this を経由してアクセスするというクソハックをしています。

どういうことかというと、出力する文字列のバッファには this.ret、行番号に関しては this.line というプロパティをローカル変数の変わりに使うようにします。this は変数ではなく、特定の値を参照するキーワードであるため、with によるスコープチェインへの割り込みの影響をうけません。

これにより、既知の変数については with() の影響をうけなくなるため高速化されます。

特殊タグの置き換え

コンパイルタイムの短縮のため、正規表現で一括置換という構造を変えたくなかったため、<% %> というタグを \x11 (XON) \x13 (XOFF) というコントロールキャラクタ1文字に置換してから処理をしています。1文字にすることで正規表現で否定表現が書きやすくなって便利です。\x11 と \x13 が使えなくなりますが、まず使わないので気にしないことにしています。

速度厨用あるいはベンチマーク用

with() を多少高速化したといっても、既知ではない変数参照はあいかわらず遅いので、一応 with() を使わないようにもできるようになっています。

template.variable = 's';

などと指定すると、with() が無効になり、s に全部の変数が入ってくるようになり s.foobar という形でアクセスするようになります。この場合 with() による速度悪化がなくなるので、だいたいこれ以上早くならないだろ、ぐらいまで早くなると思います。

JavaScript で視力検査で使われるアレを描く (ランドルト環)

http://cho45.stfuawsc.com/landolt/landolt.html

最近、写真とプリントについて考えていると、どうも人間の視力というのをよく知る必要があるようだ、ということに気付いたので、ひとまずランドルト環を描くことにしました。

たぶん同じようなのはいくらでもあると思うのですが勉強がてらという感じです。結構楽しいです。type="range" を使ってるのでモダンな HTML5 ブラウザでしか動かないです。特筆するようなことはなく、定義に従って描いただけという感じです。ただ、日本で一般的な 5m の距離で 1.5mm を識別できる、というやつではなく、国際標準の1分 (1/60度) を識別できる、という定義でやってます (違うとはいえほぼ同じです)

なんか間違ってる可能性は大いにあるので信頼できるものではないです。(教えてください)

使いかたは (説明するまでもない感じですが)

  • 2cm のスケールが書いてあるので、財布から1円玉 (直径が 2cm) を取り出して画面にあてつつ、「スケール調整」と書かれたやつを左右に動かします
  • 測定距離を適度に設定して (普通は 3m か 5m)、準備完了です

バグ

  • 測定距離を測る良い方法がないので、画面から自分までの距離は別途メジャーが必要
  • 必然的にコンピュータから離れることになるので、スクロールができず不便
2012年 10月 04日

関連エントリー (画像)

2012年 10月 03日

gerry++

2012年 10月 04日

gerry++

2012年 10月 05日

関連エントリー (画像)

ひだまりスケッチ×ハニカム

まさかの4期で期待が膨らみまくっていたけれども、特に何も裏切られず、1話からとても良かった。ひだまりスケッチの良さがどこにあるのか、うまく言葉にすることができないが、奇跡的なバランスで成り立っている素晴しい作品であると思う。

おそらく人によって違うであろう心の溝に、それぞれうまくカチりと当て嵌るような感覚を覚える。

1話終わり、エンディングで夢から覚めて朝になるような、いつまでも夢が続けばいいと思うがそうもいかない、ああいい夢だった、けれど今日は生きていかなければならないと、なんとなく悲しい思いを残して終わるのが、1期から変化せずあるように思う。

2012年 10月 06日

TAMRON 大口径標準ズームレンズ SP 24-70mm F2.8 Di VC USD キヤノン用 フルサイズ対応 A007E - タムロン(TAMRON)

タムロン(TAMRON)

3.0 / 5.0

TAMRON SP24-70mm F2.8 Di VC USD (A700) を買った。純正 24-70mm を買おうと思っていたけど、値段 (ほぼ倍) の割に画質面で飛び抜けていいという話も聞かないし、手ぶれ補正もないので、TAMRON 製に手を出した。

手ぶれ補正は、4段だと ISO1600 必要だったのが ISO100 にできるぐらいのインパクトがあるので、多少レンズが大きくなっても欲しい機能だと思う。とはいえ TAMRON のこれは思いのほか大きくない。

これでようやく、大体の画角で撮影できるようになった。広角側でしっくりくる画角を探したら、良さげな単焦点のを買おうと思う。

関連エントリー (画像)

2012年 10月 07日




関連エントリー (画像)

桜ヶ丘から高座渋谷まで歩いた。

2012年 10月 08日

常泉寺





関連エントリー (画像)

2012年 10月 09日




関連エントリー (画像)

TAMRON SP24-70mm F2.8 Di VC USD (A700) と Canon EF100mm F2.8Lマクロ IS USM を持って昭和記念公園に行ってみたけれど、使い比べてみるとだいぶ違うなあと思った。ただこれが画角によるものなのか、性能によるものなのかハッキリしない。100mm の画角がそもそも長いこと使っていてすごく使いやすく感じている (普段の写真用の目の画角を100mmぐらいに設定しまっている) のもあるだろうけど、100mm のほうが撮っていて楽しかった。

24-70 は意識的に、今まであまり使っていない 24-35mm らへんを使おうとしているけど、慣れていないのですぐ望遠側70mmにしてしまうことが多々あった。しかし 70mm で開放にしても、背景が割とうるさく感じるので、撮りかたを変えないと駄目だなと思った。100mm だと適当に撮っても気持ちいいんだけど、もっと頭を使わないとだめだ。

感動するとか、撮っててめちゃくちゃ楽しい! というレンズではない気がするけど、それは単に自分に腕がないことが実感できるだけなのだろうなと思うので、めげずに使っていきたい。70-200mm を買った直後も 100mm 前後しか使わないことはあったし、100mm を買ったときも 50mm との感覚の違いには大変困ったので、経験の問題だと思う。

人間の顔が写っている場合、ホワイトバランスを大きくいじれないので、あとから写真全体の雰囲気を変えるのが難しい。一つでも顔が写っている場合、それに最初に注目してしまうので、そもそも写真のホワイトバランスが鑑賞者に与える印象が薄い。顔が入った時点で、顔の印象が支配的になるので、もし現像プロセスで気をつけるとしたら、とにかく顔の印象だけで良く、それがどうにもならないのであれば、もうどうにもならない。そんなように思った。撮影時の技術はよくわからない。

人が写ってる写真を写真展とかで見ると、これは写真作品なのか、ともやもやする。それは当然もちろん間違いないのだけれど、顔の印象の大部分を支配するのは被写体の顔 (=DNA) だし、次に支配的な表情を生みだすのはコミュニケーション力であって、光を写す、写真そのものを使った表現ではないじゃないかと思ってしまう。

とはいえ、じゃあ他のものはなんなのか、例えば風景写真はどうなのかと考えてみても、それも自然を借りて写しているだけだし、なので単に自分が、「生まれもった才能」と「コミュニケーション力」というものを嫌っているというだけだと思う。

gerry++

2012年 10月 10日



関連エントリー (画像)

2012年 10月 09日

gerry++

2012年 10月 10日

gerry++

2012年 10月 11日

関連エントリー (画像)

サーバサイドからのデータの受け渡しに data-* を使う

(大した話ではないですが、だいぶ前にどっかで話して以来ブログに書いてなかったようです)

サーバサイドのプログラムから、クライアントサイドの JavaScript に何かしらのデータを受け渡しする場合というは、XSS を作りやすい部分であります。

<script>
var User = {
  id : [% user.id | js %],
  name : "[% user.name | js %]"
};
</script>

このようにテンプレートエンジンを使って script の中で何らかの変数を展開するような場合、HTML としてのエスケープと、JavaScript としてのエスケープを正しい順番で行う必要があるか、あるいは専用のフィルタ関数を作るなどが必要になります。すなわち、いずれにせよ正しい処理方法を覚えて、毎回間違えずに使う必要があります。これらは、正しい知識を持つエンジニアが正しい実装をして正しい使いかたをできれば問題ないと言えますが、そんな面倒なこと覚えていられねーよという話ですし、人間は忘れるものですから、本質的に危険です。


なので、最近僕が使っている方法が data-* で値を受け渡す方法です。

これは例えば html 要素や、body 要素などに data-* を適当に生やしてデータを渡すというだけです。

<!DOCTYPE html>
<html
  data-user-id="[% user.id | html %]"
  data-user-name="[% user.name | html %]"
  >
...

<script>
alert(document.documentElement.getAttribute('data-user-id'));
</script>

こうすることで、変数のエスケープは常に HTML 用のをかけるだけですみます。これはすなわち、デフォルトでHTMLエスケープをするテンプレートエンジン (普通はそう) を使う場合には、余計なエスケープの心配をする必要が一切なくなります。意図的にミスしようとしない限りミスれないので安全です。

data-* を付ける要素

data-* を付ける要素は、なんでもいいですが、できるだけドキュメント上に早く登場するほうがスクリプトから使いやすいです。

html 要素であれば、document.documentElement で簡単にアクセスできるし、スクリプト実行時には必ず存在するので変数の取得に関しては問題ありませんが、クローラーによっては先頭の n bytes をとってきて title 要素を抜き出すみたいなことをやっていたりするので、大量のデータを入れるには向かないようです (html 要素でええやん! と使いまくってたら mala さんに指摘されました)

body 要素でも、document.body で簡単にアクセスできるし便利なんですが、body 要素に到達するまでは変数の読みとりができない点に注意する必要があります。どうしても header 要素内の script 要素で読みこんでいる JS の中で同期的に変数を読みとりたい! という場合は使えないことになります。

当然、他の要素でも data-* をつけることはできるので、ついでにつけておいて取得するようなこともよくやっています。

構造化データは?

頑張って展開して埋めこむか、専用の API を作ってあとから読みこむのが一番安全だと思います。どうしてもやりたいときだけ従来の方法を非常に注意して使うとかしかなさそうです。

2012年 10月 12日


関連エントリー (画像)

2012年 10月 13日


関連エントリー (画像)

2012年 10月 14日

関連エントリー (画像)

2012年 10月 15日

関連エントリー (画像)

2012年 10月 16日



関連エントリー (画像)

劇場版 魔法少女まどか☆マギカ

前後編を映画館で見たけど、大変良かった。

杏子の最期の演出がちょっと変わってたのか (テレビ版があんまり印象に残ってない) 展開は当然知っているのに妙に感動してしまった。ほむらちゃんが可愛いのは言うまでもないけど、泣きながら告白するシーンはテレビ版のほうが印象的な感じがした (CMを挟んで一拍あるから?)。

gerry++

2012年 10月 17日

関連エントリー (画像)

2012年 10月 18日

関連エントリー (画像)

2012年 10月 19日


関連エントリー (画像)

2012年 10月 22日

根津




関連エントリー (画像)

2012年 10月 23日



関連エントリー (画像)

都会のスナップの面白さは、鑑賞者にとって見慣れた場所にも関わらず、他人の視点を、写真として見せられることにあると思う。

そのような写真、すなわち「想定鑑賞者の大抵の人が行ったことのある場所」を写す場合、多少奇を衒う感じにしないと目をひかない。しかしインターネットのように想定鑑賞者が不特定多数の場合、できるだけ人口の多い都市、あるいは誰もが行ったことのある観光地の写真のほうが、そうでない都市より、あたりやすいんだろうなと思う。

東京近郊に住んでる人に「東京のスナップです」って写真を見せたら「ああ、あの場所をこう切り取るんですか」っていうのがあるだろうけど、「名古屋のスナップです」って写真を見せても、どう楽しめばいいかよくわかんないと思う。事前に持ってるコンテキストが違うから「へーこれが名古屋ですか」としか言いようがない。「名古屋を写したその人の写真」ではなく「名古屋についての写真」になってしまう。逆にしてもそうだと思う。


写真に限らなくて、同じ日本に住んでる人の日記だから「ああこの人は日本の空気をこう感じるか」ってのがある。でも同じような日記でも外国に住んでるその国の人が書いてる日記だと「その国ではそうなのか」って思ってしまうと思う。

日曜日は根津から根津神社・東大付属植物園によって茗荷橋谷まで歩いた。

2012年 10月 24日


関連エントリー (画像)

2012年 10月 26日

関連エントリー (画像)

2012年 10月 27日

関連エントリー (画像)

TAMRON 大口径標準ズームレンズ SP 24-70mm F2.8 Di VC USD キヤノン用 フルサイズ対応 A007E - タムロン(TAMRON)

タムロン(TAMRON)

4.5 / 5.0

をメインにつけて、カバンにさらに

Canon 望遠ズームレンズ EF70-200mm F2.8L IS II USM フルサイズ対応 - キヤノン

キヤノン

5.0 / 5.0

を入れてつけかえつつ撮ってる。

望遠のほうがより落ち着いた感じに見えると思う。望遠になるほど遠くのものに注視する感じだけど、これは歳をとって対象から距離をとった感じに見えると思う。

2012年 10月 26日

gerry++

2012年 10月 29日


関連エントリー (画像)

2012年 10月 30日

関連エントリー (画像)

gerry++

2012年 10月 31日


関連エントリー (画像)

そういえば東京国立博物館でやっていた出雲の展示を見にいった。そんなに点数が多いという感じがしなかったけど、やっぱり古代の出雲大社が本当にものすごく大きい建築物だった、というのが夢があってよかった。展示されていた復元模型は、柱が発掘される前に作られたものみたいでそのへんが再現されていなかったので、どうせなので再現しなおしたのを作ってほしかったなあと思った。

あの古代の復元模型は非常にかっこよくて欲しかった。しかし登り降りする神職の人はずいぶん大変だったろうなあと思った。いつか景気が良くなったら実物大に復元してほしい。

大社造の神社はまだ一度も見たことがない?はずなので、いつか見にいきたい。

gerry++