知っておくとちょっと便利かもしれない一覧表のご紹介。Font Matrixでは、Windows、MacOS、Microsoft Office、Adobe CSシリーズにどのフォントがバンドルされているかがまとめられています。

↑ どのフォントがどのソフトにバンドルされているかがわかります。

どのフォントが一番無難かな、とか、このフォントが入ったファイルはあの人では見ることできなそうだな、とかがわかります。
日本語フォントまでは対応していないですが、知っておいて損はないですね。

» Font Matrix

なお、このFont Matrixは24waysの記事資料として作られたようですね。こちらもあわせてどうぞ。

» 24 ways: Increase Your Font Stacks With Font Matrix

Google内部で使われていたAPIが一般向けに公開されたようです。URLをちょこちょこいじるだけでグラフを描いてくれる、というAPIです。

ちょこっとした棒グラフや円グラフを作りたい、というときに便利そうですね。いくつか例をご紹介。

↑ 「http://chart.apis.google.com/chart?cht=bvg&chs=200×125&chd=s:hello,world&chco=cc0000,00aa00」で出力。

↑ 「http://chart.apis.google.com/chart?cht=v&chs=200×100&chd=t:100,80,60,30,30,30,10」で出力。

↑ 「http://chart.apis.google.com/chart?cht=p3&chd=t:90,49&chs=350×150&chl=Foo|Bar」で出力。

それぞれのURLをimg srcに指定すればその場で画像が生成されるようです（例はAjaxianやここから拝借）。

その他にもいろいろオプションがあるようですね。詳細は以下からどうぞ。これでさらにマッシュアップサイトが作りやすくなりましたね・・・。

» Developer’s Guide – Google Chart API – Google Code

2005年から続いているクリスマス企画、24 Waysが今年も始まったようです。

ウェブデザインの最先端技術について、12月1日から日替わりで24日まで紹介していく、という企画です。

↑ 右上から過去記事にも飛べますよ。

すでに二つの記事があがっていますね。透過PNGの地図技術についてですね。なかなかマニアックではありますが、ひとつ上のレベルを目指したい人はいかがでしょうか。

RSSも出力しているので登録しておくと良いですね。

» 24 ways

いつか使いたいのでメモ的にエントリー。JavaScriptで左から右にメッセージが流れる電光掲示板を作ってくれます。

↑ こんな感じ。カラフルで素敵。

大きさや横幅、効果などはScript中で操作できる模様。いじれるオプションは以下のソースをご覧ください。

// Sets the size of the LEDs - 16, 32, 48, 64 or 128 pixels.
var ledSize = 16;
// Sets the desired spacing between LEDs
var ledPadding = 1;
// Sets the desired LED colour. Acceptable values are 'red, 'amber', 'yellow', 'green', 'blue', 'uv' (purple), 'white', or 'rainbow'.
var ledColor = 'rainbow';
// Sets the scroll delay. Larger values mean slower scrolling.
var scrollDelay = 100;
// Adjusts the amount of motion blur. Higher values mean more blurring (and less readability).
var blurLevel = 0.25;
// Create the LED matrix - change the first value if you want to alter the width of the display.
createLedMatrix(24,6);
// Type your message here:
setMessage("This is a sample scrolling message - dynamically created and rendered with some neat javascript code. I knew these LED graphics would come in handy for something!  ");
// Start the scrolling!
scroll();

ちょっとしたサイトのアクセントによさそうですね。詳細＆ダウンロードは以下のサイトからどうぞ。

» JavaScript LED Message Scrolling Display

ここのデザインどうしようかなー、というときに使えそうなパターンを集めたサイト。見ているだけでデザインのアイディアが湧いてきますね。タグクラウドや無限スクロールなど、最新のインターフェースを集めている点も魅力ですね。

↑ 「Subscription」の例。どういうときに使うべきかの説明もあって親切。

↑ 「Pagination」の場合。例も豊富ですね。

なかなか便利ですね。社内説得用にもいいかも。ご利用は以下からどうぞ。

» UI-patterns.com

■ 関連サイト

• ウェブに激しく使えるインタラクティブなインターフェース集『Welie』 | 100SHIKI.COM

いつか使うかも、という意味でメモ的にエントリー。

ウェブサービスを開発していて、たまに時間を入力させたいときがありますが、それを簡単に（？）してくれるためのツールです。

なんと時間を入力するフィールドの横に時計を表示してくれて、それを操作して時間を選べるというもの。

↑ こんな感じ。

よく日付をカレンダーで入力させますが、それの時計版ですね。微妙に使いにくい、とか突っ込みどころはありますが、ちょっとユニークなアクセントに使ってみてもいいかも・・・かな？

時計の表示や、選択後のアクションなど、いろいろカスタマイズできる模様。詳細＆ダウンロードは以下からどうぞ。

» JavaScript Time Picker | NoGray.com

こちらもいつか使ってみたい、という意味でエントリー。

phpUserClassはユーザー管理に関する機能に特化したライブラリです。ユーザーの認証、ログイン、ユーザーの追加などなど、コミュニティサイトに必要そうな機能をさくっと使うことができます。なお、MySQLと連動させて使います。

実例で見たほうがいいですかね。いくつかコードをご紹介。

if ($user->is_loaded() && !$user->is_active() )
echo 'Please activate your account first';

↑ ユーザーがログインしていて、なおかつ、有効かどうかをチェック。

if ($user->is('customer'))//This will return true if the field `customer` has the value `1`
echo 'Hello, ' . $user->get_property('firstName');

↑ データの取得。簡単そう。

if ( !$user->login($_POST['username'],$_POST['password']) )
echo 'Wrong username and/or password';

↑ 面倒なログイン処理もこんな感じで。

こういうライブラリはそのまま使っても便利ですが、コードを読み解くことで勉強になりそうですね。よろしければどうぞ。

» PHP User Class – php user class

これはちょっと使ってみたい。忘れないようにメモ的エントリー。

htmlSQLはPHPで使うライブラリです。これを使えばHTMLの要素をSQLちっくに取り出すことができます。例えば次のような命令が書けるようになります。

↑ わかりやすいっす。

ちょっとあのページのタイトルだけ取り出したい、あのリンク集のURLだけ取り出したい、といったときに便利そうですね。ソースを勉強してみるのもいいかも。

デモサイトもあるので挙動を確認したい人はどうぞ。返り値は配列のようです。

↑ こちらでデモができますよ。

ダウンロード＆詳細はこちらから。ライセンスなどを確認の上、ご利用ください。

» jonasjohn.de: htmlSQL – a PHP class to query the web by an SQL like language

jQueryを使ったクリエイティブなスパム対策手法のご紹介。ロボットによるスパム投稿を防ぐため、コメントを書いたらそのコメントボックスごと、指定のエリアにドラッグ＆ドロップしなくてはいけません。

↑ 左側のボックスにコメントボックスごとドラッグ＆ドロップ。

この「ドラッグ＆ドロップ」操作自体が「コメントを送信する」にあたるので「送信」ボタンはついていませんね。こういうのはいたちごっこですが、確かに有効な気がします。

また「ドラッグ＆ドロップ＝送信」というギミックが新しくていい感じですね（わかりにくい、という意見もあるでしょうが）。

詳細は以下からどうぞ。

» Prevent comment SPAM with jQuery

学生SNSの最大手、Facebookが「FQL」なるAPIを公開したようです。「FQL」は「Facebook Query Language」の略。SQL型の問い合わせ言語です。

これを使えば、

SELECT name, pic FROM user WHERE uid=211031 OR uid=4801660

みたいな問い合わせができるらしいです。

たしかにこうした細かい指定ができると要らないデータまでXMLで返ってきてなんかめんどくせー、みたいなことにならないですね。

日本でFacebookのアカウントを持っている人は少ないでしょうが、テスト用のコンソールも準備されている模様。興味のある方は試してみては。

APIがSQL的に細かく操作できるとうれしいですね。この流れは他のAPIにも適用されるかどうか・・・同じようなことをmixiがやってくれないかな・・・「mQL」っていいと思うんですけどね。

もちょっと技術的に細かいことについては詳しい人がコメントしてくれることをのぞむ・・・（他力本願・・・）。

» Facebook Developers | Facebook Query Language