品質高いJavaScriptアニメーションライブラリ·BonsaiJS MOONGIFT
BonsaiJSはFlashアニメーション並みの動作が可能なJavaScriptライブラリです。 JavaScriptによるアニメーションライブラリが増えています。BonsaiJSもその一つです。多彩なアニメーション処理が可能になっていますのでぜひご覧ください。 トップページです。ここもアニメーションされています。 マウスを動かすとブロックが表示されます。 グラフです。マウスのあたっている部分が大きくなります。 スターです。ぐりぐり動きます。 オブジェクトが飛び交います。 Pongを実際に遊べます。 円がダンスするように動きます。 ドラッグで動かせます。 デモを実際に動かした動画です。 BonsaiJSはキーフレームベースのアニメーション、画像だけでなくパスにも対応し、モーフィングもできます。マウスによる操作も可能で、Flashの代わりはもちろんゲーム開発にも使えるのではないでしょうか。
Webデザイナーにお勧め！LESSファイルを監視してCSSに自動変換·SimpLESS MOONGIFT
SimpLESSはLESSファイルのあるフォルダを監視して作成や更新のタイミングでCSSファイルに変換してくれるソフトウェアです。 CSSで不満に感じられることの多い、入れ子の構造や変数定義などを可能にするCSSライブラリがLESSです。そんなLESSファイルの作成、更新を監視してCSSファイルを自動生成してくれるソフトウェアがSimpLESSです。 最初に起動したときの画面です。SimpLESSはTitaniumを使って作られています。 メイン画面です。LESSファイルの含まれるフォルダを追加します。後はSimpLESSがファイルの更新を監視してくれます。 監視しています。更新したタイミングで自動的にCSSファイルを生成します。生成時には検証もされるので正しいCSSが生成されるとのことです。 例えばこれがLESSファイルの内容です。 SimpLESSが自動生成したCSSファイルがこれです
Google Chrome上で動くMarkdownエディタ·TextDown MOONGIFT
TextDownはGoogle Chrome上で動作するMarkdownエディタです。 Webアプリケーションはどんどん増えていますが、それでもまだ物足りない分野があります。それがテキストエディタです。そこで今回はWebアプリではなくGoogle Chrome機能拡張として動作するMarkdownエディタ、TextDownを紹介します。 インストールします。 完了しました。Google Chromeのアプリタブに入ります。ここから起動します。 最初にドキュメントのタイトルを決めます。 メイン画面です。左側がエディタ、右側がプレビューになります。 キーボードショートカットは多数用意されています。 エディタ部の幅を広げてみました。 TextDownは左右にエディタとプレビュー画面に分かれており、まさにMarkdownテキストを表示、編集するのにテキスト機能拡張になっています。現状は保存機能はも
迫力満点。Webサイトの背景全部を動画に·BigVideo.js MOONGIFT
BigVideo.jsはWebサイトの背景に動画を利用し、そのまま再生できるソフトウェアです。 Webサイトの背景は単色、もしくは適度なパターン画像を使うのが一般的です。しかしそんな考えに捉われないソフトウェアがBigVideo.jsです。何と動画をバックグラウンドに指定し、そのまま再生してしまう驚きのソフトウェアです。 デモです。背景は画像ではなく動画です。バックグラウンドで再生されています。 切り替えました。すごく幻想的で格好いいです。 BigVideo.jsの力だけではないですが、前面のコンテンツは背景が透けていてマッチしています。映画のトレーラーに合わせて説明を加えても良さそうですし、ドキュメンタリー系のWebサイトで使っても良いかもしれません。動画はJavaScriptで切り替え可能ですが、最後まで行くとそこで止まるようになっています（ループ指定もできるようです）。 BigVid
あの人気のテキストエディタTextMateがソースコードを公開！·TextMate MOONGIFT
TextMateはMac OSXで人気のテキストエディタです。バージョン2のコードがGitHubで公開されました。 Mac OSXユーザに人気のテキストエディタがTextMateです。49ドルで販売されている有償のソフトウェアですが、次期バージョンの2.0よりオープンソース化されることが決定しました。GitHubにて既にTextMateが公開されています。 メイン画面です。 ファイルブラウザを表示しました。 HTMLビューワーもあります。 バンドルはたくさん用意されています。 設定画面です。 オープンソース版TextMateは現状の1.5系と比べると若干画面構成が違っていたり、機能に違いがあるようです（当たり前ですが）。何より日本語入力に難があるのが残念ではありますが、自分でコードを調べて修正できるメリットは相当大きいでしょう。非常に面白いプロジェクトになりそうです。 TextMateはM
これは面白い。JavaScriptやDOM指定が使えるサイトキャプチャ·capturejs MOONGIFT
capturejsはnode.jsを使ったWebサイトのスクリーンショット取得ツールです。JavaScriptを使って一部の変更ができます。 Webサイトのキャプチャツールは人気がありますが、capturejsはとても面白いツールです。まるごと画像化するだけでなく、DOMセレクタを使ったりJavaScriptを使ってコンテンツを改変した上で画像化できます。 まずセレクタを使った例です。 ヘッダー部分だけ画像化できています。 次はロゴをhiddenにした場合。確かに画像が消えています。 オプションとしてユーザエージェントを指定したり、Cookieファイルの指定、タイムアウト時間の指定、ViewPortの設定もできるようになっています。コンテンツの一部だけを画像化したいといったニーズにぴったりなソフトウェアです。 capturejsはnode.js/JavaScript製、MIT Licens
GitHubの通知をGoogle Chrome上で受け取る·github-stream MOONGIFT
github-streamはGoogle ChromeでGitHubの通知を受信、表示できるソフトウェアです。 プログラマーのソーシャルサービスであるGitHub。人気があるサービスだけあってコラボレーションしているとどんどん通知が登録されていきます。そんなGitHubの通知をGoogle Chrome上で受け取れるのがgithub-streamです。 インストールします。 右上にアイコンが表示されます。ここで通知を受け取る仕組みです。 クリックすると該当の通知が表示されます。 github-streamを使えばGitHubのメッセージボックスに入っていたメッセージが通知されるようになります。通知は課題管理のコメントなどが多いので、早めに対応すればそれだけプロジェクトの進みも早くなるでしょう。 github-streamはGoogle Chrome用MIT Licenseのオープンソース・
200を越えるアイコンが揃ったBootstrap向けWeb Font·Font Awesome MOONGIFT
Font AwesomeはBootstrapと組み合わせて使えるアイコンを集めたWeb Fontです。 Twitter Bootstrapの便利な機能の一つにアイコンパックがあります。ちょっとした装飾を手軽に付け加えられるのは便利です。そんなBootstrapに200以上のアイコンを追加するのがFont Awesomeです。Web Fontで作られたアイコンパックです。 全てのアイコンです。 ソーシャルアイコンも揃っています。 例です。ドロップダウンやボタンにつけています。 大きさが自由に変更できるのもフォントならではです。 ドロップダウンにつけると機能がより分かりやすくなります。 カスタマイズすればレーティングに使ったりもできます。 ファイル構成です。SVGやフォントが提供されます。 Font AwesomeはTwitter Bootstrapで提供されているものに加えて色々な場面で役立
Webアプリケーションの開発に。面白いコンポーネントが多数揃ったUIライブラリ·Ninja UI MOONGIFT
Ninja UIはHTMLを使わずにJavaScriptで画面を描画していくUIコンポーネント。 Ninja UIはjQuery/JavaScript製のオープンソース・ソフトウェア。思うにWebサイトというのは表現力が高く、かつ自由度が高すぎるのだ。そのため見栄えにこりだすと収集がつかなくなる。またデザインセンスがないと格好いいサイトが作れない。 ボタンやアイコン アイディアがどれだけ良く、技術力があっても見栄えがぱっとしないサイトは受け入れられない。もうHTMLは書かず、JavaScriptで組んでしまうのはどうだろう。それを可能にするのがNinja UIだ。 Ninja UIはjQuery Webjutsu（Web術？）を掲げているライブラリで、枠組みだけHTML5で組み、コンポーネントの配置は全てJavaScriptだけで記述するライブラリだ。ボタンやドロワー、アイコン、ポップアッ
jQuery/CSS3でPath風メニューを·Pie Menu MOONGIFT
Pie MenuはPathのメニューに似たUIをjQueryで再現したライブラリです。 人気のあるiOSアプリのUIはすぐに真似したモックアップが登場します。Pathもその一つです。流れるようなUIはもちろん、赤いプラスボタンのメニューが人気です。Pie Menuはそんなメニュー表示をjQuery/CSS3で再現したライブラリです。 赤いボタンを押します。 アニメーションがあってメニューが表示されます。 パラメータを変更して表示をカスタマイズできます。 密着版。 デモ動画です。 デスクトップ版でPie Menuを採用したとしてもなかなか使い方が分からないかもしれませんが、PhoneGapと組み合わせると話が違ってきそうです。スマートフォン向けサイトで使ってみても面白いかもしれません。 Pie MenuはjQuery/JavaScript製のソフトウェア（ソースコードは公開されていますがライ
作ろう！HTML5用Webアプリケーションフレームワーク·Brunch MOONGIFT
BrunchはHTML5によるWebアプリケーション開発を支援するnode.jsフレームワークです。 HTML5をビジネス向けに率先して使っていくのは難しいと思いますが、それでも試してみたいと考えている人は多いはずです。そこでBrunchを活用してみると良いでしょう。HTML5ベースのWebアプリケーションを開発するための仕組みをまとめて提供してくれます。 Twitterのデモアプリです。 Todoアプリのデモです。 コードの記述に際してはJavaScript/CoffeeScript/IcedCoffeeScript/Royが使えます。CSSはSassやLESSを使うこともできます。ベースを作ってくれるコマンドがあるので、それを使いつつ後は既存のデモアプリを参考に作っていくとWebアプリケーションを素早く作ることができます。 Brunchはnode.js/JavaScript製、MIT
キーフレームを使ったCSSアニメーションを実現·jQuery keyframe MOONGIFT
jQuery keyframeはCSSのスタイルの中で%を使ってアニメーションをキーフレーム単位で設定できるjQueryライブラリです。 CSS3のパワーアップによってCSSだけで絵を描いたり、アニメーションしたりする試みが増えています。今回はその一つ、JavaScriptと組み合わせることでさらにキーフレームを使ったアニメーションを実現するjQuery keyframeを紹介します。 最初の表示です。ボックスをクリックします。 動き出しました。動きは一定ではなく、ペースを変えながら滑っていきます。 デモ動画です。 設定方法です。入れ子に設定しています。 jQuery keyframeではスタイルの指定の中でパーセントを指定してそれをキーフレームとしてスタイル指定を行います。leftやbackground、colorなどが利用できます。後はjQuery keyframeが自動的にその間の動
JavaScript/CSSを使ってスクロールによるアニメーションを実現·skrollr MOONGIFT
skrollrはCSSを使ってスクロールによってアニメーションを実行するライブラリです。 最近プロジェクトやアプリ紹介ページで見られるようになったスクロールアニメーション。それを実現するライブラリがskrollrです。 デモです。スクロールを開始します！ 回転しながら飛んでくる文字！ 下から上がってくる文字！ 横からスライドも。 色が変わりました。それに合わせてテキスト色も変わっています。 上下からボックスが迫ってきます。 終了です。逆に上に上がっていくとアニメーションが逆に展開されていきます。 デモ動画です。スクロールすると次々と内容が変わっていきます。 実用性という意味ではあまり大きくなさそうですが、インパクトは強烈です。サイト全体を作るというよりも、ランディングページや紹介ページで使うと効果的でしょう。 skrollrはJavaScript/CSS製のオープンソース・ソフトウェア（M
Mac OSXで使える起動するだけのPostgreSQL·Postgres.app MOONGIFT
Postgres.appは起動するだけで使えるポータブルなPostgreSQLサーバです。 最近はWebシステムとの連携DBをMySQLに奪われつつあるPostgreSQL。もっと手軽に使えるようになれば、ということで開発されたのがPostgres.appです。 起動するとメニューバーに常駐します。この状態でPostgreSQLサーバは既に起動しています。 Postgres.appは単体アプリで起動すればPostgreSQLが使えるようになります。アンインストールもアプリケーションを削除すれば良いだけです。とても簡単に使えるので開発に利用してみようと思えるかもしれません。 Postgres.appはMac OSX用のオープンソース・ソフトウェア（The PostgreSQL License）です。 MOONGIFTはこう見る プログラマーであったとしても環境を整えるのに時間がかかるとやる気
これは便利。Google ChromeでCoffeeScriptを使う·CoffeeConsole MOONGIFT
CoffeeConsoleはGoogle Chrome上でCoffeeScriptを記述して実行できる機能拡張です。 CoffeeScriptに慣れると素のJavaScriptが書きづらく感じるようになってしまいます。ChromeのデバッグでJavaScriptを書くのにストレスを感じていた方はCoffeeConsoleをぜひ使ってみてください。 インストールします。 インストールしました。すぐに使えます。 Webインスペクタを開きます。右端にCoffeeScriptというタブが追加されています。 開きました。左側に記述すると、右側に変換後のJavaScriptが表示されます。 リアルタイムに変換されます。そのままコマンド＋エンターまたはShift＋エンターを押すと実行されます。 console.logなどはConsoleタブで確認する必要があります。 CoffeeConsoleは一行単位
画像を生成せずにサムネイル風に小さな画像を表示·jQuery NailThumb MOONGIFT
jQuery NailThumbはWeb上でCSSによる画像サムネイル風表示を実現するjQueryライブラリです。 Webサイトで画像を縮小して表示したい場合、ImageMagickなどのサーバサイドの技術を使うのが一般的です。しかしjQuery NailThumbを使えばクライアントサイドだけで高度なサムネイル風表示を実現します。 デモです。左側が元画像、その右側にサムネイル化した画像が表示されています。 正方形の他に縦横比の固定、横幅優先といった指定もできます。 縦長の画像の場合、横幅優先にすると自動的に左右に空白が入ります。 こちらは切り取りです。 他にもサンプルが多数あります。 画像の量にもよりますが思ったよりも負荷は少ないように感じられます。jQuery NailThumbはCanvasで画像生成という訳ではなく、CSSを使って画像を擬似的に縮小表示しています。その際の配置やサイ
これからHTML5をはじめるならぜひ読みたい·Dive Into HTML5 MOONGIFT
Dive Into HTML5はHTML5の何たるかを著したオンラインブックです。 これからHTML5の勉強をはじめよう、そう思い始めた人に読んでほしいのがDive Into HTML5です。HTML5の機能、特徴などについて網羅されたコンテンツです。 トップページです。ePubやPDFといった電子書籍ではないですが、書籍風に整った構成になっています。 段落分けされていて読みやすいです。 アクションのデモと、そのWebブラウザごとのサポート状況についても書かれています。 位置情報系のデモを試すと実際に有効にするかどうかの確認が出ます。 Dive Into HTML5は章ごとに分かれているので、自分の気になる部分だけを読んでも良いでしょう。ダウンロードしてオフラインでも読んでみたい便利なコンテンツです。 Dive Into HTML5はHTML5製のオープンソース・ソフトウェア（Creati
見た目が格好いい。node.jsをWebベースで開発する·Nide MOONGIFT
Nideはnode.jsプロジェクト用のWebベースIDEです。Mac OSX向けアプリもあります。 ここ最近になってようやくWebベースのIDEが本格化してきました。Nideもその一つで、node.jsプロジェクトの開発に最適化されています。 Mac OSX向けにはバイナリも提供されています（今回はnpmでインストールできるものを使っています）。 npmで一発インストールできます。 最初に設定を行います（node.jsのプロジェクトで実行すれば必要ありません）。 ファイルの一覧が出ました。 ハイライトも行われていて編集も楽々です。 バージョン管理機能、Spaceです。Mac OSXのTime Machineライクで格好いいです。 package.jsonもメンテナンスできます。 フォルダの作成もできます。 NideではWeb上での編集に加えて、バージョンごとの履歴管理（これがアニメーショ
再現性高し！Webベースのアナログシンセサイザー·WebSynth MOONGIFT
WebSynthはアナログシンセサイザーをWebベースで再現し、Web Audio APIで再生するソフトウェアです。 WebSynthはアナログなシンセサイザーをWebベースで再現したソフトウェアです。 すごい再現度の高いシンセサイザーです。 再生を押すと自動的にデモの音楽が流れます。後は色々スイッチをいじるのみです。 クリックしてドラッグでパラメータを変更できます。 デモ動画です。 WebSynthはHTML5/Web Audio APIを使ってサウンドを出しています。突き詰めれば演奏までできてしまいそうなくらいレベルの高い再現度です。 WebSynthはHTML5/JavaScript製、MIT Licenseのオープンソース・ソフトウェアです。 MOONGIFTはこう見る これまでオンラインで音楽を奏でる仕組みを考えるとFlashを使うくらいしかなかったのでWeb Audio AP
pure Rubyで実装されたJavaScript実行環境·Twostroke MOONGIFT
Twostrokeはpure Rubyで実装されたJavaScript実行環境およびコンパイラです。 Twostrokeはpure Rubyで実装されたJavaScript環境です。Ruby、JavaScriptともに愛する方はぜひ見てください。 インストールです。Rubygemsを使って簡単にできます。 一通りJavaScriptの評価ができます。無名関数を作ったりもできます。 Objectを作ることもできます。そのままJavaScriptです。 Twostrokeはインタプリタの他に、コンパイラーも用意されています。*.tsというファイルが生成されるのですが、ここからの実行がよく分かりませんでした…。TwostrokeではUnderscore.jsのテストは通過しているとのことです。 TwostrokeはRuby製、MIT Licenseのオープンソース・ソフトウェアです。 MOONG
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
