HouseTect, JavaScript Blog

HTML5のaudio用jQuery Plugin - jAudio

Fri, 19 Mar 2010 15:08:12 +0900

たいしたものではないが、最近HTML5のaudioタグで遊んでいるので、そのためのプラグインを書いておいた。 audioタグのもつメンバもブラウザによってまちまちだったりするので、完璧ではないがとりあえず動くレベル。たとえばFirefox3.6ではplaybackRateが動かないが、Chrome5では動くなどなど。

プログラムコード

全部のメンバ網羅できてないかもしれないが、だいたいこれぐらいあれば遊べる。複数のaudioタグを使ってDJなどするときように、prototypeで実装した。

// jAudio - jQuery Plugin
(function($) {
	// init
	$.jAudio = function(elem) {
		return new Audio(elem);
	}

var Audio = function(elem) {
		this.audio = elem.get(0);
	}

Audio.prototype = {
		audio: null,

// getter
		isPaused: function() { return this.audio.paused; },
		isEnded: function() { return this.audio.ended; },
		getDuration: function() { return this.audio.duration; },
		getSeeking: function() { return this.audio.seeking; },
		getPlayed: function() { return this.audio.played; },
		get: function() { return this.audio; },

// properties
		loop: function(b) {
			this.audio.loop = b;
			return this;
		},
		currentTime: function(time) {
			this.audio.currentTime = time;
			return this;
		},
		autobuffer: function(b) {
			// default false
			this.audio.autobuffer = b;
			return this;
		},
		muted: function(b) {
			// default false
			this.audio.muted = b;
			return this;
		},
		volume: function(v) {
			// default 1
			this.audio.volume = v;
			return this;
		},
		playbackRate: function(rate) {
			// default 1	chrome
			this.audio.playbackRate = rate;
			return this;
		},

// methods
		play: function() {
			this.audio.play();
			return this;
		},
		pause: function() {
			console.log(1);
			this.audio.pause();
			return this;
		},

// events
		canplay: function(fn) {
			var _this = this;
			$(this.audio).bind("canplay", function() {
				fn.call(_this);
			});
			return this;
		},
		playing: function(fn) {
			var _this = this;
			$(this.audio).bind("playing", function() {
				fn.call(_this);
			});
			return this;
		}
	}
})(jQuery);

サンプルコード

jQueryっぽくメソッドチェーン仕様。 playingの中はarguments.calleeを使ってループしてますが、これはあくまでもサンプルとしてで、実際には何もしなくてもよい。上記実装だと10秒後に、また始めから再生する。低音がなったタイミングとかを取得して、そのタイミングで何かアクションをおこしたりしてみたいんだけど、そんなことできないよな〜。。。あと、ふと気になったのが、FIrefoxとChromeでデフォルトのボリュームは同じ1なのに、なんかChromeのほうが音量が大きいｗ

ダウンロード

gist: 337283 - GitHub

デモ

前にspace - HTML5 & CSS3 DEMOで作ったものをjAudioで置き換えてみました。 FirefoxとChromeで違う背景になります。 jAudio - HTML5 audio DEMO ■関連リンク・メディア要素 - 組込コンテンツ - HTML要素 - HTML5 タグリファレンス - HTML5.JP ・HTML5.Audio - JavaScriptからMP3再生ライブラリ（HTML5風） Kawa.netブログ（川崎有亮）/ウェブリブログ

jQuery.uniqueのsortOrder関数がかっこいい！！

Thu, 18 Mar 2010 13:09:35 +0900

配列の中から重複した要素を除去するjQuery.uniqueがかっこいいです。実際には、

document.documentElement.compareDocumentPosition

"sourceIndex" in document.documentElement

document.createRange

のいずれかを持つブラウザを対象としているようです。ざっくり抜き出してみたのが以下のコード。

サンプルコード

div1とdiv2がいる前提でコードを書いてます。

(function() {
	// jQuery.unique
	var hasDuplicate = false,
		baseHasDuplicate = true;

window.UniqueSort = function(results){
		hasDuplicate = baseHasDuplicate;
		results.sort(sortOrder);

// 重複があった場合
		if ( hasDuplicate ) {
			for ( var i = 1; i < results.length; i++ ) {
				// 隣接する重複要素を除去
				if ( results[i] === results[i-1] ) {
					results.splice(i--, 1);
				}
			}
		}

return results;
	};

function sortOrder( a, b ) {
		if ( !a.ownerDocument || !b.ownerDocument ) {
			if ( a == b ) {
				hasDuplicate = true;
			}
			return a.ownerDocument ? -1 : 1;
		}

var aRange = a.ownerDocument.createRange(), bRange = b.ownerDocument.createRange();
		aRange.setStart(a, 0);
		aRange.setEnd(a, 0);
		bRange.setStart(b, 0);
		bRange.setEnd(b, 0);
		// 2つの range の端点の位置を比較します
		var ret = aRange.compareBoundaryPoints(Range.START_TO_END, bRange);

// 重複があった！
		if ( ret === 0 ) {
			hasDuplicate = true;
		}
		return ret;
	};
})();

// DCL
$(function() {
	var div1 = $("#div1").get(),
		div2 = $("#div2").get(),
		divs = [];
	divs = divs.concat(div1);
	divs = divs.concat(div2);
	// 重複させる
	divs = divs.concat($("div").get());

// 重複した配列
	console.log(divs);
	//　重複を除去した配列
	console.log(UniqueSort(divs));
});

sortOrder関数にはdocument.createRangeバージョンを設定しています。

解説

まず

[div#div1, div#div2, div#div1, div#div2]

という配列をUniqueSort関数に渡して、sortメソッドを呼びます。すると

[div#div1, div#div1, div#div2, div#div2]

というふうに重複要素が隣接されます。あとは配列の前後を比較して等値だったら、sliceで取り除いている感じです。最終的には

[div#div1, div#div2]

と重複要素がなくなっている！！ 2つの要素のownerDocument.createRange()で要素の場所を特定して、compareBoundaryPointsメソッドで比較しているようなんですが、 compareBoundaryPointsメソッドってoffsetTop、offsetLeftをもとに比較しているのかな？以下を見てもよくわからなかった。。。 range - MDC Rangeオブジェクトを使って並び替えるのはなんか斬新で面白かったです。 ■関連リンク・jQuery.unique(array) - jQuery 日本語リファレンス・sort - MDC

MacOS10.5でMacPortsからSVNを入れる方法

Wed, 17 Mar 2010 17:21:30 +0900

SVNのインストール

まずはMacPortsからインストール。とっても楽チン！！

sudo port install subversion +mod_dav_svn

とくにエラーが出なかったですが、結構時間がか掛かりました。

SVNリポジトリの作成

ここは僕の場合は以下に作りました。

/Users/hoge/_/dev/svnroot/repos

ではまずSVNのルートディレクトリの作成です。

cd /Users/hoge/_/dev sudo mkdir svnroot

続いて、SVNリポジトリを作成します。はじめ以下のように実行していたのですが、どうも僕の環境ではエラーが発生してしまってうまくいきませんでした。

sudo svnadmin create --fs-type fsfs repo

エラー内容

d Mar 17 16:52:24 2010] [error] [client 192.168.11.95] (20014)Internal error: Expected FS format '2'; found format '4' [Wed Mar 17 16:52:24 2010] [error] [client 192.168.11.95] Could not fetch resource information. [500, #0] [Wed Mar 17 16:52:24 2010] [error] [client 192.168.11.95] Could not open the requested SVN filesystem [500, #160043] [Wed Mar 17 16:52:24 2010] [error] [client 192.168.11.95] Could not open the requested SVN filesystem [500, #160043]

なので以下のようにしてみたらうまく動いたのでとりあえずよしとします！

sudo svnadmin create repos --pre-1.5-compatible

Apacheの設定

まずはhttpd.confファイルを開きます。

cd /etc/apache2 vim httpd.conf

LoadModuleが並んでいる箇所の一番下に以下を追加します。

LoadModule dav_svn_module libexec/apache2/mod_dav_svn.so

httpd.confの一番下に以下を追加。

DAV svn SVNPath /Users/hoge/_/dev/svnroot/repos AuthType Basic AuthName "Subversion" AuthUserFile /Users/hoge/_/dev/svnroot/svn_passwd Require valid-user

これにより

http://localhost/repos

がSVNリポジトリの「/Users/hoge/_/dev/svnroot/repos」とリンクします。お試しとしてBasic認証も設定ファイルに記載したので、こちらのパスワードも設定します。

Basic認証の設定

以下を入力して実行するとBasic認証のパスワードの入力が要求されるので、2回入力します。

cd /Users/hoge/_/dev/svnroot/ sudo htpasswd -c svn_passwd hoge New password: Re-type new password: Adding password for user hoge

これでBasic認証の設定は終わり。追記：

@hisasann Basic認証の設定のとこ、2回目以降はhtpasswdに -cオプションいらないので注意
via: Twitter / かわ: @hisasann Basic認証の設定のとこ、2回 ...

SVNルートディレクトリの権限の設定

次に、Webサーバのみがリポジトリを読み取れるようにするために以下のように権限を付与します。

cd /Users/hoge/_/dev/ sudo chown -R www:www svnroot sudo chmod 600 svn_passwd

あとは、システム環境設定の共有で「Web共有」をリブートする。そしてのような画面が開けばうまくいきました！！ ■参考リンク・Dreamweaver CS4でのSubversionの使用 - パート3: SubversionをサポートするためのApacheの設定 | デベロッパーセンター・構想雑文 : Mac OS X 10.5(leopard)でSubversionセットアップ　その2 - livedoor Blog（ブログ）・Mac Ports で Subversionインストール - Get crazy

space - HTML5 & CSS3 DEMO

Sat, 13 Mar 2010 15:35:51 +0900

画像やFlashはいっさい使わずに何か中心に向かってアニメーションするものを作りたいと思って制作してみました。今回もjsDeferrd.jsを使用。 cho45's jsdeferred at master - GitHub 中心に向かって行くということで、何かが中心にないと面白くありません。なので、疑似的な太陽をCSS3で作り、そこにHTML5のcanvasが向かって行くという感じになりました。

サンプルコード - CSS3

実はまだこのgradientというCSSプロパティが良くわかっていなくて、Firefoxで出来るけど、Safariでどうやるのかな〜という部分を検証中です。 -moz-radial-gradientというプロパティを使って太陽を描いているんですが、これをWebkitでどう指定するのかが分からない！なので、mozとwebkitでは別々の背景にしています。またbodyタグに-moz-radial-gradientを指定するとなぜかうまく円が描かれなかったです。 divを画面のheight、widthに広げてそこにスタイルを当てるようにして回避しました。あとHTML5のvideoタグも使って音楽を出しています。使っている曲は、HoldenのA Break in The Clouds - Main Mixです。（怒られたら使用するのやめますw）宇宙っぽさが演出できる名曲です。 Firefoxで見ていただくのが一番いいです。 Chrome、Safariの場合は円ではなくグラデーションになってます。以下からどうぞ。 space - HTML5 & CSS3 DEMO

プログラムコード

・gist: 331165 - GitHub

squareDeferred

Sat, 13 Mar 2010 15:21:25 +0900

なんとなく思い立って、jsDeferred.jsでアニメーションのループがしてみたいってなったので作ってみた。この手のアニメーションを考えるときは、どちらかというと間違ったコードが面白さを生み出す。つまり、不意に間違って2回ループしたら面白いや、ストーリーの組み直しなどで型にハマらない動きができたりする。ここ最近は拙作のaddCommand - jQuery Pluginでアニメーションを書いていたんですが、jsDeferredも便利ですね〜。処理の割り込みや、setTimeoutで待たせるときに使ったりしてましたが、アニメーションでも十分に使いやすい。 cho45's jsdeferred at master - GitHub

サンプルコード - jsDeferred.js

ストーリーのループは以下のようにfunctionのcalleeを最後のnextで呼ぶようにしてあげてます。これで疑似無限ループの完成。あとjQuery1.4以降の機能でeasingをCSSプロパティ毎に指定できるので、それで少し気持ち悪い動きをくわえてみたりしてます。 Firefoxでも頑張って動いてくれますが、ChromeかSafariのほうが軽快に動作します。以下からどうぞ。 squareDeferred

プログラムコード

・gist: 331150 - GitHub

flickrダラ見サイト - flickrer作ってみた

Mon, 08 Mar 2010 04:33:49 +0900

自分がflickrをダラ見することが多いので、それっぽい感じのサイトを自分用に作ってみた。特に難しいことはしてなくて、

$.jOpening
$.flickr
$.fn.jCurtain

という3つのプラグインを作って制作してます。あと、miyagawaさんのmiyagawa's jquery-fitimage at master - GitHubを使って拡大画像の調整をしています。実は単にカーテンのようなスライドを作ってみたくて、何か面白いことできないかな〜と思っていたらflickrでやったらいいかもと思って試しに作ったのがこのサイトになります。初めのオープニング部分では、左右からラインが伸びてくるのですが、この当たりはFlashを意識して作っています。今後もうちょい機能増やして、ダラ見しやすくする予定。 autoでスライドしていくとか。対応ブラウザは以下（試したのが以下w）

IE7
Safari4
Firefox3.6
Chrome5

もしよかったら使ってみてくださいな。 flickrer - flickrダラ見サイト追記：

@hisasann マウスオーバーで画像を読むまでに間が空くのがもったいないので裏で呼んでおいたほうがいいんじゃないかと。
via: Twitter / edvakf

との意見をいただいたので、拡大画像部分の画像を先読みするように修正しました。

TextMateにZen-Codingを導入して遊んでみる

Mon, 01 Mar 2010 12:36:54 +0900

つい最近cipher @ Ustream.TV - こもりですさんがZen-Codingのやり方をustで流していたのが新しいですが、TextMateを使うと簡単にZen-Codingが楽しめるのでその導入方法をまとめときます。（ほぼ自分用ｗ） Zen-CodingとはHTMLやCSSのコーディング作業を快適に、そして高速におこなうための追加機能のようです。なので、Editorに追加でプラグインを入れてZenなCoding環境を構築する必要がありそうですね。では一応TextMateの日本語化の部分から解説します。

TextMateを日本語化

TextMateはデフォルトではマルチバイトに対応していません。なので、プラグインを入れて日本語を打てるようにする必要があります。以下のリンクに詳しくまとめてありますので、参考にしてみてください。 Railsに最適なテキストエディター「TextMate」を入れて日本語化してみた

TextMateにZen-Codingを導入する

ではZen-Codingを行うためのプラグインを導入してみましょう！まずは以下のサイトからzipファイルをダウンロードし解凍しときます。

TextMate.Zen.CSS.1.3.1.zip
TextMate.Zen.HTML.1.3.1.zip

zen-coding - Project Hosting on Google Code

Zen.Coding-TextMate.v0.6.zip

Downloads - zen-coding - Project Hosting on Google Code そして以下のディレクトリに3つのtmbundleファイルを配置します。

/Users/hoge/Library/Application Support/TextMate/Bundles

これでZen-Codingのプラグインの導入はおわりです。

Zen-Codingしてみる

まずはTextMateを起動します。そしてHTMLを入力するので、Option + Command + hを押します。これでZenなHTMLモードになります。ためしに「html:4t」と入力してみます。すると。。。とHTML 4.01 Transitionalで展開されます。また、「html:5」と入力すると。。。とHTML5モードで展開されます。実は今までも、メニューから「File -> New From Templete -> HTML」と選択していけば同じようなテンプレートを呼び出せたんですが、毎回新しいhtmlを作成するときにメニューに行くのは面倒でした。なので、Zen-Codingでhtmlの雛形を一気に生成できることは、htmlコーダーやJavaScripterの人に大きな恩恵をもたらすと思います。さらに適当なhtmlを入力してみます。 div#ならid指定、div.ならclass指定の要素が展開されます。なかでもやっぱりうれしいのが、table+やdl+でしょう。いちいちtableタグを作ってその中にtr作ってとやっていた作業が1パツで展開されます。グルーピング系のhtmlタグはBlogの記事を書くときにも使うので、非常に楽になるのではないでしょうか。ちなみに僕はBlogの記事をすべてTextMateで作成しています。 blockquoteと入力してタブを押せばタグが展開されたり、もう便利なのです！

動画でZen-Codingを体感してみる。

こもりさんのブログgaspanik weblogに動画があり非常に参考になりますので、ここに掲載させていただきます。 [via] TextMate+Zen-Codingで超速コーディング？ | gaspanik weblog Zen-Codingでできるあんなことこんなこと | gaspanik weblog

TextMateのcolorについて

全然関係ないんですが、僕のTextMateのtheme colorはMonokai » Blog Archive » Textmate color themeを使っています。 JavaScriptとか結構かっこよく色分けしてくれるので、ずうっとこれ使ってます。他の色にしたいなら Themes / UserSubmittedThemes browse -- TextMate Wiki がオススメです、すごい量のtheme colorがあるので、自分色を探してみるのもよいかもしれません。 ■関連リンク・TextMateのGetBundleがうまくいかないときの対処方法 at HouseTect, JavaScript Blog ・よく使うTextMateショートカット at HouseTect, JavaScript Blog

Macで半角カタカナを入力する方法

Sat, 27 Feb 2010 22:47:08 +0900

入力できないというのは知っていたんですが、半角カタカナを有効にする設定がどこにあるのか分からなかったので、メモメモ。

システム環境設定を開く

まずはシステム環境設定を開き、言語環境をクリックします。

半角カタカナを有効にする

入力メニューのタブをクリックして、あとはことえりの設定のところで、半角カタカナにチェックを付けるだけ。

半角カタカナを入力するとき

適当に日本語で文字を打ってから、「Ctrl + ;」で半角カタカナに変換できます。僕はあんまり半角カタカナを使わないんですが、システムのテストで必要になるかもしれません。 [via] macで半角カナ: たなごころ

Macに複数MySQLをインストールする方法

Tue, 23 Feb 2010 16:59:43 +0900

MacPortsでインストールする方法MacPortsでMySQLをインストール -- BONNOH FRACTION 13や、pkgでインストールする方法素晴らしき哉、人生！: Mac OS 10.5にMySQLインストールを見てみたんですが、どうもこれらの方法では複数のMySQLを同居させるのがむずかしそうだったので、ソースからコンパイルして入れてみた。そしてうまく複数のMySQLが動いたので、そのときのメモメモ。。。

ソースをダウンロードする

以下のリンクからtar.gzをダウンロードします。今回僕はmysql-5.0.33をインストールしましたので、適宜自分のバージョンに置き換えて読んでいただけたらと思います。 MySQL :: Download MySQL Community Server そして適当なディレクトリに解凍する。

tar zxvf mysql-5.0.33.tar.gz

Macだと基本的にmysql-5.0.33.tar.gzをダブルクリックすれば解凍ソフトが起動するので、ターミナルでなくてもOKだと思います。今回は/usr/local/srcディレクトリに解凍しました。そしてディレクトリに潜る。

cd mysql-5.0.33

コンパイルする

まずはconfigureを実行します。このときのコンパイルオプションは結構重要で、とりあえず以下の感じに落ち着きました。 --with-mysqld-user=hogeのところは、Macにユーザ権限でmysqlをソースから（あと、DBD::mysqlも） - Born Neetを参考にして、今ログインしているユーザーを記述してみました。 --prefix=/usr/local/mysql3306は複数のMySQLを/usr/local/に同居させるので、mysqlの後に僕はport番号をサフィックスとして付与しています。

./configure --with-charset=utf8 --with-mysqld-user=hoge --with-unix-socket-path=/usr/local/mysql3306/var/mysql.sock --prefix=/usr/local/mysql3306 --with-blackhole-storage-engine --with-federated-storage-engine

configureがうまくいけば、あとはmakeで終わり。

make make install

データベースを初期化する

/usr/local/mysql3306/bin/mysql_install_db --user=hoge

もしここで「unknown option '--skip-federated'」のようなエラーが出てしまう場合は、以下のファイルの

/etc/my.cnf

この部分をコメントアウトしてください。

#skip-federated

[via] mysql 5.1のmysql_install_dbがこける - うまい棒blog 初期化が終わるとデータディレクトリのvarが作成されます。

/usr/local/mysql3306/var/

そして今回の重要なポイントですが、MySQLを別ポートで複数起動するので、このmy.cnfが1つだとうまくいきません。 my.cnfにportを指定する箇所があるので、別々のMySQLは別々のmy.cnfを見に行って欲しいわけです。なので、今回は

cp /etc/my.cnf /usr/local/mysql3306/var

を実行してmy.cnfをデータディレクトリにコピーしました。これで順番的に自分自身のmy.cnfを見に行くようになります。また、mysql.sockというMySQLが起動したときに作成されるファイルも別々にしたいので、これもデータディレクトリに作ってねっ！と記述しています。一般的には/tmp/mysql.sockに作成されるようです。

[client] default-character-set=utf8 #password = your_password port = 3306 socket = /usr/local/mysql3306/var/mysql.sock # Here follows entries for some specific programs # The MySQL server [mysqld] default-character-set = utf8 skip-character-set-client-handshake character-set-server = utf8 collation-server = utf8_general_ci init-connect = SET NAMES utf8 port = 3306 socket = /usr/local/mysql3306/var/mysql.sock skip-locking key_buffer = 16M max_allowed_packet = 1M table_cache = 64 sort_buffer_size = 512K net_buffer_length = 8K read_buffer_size = 256K read_rnd_buffer_size = 512K myisam_sort_buffer_size = 8M

MySQLを起動する

起動コマンドは以下のとおり。

cd /usr/local/mysql3306/bin ./mysqld_safe &

これでバックグラウンドでMySQLが起動します。ちょっと教えてもらった操作をメモ。もし以下のように&を付けずに起動した場合、

./mysqld_safe

Ctrl + zで一旦プロセスを落として、

bg

と叩くと

./mysqld_safe &

をしたときと同じ動作になるみたい。最後に、プロセスが立ち上がっているかを以下で確認する。

ps ax | grep mysql

MySQLを停止する

以下で止まる。

./mysqladmin shutdown --socket=/usr/local/mysql3306/var/mysql.sock

まとめ

これで、もうひとつmysqlを作りたい場合は、「コンパイルする」の部分から--prefixを変えて実行すればよい。結構手順としては面倒だが、プロジェクトが複数のMySQLを必要としている場合に、この手順が参考になれば幸いです。 ■関連リンク・MySQL :: MySQL 5.1 リファレンスマニュアル :: 2.5 Mac OS X に MySQL をインストールする・「Can't connect to local MySQL server through socket」エラーについて・MySQL :: MySQL 4.1 リファレンスマニュアル :: 4.8.3 mysqld_multi（複数の MySQL サーバを管理するプログラム）・MySQL / Mac OS X ・Macにユーザ権限でmysqlをソースから（あと、DBD::mysqlも） - Born Neet ・MySQL :: MySQL 4.1 リファレンスマニュアル :: 2.4.1 mysql_install_db の実行に関する問題・1台のサーバに複数のMySQLをインストールしてみた。 | RwJ ・MySQL :: MySQL 5.1 リファレンスマニュアル :: 2.9.2 典型的な configure オプション・MySQL :: MySQL 4.1 リファレンスマニュアル :: A.4.5 MySQL ソケットファイル /tmp/mysql.sock の保護または変更方法

MacにImageMagickをインストールする方法

Tue, 23 Feb 2010 16:50:28 +0900

いろいろググッた結果、MacPortsからインストールするのが速そう。ということでまずはMacPortsのインストールから解説します。すでに入っているかたは、読み飛ばしてください。

MacPortsをインストールする

まずは、Xcode ToolsをMacに付属しているインストールディスクからインストールします。終わったら、http://svn.macosforge.org/repository/macports/downloads/からバージョンを選んでダウンロードする。僕のローカルにはすでに、MacPorts-1.7.1が入っていたので、このバージョンでも問題ないと思います。次に環境変数にパスを追加しときます。

cd vim .bash_profile export PATH=/opt/local/bin:/opt/local/sbin/:$PATH export MANPATH=/opt/local/man:$MANPATH

一応リフレッシュしとく。

source .bash_profile

あとはMacPortsをアップデートしておわり。

$ sudo port -d selfupdate $ sudo port -d sync

[via] MacPortsでステキなUNIXツールをインストール - はこべにっき#

ImageMagickをインストールする

ここまで来るとあとは楽チンで、

$ sudo port install ImageMagick

これで終わり！いろんなものを一緒にインストールするので、だいたい30分くらいはかかるかも。すでに、MacPortsでインストールされているものを確認するなら、

$ port installed

と叩けば、ゾロゾロと表示されます。 [via] [を] Mac に ImageMagick を入れた ■関連リンク・新しいMacbook Proにインストールしたものメモ・MacPortsのコマンド逆引き一覧 -- ディノオープンラボラトリ

Wordpressの画像アップロードを激的に便利にする方法

Mon, 15 Feb 2010 19:24:06 +0900

以下のJavaScriptファイルに

wp-admin/js/media-upload.js

send_to_editorという関数があるので、その中の以下の部分を書き換えるとアップロード後や投稿に挿入後に再び画像アップロードのレイヤーが表示される。これで、

複数ファイルをアップロード
名前を変更する
変更を保存する
ひとつずつ画像を投稿に挿入する

という手順ができるので、激的に作業が速くなる。 Wordpressを使っているとどうしても画像のアップロードのところの面倒くささがあって、記事を書くのが少しおっくうになるが、これで少しでもブログを書くのが楽しくなれば幸いです。 ■関連リンク WordPress › フォーラム » 画像の「投稿に挿入」の効率化

TextMateのGetBundleがうまくいかないときの対処方法

Fri, 05 Feb 2010 16:01:16 +0900

TextMateを使っていると基本的にはデフォルトのBundleでことが足りるんですが、jQueryBundle入れたり、MootoolsBundle入れたりと何かしらBundleを自分でインストールする機会があります。このときにBundleを簡単にインストールできるGetBundleを使えば、簡単にインストールできるんですが、不調なのかアップデートが必要なのかうまくいかない場合があり、こんなときはBundleのsvnリポジトリから自分でインストールしちゃうと早いです。

Bundlesから選んでインストールする方法

以下のリンクから欲しいバンドルリンクをクリックします。 http://svn.textmate.org/trunk/Bundles/ そのときのURLをコピーして、以下のように直接TextMateのBundlesディレクトリにチェックアウトする。僕は自分のUserの下にTextMateのBundlesを入れているのでこんな感じ。システム全体で共通に使っている人は/Libraryから始めるみたい。 Bundlesは死ぬほど便利なので、入れまくって使いまくりましょう！！

Apple iPadが欲しくなる映像

Thu, 04 Feb 2010 12:51:51 +0900

始め、いろんな方のエントリーを読んで僕は買わないかな〜と思っていましたが、どうにもこうにも徐々に買いたい欲が湧いてきてしまった。そもそも家でもMac、職場でもMacを使って作業をしていて、ケイタイはiPhoneだしともうMac漬けなので、iPadも欲しくなってしまう。まずは以下のApple iPadのビデオからどうぞ。毎回思いますが、この作り手たちの声は卑怯！ｗ Apple iPad こちらは実際にiPadに触った人たちのビデオ。ますます欲しくなります。。 Apple iPad: iLounge.com's Complete Interface Walkthrough (720p HD) Apple iPad: Hands On iPad first impressions いやはや後すこし待ちますかっ！アップル - iPad - ウェブ、メール、写真を体験する最高の方法。

JavaScript変態複雑化文法最速マスター

Wed, 03 Feb 2010 16:20:40 +0900

Java変態文法最速マスター - プログラマーの脳みそをリスペクト。 JavaScript変態文法最速マスター - 葉っぱ日記をリスペクト。特に技法的なことではないんですが、functionをいろんなところで絡めてわかりにくくするポイントをいくつか紹介。

if文にfunctionを絡めてみる

単純なifなはずなのに、条件式に即時実行のfunctionを絡めることによってよりわかりにくくできます。さらにクロージャをreturnして()で実行し、より複雑にする技法もとりいれてます。

for文にfunctionを絡めてみる

そもそもfor文の回りにfunctionを絡めてわかりにくくし、for文の条件式にもfunctionを絡めます。さらにクロージャをreturnして()で実行し、より複雑にする技法もとりいれてます。「ちなみにここでやっていることは引数の[1, 2, 3]という配列を受け取って、新しい配列にコピーしてreturnしているだけです。」

出力結果

[1, 2, 3]

Objectに上記やり方を絡めてみる

aというプロパティはただaを返せば終わりなはずなのに、わざわざfunctionでネストしてわかりにくくしています。 bというプロパティは上記if文複雑化とfor文複雑化を応用して、解読が困難な状態を実現しています。

出力結果

[1, 2, 3]

複雑化で気を付ける点

iをインクリメントする部分の複雑化でという部分がありますが、ここでこのように引数で渡してはいけません。外側のスコープにいるiではなく、このfunctionの関数スコープ内のiをインクリメントすることになるので無限ループになります。これ以外にもcurry化をうまく使いまくって、複雑にすることができますが、だいたい上記のことが応用できれば特に問題はありません。 ※注意 function絡めは節度と必要度合いを見て実装しましょうね！

エラトステネスの篩 - JavaScript版

Fri, 29 Jan 2010 11:25:38 +0900

エラトステネスの篩 - Wikipedia こんな感じなのかな。。

サンプルコード

出力結果

[2, 3, 5, 7, 11, 13, 17, 19, 23, 29, 31, 37, 41, 43, 47, 53, 59, 61, 67, 71, 73, 79, 83, 89, 97]

勉強になりました！