Slider Pagination Concept - with jQuery UI Slider これは超使いやすいページネーションの次世代UI。 普通、リストページのページネーションといえば、「 1 , 2, 3, 4 ,5 次へ> 」みたいなUIが基本ですが、そもそもこのUI疑ってかかってもいい時期なのかも。 要は現在のページ番号と、ページを前後と、ページ指定で送れればいい、という要件を満たせばいいわけでもっとシンプルに出来るはず。 今回紹介するページネーションのデモ ページ番号の部分はボタン風になっているので押してみましょう。 するとスライダーになってドラッグ＆ドロップでページ指定が簡単に出来ます。 30までドラッグ＆ドロップして話すと30ページ目が開く、というようなイメージ 次へ、前へ、といった直感的に分かりやすいボタンも実装されていて必要十分。 従来のページネーションは作る場合

Keypress: A Javascript library for capturing input キーボードイベントを実装する際に単体で使える軽量JSライブラリ「Keypress」 jQuery等に依存せず、簡単に使えるキーボードイベント実装ライブラリ。単体キーだけでなく、複数のキーの組合せや、キーを押した順によってイベントを発動させることができ、とりあえずキーボードショートカットなんかを入れたいという場合に簡単に使えそうです。 ライブラリを使ったイベント実装コードは以下。Shift+Sで発動する関数を設定しています。 keypress.combo("shift s", function() { console.log("You pressed shift and s"); }); 次のような感じで、キーボードを↑↑↓↓〜という感じに順に打ってイベントを発動させることも可能 keypr

Open-sourcing Stylo by Alex MacCaw Twitterエンジニアの作ったサイトデザインモック作成ツール「Stylo」。 CoffeeScript, Spine, Sprockets といったテクノロジーを使っているらしいです。 なんかwebkit限定だったりしますが、インタフェースが良い感じに出来ていて、同じようなツールを作るのに参考にすることもできそう。 ツール自体は非常にシンプルで図形を配置して図形をカスタマイズしたり文字を配置したりといったものですが、容易に習得でき快適に動くため素早くモックをブラウザ上で作りたい際に使えそう 単に置くだけじゃなくて、オブジェクトを綺麗に並べるような機能もついており、シンプルだけど、こういう地味に大切なところはちゃんとしています。 Twitterエンジニアが作ったということで、なんとなくインタフェースの印象がBootstr

WEBページにExcel風スプレッドシートを設置できるウィジェットライブラリ「dhtmlxSpreadsheet」 2011年12月12日- Web-Based JavaScript Spreadsheet Software - dhtmlxSpreadsheet WEBページにExcel風スプレッドシートを設置できるウィジェットライブラリ「dhtmlxSpreadsheet」。 次のような綺麗なデザインのテーブルを簡単に配置できます。PHPとJavaScriptで書かれていて、データなんかも自分のサーバ上においておけるのが特徴 データベースからのバインディングができたり、PDFやExcel形式でのエクスポートに対応しています。 WordPressプラグインもあるみたいなのでWordPressな方にも使いやすい 色を変えたりSUMしたりと多機能。 関連エントリ これは凄い、Excelの関数

Free Floral Photoshop Brushes | Professional photo gallery | Create and buy flash xml photo gallery 女性向けサイト等に使えそうなイラスト風の花・植物のPhotoshopブラシ集が色々まとまったエントリのご紹介です。 サイトに使うことでサイトがオシャレになったりしそうです。 これは絶対に使えそうですね。 関連エントリ ハイクオリティなPhotoshopブラシをダウンロードできるサイト色々まとめ 100以上のクールなPhotoShop用ブラシがダウンロードできる「getbrushes.com」 動物に関するPhotoshopブラシ色々 クリエイティブでカッコいいPhotoshopブラシセット５０

新卒さん向け、速攻でプログラミングをマスターできるvimプラグイン「quickrun」 2011年04月25日- 新卒さん向け、速攻でプログラミングをマスターできるvimプラグイン「quickrun」。 この春、会社に入って、サーバに入って vim でプログラミングさせられている人はそれなりにいそうですが、その場合に速攻でプログラミングをマスターできるquickrunプラグインを入れておきましょう。 プログラミングを覚えるには作って動かすが一番いいですが、「書いて」→「保存して」→「実行して」を一瞬で行えます。 具体的にはプログラムを書いていて、コマンドモードで「￥r 」をタイプするだけでペインが分かれてプログラムの実行結果が得られます。 VPSなどを借りて、これからプログラミングをはじめようって方にも有効です。 かなりインスタントに実行できるので、こう書くとこう出る、がサクサク進められる

Amazon EC2を使う前に知っておきたいこと色々。 仕事でEC2を使っているのですが、やって見る前に思い描いていたことと、実際にやってみると相違があったりしました。やる前に知っておくといいことをまとめてみました。 EC2を使う予定の方は参考まで。 それでは早速。 インスタンスの 32bit か 64 bit に注意する EC2では負荷が高くなったらハイスペックなインスタンスに変えればいいというのがありますが、32bitのOSイメージを64bitのインスタンスに入れることは出来ません。 最初はsmallインスタンス(最近ではmicro)から始まると思いますが、32bit でいうとハイスペックなもので High CPU のインスタンスまでになっています。それ以降は64bitなので、そこで環境を作り替えないといけなくなります。 とはいえ64bit環境はLargeからで安いとはいえないので、こ

ColorPicker 0.6 軽量かつ柔軟にカスタマイズが可能なJavaScript ColorPicker。 次のような様々なUIデザインを選べる上に、CSSでデザインできるカラーピッカーです。 カラーピッカーは色々ありますが高機能な部類に入るのではないでしょうか。 特定のライブラリに依存しない点もいいですね。 １つの選択肢として覚えておいてもよいでしょう。 関連エントリ JavaScriptで使えるカラーピッカー作成ライブラリまとめ リッチなカラーピッカーウィジェット「Free Advanced DHTML Color Picker」 単体で使えるJavaScriptカラーピッカー「DHTML Color Picker」 PhotoShopのカラーピッカーそっくりなカラーピッカー「JavaScript Color Picker」

jQuery Calculator フォームに簡易電卓を組み込める「jQuery Calculator」。 要素をクリックすると簡易電卓を出せ、計算結果をそのままinputの内容として挿入することが出来ます。 クリックで次のようなUIの計算機が表示されます。 適当に計算して、「Use」ボタンを押せば数値が入ります。 JavaScript で自動的に計算して代入してあげることも出来るのですが、利用者が独自に計算をしてフォームに値を入れたいような場合に使えそうですね。 関連エントリ フォーム要素にうっすらデフォルト値を入れてヒント表示できる「jQuery Form Tips」 ドロップダウンメニューにテーブルやフォーム等何でも埋め込んでしまえるjQueryプラグイン「MegaMenu」 ブラウザが落ちてもフォーム内容が消えないようにするjQueryプラグイン「jQuery autosave」

Catch My Fame New jQuery LightSwitch Plugin iPhoneのON/OFFスイッチっぽいcheckbox、radioボタン実装jQueryプラグイン「LightSwitch」。 次のようなUIで、チェックボックスやradioボタンと同じ働きをするUIを作ることが出来ます。 true, false で on/ off を切り替えるUIと、それらがDisabledになった例 radioボタンと同じ動きをする例。１個をyesにすると他がnoになります。 デモはこちら checkboxはありましたが、radioとして動くのは無かったかもしれませんね。 関連エントリ iPhoneのON/OFFを実現するjQueryプラグイン「iCheckbox」 iPhoneスタイルのチェックボックスをjQueryで簡単実装 何を入力したかが分かるiPhoneスタイルのパスワ

Wrapping Long URLs and Text Content with CSS ? Perishable Press 長い文字列が続いて文字がはみ出してしまうのを防止するCSSが公開されてます。 CSS2/3, Opera4-7, Mozilla, IE5+ 用にクロスブラウザで動作するようにCSS例が示されていて参考になります。 通常だと文字がはみ出してしまうのを、はみ出さないようにしてくれるCSSです。 ハミ出しを防いでくれます。 対応したつもりが実は特定ブラウザだけっていうことがよくありそうなこの現象、この対策で簡単に対応出来そうです。 関連エントリ JavaScript使ってないのに使ってる風のピュアCSSなテクニック集 便利なＣＳＳテクニック３０選 CSSリストに関する5つのテクニック集

IEにも対応！ブラウザ上でローカルにストレージを作るJavaScriptライブラリ「jStorage」 2010年05月25日- jStorage - simple JavaScript plugin to store data locally IEにも対応！ブラウザ上でローカルにストレージを作るJavaScriptライブラリ「jStorage」。 基本はHTML5のストレージを使いますが、対応していないブラウザは、例えばIEではuserDataを使ってデータを格納します。 ライブラリ内でクロスブラウザ対応はしてくれるので、利用者はただ jStorageのメソッドを呼び出すだけでストレージを利用できます。 ブラウザごとのサポートと、ストレージサイズは以下。IE6,7 が 128KBと、比較的小さいですが、それなりに大きなデータを保持できることが分かります。 基本とするフレームワークライブラ

これは凄い、Excelの関数も使えちゃうスプレッドシート実装jQueryプラグイン「jQuery.sheet」 2010年01月26日- jQuery.sheet これは凄い、Excelの関数も使えちゃうスプレッドシート実装jQueryプラグイン「jQuery.sheet」。 参照に対応していて、A1 に 2 が入っていたとして、A2に「=A1*2」とするとちゃんと4と表示されたり、色々なおなじみのExcel 関数(ABS, AVERAGE, CEILING, COUNT, IF, MAX, MIN, PI, ROUNDなど)をそのまま使うこともできてしまいます。 デモページ 単にソート機能がついたり、そのまま編集できるだけではなく、本当にExcel っぽいところがすごいですね。 デザインは上記固定ではなく、色々なデザインテーマを適用することもできるようです。 あと、実装もjQueryプラ

大量のリストから目当てのものを瞬時に探せるようになるjQueryプラグイン「LiveFilter」 2010年01月20日- jQuery Plugin: LiveFilter 1.0.1 | Mike Merritt | Digital Inferno 大量のリストから目当てのものを瞬時に探せるようになるjQueryプラグイン「LiveFilter」。 １ページ内にリストが多く表示されていると探すのが大変ですが、LiveFilterを使えば瞬時に対象を探すことができます。 インプットボックスに検索したい文字列を入れると、一気に対象が絞り込まれ、好みのものがすぐに見つかるでしょう。 そんなの、グーグルツールバーやページ内検索を使えばいいじゃないか、という方もいると思いますが、それらの存在が知らない初心者の方に向けたページの場合は威力を発揮しそうです。 パソコン中級者や上級者の方に向けても、

ブラウザが落ちてもフォーム内容が消えないようにするjQueryプラグイン「jQuery autosave」 2010年01月19日- rikrikrik.com - jQuery autosave plug-in ブラウザが落ちてもフォーム内容が消えないようにするjQueryプラグイン「jQuery autosave」。 データを編集中にフォームに書き込んでいて、ブログ記事などが消えたりするとても悲しい気持ちになりますが、このプラグインを使えばデータをブラウザのクッキーに保存してくれて、次にアクセスした時にリストアできるという素晴らしいプラグインです。 クッキー保存のため、サーバに保存する必要はないですし、手軽に使うことができそうです（ブラウザごとにクッキーに依存した文字数制限などは存在すると思います） こういうことを１からやろうとすると結構大変ですが、毎度のことながら、jQueryプラグ

リッチ過ぎず、どんなページにも馴染みそうなWYSIWYGエディタ実装jQueryプラグイン「wkrte」 2009年12月21日- リッチ過ぎず、どんなページにも馴染みそうなWYSIWYGエディタ実装jQueryプラグイン「wkrte」。 普通、JavaScript で動くWYSIWYGエディタというと、大きなツールバーがついていて、それ自体はカッコいいのですがページデザインにうまく馴染ませることが難しかったりします。 wkrte なら、エディタにカーソルがフォーカスしない状態だとツールバーを表示せず、普通のテキスト領域（textarea）のように表示させられます。 何もはいってない状態だと、一見普通のtextareaです 内容が入ってもツールバーがないので目立ちすぎず、いい感じです。 カーソルを合わせるとツールバーが表示。これはとてもスマートですね。 高機能なテキスト編集を実現しつつ、ペ

GoogleMapみたいに画像をズーム＆グリグリ移動できるjQueryプラグイン「Mapbox」 2009年12月01日- GoogleMapみたいに画像をズーム＆グリグリ移動できるjQueryプラグイン「Mapbox」。 自分で実装するとなるとかなり骨が折れそうなこの機能もjQueryプラグインで簡単に実装できるみたいです。 マウスホイールでズームし、ドラッグして地図移動が可能 ズームとか移動のコントローラーを付けることも可能で、これなら初心者にも簡単に気付いてもらえますね。 設置はjQueryを使うので、マークアップでズーム用に画像を数枚置いておき、$("#viewport").mapbox({mousewheel: true}); のように初期化するだけでOKです。 オプションも多数あるのでカスタマイズも出来ます。 ズーム前後に実行できるイベントハンドラも設定可能なので、柔軟性が高い

テーブルのユーザビリティを飛躍的に向上させる「Chromatable」。 Chromatableはテーブルのヘッダーを固定させ、テーブルの要素にスクロールバーを付けることができるjQueryプラグインです。 普通のテーブル Chromatableで初期化 次のようにスクロールしてもヘッダー位置はそのままで非常に分かりやすい。 実装方法 実装方法も超簡単で、JSコード自体はたったの１行で実装可能。 <!-- ライブラリ読込み --> <link href="css/style.css" rel="stylesheet" type="text/css" /> <script type="text/javascript" src="jquery.chromatable.js"></script> <!-- 初期化方法１ --> <script> $(document).ready(functio

少ないスペース内でコンテンツをグリグリスクロールさせられるjQueryプラグイン「Flips」が公開されています。 小さな枠を３分割させてページをスライドさせるなど動きとしてもおもしろいコンテンツスクローラーになっています。 少ないスペースに色々なコンテンツを置くような場合に参考にできそうです。 デモページを見るとその凄さが分かる筈。 jQueryなので次のように実装も超簡単です。 $('#flips1').flips( { autorun_delay:0, direction: 'left' } ); 詳細・ダウンロードは以下のページを参照してください。 FLIPS | jQuery Plugins

オンラインで綺麗にJavaScriptのコードを整形できる「Online javascript beautifier」。 WEBで拾ったソースコードがインデントされていなかったり、ブックマークレットを読むような場合に使えます。 若干不具合あるようですが、自分でコードを元に戻すのに比べるとはるかに楽ですね。 タブを変換したりも出来るみたいです。 以下のエントリを参照してください。 Online javascript beautifier