スタイルシートだけで実現しますよ！ 訪問者向けにちょっとしたヘルプを出したい時に使えるのがツールチップです。しかし表示する際にJavaScriptを組み込んだり複雑な指定をしないといけないのでは使い勝手が悪いですよね。 そこで使ってみて欲しいのがSimptipになります。CSSを読み込むだけで使えてしまうツールチップです。 使い方は簡単で、Simptipを読み込むだけです。 <link rel="stylesheet" type="text/css" href="simptip-mini.css" /> これで準備は完了です。例えば文字列の上にツールチップを出す場合、次のように指定します。 <span class="simptip-position-top" data-tooltip="I'm in top">position top</span> 実際の表示は次のようになります。 表示例

jquery.cssloading.jsはCSS3/Canvasを使ってローディングアイコンを生成するライブラリです。 Ajaxなどを使っていると必ず欲しいのがローディングアイコンです。一つであれば画像でもいいかも知れませんが、背景色や大きさなどが複数考えられる場合もあります。そんな時にはjquery.cssloading.jsを使ってみましょう。 サークルを描く一般的なパターン。 背景が黒、左から右に流れていくパターン。 四角もあります。色やスピードはオプションで指定可能です。 縦に落ちていく四角のパターン。 枠を描くパターン。 こちらは複雑で、回転するごとに四角が小さくなっていきます。 アニメーションの形は円、または線、四角が選べます。色やサイズ、回転速度は自由に指定が可能です。CSS3を用いており、Canvasに対応している必要があります。主にiOSやAndroidでの利用が想定され

smtp4devはWindowsローカル上に立てるダミーのSMTPサーバです。 システム開発においてメール送信を行う時はよくあります。SMTPサーバを立てたとして、間違って送信してしまうと大変な事態につながるかも知れません。そこで使ってみたいのがローカルで使えるダミーのSMTPサーバ、smtp4devです。 起動しました。まずはセキュリティ警告が出ます。 メイン画面です。この時点でポートは開いています。 オプションです。UIに関する設定です。 サーバ設定です。ポート番号はデフォルトで25です。 アップデートチェッカーもあります。 こんな感じで常駐します。 こんな感じでPHPからメールを送ってみます。 送信しました。すぐに反映されます。 さらに日本語件名のメールを送ってみました。文字化けせずに送信されています。 メーラーでメールの内容を確認できます。 さらに詳細を確認できます。 メッセージソ

SelectivizrはCSS3の機能をIE6〜8でもサポートできるようにするライブラリ。 SelectivizrはJavaScript製のオープンソース・ソフトウェア。CSS3ではIDやclassによる指定の他にもセレクタが追加されている。例えば属性値による指定でスタイルを設定することもできる。機能が追加されれば、より自由度の高いWebデザインができるようになる。 使い方 しかし足を引っ張る要素も存在する。それがレガシーブラウザだ。CSS3に対応していないWebブラウザであるIE6〜8においてセレクタを使えるようにするのがSelectivizrだ。 SelectivizrをIE6〜8において読み込めば、多様なセレクタが利用できるようになる。面白いのはjQuery、dojo、prototype.js、YUI、DOM Assistant、MooTools、NWMatcherといった有名なJa

JsonViewerはJSONデータをツリー表示で閲覧できるAdobe AIRアプリケーション。 JsonViewerはAdobe AIR製のオープンソース・ソフトウェア。Web APIでは幾つかのデファクトになるファイルフォーマットが存在する。それはXML、JSONだ。XMLは独自はもちろん、Atom/RSSといったフォーマットが採用されるケースが多い。 JSONはXMLに比べるとシンプルな記述にできるので採用されることが多く、JSONPのようにWebアプリケーションとの親和性も高いメリットがある。しかしWebブラウザでアクセスするとそのまま表示されてしまって分かりづらい。そこで使えるのがJsonViewerだ。 JsonViewerは入力したJSONをパースし、フォルダツリーにして表示してくれるソフトウェアだ。Adobe AIRでできているのでWindows/Mac OSX/Linux

GowはWindows用のオープンソース・ソフトウェア。LinuxやMac OSXを使っていてWindowsに移ると非常に面倒に感じるのがコマンドラインでの操作だ。GUIが当たり前なので致し方ないのだが、それでもコマンドラインである程度の作業が出来ると利便性が高い。 130種類を越えるコマンド群 そのような時に使っていたのがCygwinだが、レジストリが色々変更されたり、そもそもcygdriveという書かれ方が好きではなかった。もっとシンプルにコマンドだけを使いたいならばGowを利用してみよう。 Gow（Gnu On Windows）はシンプルに使えるLinuxコマンド集で、lsやwc、wgetといったような一般的コマンドが136個ほど詰め合わせになっている。cvsやscp、puttyといったプログラムも用意されているので利便性が高い。vimもあるのが面白い。 パスにも追加されるのでコマン

html5mediaはjQuery/JavaScript製のオープンソース・ソフトウェア。HTML5を使って動画を流す場合に使われるのがvideoタグだ。現在主流になっているMPEG4にはライセンスコストがかかるので標準化が困難で、広まるのは難しい状況ではある。 Safariで実行した場合。videoタグのまま そんなvideoタグを使えばFlashを使わない、または使えないブラウザでも動画の閲覧が出来るようになる。だがIEをはじめとしてHTML5に対応していないとvideoタグが使えないので二重の開発を行う必要があるのは問題だ。そこで使ってみたいのがhtml5mediaだ。 html5mediaは多数のブラウザでvideoタグを使えるようにするライブラリだ。記述するのはvideoタグでよく、html5mediaを読み込むことでHTML5に対応していればそのままvideoタグを使い、対応し

FirebugはGoogle Chrome向けの機能拡張。FirefoxをWeb開発者の心をつかんで放さないのは、Firefoxアドオンによる所が大きいと思う。そしてその代表例としてFirebugがある。これがあるからFirefoxを切り離せないと考える人は多いのではないだろうか。 Google ChromeにもFirebugが！ そしてGoogle Chromeも機能拡張を備えており、コミュニティベースで様々なソフトウェアが開発されている。そしてついに登場したのがFirebug Lite for Google Chromeだ。ネーミングがなんではあるが、あのFirefox向けアドオンであるFirebugと同等の機能が提供されている。 コンソール機能を使ってJavaScriptを操作したり、CSSを修正したりすることが出来る。もちろんその修正はリアルタイムに反映される。これはGoogle

SpatiaLiteはWindows/Linux/Mac OSX向けのオープンソース・ソフトウェア。MySQLやPostgreSQLのようなデータベースを用意するまでもないが、データの管理にデータベースがあると便利だと感じるようなシステムにおいてSQLiteはとても便利な存在だ。 SQLiteの管理にどうぞ ファイル一つで利用できるし、それでいてSQLが使えるので後々本格的なデータベースに移行するのも容易になる。そんなSQLiteをCUIまたはGUIで管理できるソフトウェアがSpatiaLiteだ。開発者の手元にあると便利なソフトウェアになりそうだ。 新しいデータベースを作るのはもちろん、既存のファイルを開くこともできる。テーブルの一覧、データの追加/編集も簡単だ。テーブルの追加やカラムの追加や削除、トリガーやビューの作成と言った操作はSQLのテンプレートが表示されるようになっており、それ

emileはCSS/JavaScript製のオープンソース・ソフトウェア。Webブラウザ上でアニメーションを行う際、まず思いつくのはFlashを使った手法だろう。だがそこまで複雑なアニメーションでもなく、そもそもFlashを扱うのが苦手な場合はどうしたら良いだろう。そこで使えそうなのがJavaScriptだ。 動作サンプル 最近のJavaScriptは表現力が高く、簡単なアニメーションくらいなら十分に実現できるようになっている。さらにCSSを使うことで位置の設定も容易に、色の変更もできるようになる。それを使って作られているのがemileだ。 emileはPrototype.jsやjQueryといった有名なライブラリを使わずに作られている。アニメーションを使いたいとなった途端に重たいフレームワークを導入というのでは萎えてしまう。わずか50行程度でアニメーションを実現しているのだから面白い。

MakeHumanはWindows/Mac OSX/Linux向けのオープンソース・ソフトウェア。3Dを使って人をモデリングしようと思うと専用のソフトウェアを使わざるを得ないだろう。だが汎用的な3Dモデリングソフトウェアでは細かな設定が難しいかも知れない。 詳細な設定が可能な人物モデリングツール そこで使ってみたいのがMakeHumanだ。細かな設定ができる、というよりもむしろ細か過ぎるくらいに設定が可能になっている。かつソフトウェア名の通り人のモデリングに特化しているのが特徴だ。マウスで回転させたり、関節を曲げたりして自由にモデリングができるようになっている。 設定項目は非常に多い。首の太さや歯の大きさ、目の設定一つをとっても十種類以上のパラメータが存在する。そうしたパラメータをマウスのドラッグだけで設定していくのだ。慣れるまでは非常に困難ではあるが、緻密な設定を行いたい場合はとても便利