tableから複数キーワードでフィルタリングできるjQueryのプラグイン・Multifilterのご紹介です。非圧縮でも2KB以下と、とても軽量です。大量な情報を含むtableにあると便利そうですね。 tableコンテンツのフィルタリング用スクリプトです。プラグイン自体はとっても軽量で、導入も楽なのでなかなか使いやすい気はします。 こういうの。デモを用意しました。 尚、データはなんちゃって個人情報を利用させて頂いています。 $('.foo').multifilter()使い方もシンプル。上記のようにtableを指定。 <div class='filters'> <div class='filter-container'> <input autocomplete='off' class='filter' name='名前' placeholder='名前' /> </div> <div c

Web制作時にあるとちょっと便利なツールをセットで公開しているQuirkToolsのご紹介です。今の所は4つほどですが、今後増えると嬉しいですね。 現在はワイヤーフレームツール、サイトマップの作成ツール、レスポンシブWebデザインの表示確認ツール、スクリーンのデータを教えてくれるツールの4つが公開されています。

ベーシックなjQueryのWYSIWYGエディタです。結構使いやすそうだったので備忘録。よくあるWYSIWYGエディタの機能はほぼ揃っています。軽量との事ですが、一般的な軽量サイズが分かりませんので触れないでおきます。 ベーシックなWYSIWYGエディタを実装するスクリプト。軽量と書いてありましたが、WYSIWYGエディタの標準サイズを把握していないのでこの辺はご自身で判断頂ければと思います。 こんな感じ。テキストの装飾やレイアウト調整、顔文字等以外にYoutubeの貼り付けやフルスクリーンモードへの切り替えも出来るようになっています。 <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> <link rel="styles

可愛いアイコンフォントがあったのでメモ。アイコンフォントなので用途は限られてしまいますが、覚えておいても損は無いかなぁと思います。 シンプルで可愛いアイコンフォントです。

スマフォサイト用のパララックス実装スクリプトがあったので一応メモ。使用は未定ですけど、ちょっと面白かったので覚えておこうと思います。 ジャイロセンサーの値を取得してパララックス効果をスマフォで実装する、というもの。用途は限られそうですけど、使い方次第では面白いコンテンツが作れるかもしれませんね。 PCサイトではマウスの位置で、スマフォでは本体の傾きに応じてパララックス効果を確認出来ます。 $('#foo').parallax();jQueryまたはZeptで使えるみたいです。 <ul id="foo"> <li class="layer" data-depth="0.00"><img src="layer6.png"></li> <li class="layer" data-depth="0.20"><img src="layer5.png"></li> <li class="layer"

スライドを簡単に作成し、シェアやEnbed、編集も手軽に出来るWebサービスのご紹介。見た目もクールで管理もしやすく、日本語も問題無いのでなかなか便利そうです。 全画面やカルーセルっぽい見た目にも出来るスライド作成サービスです。貼り付けもできるのは結構いいかも。 スライドを作成、シェア出来る、というもの。他サイトに貼り付けるEmbed機能とかPDFやパワポをアップロードして作成、とかも出来ます。 ↑ スライド作成画面はこんな感じ ↑ スライドを1枚ずつ作成。上記のようにテキストでも作れます。WYSIWYGを利用するので楽そうですね。 ↑ 各シェアサイトで共有も出来ます。また、Embed機能もあるので他サイトに自由に貼り付ける事も。 なかなか良い感じです。要アカウントですがFacebookやTwitterのアカウントも利用可能です。手軽にお試しになられては如何でしょう。 projeqt

ファビコンに更新通知の数字バッジ等をアニメーション付きで表示させるスクリプト・favico.jsのご紹介です。メールやソーシャルサイトなどで最近よく見かける、ファビコン通知バッジを実装します。 メールを受信したり、投稿があったらファビコンに数字を表示させる、というもの。アニメーションエフェクトもあるので目が行きやすいかも。対応ブラウザは若干限られます。 更新があると数値が増える。増える時にアニメーションで数値が変わる、みたいなの。動作デモはスクリプトの配布サイトで確認出来ます。 var favicon=new Favico({ animation:'slide' //アニメーションエフェクトの指定 }); favicon.badge(1);エフェクトは上記のようにセッティングします。 var favicon=new Favico({ bgColor : '#5CB85C',//背景色 te

なんとなく情報が少ない気がするので試しに 書いてみます。WordPressで運営している サイトでYoutubeをよく貼るようなことが多い ならちょっとお得、というか管理が楽になる かも知れないTipsをいくつかご紹介。自分 でも動画を使うサイトには取り入れたいカス タマイズです。 Youtubeをよくはってるサイトやブログを良く見かけますので少しでも効率が良くなればなぁと思ってTipsをいくつか書いてみました。コードばかりで何があるか分かりくいですが内容は以下になります。 ショートコードで動画を貼る カスタムフィールドで管理する z-indexが自動で効くようにしてあげる レスポンシブWebデザインに対応させる Youtubeのサムネイルを取得する 管理画面で固定の動画を管理する ショートコードで動画一覧をドバッと出せるプラグイン・TubePress ショートコードで動画を貼る ショート

画像とかをフワフワ動かすやつです。 指定した要素を、指定どおりに継続 的にサイト内で動かします。CPUの 問題とかもあると思うので多用は 出来ないと思いますが、よく見かけ るといえば見かけるので一応メモ。 オブジェクトにフローティング効果を与えます。キャラクターのあるキッズ、ファミリーをメインターゲットとしたWebサイトなんかと相性良さそうですね。 いろいろと画像が動きます。自動で動くものもあれば、マウスホバーで、クリックでアニメーションがスタートする、なども設定可能みたいです。 見た方が早いですかね。公式デモです。 Demo デモでは画像のみになっていますが、ボックス要素を丸ごと動かしていますので、テキストにしても同じ動作をしてくれます。 IEでも動く。 iPhoneでも動く。 コード<script src="http://ajax.googleapis.com/ajax/libs/jq

ちょっと適切なタイトルが思い浮かばな かったのですが、指定した要素を沢山 配置してアニメーションでランダムで 移動させる、というjQueryプラグイン。 デモでは、よく見かけるパーティクルで 作成したホタルっぽいエフェクトを用意 しています。 タイトルじゃ良く分からないと思いますのでデモをご覧下さい。 itsfireflyで使われているエフェクトのオマージュみたいですね。ホタルっぽいエフェクトです。 Canvasとかじゃなくて、画像を直に指定してランダム表示させてアニメーションで動かすプラグイン、みたいな感じ。cssのpositonとz-indexで背景化しています。画像を変えれば違った表現も出来ますねー。プラグインも軽量です。 コード <script type='text/javascript' src='http://ajax.googleapis.com/ajax/libs/jque

ちょっと便利そうだったので備忘録。テキストが長いコンテンツをコンパクト化するスクリプトです。方法はいろいろありますけど、こちらは高さ指定という点がシンプルで良かったです。 「続きを読む」リンクを挿入できる、というもの。先発スクリプトは文字数の指定が殆どですが、こちらはボックスの高さを指定するタイプになります。 動作サンプル 続きを読む、のリンクが加わっていますが、特に要素を追加する必要が無いので既存コンテンツに導入しやすそう。 コード<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.js"></script> <script src="readmore.min.js"></script>本体とプラグインを読み込みます。 $('article').readmore({ maxHeight: 110 })

WordPressをOpneID対応にする プラグイン・Make Your Site Social のご紹介です。世界中の様々な ソーシャルサービスのアカウントを OpenIDとして提供するGigyaを WordPressに適応させるプラグイン になります。 備忘録。WordPressをOpenID対応にします。Gigyaというサービスがあって、WordPressにもプラグインという形でサポートしてくれています。僕も未検証なのでメモということでご了承下さい。 ログイン画面がこんな感じに。対応しているサービスは海外のものが中心ですが、TwitterやFacebook、Googleなど、日本でも身近なサービスにも対応しているのでこれはこれでアリなんじゃないかと。 APIキーとか入れるだけで動くみたいです。ログイン後のリダイレクトも指定できます。 Gigyaのアカウントが必要 Make Your

木目が好きです。だからやります、木目素材祭り。 木目のアイコン、フォント、テクスチャや PhotoShopブラシ、WordPressのテーマ、 おまけに僕が衝動買いした木目アイテムも 合わせてご紹介します。木目好きの 僕にはヨダレ物のエントリーです（自己満足 ※ライセンスには十分ご注意下さい。 木目アイコンいろいろWood RSS Feed Icons クールなRSSアイコンのセット Wood RSS Feed Icons Glossy Waxed Wood Icons Social Media Logos 高級感ある木目アイコン108個セット。単体でもDL可能。 Glossy Waxed Wood Icons Social Media Logos Made Of Wood 木目調のフォルダアイコン。かっこいい。 Made Of Wood Wooden Slick Drives coolな

フラットでシンプルなデザインのアイコンを大量に配布しているIcons DBのご紹介。全て商用利用が可能で、帰属表示も不要との事です。サイズもかなりの種類で用意してくれているので、テイストが合うならいいかもですね。 フラットなデザインのアイコンを大量に配布してくれているサイト。著作権は以下のような感じらしいです。 All icons can be used freely in both personal and commercial projects with no attribution required, but always appreciated. 全てのアイコンは商用利用も可能で帰属表示も要らないそうですが、著作権を放棄したわけではないとの事なのでその辺だけご注意です。 使いやすそうなアイコンが沢山あります。カテゴリもかなり多い。 サイズも8種、フォーマットも4種揃っていて、色違い

css3のアニメーションプロパティ、transitionがとても面白いので何となくアニメーションのサンプルを色々と作ってみました。まだ対応ブラウザは少ないですが、将来の為に予習してみたのでシェア。 css3のtransitionプロパティは変化を与えるプロパティです。アニメーションを実装できるプロパティはtransitionとanimetionがあり、後者のほうが「アニメーション」としての位置付けっぽいのですが、今回は何となくtransitionを使用しました。 プロパティ：-webkit-transition 対応ブラウザ：webkit系(GoogleChrome、Safari等) JavaScript：未使用 （※ソース閲覧の部分はjsを使っています） 一応アニメーション以外（角丸など）は-mozも入れています。 サンプルなので「-webkit-transition: *s ease-