地図や動画、なんでも重力を付けてしまえるjQueryプラグイン「box2d-jquery」:phpspot開発日誌
地図や動画、なんでも重力を付けてしまえるjQueryプラグイン「box2d-jquery」 2012年12月19日- franzenzenhofer/box2d-jquery GitHub 地図や動画、なんでも重力を付けてしまえるjQueryプラグイン「box2d-jquery」。 一見普通のサイトに重力を与えることでサイトが崩壊し面白いエフェクトをかけられるjQueryプラグインです。 box2dというライブラリは数年前に話題になりましたが、そのjQuery版がgithubにて公開されています。 重力によってアイテムが崩壊していき、それぞれドラッグ＆ドロップが可能。 デモで面白いのは、地図や動画がマウスで投げられるところ。 動画にも重力。動画は問題なく再生されています。 ゲームに活用したり、エイプリルフールネタや、キャンペーンサイトにインパクトを与えたりと、覚えておけば使えそうですね 関
これは面白い、jQueryとCSSとPHPで作る福笑いの仕組み:phpspot開発日誌
Interactive Image Vamp up with jQuery, CSS3 and PHP | Codrops jQueryとCSSとPHPで作る福笑いの仕組みが公開されています。 ヒゲやリボンといったアイテムを写真上にドラッグ＆ドロップして福笑いっぽい画像に仕立てた上で、サーバに送信し、１枚の画像として保存できるサンプルです。 デモプログラムのダウンロードも可能です。 左下のツマミでパーツの拡大をすることも可能です。 「See result」ボタンで画像化することが出来ます。 追加したパーツはリスト化され、キャンバス上から削除したり、回転させることも可能。 応用して何か面白いものが作れそうですね。
Twitterエンジニアの作ったサイトデザインモック作成ツール「Stylo」:phpspot開発日誌
Open-sourcing Stylo by Alex MacCaw Twitterエンジニアの作ったサイトデザインモック作成ツール「Stylo」。 CoffeeScript, Spine, Sprockets といったテクノロジーを使っているらしいです。 なんかwebkit限定だったりしますが、インタフェースが良い感じに出来ていて、同じようなツールを作るのに参考にすることもできそう。 ツール自体は非常にシンプルで図形を配置して図形をカスタマイズしたり文字を配置したりといったものですが、容易に習得でき快適に動くため素早くモックをブラウザ上で作りたい際に使えそう 単に置くだけじゃなくて、オブジェクトを綺麗に並べるような機能もついており、シンプルだけど、こういう地味に大切なところはちゃんとしています。 Twitterエンジニアが作ったということで、なんとなくインタフェースの印象がBootstr
node.jsに関する基礎や開発・チュートリアルのまとめ:phpspot開発日誌
node.jsに関する基礎やチュートリアルのまとめ。 リアルタイムなWEBを実現するには必須のサーバサイドJS、node.jsについて色々とまとめてみました。 node.js node.jsについて node.js なんとなく凄そうだけどよく分からないという方も多いかもしれないので簡単に解説。 一番最初見た時は何かのJavaScript ライブラリかと思ったのですが、全く違って、V8というChromeにものっている高速JavaScriptエンジン上で動くサーバを動かせる仕組み。 サーバ自体を具体的に言うと次のようなコードで実現します。 var http = require('http'); http.createServer(function (request, response) { response.writeHead(200, {'Content-Type': 'text/plain
スクロールするとカーテンが上がるようにパネルが非同期で動くページが作れるjQueryプラグイン「Curtain.js」:phpspot開発日誌
Curtain.js スクロールするとカーテンが上がるようにパネルが非同期で動くページが作れるjQueryプラグイン「Curtain.js」 単なるスクロールする縦長ページではなく、スクロールするとブロック要素が別々に動いて面白い演出が作れます。 左下のナビゲーションでページ送りをしたりも出来るみたい 今なら、これを使ってサイトを作れば、玄人なWEB業界の人も目を丸くするかもしれませんね。 関連エントリ フルスクリーン背景がスライドショーになるCSS3サンプル レスポンシブなスライドショーを実装できるjQueryプラグイン「ResponsiveSlides.js」 iTunesストアのトップのスライドショー風ウィジェットを実装できるjQueryサンプル HTML5＆CSS3をフルに活用したスライドショー実装ライブラリ「Slider.js」
facebookのタイムラインをjQueryとCSSで作るチュートリアル:phpspot開発日誌
Facebook Timeline Design using JQuery and CSS. facebookのタイムラインをjQueryとCSSで作るチュートリアル。 facebookのタイムラインをみて感動した者です。あのUIを見て自分も作ってみたいけどどうやってるんだろうって言う方もおられると思いますが、そんなタイムラインを実際に作っちゃおうというチュートリアルです. ここまでの応用力があればなんでも考えたUIは作れそうなので、勉強しておくとよいかも 実際のデモページ - 良い感じです 優れたUIが利便性を高めてユーザを集めるというところをfacebookが実証していますが、こうした先進的なUIを作れるようになりたいものですね 関連エントリ jQueryとCSSで実現する押しやすくオシャレなチェックボックス実装チュートリアル HTML5＆CSS3をフルに活用したスライドショー実装ライ
要素をバイブレーションさせられるjQueryプラグイン「jRumble」:phpspot開発日誌
jRumble | A jQuery Plugin That Rumbles Elements 要素をバイブレーションさせられるjQueryプラグイン「jRumble」。 カーソルを合わせる等のアクションをトリガとして、アイテムを自由にバイブレーションして目立たせることが出来るjQueryプラグインです。 利用者の注目を集めたい場所に仕込んでおくことで、かなり注意をひけそう。 メニューなんかもブルブルさせて今の位置を分かりやすくしたりも。 CSS3で回転なんかもできるようになってよりリアルにブルブルしてます。 動きの強さなんかはパラメータで簡単に調整できます。 ユーザビリティを上げるための１つのテクニックとして覚えておいて損はないですね。 追記）CPU利用率が高まるということで利用には注意が必要です 関連エントリ １枚の画像でハイライトする画像メニュー作成が可能なjQueryプラグイン「i
HTML5のキャンバスと連動させて音声をビジュアライズしたデモ:phpspot開発日誌
Music Visualizer in HTML5 / JS with Source Code HTML5のキャンバスと連動させて音声をビジュアライズしたデモ Windows Media Player とかを使ってるとよくあるあの動くやつをHTML5のCanvasを使ってやるものです。 ベースにはEasel.jsというものが使われており、HTML5のキャンバス描画を行っているそう。 直接的にHTML5からオーディオのボリュームデータは読めないため、データを一旦テキストにしてそれを読み込むことで実現しているそう。 実際のデモを見るのが一番いいですね。デモページ デモページその２ バックグラウンドの音声もかっこいいわけなのですが、描画される映像もかなりかっこいいです。 関連エントリ HTML5のcanvasタグで描くグラフ描画ライブラリ「AwesomeChartJS」 HTML5のCanvas
画像要らずのローディング表示を実装できるjQueryプラグイン「Activity Indicator」:phpspot開発日誌
画像要らずのローディング表示を実装できるjQueryプラグイン「Activity Indicator」 2011年01月31日- Activity Indicator 画像要らずのローディング表示を実装できるjQueryプラグイン「Activity Indicator」。 通常こうしたローディングイメージを実装するにはアニメーションgif等で対応しますが、このプラグインを使うと、画像なしに綺麗なアニメーション付きの読み込みエフェクトを実装出来ます。 SVGやVMLを使ってクロスブラウザで動作するように設計されており、なんとIE6等でもＯＫだそう。 背景が何色だって気にする必要もありません。 関連エントリ クリックした位置にそのままローディング画像を出せるjQueryプラグイン「Spinner」 現在ローディング中であることをマウスカーソル近くにちょこんと可愛く出せる「prettyLoade
フェイスブックの作ったオープンソース色々:phpspot開発日誌
公開初日に早速フェイスブックの映画、ソーシャルネットワークを見てきました。 サービスを作ってる人は、\1,800はらうだけでやる気を200％ぐらいにしてくれる映画だと思うので費用対効果は安いと思います。 映画の中で、ハーバード大学は2時間で22000アクセスのトラフィックを集めただけで落ちちゃうの？とかナップスターの作者さん遊び上手すぎじゃない？とか、新機能の実装に家かえってから1、2分とか早すぎない？等の、ツッコミどころなんかも楽しめます。 映画の中ではコーディングに関することは殆ど出てこなかったわけなんですが、膨大なトラフィックをさばくためにfacebook自体、多くのオープンソースを公開しているのでdevelopers.facebook.comから紹介してみます。 もうすぐ6億人に届くほどのユーザを扱うためには、想像を絶するインフラや高速化、サーバ間連携の仕組みが必要になるわけですが
JavaScriptコーディング等を書く上でのパフォーマンス確認事項３０:phpspot開発日誌
30 best practices to boost your web application performance - Web User Interface Architect JavaScriptコーディング等を書く上でのパフォーマンス確認事項３０。 自分へのインプット＆メモがてらにちょっとまとめてみます。 JavaScript DOMの操作は可能な限りやめる eval, new Function() は遅いので可能な限り使わない withステートメントを使わない（使った事ないですが） for-in 文ではなく for 文を使う。 ループの中で try-catch ではなく、try-catchの中にループを置く グローバル変数をなるべく使わない aaa+='AAA';aaa+='BBB'; の方が aaa+='AAA'+'BBB';より速い 複数の文字列連結には、Array で文字列
これは一見の価値ありな、1ページのJSサイト集:phpspot開発日誌
25 Creative Single Page Websites With Awesome JavaScript Effects 一見の価値ありな、1ページのJSサイト集がまとまってます。 1ページとはいえ、JSでページを1ページ内でスクロールするのでコンテンツは複数ページと同等です。 アイデアが秀逸なものが多くて感心するものが多いです MelissaHie ページがパネル風に分かれていて、ページ全体がダイナミックに移動するサイト DanteStyle 横にズラッとページが配置されていてアニメーションで切り替わる Webleeddesign ページが縦にスクロールされるのですが、そのアニメーションがなかなか秀逸です。 Howarths ページをめくる風のUIが実現されてます。 他にも色々あるので真似してみるのもよさそうですね。
FireFox＆EclipseでのJavaScript開発を効率化する「Fireclipse」:phpspot開発日誌
Fireclipse Installation Instructions and Development Notes FireFox＆EclipseでのJavaScript開発を効率化する「Fireclipse」。 Fireclipseを使えば次のことが可能になります。 FireFoxのJavaScript コンソールの結果を Eclipseのコンソールに送る Eclipse上のエディタで、エラー行に移動する Eclipseのコンソールにメッセージを送る FireBug と連携し、FireBugに Eclipseタブを付けられます FireBug用の各種拡張 Fireclipse自体は、Firefoxの拡張と、FireBugの拡張、Eclipseプラグインから構成されます。 JavaScript開発がますます便利になりそうなツールですね。 今後はFirefox上にエディタ等の開発ツールが直
見ておくべきHTML5サイト集:phpspot開発日誌
5 Must See HTML5 Sites 見ておくべき、かどうかは分かりませんが、HTML5の可能性について知ることができるサイト集です。 ビデオ、キャンバス、ドラッグ＆ドロップ、ストレージ等HTML５のデモ集。 サポートブラウザの対応もアイコン付でわかりやすいサイト。 CanvasでWindowsのPaintを実現した凄いサイト HTML５で書かれたサイトのギャラリーサイト。 といった感じでHTML5について学べるサイト集。暇なときに眺めるだけでも予習になりそうですね。 関連エントリ 無茶苦茶カッコいいHTML5ビデオプレイヤー「SublimeVideo」 最近公開のHTML5関連の参考サイト色々まとめ
WEBデザイナ/開発者が覚えておくと便利なブックマークレット集:phpspot開発日誌
15 Must-Have Bookmarklets For Web Designers And Developers WEBデザイナ/開発者が覚えておくと便利なブックマークレット集。 起動すると、その場で画像などの要素をドラッグ＆ドロップでデザインできたりする便利なブックマークレット集です。 ReCSS - Reloads The CSS 起動すると、サイトのＣＳＳが再読込みされ、リロードすることなく見栄えの更新ができる Edit Any Website - ブックマークレット XRAY - See Details Of Any Web Element 起動するとJavaScript製のＤＯＭインスペクタが起動します。 MRI 起動してエレメントをクリックすると、クリックしたエレメントのセレクタが取得可能。 Design - Grid-Rule-Unit-Crosshair 起動すると、4
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
