普通のテーブルを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
クロスブラウザでのJavaScriptキーボードイベントの扱い方:phpspot開発日誌
JavaScriptでのキーボードイベントの処理はブラウザによって違っていて、クロスブラウザで動作させるためには、それぞれのブラウザに合ったコードを実行し分ける必要があります。 JavaScriptでキーボードイベントを取得し、どのキーコードが押されたかを判別するサンプルを以下に示します。CtrlキーやShiftキーが押されたかどうかなどのチェック方法も併せて示しています。 このサンプルを活用することで、Webアプリケーションにショートカット機能をつけ、より使い勝手のよいWebアプリケーションを作成する手助けになるはずです。 以下、サンプル。 <html> <title>クロスブラウザでキーボードイベントを処理する方法</title> <!-- js コード --> <script type="text/javascript"> document.onkeydown = function(
iOSで使えるHTML5ベースのYouTubeプレイヤ実装jQueryプラグイン「TubePlayer」:phpspot開発日誌
iOSで使えるHTML5ベースのYouTubeプレイヤ実装jQueryプラグイン「TubePlayer」 2012年12月26日- jQuery YouTube TubePlayer Plugin - By Nirvana Tikku iOSで使えるHTML5ベースのYouTubeプレイヤ実装jQueryプラグイン「TubePlayer」。 スマホ、タブレットが増えてPCユーザが減少していっているサービスをちらほら聞きますが、こうした実装でスマホでYoutube動画再生？問題ない、という状況にしておくとよさそう。 当然、Flashによるフェイルバックも対応しています。 プレイヤーのコントロール用APIも使いやすそう。 誰でも簡単に使えそうなところがよいですね 関連エントリ Youtube動画とSlideshareのスライドを同期して再生できる「Presentz」 Youtube動画をページ
これは超使いやすいページネーションの次世代UI:phpspot開発日誌
Slider Pagination Concept - with jQuery UI Slider これは超使いやすいページネーションの次世代UI。 普通、リストページのページネーションといえば、「 1 , 2, 3, 4 ,5 次へ> 」みたいなUIが基本ですが、そもそもこのUI疑ってかかってもいい時期なのかも。 要は現在のページ番号と、ページを前後と、ページ指定で送れればいい、という要件を満たせばいいわけでもっとシンプルに出来るはず。 今回紹介するページネーションのデモ ページ番号の部分はボタン風になっているので押してみましょう。 するとスライダーになってドラッグ＆ドロップでページ指定が簡単に出来ます。 30までドラッグ＆ドロップして話すと30ページ目が開く、というようなイメージ 次へ、前へ、といった直感的に分かりやすいボタンも実装されていて必要十分。 従来のページネーションは作る場合
Bootstrapで矢印を描くのなら「Bootstrap Arrows」:phpspot開発日誌
Bootstrap Arrows Bootstrapで矢印を描くのなら「Bootstrap Arrows」 全国の矢印好きの諸君。こんにちは。もうPhotoshopで矢印を描いて画像を作ってアップロードなんていうことは必要ない。 <span> に簡単なclassをつけるだけで、向きも、長さも、色だって、自由自在。 しかも、次のような美しい矢印が描画できる。センス云々の話ではなく、class="arrow" として rel で角度を指定するだけで美しい矢印が描けるのだ。 色んなUIライブラリはあれど、矢印まで描けるとなるともう選択肢は限られる。 これでBootstrapを使わない理由は一切なくなったのだ。 関連エントリ TwitterBootstrapベースのWYSIWYGエディタ「bootstrap-wysihtml5」 Twitter BootStrap に追加できる５つのコンポーネント
Youtube動画とSlideshareのスライドを同期して再生できる「Presentz」:phpspot開発日誌
Presentz Youtube動画とSlideshareのスライドを同期して再生できる「Presentz」 Youtube動画の再生秒数に応じてSlideShareのスライド画面を切替えたりすることができます。 動画を見ながら途中で手動でスライドに切り替えるようなプレゼンを見ることもあったりしますが、 動画を見せながら、スライドも同時に表示してプレゼンすることもできそう Youtube動画とSlideshareの同期画面。下部にあるバーでチャプターを切替えられます 関連エントリ Youtube動画をページ背景にするjQueryプラグイン「tubular」
Twitter BootStrap に追加できる５つのコンポーネントパック「FuelUX」:phpspot開発日誌
Fuel UX Twitter BootStrap に追加できる５つのコンポーネントパック「FuelUX」 コンボボックス、データグリッド、ピルボックス、検索、スピナー等のコンポーネントがセットになって配布されています。 どのコンポーネントも元がいいだけにかなりクールなデザインになっています。 ますますサイト作りがリッチに、そして楽しくなりそうです 関連エントリ Twitter Bootstrapでカッコいいカルーセルを実装するサンプルとチュートリアル Twitter Bootstrapじゃなくfacebook Bootstrap？「Fbootstrapp」 Twitter Bootstrap で使えるカラーピッカー＆日付ピッカー TwitterBootstrapベースのテーマやテンプレートが入手できる「WrapBootstrap」 綺麗なUIのサイトがサクサク組めるTwitter Boo
textareaのキャレットを細かく制御する関連jQueryプラグインまとめ:phpspot開発日誌
textareaのキャレットを細かく制御する関連jQueryプラグインまとめ ちょっと調査をする必要があったので調査したのですが、あとで忘れそうなのでブログに書きつつシェアです。 textarea内のカーソル位置に何かテキストを入れたい、今のtextarea内でのカーソル位置を知りたい、といった場合、クロスブラウザの事を考えると結構面倒なのですが、そういう際に使えるjQueryプラグイン集です。 カーソル位置にタグを挿入したりする場合なんかに覚えておくとサクっと実装できて良い感じです。 caretPos http://d.hatena.ne.jp/tubureteru/20110101/p1 textarea内でのカーソル位置を数値で設定したり、カーソルの位置を取得することが可能。 jCaret http://www.examplet.buss.hk/jquery/caret.php te
動画以外を暗転させて動画を見やすくしてくれるjQueryプラグイン「Allofthelights.js」:phpspot開発日誌
動画以外を暗転させて動画を見やすくしてくれるjQueryプラグイン「Allofthelights.js」 2012年09月26日- Allofthelights.js, jQuery plugin to turn off the light and enjoy your videos 動画以外を暗転させて動画を見やすくしてくれるjQueryプラグイン「Allofthelights.js」 通常Youtubeの動画などはページ内に貼り付けてそのまま見ますが、ページデザインががやがやしていて見づらいという場合があります。 そんな場合にこのプラグインを入れておくと、動画以外を暗くして動画が見やすくなるというもの。 スイッチで電気を消す、的なイメージ。 動画再生と同時に暗くなるようなものだともっとカッコいいかもしれませんね。 関連エントリ 動画ギャラリー用WordPressプラグイン10個 画像や
リストを複数行に自動で分割してくれるjQueryプラグイン「Easy List Splitter」:phpspot開発日誌
リストを複数行に自動で分割してくれるjQueryプラグイン「Easy List Splitter」 2012年09月13日- jQuery plugin: Easy List Splitter リストを複数行に自動で分割してくれるjQueryプラグイン「Easy List Splitter」。 ul li 等でリスト定義すると縦に長〜くなってしまいますが、これを複数行に分割して横長にしてくれるプラグイン。 レイアウト上、分割したいんだけど、めんどくさいんだよなぁ、という方も、ライブラリを読み込んで、$(element).easyListSplitter({ colNumber: 3 }) みたいにやれば３列にしてくれます。 なんということでしょう。 地味〜かもしれませんが、これは便利だと、殆どのマークアップエンジニアの方は首を揃えて頷いてくれるでしょう。 関連エントリ ツイッターのつぶやき
FirefoxやChromeでも使える！FlashとJSを使ってクリップボードにテキストをコピー出来るライブラリ「zeroclipboard」:phpspot開発日誌
FirefoxやChromeでも使える！FlashとJSを使ってクリップボードにテキストをコピー出来るライブラリ「zeroclipboard」 2009年01月19日- zeroclipboard - Google Code The Zero Clipboard library provides an easy way to copy text to the clipboard using an invisible Adobe Flash movie, and a JavaScript interface.FirefoxやChromeでも使える！FlashとJSを使ってクリップボードにテキストをコピー出来るライブラリ「zeroclipboard」。 クリップボードへテキストコピーというと、IEだけ、とか、他のブラウザ対応にはハックが必要で面倒、みたいな印象がありますが、zeroclipbo
ドラッグ＆ドロップでファイルをアップできるHTML5のデモ:phpspot開発日誌
Creating a Complete HTML5 Drag and Drop File Uploader with jQuery | InsertHTML ドラッグ＆ドロップでファイルをアップできるHTML5のデモ。 デスクトップなどからファイルをブラウザにドロップしてサムネイルを表示→ボタンを押下でアップロード実施というインタフェースのアップローダ実装デモです。 ソースをDLしてそのまま使うことも可能です。 ドロップするとサムネイルと共にボタンが表示されます。 ボタンを押すとファイルがアップロードされます。 使い慣れるといちいちダイアログからファイルを選ぶのが馬鹿らしくなりますね。 サンプルにはPHPスクリプトもおまけでついてきますが、値をValidateしていなかったりするため、実際に利用するには注意が必要そうです。 関連エントリ これは必見のWEBデザインの近未来。HTML5で構築
Photoshopレイヤーに他のPSDをリンクできて便利なプラグイン「CanLinkIt」:phpspot開発日誌
CanLinkIt Photoshopレイヤーに他のPSDをリンク・共有できて便利なプラグイン「CanLinkIt」。 こちらのプラグインを使うとよく使うアイテムを別PSD化して再利用可能にできるみたい。 例えば、ボタンのよく使う画像があるとします。 別PSDファイルのボタンを読み込んで使えます。デザインを変更すると・・。 すべてのボタンに適用されます。標準でこういう機能がなかったのか、という感じになりますが便利ですね。 よく使うものはライブラリ化しておくと、一括して編集を反映できるのでUIライブラリとかを作る場合に便利かもしれませんね。 関連エントリ PhotoshopでデザインしたシェイプをCSS3に変換するプラグイン「CSS3Ps」
ドラッグ＆ドロップでアイテムを移動できる階層ツリー実装jQueryプラグイン「Nestable」:phpspot開発日誌
ドラッグ＆ドロップでアイテムを移動できる階層ツリー実装jQueryプラグイン「Nestable」 2012年07月19日- Nestable ドラッグ＆ドロップでアイテムを移動できる階層ツリー実装jQueryプラグイン「Nestable」。 次のような綺麗なリストを下位の海藻までドラッグ＆ドロップで自由に移動できる所がポイント。 jQuery使っているとはいえ一から実装すると大変そうですが、簡単に実現できてしまいます。 折りたたみも可能です 階層データをJSONで吐き出すこともでき、データの保存も簡単。またそのデータを元にツリーの描画も可能ということで便利。 関連エントリ ブラウザ上でサインを書けるjQueryプラグイン「jSignature」 ページめくりを実現するためのjQueryプラグイン集 レスポンシブなカルーセル実装jQueryプラグイン「Slastislide」 アイテムを浮遊
美麗なグラフを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プラグイン「jQuery Verbose Calendar」:phpspot開発日誌
これは新しい!クールなタイル状の年間カレンダー実装jQueryプラグイン「jQuery Verbose Calendar」 2012年05月21日- jQuery Verbose Calendar - Brought to you by John Patrick Given これは新しい!クールなタイル状の年間カレンダー実装jQueryプラグイン「jQuery Verbose Calendar」。 方眼紙に数字が書かれたようなデザインでオシャレなカレンダーが実装できます。 もう見慣れたありきたりなカレンダーにはうんざりだぜ、という方には朗報ですね カーソルを合わせたら曜日も出ます。日付をクリックしたあとのコールバックも初期設定できます 実装コード例です 既にあるものをリデザインしてカッコよくする、というのもデザインですが、新しいインタフェースを定義してこれまでとは違った使い勝手を提案できる
テーブルを簡単にカッコよくスタイリングできるjQueryプラグイン「tablecloth.js」:phpspot開発日誌
テーブルを簡単にカッコよくスタイリングできるjQueryプラグイン「tablecloth.js」 2012年05月08日- tablecloth.js テーブルを簡単にカッコよくスタイリングできるjQueryプラグイン「tablecloth.js」 $('table').tablecloth() と記述で簡単にテーブルをカッコよくスタイリングできます。テーマも選べる模様。 ソート可能にしたり、ストライプなデザインにしたりといったカスタマイズも可能。 実装できるデザイン例。Twitter Bootstrap と組み合わせたテーマ２種類とその他２種類のテーマがデモとして表示されています 意外と手間取るテーブルデザインですが、こうしたものを参考に美しくデザインしたいものですね 関連エントリ CSS3でクールな角丸テーブルを作る例 シンプルにテーブルにソート機能を持たせるだけのjQueryプラグイ
キーボード不要でMySQLクエリを組み立てられるChromeアプリ「MyQuery Builder」:phpspot開発日誌
キーボード不要でMySQLクエリを組み立てられるChromeアプリ「MyQuery Builder」 2012年04月26日- Chrome ウェブストア - MyQuery Builder キーボード不要でMySQLクエリを組み立てられるChromeアプリ「MyQuery Builder」 MySQLに接続してテーブルの情報を読み取ることでスキーマなどを情報を元にクリックでポチポチやるとクエリが出来てしまうツールです。 テーブル間でJOINするような複雑なクエリも視覚的に組み立てる事ができるので、便利な場合がありそうです ドラッグ＆ドロップでテーブルのJOINが可能。チェックボックスにチェックすると、取得したい物を選択できて通信費節約のためのクエリがかけます SELECTだけではなくて、「Utility Query Editor」のタブにてUPDATE、DELETEの他クエリについても組
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
レスポンシブ対応等済みのフレッシュ＆フリーなWordPressテーマ集:phpspot開発日誌
node.jsで超カッコいいリアルタイムチャット「Balloons.IO」:phpspot開発日誌