HouseTect, JavaScript Blog

画像や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に広げてそこにスタイルを当てるようにして回避しました。

.radial1 { background: -moz-radial-gradient(red, yellow, #1E90FF); background: -moz-radial-gradient(#FF0000 5%, #FFFF00 30%, #333333 50%); background: -webkit-gradient(linear, left top, left bottom, from(#66ff00), color-stop(0.3, #ffff00), color-stop(0.7, #ff00ff), to(#00aaff)); } .radial2 { background: -moz-radial-gradient(red, yellow, #1E90FF); background: -moz-radial-gradient(#FF3535 6%, #F5FF35 30%, #333333 50%); background: -webkit-gradient(linear, left top, left bottom, from(#66ff00), color-stop(0.3, #ffff00), color-stop(0.7, #ff00ff), to(#00aaff)); }

あとHTML5のvideoタグも使って音楽を出しています。
使っている曲は、HoldenのA Break in The Clouds - Main Mixです。（怒られたら使用するのやめますw）
宇宙っぽさが演出できる名曲です。

Firefoxで見ていただくのが一番いいです。
Chrome、Safariの場合は円ではなくグラデーションになってます。
以下からどうぞ。
space - HTML5 & CSS3 DEMO

プログラムコード

・gist: 331165 - GitHub

なんとなく思い立って、jsDeferred.jsでアニメーションのループがしてみたいってなったので作ってみた。
この手のアニメーションを考えるときは、どちらかというと間違ったコードが面白さを生み出す。
つまり、不意に間違って2回ループしたら面白いや、ストーリーの組み直しなどで型にハマらない動きができたりする。

ここ最近は拙作のaddCommand - jQuery Pluginでアニメーションを書いていたんですが、jsDeferredも便利ですね〜。

処理の割り込みや、setTimeoutで待たせるときに使ったりしてましたが、アニメーションでも十分に使いやすい。

cho45's jsdeferred at master - GitHub

サンプルコード - jsDeferred.js

ストーリーのループは以下のようにfunctionのcalleeを最後のnextで呼ぶようにしてあげてます。
これで疑似無限ループの完成。

// jsDeferred (function() { var callee = arguments.callee; wait(2). next(function() { return story1(); }). wait(2). next(function() { return story2(); }). wait(2). next(function() { callee(); }); })();

あとjQuery1.4以降の機能でeasingをCSSプロパティ毎に指定できるので、それで少し気持ち悪い動きをくわえてみたりしてます。

Firefoxでも頑張って動いてくれますが、ChromeかSafariのほうが軽快に動作します。
以下からどうぞ。
squareDeferred

プログラムコード

・gist: 331150 - GitHub

自分が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

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

つい最近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

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

システム環境設定を開く

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

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

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

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

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

[via]
macで半角カナ: たなごころ

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 の保護または変更方法

いろいろググッた結果、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のコマンド逆引き一覧 -- ディノオープンラボラトリ

以下のJavaScriptファイルに

wp-admin/js/media-upload.js

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

//tb_remove(); window.history.back();

これで、

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

という手順ができるので、激的に作業が速くなる。

Wordpressを使っているとどうしても画像のアップロードのところの面倒くささがあって、記事を書くのが少しおっくうになるが、これで少しでもブログを書くのが楽しくなれば幸いです。

■関連リンク
WordPress › フォーラム » 画像の「投稿に挿入」の効率化

TextMateを使っていると基本的にはデフォルトのBundleでことが足りるんですが、jQueryBundle入れたり、MootoolsBundle入れたりと何かしらBundleを自分でインストールする機会があります。

このときにBundleを簡単にインストールできるGetBundleを使えば、簡単にインストールできるんですが、不調なのかアップデートが必要なのかうまくいかない場合があり、
こんなときはBundleのsvnリポジトリから自分でインストールしちゃうと早いです。

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

以下のリンクから欲しいバンドルリンクをクリックします。

http://svn.textmate.org/trunk/Bundles/

そのときのURLをコピーして、以下のように直接TextMateのBundlesディレクトリにチェックアウトする。

僕は自分のUserの下にTextMateのBundlesを入れているのでこんな感じ。

cd /Users/hoge/Library/Application Support/TextMate/Bundles svn co http://svn.textmate.org/trunk/Bundles/JavaScript%20jQuery.tmbundle/

システム全体で共通に使っている人は/Libraryから始めるみたい。

cd /Library/Application Support/TextMate/Bundles svn co http://svn.textmate.org/trunk/Bundles/JavaScript%20jQuery.tmbundle/

Bundlesは死ぬほど便利なので、入れまくって使いまくりましょう！！

始め、いろんな方のエントリーを読んで僕は買わないかな〜と思っていましたが、どうにもこうにも徐々に買いたい欲が湧いてきてしまった。
そもそも家でも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 - ウェブ、メール、写真を体験する最高の方法。

Java変態文法最速マスター - プログラマーの脳みそをリスペクト。
JavaScript変態文法最速マスター - 葉っぱ日記をリスペクト。

特に技法的なことではないんですが、functionをいろんなところで絡めてわかりにくくするポイントをいくつか紹介。

if文にfunctionを絡めてみる

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

if (function(a, b) { return (function(a, b) { return a < b; })(1, 2); }()) { console.log(1); }

for文にfunctionを絡めてみる

そもそもfor文の回りにfunctionを絡めてわかりにくくし、for文の条件式にもfunctionを絡めます。
さらにクロージャをreturnして()で実行し、より複雑にする技法もとりいれてます。

「ちなみにここでやっていることは引数の[1, 2, 3]という配列を受け取って、新しい配列にコピーしてreturnしているだけです。」

var array = (function(arr) { return function() { var i=0, ret = new Array; for (; i < function(arr) {return arr.length;}(arr);)(function(object) { ret.push(object); (function() {++i;})(); })(arr[i]); return ret; } })([1, 2, 3])(); console.log(array);

出力結果

[1, 2, 3]

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

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

var Hoge = { a: function() { return function() { return (function() { return "a" })(); } }, b: function() { if (function(a) { return (function(a) { return a == "a"; })("a"); }()) { var array = (function(arr) { return function() { var i=0, ret = new Array; for (; i < function(arr) {return arr.length;}(arr);)(function(object) { ret.push(object); (function() {++i;})(); })(arr[i]); return ret; } })([1, 2, 3])(); return array; } } } console.log(Hoge.b());

出力結果

[1, 2, 3]

複雑化で気を付ける点

iをインクリメントする部分の複雑化で

(function() {++i;})();

という部分がありますが、ここで

(function(i) {++i;})(i);

このように引数で渡してはいけません。
外側のスコープにいるiではなく、このfunctionの関数スコープ内のiをインクリメントすることになるので無限ループになります。

これ以外にもcurry化をうまく使いまくって、複雑にすることができますが、だいたい上記のことが応用できれば特に問題はありません。

※注意 function絡めは節度と必要度合いを見て実装しましょうね！