Fragments of Works

仕事で便利！と思ったことや、もろもろの忘備録。さて。さてさてさて。

子持ちのクリスマス、臨戦態勢

NANFULIアドベントカレンダー（Facebookページ）に参加しています。今日で3日目です。

もう街はすっかりクリスマス気分で、ヘタするとクリスマスまでに、クリスマスはもう十分いただきました、結構です……。という気分にもなりかねません。

特に筆者宅には、小さい子供（4歳）がいるので、やれもみの木だ、やれクリスマスに焼くクッキーはこれだ、と毎日が「買ってくれアドベントカレンダー」になっております。

が、この子供がクリスマスのくせ者でして。経験のある方は「子持ちあるある」のひとつなので、ふかあああーくうなづいていただけると思うのですが、子供は、

準備万端のイベント当日に熱を出す

という法則がありまして。これが、やっかいでして。これが、もうカンベンしてください！でして。

そのようなことを防ぐためにも、子供にはぶっすーと予防接種を受けさせています。予防接種の効果、効能と副作用にはいろいろな賛否があり、そこらへんの判断は親にまかされていたりするわけですが。

予防接種も日々進化していて、最近の例ですと、生ワクチンだったポリオが、より副作用の少ない不活化（ウイルスを殺して、免疫を作るのに必要な成分だけを取り出したもの）ワクチンになったりしています。接種を決めている親にとっては、そこらへんの情報をちゃんと仕入れることと、接種時期をうっかり過ぎたりしないように管理したりするのが、とても大変です。

iPhoneアプリに「予防接種スケジューラー」というのを見つけました。このアプリは無料ですが、他にも同じ目的の有料アプリがあります。

アプリを開くとまず予防接種の一覧が出てきます。これはたぶんアップデートなどで新しいワクチンにも対応するようになっています。今年の秋から導入された不活化ポリオもちゃんと掲載されています。
f:id:nsoto:20121203120025p:plain

ひとつ選んでタップすると、その予防接種の効能や望ましい接種時期がわかります。
f:id:nsoto:20121203120032p:plain

で、こんな具合に接種の予定日や、もうすでに接種している場合はその日付を入力します。
f:id:nsoto:20121203120039p:plain

予定日になると、通知を出してくれ（ると思い）ます。私は来年のインフルエンザの予定日を入れておきました。ちびっこは4週間ほど間隔を空けて、2回せねばなりませんので、ま、10月くらいからかな。
f:id:nsoto:20121203120045p:plain

というわけで、今年のインフルエンザの2回接種も無事終了しています。うん、クリスマスの準備万端。

あ、でも風邪に対するワクチンないんですよね。そりゃ、そうですわ。インフルエンザ予防接種を乗り越えて、フツーの風邪で熱を出す我が子。うーん、ありがち。

それでもたぶん楽しいクリスマスになるでしょう。発熱中の子供をしっかり寝かせておくの、大変そうですけどね。

@keyframesのanimation-nameプロパティのクオート

技術のこと

2009年3月20日付けのCSS Animations Module Level 3でイマイチ不明だったanimation-nameプロパティには、クオートが付くのか？付かないのか？問題。

Firefox5でCSSの@keyframesにクオートがあると動かない件について - Webtech Walker

近頃発表された2012年4月3日付けのCSS Animationsでは、例示からもクオートが消えていた。

というわけで、クオートがないのがW3Cの仕様ということで、すっきり。

とりあえず、メモ。

CloudFrontのTTLの最短が0秒に

技術のこと

CloudFrontのTTL（time-to-live）は、これまで最短で60分だったけれど、ついに0秒まで短縮することができるようになった。ニュースサイトなんかだと、かなりの頻度でキャッシュをクリアしなければならないから。

Amazon CloudFront Lowers Minimum Content Expiration Period

けれど、なにも設定をしないでアップするとファイルの期限は1日（24時間）になるところは以前と同じ、と。

Amazon CloudFrontのキャッシュファイルを削除する

技術のこと

CloudFrontなんかをなんか使っています

Amazon CloudFrontはいわすと知れたコンテンツ配信サービス。Contents Delivery Networkってやつ。オリジナルファイルをAmazon S3などのストレージサーバー（オリジンサーバー）に格納すると、そこからデータを持ってきて、最良のパフォーマンスで配信できるようにしてくれる。まあなんか、いくつかのエッジロケーションを持ってて、ユーザーが最もストレスなくデータのやり取りができるところに自動的にルーティングしてくれたり、いい感じにやってくれる。リクエスト数がハンパないコンテンツ運用に便利！ってことらしい。転送量に応じて課金される。

詳しくはこちら。
Amazon CloudFront

私が運用しているサイトはAmazon S3とCloudFrontを組み合わせて使っていて、S3にオリジナルファイルをのっけると、CloudFrontが勝手にファイルを持ってってくれて、配信readyな感じになる。

キャッシュは24時間保持される

ところが、このオリジンサーバーを見てファイルをキャッシュする期間（失効期間というらしい）がデフォルトでは24時間に設定されている。

参照：
Q: Amazon CloudFront はどのぐらいの期間ファイルをエッジロケーションに保管しますか？

もちろんこれはファイルをアップするときに「キャッシュコンロールヘッダー」なるものを設定して「失効期間」を決めてあげると、任意にコントロールできるらしい（やったことないけど）。たとえば、「失効期間1時間ね」ってしておくと、1時間経ったら失効しちゃうので、おもむろにオリジンサーバーを見に行って、バージョン変わってたらファイルを再びとってくる。

しかしながら、デフォルトの失効期間が24時間なために、あまり予備知識なく使っていると「あんれー？ファイル更新したのに、いつまで経っても反映されないの、なんで？」ってことになる。設定をいじってない限り「はい、前のバージョンをアップしてから、ほぼ1日後です」ってことになるんだけど、それでは困る！というケースも多々ある。特に更新が頻繁に行われるサイトの場合「今すぐに！」ってこともあるかも（そういう性質のサイトがこのサービスを利用するのは正しいか否かという問いは、おいといて）。

今すぐに！キャッシュを削除したい

でこの「失効期間」前に、CloudFrontのキャッシュを削除してしまって、すぐオリジンサーバーを見に行ってほしい場合は、Cyberduckというあひるさんにお願いする。高機能FTPアプリ。Mac OS X用です。

Cyberduck

このあひるさんで「Object Invalidation」をするといいらいしいことが書いてある。

http://trac.cyberduck.ch/wiki/help/en/howto/cloudfront#ObjectInvalidation

Invalidation is one way to remove a distribution object from an edge server cache before the expiration setting on the object's header. Invalidation clears the object from the edge server cache, and a subsequent request for the object will cause CloudFront to return to the origin to fetch the latest version of the object.

Use the Invalidate option File → Info → Distribution (CDN) to invalidate files from edge locations.

このあひるさんでS3に接続して、キャッシュファイルを削除したいファイルを選び、command＋Iで「情報を見る」を実行。上部のタブで「ディストリビューション（CDN）」を選択。転送方法を「Website Configuration（HTTP）CDN」にした上で、右下の「Invalidation」ボタンを押す。これでしばらくするとinvalidations in process→invalidations completedになる。Invalidationしたら接続切って待ってた。これでdistribution cacheが削除されて、最新バージョンをすぐに見に行ってもらえるようになる。

f:id:nsoto:20120229130445j:plain

私はとりあえずこれでできたっぽいです。あともっと単純に素直にやるのであれば、バージョンが変わったのなら「ファイル名」を変えてしまうことです。

あいまいな知識で、あいまいな推測：メソッドのオーバーロード？

技術のこと

jQueryの基礎をやっていて、へぇ！って思ったこと。

$('#hoge').text('テキスト変えてちょんまげ');//idがhogeである要素の中身のテキストが変更される
$('#hoge').text();//idがhogeである要素の中身のテキストを取得する

って感じで()の中の引数次第で、メソッドの挙動（という言い方でいいのかわからないけれど）が変化しちゃうところ。文字列が入っているとその文字列をぶっこむけど、空だと今入っているやつを持ってくる。これっておもしろいなーと。メソッド名が一緒なのに機能が違うって。

こういうパターンってプログラム言語で一般的なの？なの？っていう質問をしたら「メソッドのオーバーロード」で検索せよ、と教えてもらった。

多重定義
http://ja.wikipedia.org/wiki/%E5%A4%9A%E9%87%8D%E5%AE%9A%E7%BE%A9

同一のメソッド名で引数の数やら型やら順序が異なるものを複数定義できまっせ、ってことらしいけど、引き合いに出されるのがJava……。しかも例をみると、同一のメソッド名なので、やっぱり基本的機能は同じ気がする。

んでもって気になるのが、この記述。

曖昧な型を持つ言語
PerlやPHPのような曖昧な型を持つ言語では、メソッドのオーバーロードができない、あるいは制限されていることがある。そのときはメソッドの先頭で引数の型を判定する条件分岐で対応する。

jQueryはJavaScriptなので、実は「メソッドのオーバーロード」とかできないやつなんじゃないんだろうか。JavaScriptばりばりの方に聞いたときも、仕組み的には条件分岐なんですよー、textも引数の型がstringsかどうかで分岐させてるとか。

function text(strings) {} とかのときに text() とすると strings が false になるので

if ( !strings ) {
// 値取得
} else {

みたいな
実際こうなってるわけじゃないですけど、仕組み的には

たぶん、JavaScriptはメソッドのオーバーロードはできない子、だと思う。

……と思ったら、jQueryを作ったJohn様がこんなの書いてた。

JavaScript Method Overloading
http://ejohn.org/blog/javascript-method-overloading/

日本語で解説している人もいた。

JavaScript のオーバーロード
http://blog.nao-haida.com/2007/11/javascript_26.html

この例でいくと「ユーザー検索」っていう基本機能は一緒なんだけど、

  • 引数がなし()→すべてのユーザーを検索
  • 引数がひとつ（name）→ユーザーを名で検索
  • 引数がふたつ（first, last）→ユーザーを名と姓で検索
  • どれにもあてまらない→なんもしない

「引数の数」をキーにして、複数の「ユーザー検索」メソッドを定義している。でもユーザー検索っていう基本機能は同じなんですよ、引数の数は違うけど、同一のメソッド名なので。

jQueryは直感的なわかりやすさを目指している（と聞いた）ので、別に同一のメソッド名で違うこと（内容を変更／内容を取得）しても、人間がぱっと見、理解できてりゃいいじゃん！という割り切りなのかなあ。

それともある観点からみると、内容を変更も内容を取得も同一の機能と言えるのかなあ。

ほとんど「jQueryの基礎を学ぶ」からは、はるか遠く逸脱した感があるけど、気になったのでメモしておきまーす。

メモ：読みに行っているファイルとキャッシュされたファイルを調べる

技術のこと

デベロッパーツールの「Network」を見る。新規ファイルはStatusが200、キャッシュされたファイルは304となる。

これらのテストは「シークレットモード」を使うとよい。キャッシュが破棄された状態から始まるので便利。

開発と本番サーバーでCookieを共有しているときなども、シークレットモードからアクセスすれば、ヘンなことにならない。

ちなみにキャッシュされているファイル一覧はchrome://cache/で見られる。

Balsamiq Mockupsで好みの日本語フォントを使う

技術のこと

Balsamiq Mockupsってなに？

技術文書の図版を作るのにBalsamiq Mockupsを勧められました。これを使うと、オブジェクトをちょいちょいと配置していくだけで、手描き風のモックアップやら、ワイヤーめいたものやら、がわらわらと描けてしまうというもの。

いわゆるピッキンパッキンの緊張感持ってお仕事しますぜ的な図版でなく、いい意味で間が抜けたものが描けます。

そのままでは日本語が入力できない

このアプリはデフォルトでは日本語が入力できません。Viewメニューから
「Use System Fonts」を選択して、チェックを入れておくと、日本語が入力できるようになります。
f:id:nsoto:20111215201341p:plain

ところが、これが文字通りシステムフォントなので、Osakaなど、もっそい味もそっけもないフォントになります。せっかく手描きの味を活かしたいのに、フォントがパワポの世界へ誘います。ちっ。

XML設定ファイルで使うフォントを指定できる

こちらのサポート情報を見ると、XMLファイルでもろもろの環境設定ができることがわかります。

    <config>
        <fontFace>フォント名</fontFace>
    </config>

とりあえずフォントの設定だけしたければ、テキストファイルに3行ちょろちょろ書いて所定のフォルダに保存するだけ。ファイル名は決まっていて、BalsamiqMockups.cfgという名前にします。

所定の場所は以下の通り。

Windows XP
C:\Documents and Settings\\Application Data\ BalsamiqMockupsForDesktop.EDE15CF69E11F7F7D45B5430C7D37CC6C3545E3C.1\Local Store
Mac OS X
your user home/Library/Preferences/ BalsamiqMockupsForDesktop.EDE15CF69E11F7F7D45B5430C7D37CC6C3545E3C.1/Local Store
Windows VistaとWindows 7
C:\Users\yourusername\AppData\Roaming\ BalsamiqMockupsForDesktop.EDE15CF69E11F7F7D45B5430C7D37CC6C3545E3C.1\Local Store
Linux
~/.appdata/BalsamiqMockupsForDesktop.EDE15CF69E11F7F7D45B5430C7D37CC6C3545E3C.1/Local Store

使った手描き風フォント

日本語フォントはこちらのオリジナルフォント【みかちゃん】を使わせてもらいました。

非商用はともかく、商用にもフリーで使ってよろしいという大判振る舞い。Windows、Mac、Linuxの各OSに対応しています。

フォントをインストール

使いたいフォントが決まったら、システムにインストールします。各システムにあるFontフォルダにコピーすればたいてい終わり。私はMac OS Xだったので、/Library/Preferences/Fontsにほおりこみました。

フォントファイル名は「情報を見る」で確認（Mac）

Mac OS Xの場合、XMLに記述するのは、フォントファイル名ではNGでした。フォントファイルを選択し、command+Iでファイル情報のウインドウを開きます。「フルネーム：」にある名前をXMLにコピペするのが確実です。

f:id:nsoto:20111216185510p:plain

ここがわからなくて、結構、うろうろしました。

あ、Use System Fontsは切る

忘れてはいけないのが、すべての設定が終わったら、Use System Fontsのチェックがオフになっているか確かめましょう。ここにチェックが入っていると、XMLで設定したフォントは効きません。