シンプルなツリービューを実現できるjQuery「Bonsai」:phpspot開発日誌
jQuery Bonsai by aexmachina シンプルなツリービューを実現できるjQuery「Bonsai」。 olなどで階層的にリストを定義して初期化すれば簡単にツリービューが作れます。 ツリーにチェックボックスをつけることも可能。シンプルなだけに使い勝手がよさそう シンプルなリスト チェックボックスありのリスト 関連エントリ キーボードでも操作できるツリービュー実装jQueryプラグイン「a11yTree」 OS標準のツリービューが実装できるjQueryプラグイン「fancytree」 ULリストをツリービュー状に開閉できるようにするjQueryプラグイン「Sapling」 階層データを複数選択できるUIを実装できるjQueryプラグイン「treeselect.js」
HTML5＋JSONでインタラクティブなテーブルを作れる「Dynatable.js」:phpspot開発日誌
Dynatable.js - jQuery plugin for HTML5 JSON interactive tables and more HTML5＋JSONでインタラクティブなテーブルを作れる「Dynatable.js」 JSONからtable、tableからJSON形式に変換でき、実装できるテーブルもソートしたり件数を絞り込めたり検索できたりと、リッチにしてくれ、かつシンプルなデザインで使いやすいテーブルが作れるライブラリです。 tableはデータと密接な関係にあることが多いですから、こういうライブラリは結構使えそうです。 関連エントリ テーブルを折りたたみ可能なツリー型グリッドに変換できる「TreeGrid」 普通のテーブルをExcel風に超カッコよくしてくれるjQueryプラグイン「ParamQuery」 テーブル行をインクリメンタル検索できるようにするjQueryプラグイン
GoogleAnalyticsみたいなダッシュボードが作れるフレームワーク「sDashboard」:phpspot開発日誌
sDashboard GoogleAnalyticsみたいなダッシュボードが作れるフレームワーク「sDashboard」。 次のように、ページ内にドラッグ＆ドロップで移動できるウィジェットを配置し、各種グラフやリストで表示できるダッシュボード作成フレームワーク。 １画面でサイトやアプリの重要な指標をまとめたい場合に使えそうです。 関連エントリ HTML5＆レスポンシブなPHPダッシュボード作成フレームワーク「RazorFlow」 ドラッグ＆ドロップで並び替えができるダッシュボード作成jQueryプラグイン「sDashboard」 Windows8スタイルのダッシュボードUIが作れる「Dashing」 どんなデータもリアルタイムなグラフにできるフレームワーク「FnordMetric」 水量・温度・メーター等、産業用のグラフを描画できるjQueryプラグイン「Industrial.js」
grepをよく使うプログラマはどう考えても乗り換えるべき新しいgrepコマンド「ack」:phpspot開発日誌
Beyond grep: ack 2.04, a source code search tool for programmers grepをよく使うプログラマはどう考えても乗り換えるべき新しいgrepコマンド「ack」。 サーバに入ってコードを書いている人はかならず使うgrepですが、grepよりも高速に検索でき、git,svn等のソースコード以外のソースはgrepしないで検索できるツールらしいです。 Perlで書かれていて、Perlの強力な正規表現が使え、ハイライトしてくれます。ソースツリーの下で「ack 検索ワード」で検索するだけというシンプルさもいいです WEBサービスを書いているとhtmlやphp等色々なソースをいじりますが、ファイルの検索対象も選べるため、便利です。 ack --php <検索ワード> でphpのソースのみを対象とし、ack --nophp <検索ワード>でphp
jQuery用のよく使うUIコンポーネントセット「ZinoUI」:phpspot開発日誌
ZinoUI - jQuery UI components library, HTML5 framework jQuery用のよく使うUIコンポーネントセット「ZinoUI」 アコーディオン、ボタン、チェックボックス等、次のように豊富なコンポーネント群が利用できるUIコンポーネントセットです。 デザインもなかなか綺麗に作られていて、便利に使えそうです TwitterBootstrap風のテーマもあったらもっと使われるんじゃないかと思っています、が併用してもそこまで違和感なく使えそう。 関連エントリ これは超使いやすいページネーションの次世代UI UIがカッコいいオートコンプリート実装jQueryプラグイン「Ajax AutoComplete」 折りたたみ可能なタイムラインのUIを実装できるjQueryプラグイン「Timeliner.js」 フルスクリーンでページめくりをするUI実装デモ 数
API経由でHTML等をPDF,Office,EPUB形式に変換できる「Docverter」:phpspot開発日誌
Convert Plain-text Documents to PDF, Docx, and ePub with Docverter:: Docverter API経由でHTML等をPDF,Office,EPUB形式に変換できる「Docverter」 サーバに対してAPI経由でcurlなどでリクエストしてファイルのフォーマット変換が可能。 ソースがGithubで公開されているのでダウンロードして自前のサーバに設置して利用出来ます。 HTML→PDFというのはなかなか需要がありそうですが、これをAPI経由で変換できるというのは便利ですね。 出力に関しては次のようなフォーマットに出力出来ます。 関連エントリ HTML内にPDFを埋め込めるJSプラグイン集 JavaScriptのコードでPDFを生成できる「jsPDF」 ブラウザ上でPDFを表示するJSライブラリ「PDF.js」 手書きでサイトや
どんなデータもリアルタイムなグラフにできるフレームワーク「FnordMetric」:phpspot開発日誌
FnordMetric | Framework for building beautiful real-time dashboards どんなデータもリアルタイムなグラフにできるフレームワーク「FnordMetric」。 どんなデータも次のような美しいUIを持つリアルタイムなグラフにできます。 サイトの会員数、ユニークアクセス数、データ投稿件数等、リアルタイムにデータを見たいような場合に使えそう。 muninなどでもグラフ化できますが、ここまでのUIの美しさとリアルタイム性は備えていないので、リアルタイムに欲しい情報はこれでダッシュボードにして監視すると便利でかっこ良さげ。 Ruby+Redisで書かれていますが、データの表示にはHTML5/JavaScriptのAPIが使えるようです 関連エントリ 世界地図でデータをビジュアライズする際に使えるJSライブラリ「DataMaps」 リアルタ
使いやすい複数選択エレメントを実現するjQueryプラグイン「multiselect.js」:phpspot開発日誌
multiselect.js 使いやすい複数選択エレメントを実現するjQueryプラグイン「multiselect.js」 アプリケーションに実装されているような次のような複数選択ボックスをWEB上で実現可能です。 左側のアイテムをクリックで右に移して選択状態に。また右側のアイテムをクリックで非選択状態にできます HTML的には1つselectを用意して multiSelect() で初期化すればOK 関連エントリ selectボックスを超カッコよくするjQueryプラグイン「Chosen」 jQueryの独自セレクトボックスを作成するjQueryプラグイン「jQuery.customSelect()」
ドラッグ＆ドロップによるクールなファイルアップロードを実現できる「Dropzone.js」:phpspot開発日誌
Dropzone.js ドラッグ＆ドロップによるクールなファイルアップロードを実現できる「Dropzone.js」。 ファイルをブラウザ内にD&Dすると画像ならサムネイルがすぐに表示されつつ、プログレスバーが表示されて進捗が分かり、更に完了した際にはチェックマークでアップロード完了が分かります なかなかカッコいいだけでなく、便利なアップロードが可能。 ブラウザ非対応時のフェイルバックも 関連エントリ クロスブラウザでファイルのドラッグ＆ドロップ、Ajaxアップロードを可能にする「FileDrop」 DropBoxからファイルアップロードをする＆切り取って保存するデモ jQueryとHTML5でドラッグ＆ドロップアップロードを実現するチュートリアル ファイルアップロードのレジュームをブラウザ上で行える「Resumable.js」
Amebaっピグっぽい物が作れるjQueryプラグイン「pp3Diso」:phpspot開発日誌
Plugin pp3Diso : moteur de jeu web pour l'affichage et la gestion d'une map 3D isomtrique Amebaっピグっぽい物が作れるjQueryプラグイン「pp3Diso」。 マップ上を人が移動するような感じのゲーム風インタフェースが作れるライブラリっぽいです。 フランス語っぽいので翻訳したりコードを読んだりして使う必要がありますが、なかなかおもしろいのでご紹介。 JavaScriptベースということで、スマホで動くAmebaピグを作ってやろう、という方は参考にできるかも。 関連エントリ ２Dゲームが作れそうなアニメーションjQueryプラグイン「Motio」 カスタマイズ可能で動きがよいalertダイアログ実装jQueryプラグイン「alertifyjs」 Instagramの写真をサイトに簡単掲載できるjQ
普通のテーブルをExcel風に超カッコよくしてくれるjQueryプラグイン「ParamQuery」:phpspot開発日誌
ParamQuery jQuery Grid Plugin 普通のテーブルをExcel風に超カッコよくしてくれるjQueryプラグイン「ParamQuery」 ありきたりなカッコいい、とはいえないような以下のテーブルがあったとします プラグインで初期化すれば、ソータブル、エディタブル、なクールなテーブルに早がわり これは5,6年前でいえば魔法だと思う方は少なくないでしょう。 関連エントリ レスポンシブなテーブルを作るjQueryプラグイン「MediaTable」 テーブルをグラフに変換してくれるjQueryプラグイン レスポンシブなテーブル作りに役立つjQueryプラグイン「FooTable」 テーブルを簡単にカッコよくスタイリングできるjQueryプラグイン「tablecloth.js」 シンプルにテーブルにソート機能を持たせるだけのjQueryプラグイン「jQuery Table So
ゲームに使えそうな960種類以上のアイコンセット「Game icons」:phpspot開発日誌
969 free SVG and PNG icons easily customizable for games or apps | Game-icons.net ゲームに使えそうな960種類以上のアイコンセット「Game icons」。 次のようなゲームに使えそうなアイコンセットが960種類以上と豊富に提供されているサイトです。 武器、食料、動物といった、まさにゲームに使えそうなアイコン集が豊富に入手可能。PNG, SVG形式でDLできます ちょっとしたゲーム作りに活用出来るかもしれませんね 関連エントリ WEBサイト制作に使えるベクターアイコンセットｘ２５ たった１つのdivで表現されるアイコンデータベース「One div」 自分でスタイリングして好きなアイコンを選んでセットでDLできる「Iconbench」 スマホ用のアプリアイコンのりサイズを一発で作成できる「Makeappicon
HTML内にPDFを埋め込めるJSプラグイン集:phpspot開発日誌
7 Best jQuery & JavaScript PDF Viewer plugin with examples HTML内にPDFを埋め込めるJSプラグイン集。 通常PDFというとPDFページにリンクして直接開くというものが多いですが、こうしたプラグインを使うことで、HTMLの中にIFrameのようにPDFを埋めこんで表示が可能です。 ブラウザプラグインを使うものや、GoogleDocを使うもの、直接JSでレンダリングしてしまうものなど様々まとまっています。 リンク先PDF、というとちょっと躊躇してしまう時がありますが、こうしてHTML内に埋め込まれていると抵抗が個人的には少ないです。 関連エントリ ブラウザ上でPDFを表示するJSライブラリ「PDF.js」
もう面倒なユーザ認証機能は１から作らなくてよいかも？PHPのOSS「AuthManager」:phpspot開発日誌
もう面倒なユーザ認証機能は１から作らなくてよいかも？PHPのOSS「AuthManager」 2012年08月13日- AuthManager - StitchApps もう面倒なユーザ認証機能は１から作らなくてよいかも？PHPのOSS「AuthManager」。 ユーザ認証型のサイトを１から作るとなると面倒な上に、もう誰かが良い物を作ってるんじゃないかという事を誰もが作り直してる気がします。 こういうもの自体をオープンソースにしちゃって誰もが使えるっていうのは素晴らしいですね。 Facebookによる認証やreCAPTCHAによるスパム防止、メールアドレスの認証機能といった標準で必要な機能が入っており、便利に使えそう。 で、ユーザ登録できるのはいいんだけど、肝心の制限はどうやってかけるの？というところは、次のように簡単にやってね、ということらしくお手軽。 ($sesslife自体がどこか
様々なグラフを描画できるJavaScriptライブラリ「NVD3.js」:phpspot開発日誌
NVD3.js :: re-usable charts for d3.js 様々なグラフを描画できるJavaScriptライブラリ「NVD3.js」 d3.jsという以前紹介したライブラリをベースに利用しているみたい。 グラフ描画のライブラリは色々ありますが、こちらのライブラリで描画するグラフのデザインもなかなかいい感じですね マウスとのインタラクティブなグラフ実装が可能で拡張も容易みたい サンプルページにはソースがついているので参考に組めば抵抗なくグラフが描けそうです 関連エントリ 見た目がクールなグラフ描画用jQueryプラグイン「Morris.js」 HTML5で綺麗でインタラクティブなグラフが描けるライブラリ「Flotr2」 様々な時系列グラフを描画できるJavaScriptライブラリ「Rickshaw」 クールなドアノブ風の％グラフを描画できるjQuery Knob
多数のアイテムから目的の物を見つけやすくするjQueryフィルタリングプラグイン集:phpspot開発日誌
30 Useful jQuery Filter and Sort Plugins - tripwire magazine 多数のアイテムから目的の物を見つけやすくするjQueryフィルタリングプラグイン集 沢山のアイテムをずらっと並べただけだと探しにくいわけですが、フィルタリングをすることで目的の物をすぐに見つけられます。 画面遷移もないというのがいいんですが、そういった機能を実装するためのプラグインが３０個もまとまっていて、自分にマッチしたものを探せそうです よくこんなにあったもんだなという感じですが、便利に活用させていただきましょう 関連エントリ レスポンシブな背景画像スライドショーを実現するjQueryプラグイン「bgStretcher」 ユーザへの通知UI全部のせなjQueryプラグイン「noty」 レスポンシブなスライドショーを実装できるjQueryプラグイン「Responsiv
ブラウザ上でサインを書けるjQueryプラグイン「jSignature」:phpspot開発日誌
jSignature ブラウザ上でサインを書けるjQueryプラグイン「jSignature」。 CanvasかFlashで描画出来るので多くのブラウザに対応。ウェブサイトにサインを導入したい場合に使えるかも 実装は以下のように超簡単です <script src="libs/jSignature.min.js"></script> <div id="signature"></div> <script> $(document).ready(function() { $("#signature").jSignature() }) </script> データをSVGのbase64形式で取得できたりもするみたい デモページはこちら サイン書いてみました（＾＾） 関連エントリ アイテムを浮遊させられるjQueryプラグイン「jqFloat」 一見普通のテーブルだけどExcel風に使えるjQueryプ
ストレス無しでGoogleマップを使ったサイトが作れる「gmaps.js」:phpspot開発日誌
gmaps.js ? the easiest way to use Google Maps ストレス無しでGoogleマップを使ったサイトが作れる「gmaps.js」 Googleマップのサイトへの実装が本当に簡単で、かつ多機能なライブラリのご紹介です 簡単なマップを出すのに必要なコードは以下。 表示させるdivと緯度経度を指定するだけです 出来ることリストは以下 マップのクリック、ドラッグ時のイベントハンドラ実装 マーカー付与 ジオロケーション・ジオコーディング マップオーバーレイ マップ上のコンテキストメニュー実装 地図上の区画指定 目的地までのルート描画 静的な画像をマップ表示 などなど超多機能。 Googleマップ使うかもしれない場合は覚えておいて損はありません 関連エントリ Googleマップ関連のjQueryプラグインとチュートリアル集 スマホやタブレットでGoogleマップ風
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
素早く簡単にGoogleマップを導入できるjQueryプラグイン「initmap.js」:phpspot開発日誌
ドラッグ＆ドロップでアップロードが簡単実現できるjQueryプラグイン「Dropzone.js」:phpspot開発日誌