タグ入力やコンタクト連絡先の入力に便利なUIを実装できる「Selectize.js」:phpspot開発日誌
Selectize.js タグ入力やコンタクト連絡先の入力に便利なUIを実装できる「Selectize.js」 次のような良い感じのデザインのタグ入力補完機能付きタグ入力UI、同様にコンタクトリストでも使えるUIが作れます Bootstrapと組み合わせても違和感なさそうなリッチなUIがいいですね 関連エントリ jQuery用のよく使うUIコンポーネントセット「ZinoUI」 jQuery UI をタッチイベントに対応させるライブラリ「jQuery UI Touch Punch」 レスポンシブに使えるタブUI実装jQueryプラグイン「Easy-Responsive-Tabs-to-Accordion」 超クールなjQueryUIテーマ「Delta」
文字や画像にリアルタイムでモザイク処理がかけられるjQueryプラグイン「SPOILER ALERT!」:phpspot開発日誌
文字や画像にリアルタイムでモザイク処理がかけられるjQueryプラグイン「SPOILER ALERT!」 2013年03月21日- SPOILER ALERT! 文字や画像にリアルタイムでモザイク処理がかけられるjQueryプラグイン「SPOILER ALERT!」。 $ ('spoiler, .spoiler').spoilerAlert()のように初期化するだけで、画像や文字をモザイク処理することが出来ます。 マウスオーバーでうっすらみえるように、クリックでモザイク解除みたいなことが可能です。 あとはどう使うか？というところですが、実装の際にJS側でやってしまえるというのは楽でいいですね。 関連エントリ アニメーションしながらソートできるjQueryプラグイン「Animated Table Sorter」 高機能なカラーピッカーを実現出来るjQueryプラグイン「Spectrum」 i
JSでのCanvas操作を簡単かつ高機能にできる「Fabric.js」:phpspot開発日誌
Fabric.js Javascript Canvas Library JSでのCanvas操作を簡単かつ高機能にできる「Fabric.js」 canvasのネイティブAPIは若干分かりづらいという方も多そうですが、このライブラリを使えばオブジェクト指向で楽々Canvasプログラミングが出来そうです 単に便利にコーディングできるようになるだけでなく、オブジェクトをマウスで拡大や回転できるなどといった色々な機能も盛り込まれていて便利そうです ネイティブAPIだと、四角形を描画するのに、次のようなコードを書きます。 これが、Fabric.jsを使うと次のように、とても分かりやすくなります。fillRectの引数の順ってどうだっけ？と毎回リファレンスを牽く必要もなくなりますね 他にもドキュメントを参照すれば、CanvasをネイティブAPIで書く面倒さを理解できるはず デモページも結構充実しており
ドラッグ＆ドロップで並び替えができるダッシュボード作成jQueryプラグイン「sDashboard」:phpspot開発日誌
ModelN/sDashboard GitHub ドラッグ＆ドロップで並び替えができるダッシュボード作成jQueryプラグイン「sDashboard」。 次のようなパネル状のUIでパネルを好きな位置に移動できたり、ウィジェットを追加したりすることのできるフレームワークです。 管理画面等のダッシュボード作成の際に活用できる場面がありそう 関連エントリ 画像レイアウト関連で便利なjQueryプラグイン等まとめ テキストを新聞風のレイアウトにできるjQueryプラグイン「Columnizer」 アイテムをドラッグ＆ドロップで画面レイアウト出来るjQueryプラグイン「gridster.js」 ブロック要素の高さを簡単に揃えられるjQueryプラグイン「equalize.js」 レスポンシブなテーブル作りに役立つjQueryプラグイン「FooTable」 アイテムをタイル状に並べる新しいjQuer
IFrame内もレスポンシブ対応にするjQueryプラグイン「ResponsiveIframes.js」:phpspot開発日誌
IFrame内もレスポンシブ対応にするjQueryプラグイン「ResponsiveIframes.js」 2012年10月09日- ResponsiveIframes.js IFrame内もレスポンシブ対応にするjQueryプラグイン「ResponsiveIframes.js」 ページ内や画像をレスポンシブ対応にするものはありますが、ページ内に貼りつけたiframeでさえもブラウザサイズに応じて伸縮させることができます。 単にiframeのサイズを変えるだけじゃなくてiframeの中身のサイズも変えなくてはいけないため、結構大変そうですがライブラリで簡単に対応できそうですね 関連エントリ ブロック要素の高さを簡単に揃えられるjQueryプラグイン「equalize.js」 Gmailスタイルのemoticonを実装できるjQueryプラグイン クリックで水滴を落としたようにアニメーションさ
美麗なグラフをSVGで描画できるJSライブラリ「dc.js」:phpspot開発日誌
dc.js - Dimensional Charting Javascript Library 美麗なグラフをSVGで描画できるJSライブラリ「dc.js」 次のような円グラフや棒グラフをオブジェクト指向の分かりやすいコードで描画出来ます。 円グラフのコード例。メソッドをチェーンさせて直感的にグラフを描画可能。 SVG対応していないブラウザでは描画できませんが、軽くてよさそうですね 関連エントリ 様々なグラフを描画できるJavaScriptライブラリ「NVD3.js」 見た目がクールなグラフ描画用jQueryプラグイン「Morris.js」 HTML5で綺麗でインタラクティブなグラフが描けるライブラリ「Flotr2」
デザインがクールなタグクラウドを実装できるjQueryプラグイン「jQCloud」:phpspot開発日誌
DukeLeNoir/jQCloud GitHub デザインがクールなタグクラウドを実装できるjQueryプラグイン「jQCloud」 作ってみると意外と難しいタグクラウド。それを次のように美しく実装できるタグクラウド実装用プラグインです ワードのリストを次のように配列で渡してあげて初期化するだけです。デザインとかは全部やってくれるみたいです 文字の羅列だけをデザインする上に、毎回ワードが変わるわけなのでなかなかデザインが難しいところですね。 Web2.0と言われた２００５年当時は何処でも見る程よく使われていたインタフェースですが、CSS3を使ってrotateさせたりすることで今ならより進んだ面白い表現ができるかもしれませんね 関連エントリ 瞬時にタグクラウドが形成できるjQueryプラグイン「Jimpl Tag Cloud」 HTML5のcanvasを使ったアニメーションするタグクラウド
Youtube動画をページ背景にするjQueryプラグイン「tubular」:phpspot開発日誌
tubular, a YouTube Background Player jQuery Plugin | Sean McCambridge Design Youtube動画をページ背景にするjQueryプラグイン「tubular」 こんなことが出来ちゃうのかという感じですが、ページ背景全体をYoutube動画にできます。 実装は、$('body').tubular('_VKW_M_uVjw','wrapper'); のように、tubular にvideoIDの引数とラッパーのIDを渡せばOK。 背景をクリックで動画にとんじゃいますが、ホスティングしてもらってるわけなのでしょうがないですね。 コンテンツ領域は問題なくクリックできるところがナイスです。 関連エントリ 面白いテキストアニメーションが作れるjQueryプラグイン「textualizer」 時間の入力を楽にすることが出来るjQuer
HTML5で色々作るチュートリアル＆チートシート:phpspot開発日誌
25 Useful Html5 Cheat Sheets and Tutorials For Web Developer HTML5で色々作るチュートリアル＆チートシート ギャラリーやcanvas、スライドショー、コンタクトフォーム等色々なものを作るチュートリアルとチートシートなどがまとまっています。 HTML5でテトリスを作るチュートリアルなんかもあります 最近HTML5ネタが多くなって来ました。 ネタに事欠かないのはいいことですが実際に追っていくのは大変ですね 関連エントリ HTML5で超リアルなページめくり効果を実装するチュートリアルとサンプル HTML5/JavaScriptでテキストtoスピーチを実現できる「speak.js」 HTML５でブラウザにドラッグ＆ドロップでファイルアップ可能なjQueryプラグイン「jQuery HTML5 Uploader」 HTML5ベースのオー
Android風の簡単な通知を実現する「jQueryToast」:phpspot開発日誌
jQuery Toast Plugin Android風の簡単な通知を実現する「jQueryToast」 クリックすると次のようなAndroid風の通知がページ上に現れます。 次のように、.toastでメッセージとオプションを渡してあげるだけなのでalertみたいにお手軽に使うことができます。 Android用のHTML5ベースのアプリなんかでも使っても良さそうですね。 関連エントリ HTML5のデスクトップ通知を簡単に扱えるjqueryプラグイン「desktopify」。 通知件数表示付きのメニュー実装jQueryプラグイン「Notification Menu」 HTML5のDesktop Notificationを簡単に実現するjQueryプラグイン「jwNotify」
ビフォア・アフターが超わかりやすいパーツ実装jQueryプラグイン「jquery-comparewyw」:phpspot開発日誌
jquery-comparewyw - a jQuery plugin which allows you to compare, for example, before and after images - Google Project Hosting ビフォア・アフターが超わかりやすいパーツ実装jQueryプラグイン「jquery-comparewyw」 単純に画像を並べてビフォアアフターするよりも面白くて場所を取らない一工夫のあるUIが実装できます。 マウスでドラッグ＆ドロップしたり、マウスオーバーで直接切り替えることも可能。 画像同士を重ねることで分かりやすいですね。ショッピングサイトなんかで使えるのかも。 関連エントリ Flashみたいなテキストエフェクトが作れるjQueryプラグイン「TextFX」 小さくで可愛いグラフが描けるjQueryプラグイン「Piety」 画像スライダー
あなた好みのカラーピッカーが作れるjQueryプラグイン「EXColor」:phpspot開発日誌
ExColor color picker plugin | jQuery plugins | ModCoder - Innovative Software Solutions for Web Sites#wizard#wizard あなた好みのカラーピッカーが作れるjQueryプラグイン「EXColor」。 サイト上からウィザードでパーツを選択してカラーピッカーを独自にデザインできちゃうという優れものです。 ベースデザインも次のように良い感じです。 パーツをクリックするとUIが変更可能。 カスタマイズしたカラーピッカーのコードが次のように出力されて便利 デザインにこだわりたい方は選択肢の１つとして使えそうです 関連エントリ シンプル＆軽快なカラーピッカー実装ライブラリ「JSColor」 シンプルUIがいい感じのカラーピッカー実装jQueryプラグイン「simpleColorPicker」
これは注目の超リッチなUIを実装できるjQueryベースのUIライブラリ「jQuery EasyUI」:phpspot開発日誌
これは注目の超リッチなUIを実装できるjQueryベースのUIライブラリ「jQuery EasyUI」 2011年07月19日- jQuery EasyUI - help you build your web page easily これは注目の超リッチなUIを実装できるjQueryベースのUIライブラリ「jQuery EasyUI」 Ext.jsばりに美しくてリッチなUIをjQueryでも実現できちゃいます。さらに、使い勝手がjQueryなので誰でも簡単に実装できちゃいます。Extはなんとなく取っ付きにくいと感じたかたも簡単に使えそう。 サイト上のチュートリアルやドキュメントも充実していて分かりやすいです。 リッチなものが作れるのはいいけど使い方が難しかったりメンテナンス大変だと、使う気が少し失せてしまいそうですがこれなら大丈夫かもしれません。 テーマやマルチリンガルにも対応しているらし
レイアウトに関する強力なjQueryプラグイン６つ:phpspot開発日誌
6 Powerful jQuery Plugins to Create and Enhance Website Layout | Queness レイアウトに関する強力なjQueryプラグイン６つが紹介されていました。 一昔前では不可能では？と思われたような複雑なレイアウトもjQueryを使うことで簡単に実現できます。 ちょっと変わったレイアウトにしたいっていう時に参考にさせてもらいましょう UI.Layout リサイズ可能な複雑なレイアウト作成 Masonry ブロックを新聞みたいにしきつめて表示 jLayout divをならべてその親divのclassにルールにしたがって記述することで複雑なレイアウトが簡単に作れます jQuery pageSlide ページ全体をズラしてアニメーションしながらサイドバーを出すエフェクト jQSlickWrap 画像にあわせて文書をまわりこませられる C
独自デザインのスクロールバーにする際に使えるjQueryプラグイン「jScrollbar」:phpspot開発日誌
jScrollbar : make your own scrollbar for scrolling contents with jQuery UI - MyjQueryPlugins 独自デザインのスクロールバーにする際に使えるjQueryプラグイン「jScrollbar」 綺麗にデザインされたバーもブラウザ依存のスクロールバーで台無しになってしまったり、OSによってデザインに違いが出てしまったりとあまりよいことはないですね。 かといってデザインを崩したくない場合なんかで、スクロールさせないわけにもいけないような時に使えそうなプラグインです。 以下のような自由なデザインのスクロールバーが作れます。画像を切り替えることで簡単に独自デザインにも出来ます。 で、独自デザインにしつつも、ちゃんとマウルホイールにも対応しています。 Twitterの新UIなんかでもスクロールバーが独自になっていたり
node.jsに関する基礎や開発・チュートリアルのまとめ:phpspot開発日誌
node.jsに関する基礎やチュートリアルのまとめ。 リアルタイムなWEBを実現するには必須のサーバサイドJS、node.jsについて色々とまとめてみました。 node.js node.jsについて node.js なんとなく凄そうだけどよく分からないという方も多いかもしれないので簡単に解説。 一番最初見た時は何かのJavaScript ライブラリかと思ったのですが、全く違って、V8というChromeにものっている高速JavaScriptエンジン上で動くサーバを動かせる仕組み。 サーバ自体を具体的に言うと次のようなコードで実現します。 var http = require('http'); http.createServer(function (request, response) { response.writeHead(200, {'Content-Type': 'text/plain
複数ファイルの一括選択OKなプログレスバー付きアップローダ実装jQueryプラグイン「jQuery File Upload」:phpspot開発日誌
複数ファイルの一括選択OKなプログレスバー付きアップローダ実装jQueryプラグイン「jQuery File Upload」 2011年01月25日- jQuery File Upload Demo 複数ファイルの一括選択OKなプログレスバー付きアップローダ実装jQueryプラグイン「jQuery File Upload」。 「Upload files」ボタンを選択するとダイアログが開き、複数ファイルを一括して選択。その後すぐアップロードが始まり、プログレスバーを通して進捗を表示、アップされたファイルのサムネイルも次のように表示してくれるという、ファイルアップロードのフルセットを提供してくれます。 アップされたファイルの横に表示されているごみ箱アイコンをクリックすればすぐさま削除も可能。 HTML5ベースなプラグインなのでFlashも不要です。 アップロードの受け口としてphpのソースも同
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
