jquipはjQueryの肥大化を懸念し、機能を維持しつつサイズを減らそうとするソフトウェアです。 jQueryは便利なJavaScriptライブラリである一方、ふくれあがった機能によってライブラリサイズが巨大になりつつあります。そこでjQueryを再度見直し、より機能を絞り込んでいこうと試みているのがjquipです。 デモプログラムです。 ボタンを押すたびに背景色が変わります。 ボタンを押すとデータを出力していきます。 実際のコードです。jQueryと変わらない書き方で実装できます。 jquipはjQueryをモジュールベースに分解し、コアを軽量に維持しつつ必要に応じて機能を追加できるようになっています。機能としてはjQueryの90%を実装しつつ、サイズは13KB程度となっています。現状ではモジュールとしてdocready、css、event、ajaxに分かれています。 jquipはJ

AnimatableはJavaScriptでCSSのプロパティを変化させることでアニメーションさせるJavaScriptライブラリです。 最近、CSSだけで作るアニメーションというのが流行っています。CSS3であればtransitionという要素でアニメーションが起こせますが、さらにJavaScriptを使って多彩なアニメーションに対応させたのがAnimatableです。 色々な画像が並んでいます。マウスオーバーでアニメーションが実行されます。 6番は曲線が変化するアニメーションです。 2番は背景画像がアニメーションします。 12番はドロップシャドーです。 fromとtoののところで実際に設定するCSSプロパティが分かります。 data-fromとdata-toでプロパティを指定します。 AnimatableはいわばFlashのアニメーションに似ています。最初のフレームをdata-from

GrepTweetは指定ユーザのツイートをテキストファイルに保存してGrepで検索するソフトウェアです。 Twitterで自分のツイートを検索するサービスはいくつもありますが、今回紹介するGrepTweetはツイートをテキストで保存して、Grepで検索するシステムになっています。 まずTwitterユーザのツイートをインポートしないといけません。公開メッセージのみなので認証は不要で、ユーザ名を指定するだけで実行できます。 取り込み中のログです。今回は6ページ目の実行でエラーになってしまいましたが、途中までのデータは取り込まれます。 取り込みが終わって検索できるようになりました。日本語も使えます。検索実行ボタンはないのでエンターキーを押せば良いだけです。 例えばMOONGIFTで検索した結果です。 日本語にも対応しています。 生データを見ることもできます。 データベースを検索するのではなく、

SimpLESSはLESSファイルのあるフォルダを監視して作成や更新のタイミングでCSSファイルに変換してくれるソフトウェアです。 CSSで不満に感じられることの多い、入れ子の構造や変数定義などを可能にするCSSライブラリがLESSです。そんなLESSファイルの作成、更新を監視してCSSファイルを自動生成してくれるソフトウェアがSimpLESSです。 最初に起動したときの画面です。SimpLESSはTitaniumを使って作られています。 メイン画面です。LESSファイルの含まれるフォルダを追加します。後はSimpLESSがファイルの更新を監視してくれます。 監視しています。更新したタイミングで自動的にCSSファイルを生成します。生成時には検証もされるので正しいCSSが生成されるとのことです。 例えばこれがLESSファイルの内容です。 SimpLESSが自動生成したCSSファイルがこれです

JS-ImageDiffはJavaScript+Canvasタグを使って二つの画像の差分表示を行うライブラリです。 GitHubでは差分をWebブラウザ上で閲覧できますが、その時に画像の差分表示も行えるのを知っているでしょうか。スライダーで動かしたりして差分を確認できるのですが、その一つの差分表示をオープンソースで再現するのがJS-ImageDiffです。 サンプルです。上が元、中間が変換後そして下が差分となります。どこが違うのか一目で分かります。 左が影無し、右が影ありです。一致している部分だけが表示されています。 サイズが違う場合の差分表示です。 JS-ImageDiffはCanvasタグを使って画像を読み込み、その差分を表示しています。各ピクセル単位で画像を比較して同じであれば黒、違う場合はうまく表示するというやり方でここまで見事に表示できるのが面白いですね。 JS-ImageDif

LinkCheckerはマルチプラットフォームで使えるWebサイトリンクチェッカーです。 Webサイトのリンクチェックを忘れると、いつの間にか予想外のエラーになっていて無用な流出につながってしまうことがあります。それを防ぐためにマルチプラットフォームで使えるLinkCheckerを試してみましょう。 チェックを実行中です。 結果です。有効、無効なURLが並びます。他にも画像の数やテキストの数などメディア情報も分かります。 LinkCheckerはCUI、Web版も提供されています。こちらはGUIの設定画面です。何階層までチェックするか設定できます。 設定ファイルのパス指定です。設定ファイルを使うことでCUI、GUIなどと共通の設定が利用できます。 測定結果はHTML/Text/XML/CSVで保存できます。 LinkCheckerはマルチスレッドでチェック処理を行ってくれるので高速です。さ

PHP.rebootはJVM上で動作するPHPを再定義したプログラミング言語です。 PHPは恐らくWebサイトにおいて最も良く使われている言語でしょう。習得も容易で、手軽に色々なWebアプリケーションが作れる、そんな利便性の裏で言語仕様などについて毛嫌いされる声も聞かれます。そこで注目したいのがPHPを再定義するPHP.rebootです。 PHP.rebootの書き方です。< ?phpではなく、{}を使ってコードを埋め込みます。まさにテンプレート的です。ファイルの拡張子はphprになります。 実行結果はもちろん普通に表示されます。 サーバ、GET/POSTも使えます。面白いのは変数名に$をつけず、JavaScriptのように定義することでしょう。;も使いません。 実行結果はこのようになります。 基本的な文法はPHPと似ています。SQLとの親和性を高くしており、コードの中にSQLをそのまま埋

TimThumbは内部または外部の画像を取り込んでリサイズ、切り抜き、簡易加工を行うPHPスクリプト。 TimThumbはPHP製のオープンソース・ソフトウェア。Webサイトを作る際に重要な要素が画像だ。テキストが並んでいるだけでは重苦しいが、画像をうまくちりばめることで華やかに、見栄えのいいサイトに仕上がる。ユーザに画像をアップロードしてもらうサイトも多い。 リサイズ ユーザがアップロードしたり、外部にある画像を使う場合サイズがばらばらであったりして扱いが悪い。そんな画像を加工するのに使えるのがTimThumbだ。 TimThumbはPHPで画像のパスを指定してリサイズしたり、簡単な加工を行うソフトウェアだ。パスを指定することも、URLを指定することもできる。GDライブラリを使っているのでPHP側を対応させる必要がある。単純なリサイズだけでなく位置を指定した切り抜きもできる。 切り抜き

OpenReafは自治体向け公共施設予約システム。 OpenReafはPHP製のオープンソース・ソフトウェア。競技場や体育館、その他の公共施設などは申し出ることで指定時間借りることができる。一般的な商用会議室などよりも安価である場合が多く、もっと活用されていくべきだ。 トップページ だがインターネットでの予約に対応していない自治体も多く、さらに対応していても使い勝手が悪すぎる所も数多い。そうした自治体にぜひ導入してもらいたいのがOpenReafだ。 OpenReafは特に公共施設の予約に対応したシステムになっている。カレンダーや利用目的から施設を特定し、予約を申し込むことができる。施設によっては抽選も利用できる。休館や利用料、利用人数入力にも対応している。さらにデスクトップの他、スマートフォンや携帯電話向けのUIも用意されている。 カレンダー 管理画面では予約を確認したり、抽選ができる。さ

CrystalはPHP製のオープンソース・ソフトウェア。Webシステム開発における絶対的な地位を築いたと言えるPHP。他にも多数のプログラミング言語がWebシステムに対応しているが、手軽さと実績においてPHPに勝るものはないだろう。 データの取得 Webシステムと言えばデータベースを利用したものが多い。そしてその時に使うSQLは開発に用いるプログラミング言語とは大きく構文がかけ離れるため、使い勝手が悪かったり、安直に書いてSQLインジェクションにつながったりする。それを防ぐためにも使ってみたいのがCrystalだ。 Crystalはデータベースを利用したWebシステムを開発するためのツールキットだ。コンセプトは「シンプル」「軽量」そして「容易に学習できる」となっている。実際の書き方として「$posts = $db->select('date, title')->from('posts')-

CalVis3はGoogleカレンダーを取得し、独自のカレンダーに表示する。 [/s2If] CalVis3はHTML/JavaScript製のオープンソース・ソフトウェア。カレンダーを使ったWebアプリケーションは多い。だが開発している最中に常に頭にちらつくのがGoogleカレンダーの存在だ。機能を充実させればさせるほど、Googleカレンダーの強さが分かってきてしまう。 カレンダー そんな時には一歩引いて考えてみよう。カレンダー入力インタフェースとしてGoogleカレンダーを徹底活用してしまうのだ。後は入力されたデータをどう表示するかが決め手になる。それを実現しているのがCalVis3というソフトウェアだ。 CalVis3はHTMLとJavaScriptを使ってGoogleカレンダーからデータを取得し、表示するWebアプリケーションデモだ。二種類あり、一つはカレンダーの下に詳細を表示す