HouseTect, JavaScript Blog
space - HTML5 & CSS3 DEMO
- 2010-03-13 (土)
- 技術
画像や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 - GitHubsquareDeferred
- 2010-03-13 (土)
- 技術
なんとなく思い立って、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 - GitHubflickrダラ見サイト - flickrer作ってみた
- 2010-03-08 (月)
- 技術
自分が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を導入して遊んでみる
- 2010-03-01 (月)
- Mac
つい最近cipher @ Ustream.TV - こもりですさんがZen-Codingのやり方をustで流していたのが新しいですが、TextMateを使うと簡単にZen-Codingが楽しめるのでその導入方法をまとめときます。(ほぼ自分用w)
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で半角カタカナを入力する方法
- 2010-02-27 (土)
- Mac
入力できないというのは知っていたんですが、半角カタカナを有効にする設定がどこにあるのか分からなかったので、メモメモ。
システム環境設定を開く
まずはシステム環境設定を開き、言語環境をクリックします。
半角カタカナを有効にする
入力メニューのタブをクリックして、あとはことえりの設定のところで、半角カタカナにチェックを付けるだけ。
半角カタカナを入力するとき
適当に日本語で文字を打ってから、「Ctrl + ;」で半角カタカナに変換できます。
僕はあんまり半角カタカナを使わないんですが、システムのテストで必要になるかもしれません。
[via]
macで半角カナ: たなごころ
Macに複数MySQLをインストールする方法
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をインストールする方法
いろいろググッた結果、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の画像アップロードを激的に便利にする方法
- 2010-02-15 (月)
- ブログ
以下のJavaScriptファイルに
wp-admin/js/media-upload.js
send_to_editorという関数があるので、その中の以下の部分を書き換えるとアップロード後や投稿に挿入後に再び画像アップロードのレイヤーが表示される。
これで、
- 複数ファイルをアップロード
- 名前を変更する
- 変更を保存する
- ひとつずつ画像を投稿に挿入する
という手順ができるので、激的に作業が速くなる。
Wordpressを使っているとどうしても画像のアップロードのところの面倒くささがあって、記事を書くのが少しおっくうになるが、これで少しでもブログを書くのが楽しくなれば幸いです。
TextMateのGetBundleがうまくいかないときの対処方法
- 2010-02-05 (金)
- Mac
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が欲しくなる映像
- 2010-02-04 (木)
- Mac
始め、いろんな方のエントリーを読んで僕は買わないかな〜と思っていましたが、どうにもこうにも徐々に買いたい欲が湧いてきてしまった。
そもそも家でもMac、職場でもMacを使って作業をしていて、ケイタイはiPhoneだしともうMac漬けなので、iPadも欲しくなってしまう。
まずは以下のApple iPadのビデオからどうぞ。
毎回思いますが、この作り手たちの声は卑怯!w
Apple iPad
こちらは実際にiPadに触った人たちのビデオ。
ますます欲しくなります。。
Apple iPad: iLounge.com's Complete Interface Walkthrough (720p HD)
Apple iPad: Hands On
iPad first impressions
いやはや後すこし待ちますかっ!
JavaScript変態複雑化文法最速マスター
- 2010-02-03 (水)
- 技術
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絡めは節度と必要度合いを見て実装しましょうね!
- このブログについて
-
author:hisasann.com
description:就職しました!
最近はJavaScript、Perl、Rails、Java(Struts+Spring+iBatis)なんかをいろいろといじっています。
今猛勉強中なのがActionScriptです。
アニメーション楽しい!
他に運営しているブログ:
利用しているWebサービス :

- Tag cloud
-
-
ActionScript
addon
Ads
Ajax
Algorithm
Amazing
Anime
AppleScript
Application
Aptana
baby
Blog
Bloger
BlogParts
Book
Book Review
Bookmark
Bookmarklet
Box2d
browser
Camera
Canvas
Catalyst
Chrome
CM
Communication
Cool
CPAN
CSS
CSS3
DB
design
Dinner
DJ
DOM
DS
Eclipse
Editor
Electro
Emulator
Engineer
English
Firebug
Firefox
Flash
Flex
Flickr
Food
Freesoft
Funny
Gadget
Game
Geek
Generator
Google
Google Wave
Greasemonkey
Grow
Hacker
Haml
hatena
HTML
HTML5
iBatis
IDE
Idea
IE
IE6
IE7
IE8
Image
Interface
iPad
iPhone
iPod
IT
Item
iTunes
Java
JavaScript
jQuery
jsDeferred
JsUnit
Keyboard
Lanch
Language
LifeHack
Mac
MacBookPro
Mash-up
Mobile
Monitor
MOO
Motivation
Movalble Type
Movie
Music
MySql
Netscape
News
Nikki
OpenSource
Opera
Oracle
Papervision3D
Pasta
PC
Perl
Photoshop
PHP
PL/SQL
Plugin
Presentation
Program
Progression
prototypeJS
Python
QUnit
Ramen
Rhino
RSS
Ruby
Ruby On Rails
Safari
Sakura
Sanitizing
Search
Seasar2
Security
SEO
Shell
Shortcut
Sinatra
Skill
SMO
SNS
Spring
SQL
SSH
SSL
Struts
Test
TextMate
Tomcat
Tool
Tumblr
Twitter
Unix
Vista
VMware
Web
Web2.0
Webkit
WebService
Wii
Wiki
Windows
Word
WordPress
Work
Workshop
WTP
XAMPP
XCode
XSS
XUL
Yahoo
YouTube
YUI
Zen-Coding

