クリック位置のヒートマップを作成できるオープンソースやサービス色々:phpspot開発日誌
7 Incredibly Useful Tools for Evaluating a Web Design | Six Revisions An effective web design is one in which your users are able to find information quickly and in a logical fashion. WEBデザインの評価に便利なツールが紹介されていました。 ヒートマップによってサイトのクリック位置なんかを解析できるものが色々。 ClickHeat - クリック結果のヒートマップ集計、表示用オープンソースツール よくクリックされる位置を表す、次のようなヒートマップ解析をPHP＆MySQLで設置可能みたい。なんと日本語化もされている。 オープンソースなので、自由にカスタマイズしたり、ASP側の制限なんかもなくてよさそうですね。
高速なCSSアニメーションをJSで制御できる「animo.js」:phpspot開発日誌
animo.js ? Labs by Big Room Studios 高速なCSSアニメーションをJSで制御できる「animo.js」。 jQueryベースで利用でき、$(element).animo(args)として簡単に利用が出来ます 個人的にはCSSよりもとっつきやすいなぁという印象です。CSSアニメーションはハードウェアアクセラレーションで環境によっては速いですしね。 コード例。 関連エントリ バウンスさせたりできるページのアニメーションスクロール実装jQueryプラグイン「AnimateScroll」 画像にマウスオーバーでリアルに立体化する3Dアニメーション実装デモ 光ながらアニメーションさせるエフェクト作成jQueryプラグイン「Flare」 レスポンシブ対応でCSS3アニメーションを使った超クールギャラリー実装プラグイン「S Gallery」 フラットだけど立体的なCSS
スマホの傾きを検出してParallax効果を作れる「parallax.js」:phpspot開発日誌
parallax.js スマホの傾きを検出してParallax効果を作れる「parallax.js」 キャンペーンサイトなどでやると印象がグッとアップしそうなエフェクトが作れるっぽいですが、このデモは必見ですね。 画像は以下のようにulでリスト形式にしてレイヤーをずらす形で実現されるようです。 やってることの割りにはJSで比較的簡単に実装ができそうです 関連エントリ レスポンシブなパララックス効果付きサイトを作るフレームワーク「CoolKitten」 パララックスなスライダーを実装できるjQueryプラグイン「FractionSlider」 パララックス効果を作るスクリプトやプラグインのまとめ レスポンシブでタッチ対応な軽量なスライダー実装jQueryプラグイン「Unslider」
画像の縮小やトリミングに便利なPHPクラスライブラリ「Zebra_Image」:phpspot開発日誌
Zebra_Image, a lightweight image manipulation library written in PHP 画像の縮小やトリミングに便利なPHPクラスライブラリ「Zebra_Image」 転送量や速度の観点からPHPの画像を縮小したり、またはサイズをそろえてきれいに並べるなど扱いやすくする際にもリサイズを行いますがそういった処理を簡単に行えるようになるクラスライブラリのご紹介です。 元の画像 背景を指定しておき、２００ｘ２００ピクセルなど指定したサイズにまるめるメソッド。 元画像は一切、切り取られることなく縮小され、指定の画像サイズにできます 指定幅サイズに単に縮小 ２００ｘ２００ピクセルなどを指定した場合、指定ピクセルいっぱいに広がるようにサイズ調整して切り抜く方法 GDで１から書くと結構めんどくさかったりするのでこうしたもので簡単にやっちゃいましょう 関連
WebGLではなくSVG、CANVASを使った迫力ある3D表現デモ「Flat Surface Shader」:phpspot開発日誌
Flat Surface Shader WebGLではなくSVG、CANVASを使った迫力ある3D表現デモ「Flat Surface Shader」 新たな可能性を感じるデモ。 WebGLに対応していない環境がおおいなか、こうしたcanvas等を使った3Dっぽい画面が作れるライブラリ等が出てくれば一気に広がるのかもしれませんね 関連エントリ 3Dのキューブのアニメーションで迫力あるエフェクトを付けられるjQueryプラグイン「HexaFlip」 ドラッグで回転する3Dオブジェクトが作れる「ThreeSixty」 CSS3の3D Transformで3Dのホバーエフェクト実装例 ブラウザ上でまるで美術館。3Dイメージギャラリーデモ 3D Transformsを使った次世代の3Dサイドメニュー実装スクリプト「Meny」
木をイメージしたデザインのフォント２０:phpspot開発日誌
20 Beautiful Wood Fonts for your Inspiration 木をイメージしたデザインのフォント２０。 次のような木をモチーフにデザインされたフォントが２０種類紹介されています。 家具等のサイトを作るのに使うと面白いのかも。 かなりアメリカンなイメージでもありますが、参考までに。 関連エントリ ブラウザ上でアイコンを選んでアイコンフォントが作れる「IcoMoon」 アイコンフォントをコマンドラインで生成できる「Font Custom」 ピクトグラムが美しいシンプルなフォントアイコン「CONDENSE」 メジャーなアプリケーションのアイコンフォント「Pictonic」
ソーシャルサイトのピクトグラムアイコン112個セット:phpspot開発日誌
Dribbble - Socialtograms by Steffen Nrgaard Andersen ソーシャルサイトのピクトグラムアイコン112個セット。 イラストレータ形式(ai)で入手できて使い勝手が良さそう。変に加工されておらず、公式と同じデザインになっているので、わかりづらくなることもないでしょう。 mixiのアイコンも入ってます（＾＾） 関連エントリ 手書き風だけどリアルなソーシャルメディアアイコンセット１５ シンプルデザインが使いやすそうなソーシャルカウンター「SocialCount」 ソーシャルサイトへのシェアボタンのデザインを統一させられるjQueryプラグイン「Koottam」 Meteorで構築されたReddit風のソーシャルニュースサイト作成OSS「Telescope」
ネットワークのオフラインを検知して処理を実行できる「Heyoffline.js」:phpspot開発日誌
Heyoffline.js ネットワークのオフラインを検知して処理を実行できる「Heyoffline.js」 フレームワークレスで動いて、onOfflineとかonOnlineとかのイベントハンドラを設定して、オフライン、オンライン時に処理を実行できるみたい。 スマートフォンなんかで、何かを入力してしまっていて、送信ボタンを押したらサーバがオフラインですっていうのは避けたいところなのでこうした仕組みで送信ボタンのアクティブ状態を変更するのも１つの手ですね 家や会社のパソコンは常時接続でオフラインの心配はなくなった、とおもいきやスマートフォンの電波が悪い状態や地下鉄、といったことを考えるとこういう仕組みは必要かもですね 関連エントリ 様々なグラフを描画できるJavaScriptライブラリ「NVD3.js」 ブラウザ上でRubyプログラムをJavaScriptに変換して実行できる「Opal」
面白いテキストアニメーションが簡単に実現できるjQueryプラグイン「Textualizer」:phpspot開発日誌
Textualizer | K. Risk - JavaScript Refined 面白いテキストアニメーションが簡単に実現できるjQueryプラグイン「Textualizer」 テキストが歯抜けの状態から、アニメーションしながらテキストが埋められたり、既存アルファベットから別の文字列に変化させたりと、面白いテキストアニメーションが実現可能。 実際にデモを見ていただくのが一番分かりやすいです。 スピード等もオプションで指定可能。 $(element).textualizer( param ); で簡単に実現 テキストアニメーションならFlash、というような時代もありましたが、JavaScriptの方がお手軽でいいな、という時代になった気がします。 関連エントリ 面白いテキストアニメーションが作れるjQueryプラグイン「textualizer」 テキストを部分的にカッコよくアニメーショ
BackgroundImageでスプライトアニメーションさせるjQueryプラグイン「AniDG」:phpspot開発日誌
BackgroundImageでスプライトアニメーションさせるjQueryプラグイン「AniDG」 2012年11月30日- jQuery Plugin for Cartoon-like Background Image Sprite Animation ? AniDG ? (alernative to animated Gif) HTML, HTML5, CSS, CSS3, JQuery, Flash, Photoshop, mobile, iphone & ipad web application BackgroundImageでスプライトアニメーションさせるjQueryプラグイン「AniDG」。 １枚の画像をJavaScript を使い、背景画像を順番に切り替えていくことでアニメーションさせられます background-image の書き換えなので、要素の中に何か入っていてもよい
サーバ側でCSSを保存したら直ぐにCSSが反映されるようにできる「CSSreflesh」:phpspot開発日誌
CSSrefresh - automatically refresh CSS files サーバ側でCSSを保存したら直ぐにCSSが反映されるようにできる「CSSreflesh」。 CSSでのデザインに注力したい場合、リロードが面倒ですが、１秒ごとにファイルの更新状態をチェックして更新されていたら反映してくれるというのがこのCSSreflesh。 毎秒サーバへリクエストに行くので、本番環境では当然NGですが、開発中にCSSデザインを組む際には便利に使えそうです。 ブラウザ上で即時反映されるようなツールもありますが、環境に応じてこうしたツールを使って効率化したいところですね 関連エントリ Photoshopのグラデーションツールの操作感でCSSグラデーションを作れるツール CSSスプライト実装が誰でも簡単にできるツール「Spritebox」
世界を目指す人に：ブラウザ上で翻訳ファイルを作れる「Weblate」:phpspot開発日誌
Weblate - Web based translation 世界を目指す人に：ブラウザ上で翻訳ファイルを作れる「Weblate」 ブラウザ上で翻訳を文言毎に行い、ファイルを作ってGitにコミットしたりもできます。 アプリやWEBアプリの国際化の際に使えそうですね。 翻訳画面。翻訳補助ツールなんかも付いています。 言語ごとに翻訳の進捗を一覧できたりもします Djangoで作られているそう。 関連エントリ Google翻訳をPHPから使って翻訳できるクラスライブラリ ブログを58の言語に瞬時に対応させるWordPressプラグイン「GTranslate」 多言語のサイトやアプリケーションの作成に無料で使える「String」
カードを華麗に動かすアニメーションの実装ｊQueryプラグイン「Baraja」:phpspot開発日誌
Baraja: A Plugin for Spreading Items in a Card-Like Fashion | Codrops カードを華麗に動かすアニメーションの実装ｊQueryプラグイン「Baraja」。 カードをシャッフルしたり広げたり、自在に操るアニメーションエフェクトを作成できるjQueryプラグイン。 こんなアニメーション機能が、ほとんどのブラウザでも使えたらまさに次世代になったなぁと実感できるのかも。 将来的はWEBはもっともっとリッチになっていそうです 関連エントリ アニメ映画のようなロゴアニメーションを実現するjQueryアニメーションプラグイン「SuperScrollRama」 クリックで水滴を落としたようにアニメーションさせられるｊQueryプラグイン「jQuery.twinkle」 ２Dゲームが作れそうなアニメーションjQueryプラグイン「Motio」
ブラウザ上でRubyプログラムをJavaScriptに変換して実行できる「Opal」:phpspot開発日誌
Opal: Ruby to Javascript compiler ブラウザ上でRubyプログラムをJavaScriptに変換して実行できる「Opal」 Opalを使えば、ブラウザ上での処理をJavaScriptで書けます。Opal-query なる、jQueryのようなライブラリも存在するようです 処理速度的には当然落ちるので実用的かどうかは分かりませんが、面白いことをする人がいますね。 そういえば、PHPも、昔はPerlで書かれていて、ここまでポピュラーな言語になるとはその当時思われなかったのかもしれない存在なので今後流行る可能性もあるのかも。 関連エントリ 様々なグラフを描画できるJavaScriptライブラリ「NVD3.js」 JavaScriptのコードでPDFを生成できる「jsPDF」
様々なタイプのスライダーが作れるjQueryスライダープラグイン「Jquery Slider Shock」:phpspot開発日誌
様々なタイプのスライダーが作れるjQueryスライダープラグイン「Jquery Slider Shock」 2012年11月13日- Jquery Slider 様々なタイプのスライダーが作れるjQueryスライダープラグイン「Jquery Slider Shock」 ウェブ上から超細かくパラメータを調整して、独自のスライダーを作ることが可能です。 既存のスライダープラグインを落としてみたけれど、どうもこだわりの挙動にはならない、とお悩みの場合に使えそうです。 パラメータ調整画面「BuildYourOwn」ボタンで現れ、カスタマイズが容易に行えます 画像切り替えのエフェクトも大量のエフェクトから選択が可能です。 関連エントリ CSS3を使ったクールなスライダー実装jQueryプラグイン「slideControl.js」 軽量のスワイプ可能なスマホ用スライダーJS「SwipeJS」 これは新
CSSスプライトをブラウザにD&Dで速攻作れる「Instant Sprite」:phpspot開発日誌
Instant Sprite - Generate CSS Sprites Instantly CSSスプライトをブラウザにD&Dで速攻作れる「Instant Sprite」 D&D対応ブラウザ（Chrome等で）ローカルから複数ファイルをドラッグ＆ドロップしてみましょう。 ドロップした時点でCSSスプライトが完成してしまいます。 ２枚の画像をアップした結果。 すぐにCSSスプライトとして利用可能 要らないファイルがあったら、その場でクリックですぐ消せたりと色々便利です 関連エントリ CSSスプライト実装が誰でも簡単にできるツール「Spritebox」 CSSスプライトでカッコイイボタンを作るチュートリアル CSSスプライトを使ったナビゲーションメニュー作成サンプルとチュートリアル jQueryで行うFlashみたいなスプライトアニメーションのチュートリアル
機能全部入りアップローダー実装jQueryプラグイン「Fine Uploader」:phpspot開発日誌
Fine Uploader a.k.a valums file-uploader 機能全部入りアップローダー実装jQueryプラグイン「Fine Uploader」。 プログレスバー付きでアップロード後の即時サムネイル表示、ドラッグ＆ドロップアップロード、複数ファイルアップロード対応など全部入り。 BootStrapのテーマにあわせることもできます。IE7移行も対応しています。 モダンなアップローダーを作るなら１つの選択肢になりそうです 関連エントリ 画像選択時にサムネイルが出て分かりやすい進捗付きjQueryファイルアップローダー「jQuery File Upload Demo」 HTML5を使ったファイルアップロード用プログラム集
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Facebookアプリ風パネルメニューのCSS実装デモ「cssPanelMenu」:phpspot開発日誌
Node.jsとMongoDBを使ったHTTP監視ツール「Uptime」:phpspot開発日誌
HTML、CSS、JSでiPhoneアプリのプロトタイプが作れる「Ratchet」:phpspot開発日誌