すっきりとしたデザインが特徴。高機能なWYSIWYGエディタ·Redactor MOONGIFT
RedactorはjQuery製のWYSIWYGエディターです。 Web上でテキストコンテンツを記述する際には素のテキストエリアではなくWYSIWYGエディタを使いたいのではないでしょうか。そこで試したいのがRedactorです。jQueryを使ったすっきりしたデザインのWYSIWYGエディタです。 一行のツールバー、画像埋め込みにも対応していてすっきりとしています。関係ありませんがアナ・トーヴ（フリンジの主役で写真の方）は好きな女優さんです。 画像はプロパティを編集できます。 右側に寄せました。右でも左でもアナ・トーヴは映えますね。 全画面表示。大きくしてもやはりアナ・トーヴは格好いいです。 動画の埋め込みはEmbedタグのペーストで行えます。 コード表示モードです。 スクロールした時にツールバーを上に貼付けた状態で維持できます。 独自のCSSを追加できます。 テキストエリアがなかったと
ノブ型UIで直感的な入力を·jQuery Knob MOONGIFT
jQuery Knobはノブを使って値の設定を行うコンポーネントです。スクロールで値をスムーズに変化させられます。 Webで標準で使えるコンポーネントはパターンがとても少なく、表現力が乏しいのが欠点です。今回紹介するjQuery Knobはノブ型のコンポーネントでスクロールを使って値を設定するタイプの新しいコンポーネントになっています。 デモです。サークルの中でスクロールすると値がスムーズに変化します。 大きさや数字を非表示にしたりできます。 表示のみに設定もできます。 アクションで表示を行うこともできます。 iPodのホイール風表示です。マックスを設けずに表示もできます。 デモ動画です。 jQuery KnobのデザインはCanvasを使って描かれており、画像を用意する必要はありません。また、タッチやマウスホイール、キーボードによる入力に対応したイベントが取れるようになっています。テキス
Apache Clickを使ってWebアプリケーションを組むなら知っておきたい·Click JQuery MOONGIFT
Click JQueryはApache ClickとjQueryの連携をどう組むかデモアプリを通じて説明してくれるソフトウェアです。 Click JQueryはApache ClickとjQueryを連携された場合のデモソフトウェアです。実際にApache Clickを使っていく上でのテクニックとして知っておくと便利そうです。 デモサイトです。様々なコンポーネントを試せます。 スライド系のデモです。 カレンダー連携です。 ダイアログのデモです。 カラーピッカーのデモです。 フォルダのツリービューです。 テーブルです。Ajaxでデータを読み込んでいます。 グラフ描画のデモです。 円グラフのデモです。 Apache Clickのコードも確認できます。 機能はメニューに分かれて表示されています。Ajaxやフォーム、チャート、各種コントロール、イフェクト処理などをコードを見ながら実際にコーディング
業務システムに単なるCSVもリッチに表現·js-tables MOONGIFT
js-tablesはCSV形式のテキストをフィルタリングやソートに対応したテーブル表示にしてくれるjQueryプラグインです。 js-tablesは業務システムで使えそうなjQueryプラグインです。CSVファイルやCSVのテキストを渡してフィルタリングや並び替えに対応したテーブルを表示してくれます。 サンプルです。元データはCSVファイルとなっています。 カラムごとに入っているデータをグルーピングして表示します。そこから選べばデータがフィルタリングされます。 end tagと入っているデータだけ抽出しました。ソートもできます。 フィルタリングはインクリメンタルに行われます。 任意のCSVファイルを指定してテーブル化できます。1行目が自動的にヘッダーになります。 実際の使い方です。単純にテキストを入れるだけでテーブル表示にしてくれます。 CSVを表示する場合にはYahoo! Pipesを使
エラーやインフォメッセージの通知に使いたい。jQuery製通知ライブラリ·Notifier.js MOONGIFT
Notifier.jsはGrowl風通知を行うjQueryプラグインです。 Mac OSXではGrowlという有名な通知ソフトウェアがあります。バックグラウンドでの処理結果や、何か問題があった際に通知が出るのは慣れると手放せません。そんなGrowlに似た通知をjQueryで実現するのがNotifier.jsです。 リンクをクリックすると通知が右上に表示されます。この通知は一定時間が経つと消えます。 複数を同時に表示させることもできます。アイコン、タイトル、内容がカスタマイズできます。 いくつも出せます。 表示するコード。success、info、warning、errorを指定できます。 Notifier.jsを使えば見た目のデザインを変えずにエラーメッセージやお知らせを通知できるようになります。 Notifier.jsはjQuery/JavaScript製のソフトウェア（ソースコードは公
メソッドチェーンを使えばWeb SQL Databaseも簡単に·mchain MOONGIFT
mchainはHTML5のWeb SQL DatabaseにおいてjQuery風にメソッドチェーンを使えるようにするライブラリ。 mchainはHTML5/JavaScript製のオープンソース・ソフトウェア。HTML5はこれまでのWebアプリケーションのあり方を大きく変える可能性があると思っている。その一つとして期待しているのがWeb SQL Databaseだ。Webブラウザ内でRDBMSが利用できる技術だ。 デモのTodoアプリ これをうまく使えば、最初に必要なデータをダウンロードして後はクライアントサイドだけで加工して完了したらアップしてもらうような仕組みが作れるようになる。そんな面白い技術を手軽に扱えるようにするJavaScriptライブラリがmchainだ。 mchainは基本的にWeb SQL Database APIをmchainでラッピングしているだけで使い方は変わらない
スマートフォンでの日付、時刻をスムーズに入力·Mobiscroll MOONGIFT
MobiscrollはiOSやAndroidでの日付、時刻入力を手軽にしてくれるWeb UIコンポーネント。 MobiscrollはjQuery/JavaScript製のオープンソース・ソフトウェア。Webブラウザ上で扱いが難しいデータが日付や時刻だ。入力するのも、入力チェックもややこしい。Webの貧弱なコンポーネントを補うためのカレンダー形式の選択ライブラリは人気が高い。 日付 そんな中、iOSの日付や時刻入力はとてもスマートに思える。スクロールを回転させて入力するのは分かりやすい。そんな入力フォームをWebベースでも実現するのがMobiscrollだ。 Mobiscrollはテキストボックスで利用するライブラリで、フォーカスが当たると日付や時刻を入力するためのMobiscrollが表示される。アプリ用のコンポーネントと同じようにスクロールして日付や時刻を選択する形だ。入力したらSetボ
jQuery製で手軽に使えるHTML5による画像のドラッグアンドドロップアップローダー·Droparea MOONGIFT
DropareaはHTML5/jQueryで画像のドラッグアンドドロップによるファイルアップロードを行うライブラリ。 DropareaはHTML5/JavaScript製のオープンソース・ソフトウェア。HTML5によって大きく改善されたWebの機能の一つがファイルアップロードではないだろうか。複数のファイルがアップロードできるようになったり、ドラッグアンドドロップでもアップロードできるようになった。 アップロードするとすぐにサムネイルが表示される ドラッグアンドドロップでのアップロードとしてはGmailが有名だが、ファイルを持っていってはじめてドロップできることに気づくのでは使い勝手が良いとは思えない。それをもう少し分かりやすくしたのがDropareaだ。 DropareaはWebページに写真をアップロードするjQueryプラグインだ。特徴としてアップロードできる部分があらかじめ指定されて
レガシーなブラウザでもCSS3の新技術を活用する·Selectivizr MOONGIFT
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
使い道色々。jQueryを使ってSparklineグラフを描く·Peity MOONGIFT
PeityはjQueryでSparklineグラフ（円、棒、折れ線）を描くJavaScriptライブラリ。 PeityはjQuery/JavaScript製のオープンソース・ソフトウェア。Webサイトはテキストコンテンツが多い。一覧表などはテーブルタグを使えば簡単に実現できるが、それをグラフ化しようと思うと面倒に感じてしまうからだろう。 円グラフ だがライブラリを使えば容易に実現できる可能性がある。Canvasタグを使ってSparkline系グラフを描くライブラリがPeityだ。 Sparklineとは一行程度の小さなグラフで、縦軸横軸の説明は行わない。そのような説明がなくとも十分理解できるグラフについて使われる。ごく小さいので文章中に埋め込むのも容易だ。Peityでは円グラフ、折れ線グラフ、棒グラフの三種類を描くことができる。 折れ線グラフ タグの中に埋め込まれた文字を使ってグラフにして
ドロップダウンリストの使い勝手を向上させるjQueryプラグイン·Dropp MOONGIFT
DroppはWebブラウザ標準のドロップダウンリストを置き換えて使い勝手を良くするライブラリ。 DroppはJavaScript/jQuery製のフリーウェア（ソースコードは公開されている）。HTMLがローカルソフトウェアに敵わない理由の一つがUIの貧弱さにあると思われる。もちろん凝ればそれなりのUIになるが、標準のコンポーネントで表現できるものが少ないのだ。 一つ選択 その一つで不満に感じていたのがドロップダウンの複数選択だ。シフトキーなどを押しながら選ぶなんてのは面倒すぎる。そこで使ってみたいのがDroppだ。 Droppは標準のドロップダウンリストを置き換えるソフトウェアだ。クリックするとリストが表示される。その中から項目を選択すると選択状態が維持される。そのまま追加で項目を選択できる。選択した項目のbらベルは一番上に並べて表示したり、複数項目選択中といったラベルにすることもできる。
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
