画面いっぱいにスマイリーが並んでいて、マウスオーバーするとくるっと反転するページがありましたよ。

↑ こういうやつね。

どうやってんじゃろ？と思ってソースをみたらFLASHじゃなくて、jQueryのアニメーション＋CSSスプライトを使って実現していました。

↑ この画像を14pxごとにずらして表示、と。

ま、それだけなのですが、ソースもシンプルだし、どこかで使えそうかな、と思ったのでエントリーしときまする。

» smile!

SQLのインデックスに関する電子書籍が無料配布されていたのでメモ的にエントリー。なんとなく使っているインデックスをきちんと理解したい人におすすめ、かな。

↑ ボリューム1とボリューム2がありますね。現在はボリューム1のみ。ちなみにePub形式。

↑ 開いてみた。ふむ、勉強になりそう。

ちなみにePubが面倒な人にはウェブ版もありました。ePubをiPadなんかに突っ込んで時間のあるときに読むのがいいかもですね。

» SQL Performance Explained | Free SQL Tuning and Indexing e-book Download

CSS3だけで画像のトグル処理を実現するデモがありましたよ。「:target」と「pointer-events」を使って可能にしているようです。なーるほど。

↑ つまりこういうことです。

スマートフォンなどの実装に使えそうな？トリックとして興味深いのでメモ的にエントリーしておきます。

» CSS3 toggle-button without JavaScript

iPhoneやらAndroidやらで画面のサイズが違うので、画像をどう表示するか、というのは悩ましい問題ですよね。そこで登場したのがtinySrcですよ。アクセスした機種にあわせて画像を自動的にリサイズしてくれるっていうのだから便利この上ないっす。

使い方は簡単で、imgタグのsrcを次のように変えるだけ。

http://i.tinysrc.mobi/http://mysite.com/myimage.png

こうするだけで、iPhoneだったらその画面の横幅いっぱいにリサイズした画像を表示してくれます。もちろん縦横比はそのままなので自然な仕上がりになります。

ただ、さらに便利なのが豊富なオプション群です。これらを使えば「左右に5px残しつつ縮小」とか「画面幅の50%で」といった指定も可能です。いくつか例をあげてみましょう。

http://i.tinysrc.mobi/300/200/http://mysite.com/myimage.png

↑ 300×200で表示。

http://i.tinysrc.mobi/-8/http://mysite.com/myimage.png

↑ 横に8ピクセル残す。

http://i.tinysrc.mobi/x50/http://mysite.com/myimage.png

↑ 画面幅の50%で表示。

http://i.tinysrc.mobi/jpg/http://mysite.com/myimage.png

↑ JPEGに変換して表示。JPEGとPNGが指定可能です。

もちろんこれらを組み合わせることも可能です。「機種毎に画像つくるの面倒なんだよね・・・」というときにいかがでしょ。詳細な使い方は以下からどうぞ。

» tinySrc

SQLの「LEFT JOIN」やら「INNER JOIN」ってなんじゃろ？という方にとっても参考になりそうなサイトのご紹介。それぞれの命令をベン図で良い感じに表現しちゃっていますよ。とってもわかりやすいです。

Table AとTable Bが「name」というフィールドでつながっているという設定です。

• INNER JOIN

まずはINNER JOIN。共通部分だけとってきます。

SELECT * FROM TableA
INNER JOIN TableB
ON TableA.name = TableB.name

図だとこんな感じ。



• FULL OUTER JOIN

次に重複部分はひとつだけにして、あと全部。

SELECT * FROM TableA
FULL OUTER JOIN TableB
ON TableA.name = TableB.name

図だとこんな感じね。



• LEFT OUTER JOIN

左側だけいっときます。

SELECT * FROM TableA
LEFT OUTER JOIN TableB
ON TableA.name = TableB.name

図。



• 片方だけ

上のから共通部分だけ除きます。

SELECT * FROM TableA
LEFT OUTER JOIN TableB
ON TableA.name = TableB.name
WHERE TableB.id IS null

図ね。



• 共通部分を除く

次に全体から共通部分を除くにはこうします。

SELECT * FROM TableA
FULL OUTER JOIN TableB
ON TableA.name = TableB.name
WHERE TableA.id IS null
OR TableB.id IS null

図でいうとこんな感じ。



• CROSS JOIN

これは図にできないのですが、重複しているものも含めて全部とってくる命令です。

SELECT * FROM TableA
CROSS JOIN TableB

いかがですかね。JOIN文を書くときには参考にしてみたいですね。なお、サンプルデータで抽出結果がどうなるかを知りたい方は元サイトをどうぞ。

» Coding Horror: A Visual Explanation of SQL Joins

前から書こうと思っていたことを一気に書くぞ。

Titanium Mobileでいろいろ設定していざ実機転送！となったときにエラーが出て頭を抱えたことはないですか？

↑ これ。

個人的にも前回の開発合宿ではまりまくったのですが、どうしてもうまくいかなかったら「Xcodeのオーガナイザでちゃんとアプリケーションが登録されているか？」をチェックするようにしてください。

↑ Xcodeたちあげて「ウィンドウ」から「オーガナイザ」でいけます。実機を接続したあとにアプリケーションを登録しましょう。

Titanium Mobileをいじっていると「TM単体だけでアプリ開発が！」とつい思ってしまいますが、Xcodeとかなり密に連動しているのでこちら側の設定も忘れないようにしましょうね。

逆にいうとTitanium Mobileで開発する場合も、一度Xcodeで開発→実機転送までを一度経験しておく必要があるかと思いますよ。

冬休みにTitanium Mobileいじってみようかなぁ、という方は参考にしてみてくださいな。

» Titanium Mobile Application Development | Appcelerator

FireworksのちょっとしたTipsを教えてくれるブログ、『Firewokrsマニア』がお気に入りですよ。内容もさることながら、細かいUIが工夫されていていろいろ参考になります。

個人的に驚きがあっていいなぁ、と思ったUIは記事の最後まで来ると「お礼＆共有のお誘い」が出てくるインターフェースです。

↑ 読み始めは普通ですが・・・。

↑ 最後まで来るとこのようなメニューが上からにょろりと現れます。

「最後までお読みいただきありがとうございました」と言われるとちょっとうれしいですね。このブログも細かいUIで懲りたいなぁ・・・。

というわけでFireworksマニアはこちらからどうぞ。

» Fireworksマニア | Fireworksの使い方やWebデザインに役立つ小技をご紹介します♪

環境によりけりで使えたり使えなかったりでしょうが、「25 Even More – Sick Linux Commands」なる記事があったのでご紹介。実際に試してみて「おー！」となったものを中心にとりあげてみますかね。

• ディレクトリ構造をツリー状に表示

まぁ、「tree」でいいと思うのですが、無駄に凝っていたのでｗ。

ls -R | grep ":$" | sed -e 's/:$//' -e 's/[^-][^\/]*\//--/g' -e 's/^/   /' -e 's/-/|/'

• 特定のファイル以外を削除

これは便利。知らなかった・・・。rmとかって正規表現を引数に出来るのね。

rm !(*.foo|*.bar|*.baz)

• 長ーいコマンドを検索しやすく

あー、なるほど・・・。こうしてコメント付きでラベルをつけておいて「ctrl+R」すればhistoryから検索できますな。

some_very_long_and_complex_command # label

alias使うまでもない一時的なコマンドにいいかも。

• 簡易計算機を定義

これを打っておくと、あとで「? 5*3-10」といった具合に計算ができるようになります。

? () { echo "$*" | bc -l; }

• 直前のコマンドから最後の引数を抜いたもの

あ、そうなんだ。知らなかった・・・。かわいいすね、このコマンド。

!:-

• 拡張子をさくっと変更

これも覚えておくと便利ですね。

mv filename.{old,new}

どれもなかなか楽しいコマンドですね。トリビア的に覚えておいて話のネタ的に披露しても良さそうです。元記事にはもうちょっとありますよ。興味がある人はいかが？

» 25 Even More – Sick Linux Commands

技術メモなので興味のない方はスルーにて！

さて、IDEA*PADのサーバー容量がすぐになくなってしまうのでなんじゃろ？と思っていたらAjax通信のログがたまりまくっていました。一定周期で他の人が更新したかをチェックするためのスクリプトが走っているのですが、それのせいでしたね・・・。

いろいろぐぐってログファイルから特定アクセスを除外するように設定しました。以下をVirtualHost内のディレクティブに記述で完了、と。

SetEnvIf Request_URI "checkLocked|checkModified" ajax-request
CustomLog logs/access_log common env=!ajax-request

setTimeoutなんかでAjax通信しちゃっている人はご参考までに・・・というか、今まで気づかなかったのがやばいですね・・・。サーバー管理は勉強になるなぁ。

あ、ちなみに参考にしたのはこちらのサイトでした。ありがとうございます。

» Apache のカスタムログ設定 – Linux で自宅サーバ [ Home Server Technical. ]

先日IDEA*PADのサーバーが容量不足でトラブったので今更ながら容量不足のときにアラートしてくれるスクリプトを書きました。素人っぽいあれであれですが、一応公開しておきます。

#!/bin/sh
DVAL=`/bin/df / | /usr/bin/tail -1 | /bin/sed 's/^.* \([0-9]*\)%.*$/\1/'`
if [ $DVAL -gt 80 ]; then
  echo "Disk usage alert: $DVAL %" | /bin/mail -s "[WARNING][`hostname`] disk space alert" YOUR_EMAIL_ADDRESS
fi

「df」の結果をごにょごにょして80%以上になったらメールを飛ばす、という感じですね。あとは実行権限をあたえて（chmod u+x FILENAME）、cronに仕込んでおけば大丈夫です。

ご参考までに。