ドラッグアンドドロップで表示を自在に組み替えられるjQueryプラグイン·Gridster.js MOONGIFT
Gridster.jsは自由にレイアウトが組み替えられるUIを提供するjQueryプラグインです。 Pinterestに感化されたのか、ブロックの高さを組み替えつつ表示するUIが流行っています。今回紹介するGridster.jsはそれに似ていますが、横幅も変更可能で、さらに自分でドラッグアンドドロップして並びが変更できるのが特徴になっています。 ドラッグして場所を移動できます。 こんな感じに並んだりもします。 Gridster.jsはjQuery製のプラグインになっています。使う最小のカラム数、行数を指定できます。使える場所としてはiGoogle的なウィジェットを自分で並び替えて表示する類のUIであったり、写真を表示したりするのに良いかも知れません。 Gridster.jsはjQuery/JavaScript製、MIT Licenseのオープンソース・ソフトウェアです。 MOONGIFTは
JS/CSSを自動バージョン管理してキャッシュ効率を高める·gather-css-js MOONGIFT
gather-css-jsはJavaScriptやスタイルシートをまとめた上でキャッシュさせるライブラリです。 Webサーバの負荷を下げるためにキャッシュを使うのは効果的です。しかしあまり長い間キャッシュを使うようにすると実ファイルを更新してもいつまでもキャッシュを使うようになってしまいます。そこで使ってみたいのがgather-css-jsです。 デモです。最初の表示では全て同じ値（v=の後）です。 CSSを更新しました。vの値が更新されています。これでキャッシュが更新されます。 使い方です。PHPを使ってファイルを読み込み、結果として更新日時のタイムスタンプが返ってきます。 gather-css-jsが行っているのはRailsがサポートしているキャッシュ方式に近いものです。vに更新日時を入れることでファイルが更新されればパラメータの値が変わってキャッシュがリフレッシュされます。また複数の
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製のソフトウェア（ソースコードは公開されていますがライ
これが決定版？フォルダを監視してCSS/JavaScript/HTMLを生成·Fire.app MOONGIFT
Fire.appはフォルダを監視してSass/Compass/CoffeeScriptを自動変換するソフトウェアです。 最近はCSS/JavaScript/HTMLをそのまま書くのではなくSassやCoffeeScript、Haml/Markdownを使ってそれぞれのフォーマットに変換するのが当たり前になってきています。そこで使ってみたいのがFire.app、自動ファイル変換ソフトウェアです。 起動します。 メニュー常駐型です。 設定画面です。 Growlを使った通知に対応しています。 Livereloadに対応しています。 履歴です。 フォルダを指定しました。 プロジェクトテンプレートを生成してくれる機能があります。 生成しました。後は修正すると自動的に別フォーマットファイルを生成してくれます。 Fire.appはSass/CompassからCSSを、Haml/ERB/Markdownか
HTML5/CSS3/JavaScriptによるイフェクトの格好いい3Dプレゼンテーション·reveal.js MOONGIFT
reveal.jsはCSS3/JavaScriptで作られたプレゼンテーションソフトウェアです。 reveal.jsはHTML5/CSS3を使ったプレゼンテーションソフトウェアです。まずは言うに及ばず、そのクールな画面を見てもらいましょう。 トップです。この雰囲気からして格好いいです。 スライドを切り替える時に3Dイフェクトがかかります。これまた格好いいです。 水平に動くのが基本ですが、垂直にスライドさせる指定もできます。 デモ動画です。スペースキーでスライド一覧が出せます。 reveal.jsはスライドの切り替えがとにかく格好いいので、これでプレゼンテーションを行えば観衆の注目を引くこと間違いないでしょう（もちろん内容が大事ですが）。 reveal.jsはCSS3/JavaScript製、MIT Licenseのオープンソース・ソフトウェアです。 MOONGIFTはこう見る プレゼンテー
すげえ！FlashLite1.1を解析してHTML5に変換·FlashForward MOONGIFT
ガラケーはFlashLiteに対応しており、多数のゲームが開発されてきました。そうした既存の資産を活かすべく開発されているのがFlashForwardです。iOS向けにFlashLite1.1からHTML5へ変換するソフトウェアです。 デモは多数用意されています。 アニメーションします。 SVGの他にCanvas阪も用意されています。 テキスト含めたアニメーションも可能です。 こういうゲーム系で活躍します。 陣取りゲーム風ゲームも再現できています。 こういうアニメーションはCanvasのが高速です。 指定した形を描きます。 日本語も使えます。 複雑なキャラクターも描けて、アニメーションもばっちりです。 左右に動いたりします。 バナーレベルは十分に使えます。 まさにゲーム用途にぴったりです。 FlashForwardでは予めSWFファイルを解析し、HTML5/SVGまたはCanvas/Jav
CSS3を使った高度なアニメーションライブラリ·Animate.css MOONGIFT
Animate.cssはCSS3を使ったアニメーションライブラリです。様々なイフェクトが用意されています。 Animate.cssはCSS3を使ってアニメーションを実現するライブラリです。何はともあれ、デモ動画を見て何が実現できるのか知ってください。 トップページです。ここの各ボタンを押すとアニメーションが実行されます。 デモ動画です。 Animate.cssの特徴としてはjQueryのようなJavaScriptベースのアニメーションではないと言うことでしょう。利点としてCSS3でサポートされているネイティブな機能を使うことでハードウェアアクセラレーションが活かせるとのことです。なお動作するWebブラウザが限られてしまうという難点はあります。 Animate.cssはCSS3製、MIT Licenseのオープンソース・ソフトウェアです。 MOONGIFTはこう見る CSSだけでアニメーショ
jQueryで作られた本格的表計算ソフトウェア「jQuery.sheet」 - MOONGIFT|オープンソース・ソフトウェア紹介を軸としたITエンジニア、Webデザイナー向けブログ
jQuery.sheetはjQueryで作られたWebベースの表計算ソフトウェアです。 業務システムなどではWeb上にテーブルを表示するというケースがよくあります。さらに一歩進んで表計算のように集計したり並び替えたりしたいという無茶な要望が出るかも知れません。そんな時に使ってみたいのがjQuery.sheetです。jQuery製の表計算ソフトウェアです。 カラムはもちろん、グラフの表示までできてしまう本格的な表計算ソフトウェアです。 最大化表示。セルの値を参照することもできます。 テキストだけではなくラジオボタン等も使えます。 関数も多彩に用意されています。 編集しているところ。 文字装飾を変更します。メニューから選択できます。 HYPERLINKはその名の通りリンクを埋め込みます。 データにはHTML/XML/JSONが使えます。エクスポートも各フォーマット向けに可能です。 JavaSc
これを待っていた。マインドマップ＋GTD·MindOnTrack MOONGIFT
MindOnTrackはマインドマップとタスク管理（GTD）が一つになったソフトウェア。 MindOnTrackはWindows/Linux用のフリーウェア（Mac OSX向けもリリース予定）。日々の業務やプライベートな予定など、うまく順番にやりくりするためにはTodo管理が欠かせない。そしてタスクというのは総じて自分の周囲を整理した時にも現れやすい。 タスク 単純に割り当てられているタスク以外にも、プロジェクトや業務に関して見直してみると新しいすべきことが見つかったりするのはよくあることだ。そこで考えをまとめつつタスクに落とし込めるソフトウェアとしてMindOnTrackを紹介しよう。 MindOnTrackはマインドマップとタスク管理が一緒になったソフトウェアだ。言わば作業を分類ごとにドリルダウンしながらまとめ、それに日付をつけてタスク化していくのだ。さらにGTDにも則っているので、プ
今風のUI。Ajaxを使ったPHPベースのMySQL管理システム·MyWebSql MOONGIFT
MyWebSqlはAjaxを多用した今風のUIを使ったMySQL管理ツール。 MyWebSqlはPHP製のオープンソース・ソフトウェア。PHPと言えばMySQL、その二つの組み合わせから生み出されたphpMyAdmin。LAMPスタックなんて言葉が生み出されたのにphpMyAdminの優秀さがあったことは否定できない。それくらい誰しもが使っているソフトウェアだ。 データ一覧 だが長い年月のうちにUIは古いものになり、ちょっと時代が変わってきているかという気がしなくもない。そこで今のWebに合わせたMySQL管理ツールを紹介しよう。それがMyWebSqlだ。 MyWebSqlはWebアプリケーション風のインタフェースに加えて、UIのデザインもポップで明るい配色になっていて使い勝手が良い。左側にデータベースの一覧、右側でデータの編集を行うスタイルはphpMyAdminと同じだ。さらに下にはSQ
圧倒的な存在感。HTML5/CSS3/JavaScriptで作られたイラストレーションアプリ·Ghost Writer MOONGIFT
Ghost Writerは万年筆、マジック等をリアルに再現した絵描き用ソフトウェア。 Ghost WriterはHTML5/JavaScript製のフリーウェア（ソースコードは公開されている）。HTML5は徐々に本格導入されつつあるが、まだまだ実験的なプロダクトが多い。だがプログラマーにとっては、今こそ遊べる状況だ。色々試し、遊ぶ中で新しい可能性を見いだすことができる。 ものすごくリアル 今まではローカルでしかできなかったような操作がWebベースで実現するようになっている。特にペイント系は面白い。そこで今回はGhost Writerを紹介しよう。 Ghost Writerは古めかしい紙のようなボックスにペンを使って書き込めるソフトウェアだ。驚くのはそのリアル感ある存在感だろう。万年筆、マジック、スプレーといったペン種があり、切り替えて絵を描くことができる。なお筆者環境では色を変えることはで
HTML5の魅力。Webブラウザ上で楽譜を表示し、MIDIを使って奏でる·ABC.js MOONGIFT
ABC.jsはWeb上で楽譜を表示し、演奏するJavaScriptライブラリ。 ABC.jsはHTML5/JavaScript製のオープンソース・ソフトウェア。HTML5によってWeb上の表現力は高まっている。SVGでベクター画像を描いたり、WebGLによって3Dオブジェクトを描き出すこともできる。Canvasを使うプロジェクトも多い。 きれいな楽譜表示 これまではFlashを使ったり、画像を使わなければならなかった表現もHTMLだけでできるようになる。その一つ、楽譜を描き出して音まで鳴らせるのがABC.jsだ。 ABC.jsは特定の記法に沿って記述することでWebブラウザ上に楽譜を書くライブラリだ。JavaScriptを使っているので、その場で手直ししてレンダリングし直すこともできる。楽譜共有サイトのようなものを作ることさえできるだろう。 Firefoxなら演奏とダウンロードも そして描
使い道色々。jQueryを使ってSparklineグラフを描く·Peity MOONGIFT
PeityはjQueryでSparklineグラフ（円、棒、折れ線）を描くJavaScriptライブラリ。 PeityはjQuery/JavaScript製のオープンソース・ソフトウェア。Webサイトはテキストコンテンツが多い。一覧表などはテーブルタグを使えば簡単に実現できるが、それをグラフ化しようと思うと面倒に感じてしまうからだろう。 円グラフ だがライブラリを使えば容易に実現できる可能性がある。Canvasタグを使ってSparkline系グラフを描くライブラリがPeityだ。 Sparklineとは一行程度の小さなグラフで、縦軸横軸の説明は行わない。そのような説明がなくとも十分理解できるグラフについて使われる。ごく小さいので文章中に埋め込むのも容易だ。Peityでは円グラフ、折れ線グラフ、棒グラフの三種類を描くことができる。 折れ線グラフ タグの中に埋め込まれた文字を使ってグラフにして
Webサイトやスマートフォン、ローカルソフトウェアのデザインに使える。ワイヤーフレーム作成ツール×33選 MOONGIFT
Webサイトやソフトウェアを開発する際に、いきなりコーディングすることはないと思います。まずは手書きで紙やホワイトボードに全体のデザインを簡単に書いてみるのではないでしょうか。最近ではそれをコンピュータ上で行うツールが多数増えています。今回はそんなワイヤーフレーム、モックアップ、プロトタイプを作成するためのソフトウェアやWebサービスを紹介します。
テキストファイルからHTML5のプレゼンテーションを生成する·KeyDown MOONGIFT
KeyDownはMarkdown記法を使ってテキストファイルからHTML5のプレゼンテーションを生成する。 KeyDownはRuby製のオープンソース・ソフトウェア。個人のエンジニア、デザイナーが集まる勉強会ではあまり凝ったプレゼンを見る事が少ない。むしろHTMLやKeyNoteなどを使ってカジュアルに作られる方が多いのではないだろうか。 スライド テキストファイルで作成したプレゼンテーションは検索も容易でWebとの親和性も高い。配布して見てもらうのに特別なソフトウェアも無用と言う事なしだ。とは言え作成にHTMLを使ったりしたくない、という人はKeyDownを使ってみよう。 KeyDownはプレゼンテーションファイルの記法にMarkdownを使えるソフトウェアだ。keydownコマンドを使って（オプションはgenerate）プレゼンテーションのベースを作成する。!SLIDEというのがスライ
Webの体験を一歩未来に。OpenALをHTML5で実現する·WebAL MOONGIFT
WebALはWebブラウザで音楽を3D化する、OpenALをポーティングしたJavaScriptライブラリ。 WebALはHTML5/JavaScript製のフリーウェア（ソースコードは公開されている）。ゲームにおいてグラフィックスと同じくらい欠かせない重要な要素が音だ。音楽によって臨場感を出したり、よりゲームの世界に入り込みやすくなる。特にFPSのような3Dゲームはそうだろう。 キーボードで複数の音を操作するデモ 音が単調に聞こえていたら興ざめだ。左右のどちらから音が聞こえるのかによって、よりリアルにゲームを楽しめるようになる。そのためのオーディオAPIであるソフトウェアとしてOpenALが知られているが、それをさらにJavaScriptにポーティングしたのがWebALになる。 元々のOpenALはOpenGLに似せてあるらしい。つまりWebALはWebGLに似せ、組み合わせて使う事が想
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
