gerry++
YAPC::Asia 2012 の LTソンで話したやつです
LTソン、面白かったので無理矢理当日資料をつくって話させてもらいました。
✖
✖
micro-template.js について
LTソンでちょっと喋れたのはいいけど、ちょっと説明不足の部分があって、あーと思ったので書き残しておきたいと思います。
これは John Resig 氏が 2008 年 (!) に書いたテンプレートと互換性を持つテンプレートエンジンで、以下のような特徴があります。
- 既存の John Resig 氏の tmpl() を置き換えて使用することが可能
- 実行時エラーが発生した場合に、エラーが発生した行数を表示可能
- source map に対応していれば、syntax エラーも行数を表示可能
- 割と早い
- デフォルトでHTMLエスケープ
そもそもの動機としては「エラーメッセージちゃんと出したい」というもので、なんとなく「無理矢理こうしたらうまくいきそう」というアイデアを実装してみた、というものを元に少々の改良を加えたものになっています。
with() 最適化
John Resig 氏の tmpl() に互換にするためには、with() で変数を展開するというのが不可欠になってきます。パフォーマンス的には with() を使わずに
- あらかじめテンプレートで使う変数名を列挙
- 特定のオブジェクトに全ての変数をプロパティとしてセット
などしたほうがいいのですが、互換を目指す以上 (あるいは使い勝手という意味で) 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)、準備完了です
バグ
- 測定距離を測る良い方法がないので、画面から自分までの距離は別途メジャーが必要
- 必然的にコンピュータから離れることになるので、スクロールができず不便
✖
gerry++
gerry++
✖
ひだまりスケッチ×ハニカム
まさかの4期で期待が膨らみまくっていたけれども、特に何も裏切られず、1話からとても良かった。ひだまりスケッチの良さがどこにあるのか、うまく言葉にすることができないが、奇跡的なバランスで成り立っている素晴しい作品であると思う。
おそらく人によって違うであろう心の溝に、それぞれうまくカチりと当て嵌るような感覚を覚える。
1話終わり、エンディングで夢から覚めて朝になるような、いつまでも夢が続けばいいと思うがそうもいかない、ああいい夢だった、けれど今日は生きていかなければならないと、なんとなく悲しい思いを残して終わるのが、1期から変化せずあるように思う。
関連エントリー
- 青 アニメにおけるキャラクターの青性 青性 (あおせい) ってのがあるんですね、アニメキャラクターには。 青ってのは一言でいえば「報われないキャラクター」が抽象化されたものです。...
- 既存書籍の電子書籍化 今家にある本をできれば電子書籍化したいのだけれど、するならするでちゃんとしたいと思ったとき、何が制約になるかないし電子化できないものは何かを...
- スケートボード はじめて60~90日 スケボーちょうど90日目 プッシュすらろくにできなかったことを考えると成長している…… pic.twitter.com/DYe5RC4it9...
- UV レジン手芸 - 花と蝶 急に思うところあってワイヤーワークをメインとしたUVレジン工作をやってみることにした。 ワイヤーは手元にあったスズメッキ銅線φ0.6mmとU...
- スプラトゥーン2 は「塗りで貢献できる」ゲームじゃないから騙されるな しばらく頑張ってやってたけど、すっかり自分の中の評価は落ち着いてクソゲーとなった。 ランク46、ガチは全ルールA-ぐらいまでやった。ただし表...
✖
TAMRON 大口径標準ズームレンズ SP 24-70mm F2.8 Di VC USD キヤノン用 フルサイズ対応 A007E cho45
TAMRON SP24-70mm F2.8 Di VC USD (A700) を買った。純正 24-70mm を買おうと思っていたけど、値段 (ほぼ倍) の割に画質面で飛び抜けていいという話も聞かないし、手ぶれ補正もないので、TAMRON 製に手を出した。
手ぶれ補正は、4段だと ISO1600 必要だったのが ISO100 にできるぐらいのインパクトがあるので、多少レンズが大きくなっても欲しい機能だと思う。とはいえ TAMRON のこれは思いのほか大きくない。
これでようやく、大体の画角で撮影できるようになった。広角側でしっくりくる画角を探したら、良さげな単焦点のを買おうと思う。
関連エントリー
- ✖ TAMRON SP24-70mm F2.8 Di VC USD (A700) と Canon EF100mm F2.8Lマクロ IS USM...
- Sonnar T* FE 55mm F1.8 ZA ソニー SONY 単焦点レンズ Sonnar T* FE 55mm F1.8 ZA Eマウント35mmフルサイズ対応 SEL55F18Z c...
- SIGMA 20mm F1.8 SIGMA 単焦点広角レンズ 20mm F1.8 EX DG ASPHERICAL RF キヤノン用 フルサイズ対応 cho45 シグマ(S...
- EOS M を予備機に EOS M に EF-M18-55㎜ をつけて 5D II と一緒に持ち歩くのが結構つかいやすくていい。「標準ズーム」って撮れる画角の幅があ...
- SIGMA MC-11 + α7R II でいろいろ試す SIGMA シグマ EF-E用 キヤノン⇔ソニーEマウント マウントコンバーター MC-11 フルサイズ 一眼レフ ミラーレス cho45 ...
✖
✖
✖
桜ヶ丘から高座渋谷まで歩いた。
常泉寺
✖
✖
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 との感覚の違いには大変困ったので、経験の問題だと思う。
関連エントリー
- 2012年の撮影まとめ 70-200mm を一番使ってる気がしてたけど、集計見てみてみたら 100mm MACRO が結構多かった。24-70mm は最近買ったのに...
- ✖ TAMRON 大口径標準ズームレンズ SP 24-70mm F2.8 Di VC USD キヤノン用 フルサイズ対応 A007E cho45...
- 月 200mm で撮ったやつを1/4ぐらいにトリミング (400mm 相当?)。月を撮るときだけ 1500mm ぐらいのレンズがほしくなる
- Sonnar T* FE 55mm F1.8 ZA ソニー SONY 単焦点レンズ Sonnar T* FE 55mm F1.8 ZA Eマウント35mmフルサイズ対応 SEL55F18Z c...
- ✖ Canon 望遠ズームレンズ EF70-200mm F2.8L IS II USM フルサイズ対応 cho45 キヤノン ★ 3.0 / 5...
✖
人間の顔が写っている場合、ホワイトバランスを大きくいじれないので、あとから写真全体の雰囲気を変えるのが難しい。一つでも顔が写っている場合、それに最初に注目してしまうので、そもそも写真のホワイトバランスが鑑賞者に与える印象が薄い。顔が入った時点で、顔の印象が支配的になるので、もし現像プロセスで気をつけるとしたら、とにかく顔の印象だけで良く、それがどうにもならないのであれば、もうどうにもならない。そんなように思った。撮影時の技術はよくわからない。
関連エントリー
- ✖ ウェブの場合、どうやっても厳密な色で閲覧してもらうことは不可能なので、人間の眼のホワイトバランス調整機能を活用するために #FFFFFF を...
- ✖ 人が写ってる写真を写真展とかで見ると、これは写真作品なのか、ともやもやする。それは当然もちろん間違いないのだけれど、顔の印象の大部分を支配す...
- ✖ 「絵造り」でカメラを選ぶのってすごい変な感じがするんだけど、そういう発言は割とよく見る気がするし、記事もあるようなないような気がする。いまい...
- ✖ カメラの技術っていうか、そもそも風景を切り取る感性・写真のセンスに欠けてる……
- img2img の strength 0.0~1.0 まで指定する。イメージとしては 0.75 なら元画像の75%をノイズに変えた状態から復元をするという感じ。 顔が支配的な画像...
✖
人が写ってる写真を写真展とかで見ると、これは写真作品なのか、ともやもやする。それは当然もちろん間違いないのだけれど、顔の印象の大部分を支配するのは被写体の顔 (=DNA) だし、次に支配的な表情を生みだすのはコミュニケーション力であって、光を写す、写真そのものを使った表現ではないじゃないかと思ってしまう。
とはいえ、じゃあ他のものはなんなのか、例えば風景写真はどうなのかと考えてみても、それも自然を借りて写しているだけだし、なので単に自分が、「生まれもった才能」と「コミュニケーション力」というものを嫌っているというだけだと思う。
関連エントリー
- ✖ 人間の顔が写っている場合、ホワイトバランスを大きくいじれないので、あとから写真全体の雰囲気を変えるのが難しい。一つでも顔が写っている場合、そ...
- なぜ今僕がモールスを学習するのか 僕はベースとしてコミュニケーションに興味がある、というのがまずあって、そのためウェブサービスでも CGM 的なサービスが好きだったりするわけ...
- ✖ 自分は自分のルールで生きており、つまりこのルールは道徳ないし宗教なので、他人にどうこう言われるようなものではない。ただ生きてるわけでもなく、...
- ✖ BIあれば何もかも好き勝手できるのに…… コミュニケーションをとりたくないから一律支給の他に適切な方法がない。
- ✖ 自分にコミュニケーション能力がないことによって、かえってコミュニケーションの重要性について実感できるのは良い。伝えるべきこともあるし、伝える...
gerry++
✖
関連エントリー
- ZenFone2 にようやく Android M (Mashmallow) アップデートが降ってきた ASUS ZenFone 2 の Android M (6.0) アップグレードは遅延 | tech - 氾濫原 遅延していた OS アップ...
- Android 版 Lightroom Mobile の DNG 撮影 最近の Android 端末だと RAW 撮影に対応していることがある。あまり対応アプリケーションがないのだが Lightroom Mobi...
- Photoshop + Lightroom が月額1000円 Lighroom はパッケージも今は別に高くはなくて、アップグレード版は10k円しないぐらいだけど、Photoshop はまだまだ高い。最新...
- Windows Update で再起動求められるけど、再起動してもインストールされない こうなってて、バージョン 1151 をインストールするから再起動しろとなっているけど、再起動しても何も起きず普通に起動してインストールされて...
- iGPU を活用して VRAM の節約 RTX 4070 (12GB VRAM) を使ってるけど、Stable Diffusion やら Photoshop や DaVinci R...
✖
gerry++
gerry++
✖
サーバサイドからのデータの受け渡しに 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 を作ってあとから読みこむのが一番安全だと思います。どうしてもやりたいときだけ従来の方法を非常に注意して使うとかしかなさそうです。
✖
✖
✖
✖
✖
劇場版 魔法少女まどか☆マギカ
前後編を映画館で見たけど、大変良かった。
杏子の最期の演出がちょっと変わってたのか (テレビ版があんまり印象に残ってない) 展開は当然知っているのに妙に感動してしまった。ほむらちゃんが可愛いのは言うまでもないけど、泣きながら告白するシーンはテレビ版のほうが印象的な感じがした (CMを挟んで一拍あるから?)。
関連エントリー
- そろそろさやかとほむらちゃんについて書いとかないと!! まどか☆マギカで好きなのがこの二人でございます。 さやかは非常に俗っぽくかつ単純で現世にもよくいるタイプというか他人とは思えない感じで好きで...
- 青 アニメにおけるキャラクターの青性 青性 (あおせい) ってのがあるんですね、アニメキャラクターには。 青ってのは一言でいえば「報われないキャラクター」が抽象化されたものです。...
- ガールズ&パンツァーをプライムビデオで見た めっちゃ面白かった。 艦コレみたいなノリのアニメなのだと思って見ていなかったけど、とりあえず1話見てみるかと思った結果そういったものノリのも...
- 劇団四季 ライオンキング 大井町の夏劇場で見てきた。妻がチケットをとらなかったら一生見なかったであろう (ミュージカルに興味がないので……)。 箇条書き 急にはじまる...
- ガールズ&パンツァー 劇場版を見た 見始めたのが最近だったので、もはやブルーレイも出てるというのに…という感じだけど、立川シネマシティで爆音上映というのを見てきた。 特に爆音の...
gerry++
✖
✖
✖
根津
✖
✖
都会のスナップの面白さは、鑑賞者にとって見慣れた場所にも関わらず、他人の視点を、写真として見せられることにあると思う。
そのような写真、すなわち「想定鑑賞者の大抵の人が行ったことのある場所」を写す場合、多少奇を衒う感じにしないと目をひかない。しかしインターネットのように想定鑑賞者が不特定多数の場合、できるだけ人口の多い都市、あるいは誰もが行ったことのある観光地の写真のほうが、そうでない都市より、あたりやすいんだろうなと思う。
東京近郊に住んでる人に「東京のスナップです」って写真を見せたら「ああ、あの場所をこう切り取るんですか」っていうのがあるだろうけど、「名古屋のスナップです」って写真を見せても、どう楽しめばいいかよくわかんないと思う。事前に持ってるコンテキストが違うから「へーこれが名古屋ですか」としか言いようがない。「名古屋を写したその人の写真」ではなく「名古屋についての写真」になってしまう。逆にしてもそうだと思う。
写真に限らなくて、同じ日本に住んでる人の日記だから「ああこの人は日本の空気をこう感じるか」ってのがある。でも同じような日記でも外国に住んでるその国の人が書いてる日記だと「その国ではそうなのか」って思ってしまうと思う。
関連エントリー
- ✖ とりあえず京都に住んでてよかったなあ…… 東京に住んでたらまじで死んでる……
- ✖ 人が写ってる写真を写真展とかで見ると、これは写真作品なのか、ともやもやする。それは当然もちろん間違いないのだけれど、顔の印象の大部分を支配す...
- ✖ 東京に憎悪を持ちすぎていて付近の写真を撮りたいと思わないことが多い。あるいは撮っても現像時に捨てることが多い……
- ✖ 散歩するのが好きだ。集中して歩いくと頭が整理される気がするのもあるけれど、静かな道を日射しをあびながら歩くと幸せに孤独な気持ちになる。 しか...
- ✖ 写真を撮っていると気付くことは多い。人の目には回りの風景が思いのほか写り込んでるとか、太陽の光の圧倒的強さとか
✖
日曜日は根津から根津神社・東大付属植物園によって茗荷橋谷まで歩いた。
✖
✖
✖
✖
TAMRON 大口径標準ズームレンズ SP 24-70mm F2.8 Di VC USD キヤノン用 フルサイズ対応 A007E cho45
をメインにつけて、カバンにさらに
を入れてつけかえつつ撮ってる。
望遠のほうがより落ち着いた感じに見えると思う。望遠になるほど遠くのものに注視する感じだけど、これは歳をとって対象から距離をとった感じに見えると思う。
関連エントリー
- ✖ Canon 望遠ズームレンズ EF70-200mm F2.8L IS II USM フルサイズ対応 cho45 キヤノン ★ 3.0 / 5...
- 洗顔料 男性向け洗顔料はメンソール入っててイライラするので最初から選択肢に入らない。女性向けでも変な香料が入ってるとイライラする。求めるのは ほぼ無...
- ✖ 久しぶりに 50mm F1.4 を使って撮ったりした。開放でとるとかなり甘いうえに周辺減光が激しいので、流行りの instagram っぽい...
- PowerShot S100 を買った Canon デジタルカメラ PowerShot S100 ブラック PSS100(BK) 1210万画素 広角24mm 光学5倍ズーム 3....
- KOSS UR/40 【国内正規品】KOSS セミオープン型オーバーヘッドヘッドホン UR/40 cho45 KOSS(コス) ★ 5.0 / 5.0 cho45...
gerry++
✖
✖
gerry++
✖
✖
そういえば東京国立博物館でやっていた出雲の展示を見にいった。そんなに点数が多いという感じがしなかったけど、やっぱり古代の出雲大社が本当にものすごく大きい建築物だった、というのが夢があってよかった。展示されていた復元模型は、柱が発掘される前に作られたものみたいでそのへんが再現されていなかったので、どうせなので再現しなおしたのを作ってほしかったなあと思った。
あの古代の復元模型は非常にかっこよくて欲しかった。しかし登り降りする神職の人はずいぶん大変だったろうなあと思った。いつか景気が良くなったら実物大に復元してほしい。
関連エントリー
- ✖ 建国記念の日、せっかくなので橿原神宮 (神話上で建国したことになっている神武天皇が祭神、橿原は建国の地ということになっていて、この神宮の創建...
- ✖ 注文していた MacBook Air 11inch が届いたのでセットアップした。Time Machine のバックアップから復元するだけで...
- 明治大学博物館 明治大学博物館 駿河台キャンパス(神田・お茶の水)の地下にある広い。2フロアある。企画展、大学史、常設展 考古学領域だと石器の種類が多いかも...
- 出雲・松江を公共交通機関 (電車・バス) で観光する覚え書き 出雲市 (特に大社と出雲市駅との往復) と、松江市 (松江駅を中心に周辺観光地) にいって公共交通機関で観光した実感。あんまりまとまってない...
- 七社神社 / 渋沢史料館 / 北区飛鳥山博物館 / 紙の博物館 / 国立印刷局東京工場 / お札と切手の博物館 七社神社 渋沢史料館。渋沢栄一の史料館だけど本館はそれほど広くはない。ただ庭園と、晩香廬・青淵文庫も管理されてるみたい。 青淵文庫の内部 晩...
✖
大社造の神社はまだ一度も見たことがない?はずなので、いつか見にいきたい。


















































