これは超使いやすいページネーションの次世代UI:phpspot開発日誌
Slider Pagination Concept - with jQuery UI Slider これは超使いやすいページネーションの次世代UI。 普通、リストページのページネーションといえば、「 1 , 2, 3, 4 ,5 次へ> 」みたいなUIが基本ですが、そもそもこのUI疑ってかかってもいい時期なのかも。 要は現在のページ番号と、ページを前後と、ページ指定で送れればいい、という要件を満たせばいいわけでもっとシンプルに出来るはず。 今回紹介するページネーションのデモ ページ番号の部分はボタン風になっているので押してみましょう。 するとスライダーになってドラッグ＆ドロップでページ指定が簡単に出来ます。 30までドラッグ＆ドロップして話すと30ページ目が開く、というようなイメージ 次へ、前へ、といった直感的に分かりやすいボタンも実装されていて必要十分。 従来のページネーションは作る場合
プリティなURLを実現するための分かりやすい.htaccessサンプル:phpspot開発日誌
プリティなURLを実現するための分かりやすい.htaccessサンプル。 要は、http://site/photo.php?id=hogehoge&page=2 を http://site/photo/hogehoge/page/2/ のようにするためのmod_rewriteの設定になります。 随分前から、その真偽について色々議論されつつもSEOの常識として言われているpretty url。SEO云々もありますが、一目見て分かりやすいという点でも覚えておきたい部分ですが、その実装記述例が公開されています。 いざ実装するとなると参考になる分かりやすいサンプルまでたどり着くのが大変だったりするので覚えておいてもよいかも。 公開されている.htaccessコードは以下で、RewriteRule 部分で正規表現を使ってマッチングさせて、$1 とか $2 とかで値を渡してます。 RewriteEng
Apacheのディレクトリインデックスをありえない位かっこ良くできる「h5ai」:phpspot開発日誌
h5ai larsjung.de Apacheのディレクトリインデックスをありえない位かっこ良くできる「h5ai」 HTML5の機能を使って、通常の味気ないディレクトリインデックスをかなりかっこ良くしちゃうというものです。 ディレクトリ一覧。アイコンなんかもついてかなりリッチ mod_headersとmod_autoindexというApacheモジュールを応用して作られているようですが、こんなことが出来るとは知りませんでした。 表示方法もアイコンベースに変更することも可能です。これはイカしていますね。 サイドの丸みを帯びた物体にカーソルをあわせるとニュイーンと伸びてツリービューが表示。これまた便利です。 動作デモはこちら デザインは基本的にHTML+CSSなので、あなた好みにカスタマイズすることも可能。 Apacheの味気ないデザインページは嫌だ！というデザイナーさんは覚えておくとよさそう
フェイスブックの作ったオープンソース色々:phpspot開発日誌
公開初日に早速フェイスブックの映画、ソーシャルネットワークを見てきました。 サービスを作ってる人は、\1,800はらうだけでやる気を200％ぐらいにしてくれる映画だと思うので費用対効果は安いと思います。 映画の中で、ハーバード大学は2時間で22000アクセスのトラフィックを集めただけで落ちちゃうの？とかナップスターの作者さん遊び上手すぎじゃない？とか、新機能の実装に家かえってから1、2分とか早すぎない？等の、ツッコミどころなんかも楽しめます。 映画の中ではコーディングに関することは殆ど出てこなかったわけなんですが、膨大なトラフィックをさばくためにfacebook自体、多くのオープンソースを公開しているのでdevelopers.facebook.comから紹介してみます。 もうすぐ6億人に届くほどのユーザを扱うためには、想像を絶するインフラや高速化、サーバ間連携の仕組みが必要になるわけですが
サーバ監視に超使える〜topコマンドのまとめ:phpspot開発日誌
サーバ監視に超使える〜topコマンドのまとめ サーバを運用しているとよく使うtopコマンドですが、標準のtop以外にも色々便利なものがあるのでまとめてみました。 ボトルネックといえば、ネットワーク、ディスクIO、スワップ、CPU、メモリといったものが関連しますが、ツールで視覚化することでより分かりやすい対策がとれますね。 htop こちらも、通常のtopよりもさらに多数の情報を表示してくれるツール。 CPUやメモリの状態が視覚的にグラフで表示されていたり、複数CPUがある場合もそれぞれに利用率を表示してくれてわかりやすいです。 pstreeで表示するようなツリー+topコマンドのような表示も t を押せば切り替えられます。 公式サイト上にある128コア積んだマシンのhtop結果が面白い。 次のようにすべてグラフで表示されているため、128コアあったとしても瞬時に負荷が把握できますね。 io
ユーザ登録時にパスワード強度表示を入れてと言われた場合にサクッと実装できるjQueryプラグイン:phpspot開発日誌
ユーザ登録時にパスワード強度表示を入れてと言われた場合にサクッと実装できるjQueryプラグイン 2010年11月15日- SelectBox Plug-in ユーザ登録時にパスワード強度表示を入れてと言われた場合にサクッと実装できるjQueryプラグインのご紹介。 ユーザ登録の際に、パスワード強度を表示するサイトが多くなってきていますが、利用者がパスワードを決める場合に注意が働くためサイト全体としての安全性が高まるという点で効果がありそうですね。 仕事でサイトをつくっていて、あの機能入れてくれといわれた場合に、瞬時に実装できそう。 パスワードが弱い場合は次のように表示されます。 いい感じの場合はGoodが表示されます。 出し方は次のようにメソッドに渡すオプションを変更するだけでかえられます。 IDとパスワードが同じでもエラーを出せたりします。 関連エントリ パスワード生成や年齢計算等、P
PHPアプリのプロファイリングをWebベースで行う「webgrind」:phpspot開発日誌
webgrind - Google Code Webgrind is an Xdebug profiling web frontend in PHP5.PHPアプリのプロファイリングをWebベースで行う「webgrind」。 プロファイリングとは、どの部分にどれだけ時間がかかったかというものを調査することで、ボトルネックの計測に役立ちます。 PHPのプロファイリングというと、Xdebugでログを出力し、そのログをWinCacheGrindやKCacheGrindなどのツールで読み込んでプロファイリングするというものでしたが、Webから読み込めるPHP5でかかれたwebgrindというツールがGoogle code 上で公開されています。 /tmp に吐かれたログをそのまま読み込めるようで、サーバからいちいちログをダウンロードして読み込む必要がなくなります。 PHP開発に活用できますね。
PHPプログラムを解析して何処が重いか？がブラウザ上で簡単に分かる「XHProf」:phpspot開発日誌
PHPプログラムを解析して何処が重いか？がブラウザ上で簡単に分かる「XHProf」 2009年03月25日- XHProf Documentation (Draft) PHPプログラムを解析して何処が重いか？がブラウザ上で簡単に分かる「XHProf」。 通常、PHPでのプロファイリングというと、Xdebugでファイルを吐き出して、WinCacheGrindやKCacheGrindで読み込むというのが定番です。 ですが、この方法だと、ファイルを吐き出したファイルをGETして、ソフトに読み込ませる、というちょっと面倒な手順が必要でした。 XHProf を使えば、ブラウザ上で、プロファイリングが出来るみたいです。 XHProfの特徴 まず、セグメントごとの実行時間やメモリ利用の状況なんかがブラウザで見れます。 プログラムの構造を把握するのにも使えます。 プロファイリングの階層表示 ２つのプロファ
12のPHP最適化テクニック:phpspot開発日誌
12 PHP optimization tips Ilia Alshanetsky’s PHP performance talk given last week at the Zend conference is pretty useful as far as getting small tips for tweaking PHP code. PHP最適化テクニックが紹介されていましたので以下にまとめてみました。 staticメソッドが使えるなら使おう。速度は4倍になる __get, __set, __autoload は使わない require_once は重い include, requireで読み込むファイルはフルパスにしよう スクリプト開始時のUNIXタイムを ＄_SERVER['REQUEST_TIME'] で取れる strncasecmp関数やstrpbrk関数を使えるケースは
jQueryを速攻マスターしたい方におすすめの「jQuery Selectors」:phpspot開発日誌
Selectors jQueryのセレクタ関数を速攻マスターしたい方におすすめの「jQuery Selectors」。 jQueryでの$('code') とかって、最初は何を意味するか分かりませんね。 jQuery selectorsを使えば、ボタンを押すことで、指定したエレメントがハイライト＆アニメーション表示されます。 要素がハイライト。 これは便利です。 関連エントリ jQuery 関連記事まとめ jQueryでリッチなグリッドを実装「jqGrid」 ファイルツリー構造を表示するためのJS「jQuery File Tree」 jQueryを使ってパズルを作るjQueryプラグイン
jQueryを使ったアプリのユニットテスト「QUnit」:phpspot開発日誌
Getting Started With jQuery QUnit for Client-Side Javascript Testing - Chad Myers' Blog jQueryを使ったアプリのユニットテスト「QUnit」。 QUnitはjQuery用のテスティングフレームワークです。 テストは次のように書くみたい test("should hide the element when hide is called", function(){ $("#testDiv").hide(); // actual, expected equals($("#testDiv").css("display"), "none", "The element should be hidden"); }); jQueryでＴＤＤしたい方は使えますね。
超クールな画像スライドショーを実現するためのJavaScriptライブラリ「FrogJS」:phpspot開発日誌
Programming and Designing for the Web FrogJS Javascript Gallery FrogJS is a simple, unobtrusive javascript gallery. It is not a replacement for other thumbnail galleries such as Lightbox JS, but rather a different way of showing galleries. 超クールな画像スライドショーを実現するためのJavaScriptライブラリ「FrogJS」。 以下のデモサイトを見ると分かりますが、今までにない超クールなスライドショーを実装できます。 実装方法は、まずスクリプトを読み込みます。 <script type="text/javascript" src="scripts/p
FirefoxにGUIプロトタイピングの機能を追加するものすごい拡張「The Pencil Project」:phpspot開発日誌
FirefoxにGUIプロトタイピングの機能を追加するものすごい拡張「The Pencil Project」 2008年07月09日- Home - Pencil Project FirefoxにGUIプロトタイピングの機能を追加するものすごい拡張「The Pencil Project」。 Pencil Projectを使えば、予め用意されているGUI部品をキャンバスにドラッグ＆ドロップしてプロトタイプの画面イメージを作成することができます。 ボタンなんかも、ダブルクリックでキャプションを変えることができたり、VisualBasic、VisualC++などのアプリを使って画面デザインをしているイメージに近い操作感が実現できています。 アプリっぽい画面を作ってみましたが、超簡単です。 GUIのスタンドアロンアプリだけでなく、Webサイトにも使うことが出来ます。 HTMLを使って簡単に画面を作
JavaScript圧縮＆難読化ツールまとめ:phpspot開発日誌
JavaScriptのコードはクライアントサイドで動作し、誰にでもコードが読めてしまいます。 あまり自分の書いたコードは読まれたくないもので、せめてコードを読みにくく、ということで難読化のツールが多数公開されてます。 最近のJavaScriptブーム以前よりそういったツールは当然ながら存在するようで、ちょっとまとめてみました。 GUI/コマンドラインツール ObfuscateJS - JAVAで書かれたGUI画面で難読化。改行/タブ除去の他変数名変更 Dojo compressor - JAVAで動作するコマンドラインツール。スペース等除去。サイト上で変換前、変換後のサンプルが見れます JavascriptZIP - JAVAで書かれたJavascriptコード圧縮ツール JSC (JavaScript Compressor) - EXE形式でコマンドラインで使える圧縮ツール オンラインで
flaソースコード付き20のFlashゲームチュートリアル:phpspot開発日誌
Deziner FolioBlog Archive 20 Free Tutorials to Create Your Own Flash Game Flash is a very flexible tool for building games that are both entertaining and educational. However, the software itself is a quite tough to learn and extremely hard to master. flaソースコード付き20のFlashゲームチュートリアルという記事。 チュートリアルがflaコード付きで20個特集されていました。 学ぶだけでなく、プレイしても楽しいゲームがいっぱい。 Flash Racing game tutorial - レーシングゲーム Baloon shooter -
マッシュアップに必須！PHPで複数APIを同時に叩いて超高速化するサンプル:phpspot開発日誌
phpied.com Blog Archive Simultaneuos HTTP requests in PHP with cURL The basic idea of a Web 2.0-style "mashup" is that you consume data from several services, often from different providers and combine them in interesting ways. マッシュアップに必須！PHPで複数APIを同時に叩いて超高速化するサンプル。 通常、PHPでAPIにアクセスする場合、例えば、Yahoo!検索APIとはてなブックマークのRSSを取得してマッシュアップする場合は次の図のようになります。 ただ、この方式だと、Yahoo!検索APIにリクエストし、その結果を待ちます。 そして、そこからはてなブック
ActionScript3用3D物理エンジンライブラリ「WOW-Engine」:phpspot開発日誌
shirotokoro AS3 3D Physics Engine : WOW-Engine WOW-Engine is a free AS3 open source physics engine written by Seraf ( Je Birembaut ) capable to handle positions in a 3D environment. ActionScript3用3D物理エンジンライブラリ「WOW-Engine」。 またまた新しい３Ｄ物理演算ライブラリを発見。 サンプルいろいろ spheres on plane boundArea, sphere spheres and contraints 3D picture rope, box cloth 01 cloth 02 cloth 03 チュートリアル Your First WOW-Engine Applicati
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
PHPを使ってミニブログを作るチュートリアル:phpspot開発日誌
萌え系フォントのまとめ:phpspot開発日誌