クロージャを切ない恋物語で理解する

December 17th, 2012

クロージャがいまいちわからない。
言葉の意味は「閉包」。
って何?!

イメージ的には、変数の変化を受けない閉ざされたもの、とゆう感じでしょうか。

たとえば魔法瓶の中のお茶。
たとえば東京に来ても東京弁に染まらない大阪人。
たとえば伝統の味を守り続ける老舗の和菓子屋。

うん、こっちのほうがわかりやすい。

というわけで、クロージャのサンプルをストーリー仕立てでお送りします。

<h1>クロージャ留学物語</h1>

<h2>高校卒業式にて</h2>
<p>カズマ「<span id="kazumaGag1"></span>」</p>
<p>カズコ「<span id="kazukoGag1"></span>」</p>

<h2>それから2年後</h2>
<p>カズマ「<span id="kazumaGag2"></span>」</p>
<p>カズコ「<span id="kazukoGag2"></span>」</p>

出力用のHTMLは上記のとおり。
※クロージャのサンプルです

// ==========================================================
// 出会った頃
// ==========================================================
// 高校に入ってすぐ、カズマとカズコは仲良くなった。
// あの頃の二人に、違いなんてなかった。
var kazuma, kazuko;

// 流行りのギャグなんて言いながら、笑い合ってたんだ。
var omoroo = "3.14159‥おっぱい!"; // おっぱい先生

スクリプトの下準備はこんな感じ。
とりあえず変数宣言をします。
※クロージャのサンプルです
[続きを読む]

File APIの画像プレビューをちゃんと理解する

December 15th, 2012

File APIが自分的にややこしかったので、画像プレビューに限定して整理しますね。

File APIを使わなくてもできること

以下の項目は普通に取得できます。

  • 更新日時
  • ファイル名
  • データサイズ(バイト数)
  • MIMEタイプ(ファイルの種類)
<!-- ファイル入力のためのinput -->
<input id="inputNode" type="file">

<!-- ここからデータ取得のスクリプト -->
<script src="http://code.jquery.com/jquery.min.js">// jQueryの読み込み</script>
<script>
$( '#inputNode' ).change( function () { // 入力をフックにデータ取得を実行
	// 選択されたファイルはinputノードの"files"配列に格納される
	// ↓任意の変数に選択されたファイルのオブジェクトを格納
	var selectedFile = this.files[0];

	// あとはこのオブジェクトから各データを呼び出せばOK

	// 更新日時:lastModifiedDate
	// 出力例:Fri Dec 14 2012 23:38:54 GMT+0900 (東京 (標準時))
	console.debug( selectedFile.lastModifiedDate );

	// ファイル名:name
	// 出力例:"omoide.jpg"
	console.debug( selectedFile.name );

	// データサイズ:size
	// 出力例:103437
	console.debug( selectedFile.size );

	// MIMEタイプ:type
	// 出力例:"image/jpeg"
	console.debug( selectedFile.type );
} );
</script>

File APIを使った画像プレビューのフロー

  1. FileReaderオブジェクトを生成

  2. FileReaderで画像の読み込み完了を検知

  3. FileReaderで画像データをData URIスキーム化

  4. 取得したData URIスキームをimgタグにセットしてプレビュー

FileReaderオブジェクトがFile APIの心臓。これを生成するとFile APIのいろいろな機能を使うことができます。

Data URIスキームってゆうのは画像を文字列に置き換える技術で、これをそのままimgタグのsrcに入れると画像が見られるというもの。画像はローカルで処理しているから、プレビューしただけならまだサーバーには送られていない状態です。

実際にやったのが下記の例。
[続きを読む]

画像なし!Pinterest新機能「secret boards」の紹介メールにほっこり

November 10th, 2012



Pinterestからダイレクトメールが届きました。
いつもは「○○があなたの××をリピンしました!」とか「~をいいねしました!」とかなんだけど、今回のはちょっと違う。

出だしから

車に妻のDivyaを乗せて病院から帰ってる途中、2つのことを考えていました。
1つめは、父親になったなんてなんてまだ信じられない!
2つめは、家についたら赤ちゃんのMaxをベビーシートから降ろしてやりたい!

(↑訳合ってる?)

一瞬、間違いメールが届いたか、新手の詐欺メールかと思って身構えたんだけど、
なんだろう?とついつい読んでしまう。
内容はだいたい下記のとおり。
[続きを読む]