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に入れると画像が見られるというもの。画像はローカルで処理しているから、プレビューしただけならまだサーバーには送られていない状態です。

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

Twitpic APIで、Twitterに世界中からアップされた写真をだらだら見る

May 16th, 2012

Mirrors © by borkur.net

Twitterで写真を共有するサービスのひとつに、
Twitpicがあります。

TwitpicのURLってhttp://twitpic.com/9lb1nvというふうに、
かなり短いURLで各画像を表示できる便利なサービスなのですが、
末尾の9lb1nvのところを少しいじる、
たとえば9lb1nxにするだけで
世界のどこかで全然知らない人がアップした画像を見られるんです。

これに気づいてしばらく遊んでいたんですが、
いちいち変えるのが面倒くさかったので、だらだらと見られるようにツールを作りました。 [続きを読む]

ある要素が表示されたときに命令を実行するJavaScript w/ jQuery

May 10th, 2012

無限スクロールの仕組みを調べている中で、jQueryを使って汎用性の高そうな動作が意外と簡単に実装できることがわかったのでメモ。

ページ内のある要素が、スクロールされて表示されたときになんらかの命令を実行するJavaScript。

$(function() {
	// 引き金となる要素を設定
	var triggerNode = $(".trigger");
	// 画面スクロール毎に判定を行う
	$(window).scroll(function(){
		// 引き金となる要素の位置を取得
		var triggerNodePosition = $(triggerNode).offset().top - $(window).height();	
		// 現在のスクロール位置が引き金要素の位置より下にあれば‥
		if ($(window).scrollTop() > triggerNodePosition) {
			// なんらかの命令を実行
			console.debug("Do Something");
		}
	});
});


ページのフッターが表示されたときに、そのフッターの上に画像とか文字とか、要素を追加する命令をすれば無限スクロールになるし、
記事を読み終わったタイミングでいいね!的なボタンを出すようなブログも作れるし、
いろいろ遊べそうな気がします。

if ($(window).scrollTop() > triggerNodePosition) {

の部分を

if ($(window).scrollTop() > triggerNodePosition - 30) {

とかに変えれば、ある要素が表示される少し前に命令を実行、なんて調整もできますね。