IFrame内もレスポンシブ対応にするjQueryプラグイン「ResponsiveIframes.js」 2012年10月09日- ResponsiveIframes.js IFrame内もレスポンシブ対応にするjQueryプラグイン「ResponsiveIframes.js」 ページ内や画像をレスポンシブ対応にするものはありますが、ページ内に貼りつけたiframeでさえもブラウザサイズに応じて伸縮させることができます。 単にiframeのサイズを変えるだけじゃなくてiframeの中身のサイズも変えなくてはいけないため、結構大変そうですがライブラリで簡単に対応できそうですね 関連エントリ ブロック要素の高さを簡単に揃えられるjQueryプラグイン「equalize.js」 Gmailスタイルのemoticonを実装できるjQueryプラグイン クリックで水滴を落としたようにアニメーションさ

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

equalize.js ブロック要素の高さを簡単に揃えられるjQueryプラグイン「equalize.js」 $('#height-example').equalize(); などとすれば、幅や高さを瞬時に揃えることが出来ます。 ↓こんな感じに↓ 高さだけではなくて、 ↓幅も同様に全部揃えられます↓ カラムの高さを揃えることでスッキリできますが、簡単にできるのは有難いですね 関連エントリ 画像レイアウト関連で便利なjQueryプラグイン等まとめ アイテムをドラッグ＆ドロップで画面レイアウト出来るjQueryプラグイン「gridster.js」 コンテンツ幅に対してテキストを最大にして美しくレイアウトできる「BigText」

Codiad by Fluidbyte コーディングもブラウザ上でできるオープンソースソフトウェア「Codiad」 PHP5.3ベースで動作するオープンソース。ターミナル不要でブラウザの上でコードが書けるというのはなかなか便利かも。 自分のサーバに設置できるので試してみても良いかも。セキュリティには注意したいところですけどね。 ムービー 関連エントリ オープンソースのブラウザ上で動作するIDE「WIODE」

New iPhone 5 and iOS 6 Features for HTML 5 Developers | Mobile Zone iOS6で使えるHTML5の変更点等がまとまっている模様。 Web Audio APIや、CSS3の強化等変更点が一目でわかります。 とりあえず、シェアを考えるとすぐに使える、というものではありませんが、先取りしておきたい方はチェックしておくといいかもしれませんね。 ページが縦に長くなったことで、今後のスマホサイト作りにも多少なりと影響が出てきそうですが、キャッチアップしていきたいところですね。 関連エントリ 一度見ておいたほうがよい美しすぎるiOSアイコンのデザイン４６ 超気合の入ったiOSアプリケーションアイコン４０ iOSのAppアイコン作成用PSDテンプレート 秀逸なiOSアプリケーションアイコンのサンプル色々

lenticular.js - tilt-controlled images iPhoneの傾きで画像を回転させられるようにする「lenticular.js」 パソコン、iPhoneの両方で見て頂きたいですが、iPhoneでアクセスした場合はiPhoneの傾きと同時に画像が回転。 パソコンで見ればマウス位置に応じて画像を回転させることができます。 近い未来のECサイトではこういう形で商品を見ることができるようになっているのかも。 今後、他にも傾きを使って色々とWEBサイトもどんどん便利になっていくのかも 関連エントリ iPhoneアプリ作成に使えるPSD素材集１０ iPhone風のあのスクロールをPCでも実現できる「jQuery.flickable」 iPhoneのON/OFFスイッチをHTML5/CSS3の形式でジェネレート

Swipe JS - a lightweight mobile web slider 軽量のスワイプ可能なスマホ用スライダーJS「SwipeJS」 <div><ul> でリストを定義して<div>をJSで初期化するだけでスワイプでページ送りができるスライダーが簡単実装できます jQueryに依存していないため、軽量。カスタマイズ項目も必要最低限となっているようです 関連エントリ PCでもスマホでもスワイプで画像を送れるギャラリー実装jQueryプラグイン「Asketic Swipe Gallery」 iPhone等でもスワイプで画像を送れるカルーセル実装jQueryプラグイン「Roto」 スマホのタッチイベントを一気に実装できる13KBの軽量ライブラリ「QUOjs」

Yannis Chatzikonstantinou / Freetile.js アイテムをタイル状に並べる新しいjQueryプラグイン「Freetile」 LightBoxばりに流行ったこのレイアウトプラグインですが、新しいプラグインが出た模様。 プラグインは色々ありますがそれぞれ使い勝手が違ったりするので１つの選択肢として覚えておいてもよさそうですね 使い方は以下のように簡単で、オプションでアニメーションするかなどのシンプルなオプションが選べる模様です $('#container').freetile(); 関連エントリ 画像レイアウト関連で便利なjQueryプラグイン等まとめ

Free UX Sketching And Wireframing Templates For Mobile Projects | Smashing UX Design スマホアプリのモック作成に役立ちそうな用紙テンプレート。 やっぱりアプリの設計は手書きで、という方に便利そうなテンプレートが公開されています。 スマホアプリ開発に活用できそうです。 紙に枠を書くよりも気持ちが乗ってきそうなテンプレートですね 関連エントリ スマホのタッチイベントを一気に実装できる13KBの軽量ライブラリ「QUOjs」 スマホ用サイトに使えそうなドロップダウン実装jQueryプラグイン「DropKick」 スマホサイトでも使えそうなかっこいいドロップダウンメニュー実装jQueryプラグイン「ddSlick」 スマホ関連のリモートホストのまとめ

The Creation of a CSS3 Clickable, Rotating Menu | InsertHTML クールな円形メニューをピュアCSS3で実装するチュートリアル。 クリックすると回転したり良い感じに立体感が出ていたりアニメーションしたりCSS3の機能をフルに使った円形メニュー。 奇抜なメニューであっと驚かせたいという場合に使えそうです デモページ メニューアイコンもしっかり回転されています。 関連エントリ アニメーションするクールな円形メニューが実装できるjQueryプラグイン「MobilyBlocks」 ピュアCSS3で作られた「path.com」っぽい円形メニュー実装デモ jQueryとCSS3を使ったPath風の円形メニューサンプル ゲームに出てきそうな円形メニュー実装jQueryプラグイン「Pretty Pie Menu」

jQuery.flickable - Demo iPhone風のあのスクロールをPCでも実現できる「jQuery.flickable」 スクロールしすぎると元に戻るスマホのスクロールをPCのブラウザで実現できます。 ドラッグ＆ドロップしてタッチ操作っぽくスクロールすることも可能で、素早く操作すればその分素早く移動したり、スマホでの動作そっくり。スマホでもそのまんま動くという優れもの スライダーっぽいものも作れて、iPhoneのホーム画面っぽいものも作れます 国産というところもいいですね。 これがOS標準で搭載されたらいいのにってぐらいによいライブラリでした。 関連エントリ スクロールしてもposition:fixedでウザくない感じのナビゲーション実装ライブラリ「stickyMojo」 ページ内スクロールならコレにおまかせ！なjQueryプラグイン「Page Scroller」 使うときだ

Modern UI Icons ７５３種の使えるWindows8風アイコンセット「Modern UI Icons」。 シンプルで汎用的に使えそうなアイコンセットで、覚えておいて損はないアイコンセットです 利用すればサイトがしっかりした印象になるだけでなくWindowsユーザが利用すれば、WindowsのUIと親和性の高いページが作れそうです 関連エントリ RetinaディスプレイOKなアプリ用PSDアイコン350 ６００以上のシンプルなベクターアイコンが入手できる「iconmonstr」 綺麗にデザインされたピクトグラムアイコン100個セット

スクロールしてもposition:fixedでウザくない感じのナビゲーション実装ライブラリ「stickyMojo」 2012年09月10日- stickyMojo contained fixed position sticky sidebar jquery plugin スクロールしてもposition:fixedでウザくない感じのナビゲーション実装ライブラリ「stickyMojo」。 一昔まえだとスクロールする度にアニメーションして酔ってしまうようなナビゲーションが通常でしたが、FacebookのPC版右カラムのようにposition:fixedをうまく使ってページに固定されるナビゲーションを簡単に実装できます。 スクロール位置に応じてナビゲーションを固定するため、シームレスに固定されるのが特徴。 ページを開いた所 ページをスクロールした所。ページの左上に常に固定されるので、途中で移動し

Image2Base64 | Image to Base64 Data URIs Converter Using the new HTML5 File API by Acid.JS | Version 1.0 画像を選ぶとbase64形式のURLに変更してくれる便利ツール「Image2Base64」。 ページを開くとダイアログが出るので、ローカルからファイルを指定するとブラウザ上に表示され、それをクリックすると、data:image/jpeg;base64〜の形式に変更してくれ、imgのsrc属性や、CSSのbackground:url の中にそのまんま指定できる便利ツールです。 とりあえず画像はimgでインラインとしてHTMLに埋め込んだり、CSSの中に埋め込んで高速化したいような場合に便利に使えるツールですね 対応ブラウザがもっともっと増えていけば一般に使えますね 関連エントリ ブラウ

Parallax Scrolling Scripts and Plugins | Impressive Webs パララックス効果を作るスクリプトやプラグインのまとめ。 最近では国内でもちらほら見かけるようになったパララックスなデザイン。 一言にパララックスといっても色々な実装があり、どれも斬新なものになっていて、見ておくだけでも参考になるであろう物が満載 こういう今では真新しいような技術も数年後には新しいテクニックが出てきていて、陳腐化したり応用されて汎用的なものになったりと今後も技術の進歩が楽しみですね 関連エントリ パララックス効果をダイナミックに使ったスライダー実装jQueryチュートリアル パララックス効果を使った秀逸なjQueryスライダー実装チュートリアル＆サンプルDL

elektronaut/jquery.livetwitter @ GitHub ツイッターのつぶやきをリアルタイム検索してサイトに表示できるjQueryプラグイン「liveTwitter」。 Twitter標準のつぶやきをリアルタイムで表示できるウィジェットがありますが、俺はみんなが使ってるデザインは嫌だぜ、という方はこうしたプラグインでちょっと見栄えを変えて表示することが出来ます。 JS単体で動くということで自分のサーバにもやさしい。 関連エントリ Twitterエンジニアの作ったサイトデザインモック作成ツール「Stylo」 PHPフレームワークにTwitter,Facebook等の認証を速攻実装できる「Opauth」 綺麗なUIのサイトがサクサク組めるTwitter Bootstrapを使ったjQuery UIテーマ「jQuery UI Bootstrap」 FacebookやTwit

Create.js - A new kind of web editing interface ページレイアウトそのままに見たまま編集が出来るようになるライブラリ「Create.js」。 起動すると、コンテンツテキストが編集可能になり、ページ上のツールバーを使って太字などの文字修飾ができ、そのままSaveボタンで保存できるという非常に使いやすい編集ツールとして使えます CMS等に実装するといいのかもしれません ページ全体をWYSIWYG編集可能にするモードもIEにはあったりしましたが、これは編集させたい部分だけを編集できるようになるという所がよいです。 ページ全体を下手に編集可能にするとデザインが崩れたりして大変であったりしますが、コンテンツ部分のテキストのみ編集可能にすればそういうことがないですね。 関連エントリ HTML5ベースの音声入力可能なWYSIWYGエディタ「wysihtml5

フォーム内容が正規表現にマッチしなかったらヒント表示ができるjQueryプラグイン「InputNotes」 2012年07月12日- InputNotes jQuery Plugin フォーム内容が正規表現にマッチしなかったらヒント表示ができるjQueryプラグイン「InputNotes」 文字をタイプしていて、エラーがある場合はその場で表示してくれるプラグインです。正規表現によって入力ルールを定義出来るのが特徴 数字は禁止のtextarea。数字を入れると「Do not type numbers!」となります 数字だけを入力するルールの場合。 数字なら色を変えてOK、みたいな表示にできる フォームのバリデーションの１選択肢として使えそうですね 関連エントリ クレジットカード番号をバリデートできるjQueryプラグイン「Smart Validate」 お絵かきでCAPTCHAできるようにす

Swatch Book with CSS3 and jQuery | Codrops 超リアルな単語帳っぽいものを作るCSS3＋jQueryチュートリアル。 次のような綺麗なデザインの単語帳っぽいものを実装するチュートリアルです。クリックすればインタラクティブに回転等を加えながら動くのが特徴です。 CSS3によって秀逸にデザインされているため、質感はかなり美しく、更にアニメーション等の動きが加わることでよりリアルになってます。 若干動きがもっさりしているようですが、一度見ておいて損はないデモです 一昔前は、ちょっとWEBのデザインが上手であればプロに間違われるなんてこともありましたが、こういうのが当たり前になってくると、プロとアマの差がどんどん広がってくるのかもしれませんね。 関連エントリ CSS3でシャレオツなリストを作るチュートリアル コンテンツをアニメーションさせつつ切り替えるタブを

CSS3Ps PhotoshopでデザインしたシェイプをCSS3に変換するプラグイン「CSS3Ps」 CSS3でちょっと凝ったオブジェクトを作りたい場合に、Photoshopがそのまま使えてCSS3にコンバートしてくれます。 CSS3で描画した驚きのグラフィックス、というのも、こうしたツールを活用すると驚きのCSS3グラフィックスでもなんでもなくなるのかも。 シェイプをデザインします グラデーションなんかもつけつつ プラグインのボタンをクリックで出力。そのまんま。 画像じゃないから軽いという点もポイントですね 関連エントリ CSS3でシャレオツなリストを作るチュートリアル アニメーションするバナーをCSS3で作るチュートリアル CSS3で出来たクールなLightBox実装チュートリアル CSS3で描かれたシェイプのサンプル集