Apacheのディレクトリインデックスをありえない位かっこ良くできる「h5ai」:phpspot開発日誌
h5ai larsjung.de Apacheのディレクトリインデックスをありえない位かっこ良くできる「h5ai」 HTML5の機能を使って、通常の味気ないディレクトリインデックスをかなりかっこ良くしちゃうというものです。 ディレクトリ一覧。アイコンなんかもついてかなりリッチ mod_headersとmod_autoindexというApacheモジュールを応用して作られているようですが、こんなことが出来るとは知りませんでした。 表示方法もアイコンベースに変更することも可能です。これはイカしていますね。 サイドの丸みを帯びた物体にカーソルをあわせるとニュイーンと伸びてツリービューが表示。これまた便利です。 動作デモはこちら デザインは基本的にHTML+CSSなので、あなた好みにカスタマイズすることも可能。 Apacheの味気ないデザインページは嫌だ！というデザイナーさんは覚えておくとよさそう
自動リサイズしつつ手動でサイズも切り替えられるテキストエリア実装jQueryプラグイン「Hycus Textarea」:phpspot開発日誌
自動リサイズしつつ手動でサイズも切り替えられるテキストエリア実装jQueryプラグイン「Hycus Textarea」 2011年06月16日- Auto-growing and re-sizable textarea ? Jquery Plugin - Hycus 自動リサイズしつつ手動でサイズも切り替えられるテキストエリア実装jQueryプラグイン「Hycus Textarea」。 次のような、どんなサイトのデザインでもじゃまにならない、普通のテキストエリアの下にツマミをつけたようなテキストエリアが実装できます。 改行をうって文書が長くなろうと自動でサイズが大きくなる点も特徴。 実装は必要なライブラリを読み込んだら以下１行でOK。 対象もjQueryのセレクタで一括指定も可能。 $('#txtarea').hycustextarea(); ひょっとしてHTML5いらないんじゃないかとい
これは必見かもなYoutube等の埋め込み動画を動的にリサイズするCSS例:phpspot開発日誌
CSS: Elastic Videos これは必見かもなYoutube等の埋め込み動画を動的にリサイズするCSS例。 ブロックのサイズが変更された際において動画を固定サイズにしてしまうとレイアウトが崩れてしまいますが、公開されているサンプルを使うと、HTML5動画、embed/iframeの動画をレイアウトに合わせてCSSで自由に伸縮可能。 解像度の違う、iPhone等でも動作を確認しているそうで、どんな環境でも動画をページにフィットさせたい用途に有用です。 通常サイズ。ブロックいっぱいに広がる動画 幅をiPhoneなみに小さくしてみた例。動画も縮んでます。 IEでも動くみたいです。 これは覚えておいたほうがよさそうです。 関連エントリ フリーで新しめのXHTML/CSSで書かれたサイトテンプレート４５ ぜんぶピュアCSSでやっちゃおうというJavaScriptの代替デモ５６ Ajaxスタ
HTML５でブラウザにドラッグ＆ドロップでファイルアップ可能なjQueryプラグイン「jQuery HTML5 Uploader」:phpspot開発日誌
HTML５でブラウザにドラッグ＆ドロップでファイルアップ可能なjQueryプラグイン「jQuery HTML5 Uploader」 2011年05月26日- jQuery HTML5 Uploader HTML５でブラウザにドラッグ＆ドロップでファイルアップ可能なjQueryプラグイン「jQuery HTML5 Uploader」。 デスクトップからブラウザにドラッグ＆ドロップできたら、初心者の人とかはもっとアップロードが簡単になるはずですね。 HTML5を使って実装されていて、そのUIなんかも面白いUIで提供されていたのでご紹介。当然ダウンロードして使うことができます。 ファイルを画面の割れ目の穴にドロップしましょう。複数ファイルもOKみたい。 なんと、すぐ下にイメージが表示されてアップ開始。進捗表示もできます。 こんなことが出来るんだというのを知っておくだけでもよさそうですが、jQue
複雑なデータ構造のJSONを扱う際にCSSセレクタ風にアクセスできて超便利な「JSONSelect」:phpspot開発日誌
複雑なデータ構造のJSONを扱う際にCSSセレクタ風にアクセスできて超便利な「JSONSelect」 2011年05月25日- JSONSelect 複雑なデータ構造のJSONを扱う際にCSSセレクタ風にアクセスできて超便利な「JSONSelect」 jQuery成功の背景には、そのDOMへのアクセスのしやすさがひとつの要因だと思いますが、JSONSelectを使うと、JSONデータへのアクセスをCSSセレクタっぽく、jQueryっぽく簡単にアクセスできます。 例えば、次のようなJSONデータがあったとしましょう。 JSONSelectで、「.languagesSpoken .language」として選択すると、次のように要素を選択できます。 例えば、検索結果などで、同じ構造の要素がリストとして帰ってくるようなケースにおいて、同じ名前の属性リストをサクッと取得可能。 上位階層が指定できるた
PHPを使う上で、どう書けば高速になるか？をその場で試せるベンチマーク結果満載なサイト:phpspot開発日誌
PHPを使う上で、どう書けば高速になるか？をその場で試せるベンチマーク結果満載なサイト 2011年05月23日- Benchmarks PHPを使う上で、どう書けば高速になるか？をその場で試せるベンチマーク結果満載なサイトがあるようです。 同じことをやるのに複数の書き方があったりしますが、2つの書き方を並べてそれぞれどちらがどれだけかかったかという結果が記載されていて面白いです。 で、そのいくらかかったか？という秒数も、ページ上でリアルタイムに計算され、リロードすると実行され、実行タイムが表示されます。 サイトの作者環境による比較ではなく、その場で動いて何度も試せるので自分でその差を確認できるのがGood。 個人的には長年PHPをやっているのですが知らなかった物も多々あり、非常に勉強になりました。 1回のロードでは結果が変になることもあるので、サーバの負荷にならない程度に数回確認させてもら
もうFlashは買わなくていいかもしれないデザイナー向けフリーのFlashアニメーション作成ツール「Giotto」:phpspot開発日誌
もうFlashは買わなくていいかもしれないデザイナー向けフリーのFlashアニメーション作成ツール「Giotto」 2011年05月11日- 追記）じっくり利用して見た方が以下のような問題点を示してくれました。 ・利用勝手があまり良くなく、日本語環境を前提には、考えていないように思われます。 ・ＡｃｔｉｏｎＳｃｒｉｐｔ の記載方法が不明。 ・モーショントゥイーンの機能不足 レビューを参考にさせて頂く限り、現段階では「Flashを買わなくてもいい」という結論には当然ならないと思います。いつもながら脊髄反射的にエントリにして、不快にさせてしまった方々には申し訳ありませんでした！ 但し、簡易的なアニメーションがフリーで作れるということは有用で、掲載されているサンプルの質も高く、フリーである限り機能のデグレードはある程度しょうがないと思うのと、話題に上がることで今後の発展にも期待していきたいと思い
ChromeをiPhoneシミュレーターにできる拡張「IPSim」:phpspot開発日誌
iPSim - Chrome Web Store ChromeをiPhoneシュミレーターにできる拡張「IPSim」 IPSimを使えばChromeをiPhoneシミュレーターにすることが出来ます。 インストールすると次のようにボタンが追加されます クリックするとシュミレーターが現れます。 縦・横方向での表示が可能。 以下、横表示の例 Chrome自体がWebKitベースなので実機でもそれほと差異がない点にも注目。 ChromeでサクッとiPhone対応したい場合に入れておくとよさそうですね。 関連エントリ PHPのエラーなんかをブラウザで確認できるChrome拡張「php-console」 JavaScriptエラー時にエラーを分かりやすく通知してくれるChrome拡張「JavaScript Errors Notifier」 PHPフロントエンドのコンソールロギング用Chrome拡張「C
WEBサービスを作るなら最低限覚えておきたいPHPのPEARモジュールまとめ:phpspot開発日誌
(追記) 2/16 23時 いくつかのライブラリを追記しました。 WEBサービスを作るなら最低限覚えておきたいPHPのPEARモジュールまとめ。 本家pearには560程のモジュールがあります(2011/2月現在)が、WEBサービスを作る上でよく使う物をまとめてみました。 これからPHPを使ってサービスを作ろうと思っている方は代替を使うことになると思うので参考にしてみて下さい。 php はインストール時点で既に多くの機能が備わっており、大体のことができてしまいますが、PEARを使うことで面倒なことがより簡単にできるようになります。 PEAR以外にも便利なライブラリはあるのですが、今回はあえて殆どをPEARサイトで公開されている物に絞ってご紹介します。 基本的なパッケージ まず、汎用に使える便利なパッケージのご紹介です。 HTTP_Request2 url を渡してリモートのテキストを取って
CSSでリアルでクールなドロップシャドウ効果を描画するサンプル例色々:phpspot開発日誌
CSS drop-shadows without images ? Nicolas Gallagher CSSでリアルでクールなドロップシャドウ効果を描画するサンプル例が色々公開されています。 一昔前なら、どう考えても画像を使っていると思ってしまうこうしたグラフィックもCSSで実現できてしまいます。 パターンも多くて実用的です。ヘッダ、メニュー等、ありとあらゆる部分に応用できそう。 画像編集ツールは一切不要です。 例えば、1個の要素を見てみましょう。 HTML では <div> にclassをふって中身は<p>のみだけというのに、これだけのデザインが実現します。 当然、要素を回転させることも出来ますが綺麗に描画できています。 なんとも夢のような話ですが、CSS3対応の Firefox 3.5+, Chrome 5+, Safari 5+, Opera 10.6+, IE 9+ という大体の
PHPでリッチなショッピングサイトを構築できる「Avactis」:phpspot開発日誌
Ecommerce Solutions | Avactis: Ecommerce PHP Shopping Cart Software PHPでリッチなショッピングサイトを構築できる「Avactis」。 スキンに対応していて見栄えを変えられる他、CSSによるテンプレートデザインが可能。 ショッピングカートや、PayPal等による決済機能、商品管理や注文統計が見れるリッチな管理画面、検索機能などショッピングカート構築に必要な機能は殆どそろっています。 ショッピングサイト画面。ＵＩもamazon風ですっきり見やすい。 スキン切り替えでデザイン変更が容易にできます。 管理画面がとっても多機能です。 今後の発展にも期待したいですね。 関連エントリ PHPで書かれた次世代のショッピングカートシステム「TomatoCart」 フリーで使えるPHP＋MySQLで構築されたショッピングカートシステム「Ze
特定サイトから直リンクされた画像を一発で別の画像にする方法:phpspot開発日誌
他人のブログをパクり無断で公開！ 被害者の対抗策が凄い アメブロ広報「数件の通報が来ている」 - ガジェット通信 特定サイトから直リンクされた画像を一発で別の画像にする方法。 私のブログはともかく、不要な負荷が増えて嫌だなと思う場合に即効できる処置方法をご紹介。 mod_rewriteが入っているサーバ＆.htaccessが利くサーバの場合は以下のように書いて直リンクされた画像のディレクトリに設置します。 RewriteEngine on RewriteCond %{HTTP_REFERER} ^http://ameblo.jp/sfida2010/.*$ RewriteRule ^(.*)$ http://example.com/deny/unko.png [R=301] /images/ 以下に直リンクを受けている画像群がある場合は、/images/.htaccess として保存して下
最初に必要なものだけ効果的に見せるAppleサイト風エフェクト実装jQueryプラグイン「Apple Effect」:phpspot開発日誌
最初に必要なものだけ効果的に見せるAppleサイト風エフェクト実装jQueryプラグイン「Apple Effect」 2010年12月06日- jQuery Apple Effect 最初に必要なものだけ効果的に見せるAppleサイト風エフェクト実装jQueryプラグイン「Apple Effect」。 最近Appleのサイトを見たことがある方なら分かると思いますが、最初に1枚の画像を表示しておいて、ナビゲーションなんかは少し待たせて、フェードインしながら表示するというカッコいい効果を作れます。 最初に1枚の画像を表示 フェードインしながらナビゲーションを表示する こちらのデモで動きを確認 実装は1行。 $('#target').appleEffect(); オプションを渡すことでアニメーション開始までの時間を設定したり、コールバック関数を指定できたりします。 ちょっとめんどくさそうなこの機
30近いウィジェットがセットになったjQueryプラグイン集「Wijmo」:phpspot開発日誌
Wijmo - jQuery UI Widgets 30近いウィジェットがセットになったjQueryプラグイン集「Wijmo」。 jQueryといえばプラグインによって様々なことが出来るのはご存じだと思いますが、Wijmoはこれ1個で30ものウィジェットが実装できるパックです。 UIのデザインをそろえたいような場合に使えそうです。 アコーディオン カレンダー 各種グラフ コンボボックス オーバーレイ 独自フォームデザイン グリッド リスト まだまだあります・・・。 よくここまでそろえたなという品ぞろえですね。 関連エントリ YoutubeやUstream等の動画埋め込みが超簡単になるjQueryプラグイン「jquery.mb.mediaEmbedder」 jQueryでYoutube埋め込みビデオをブロックの幅に合わせるコード 再生ボタン等も変更できちゃうYoutube操作jQueryプラ
サーバ監視に超使える〜topコマンドのまとめ:phpspot開発日誌
サーバ監視に超使える〜topコマンドのまとめ サーバを運用しているとよく使うtopコマンドですが、標準のtop以外にも色々便利なものがあるのでまとめてみました。 ボトルネックといえば、ネットワーク、ディスクIO、スワップ、CPU、メモリといったものが関連しますが、ツールで視覚化することでより分かりやすい対策がとれますね。 htop こちらも、通常のtopよりもさらに多数の情報を表示してくれるツール。 CPUやメモリの状態が視覚的にグラフで表示されていたり、複数CPUがある場合もそれぞれに利用率を表示してくれてわかりやすいです。 pstreeで表示するようなツリー+topコマンドのような表示も t を押せば切り替えられます。 公式サイト上にある128コア積んだマシンのhtop結果が面白い。 次のようにすべてグラフで表示されているため、128コアあったとしても瞬時に負荷が把握できますね。 io
カッコよく動くポップアップでより分かりやすくメッセージを表示出来る「JQUERY BUBBLE POPUP」:phpspot開発日誌
カッコよく動くポップアップでより分かりやすくメッセージを表示出来る「JQUERY BUBBLE POPUP」 2010年11月29日- JQUERY BUBBLE POPUP v.2.3.1 - display animated and shadowed "bubble" popups with few lines of code in jQuery カッコよく動くポップアップでより分かりやすくメッセージを表示出来る「JQUERY BUBBLE POPUP」 カーソルを合わせた際に、単にポップアップするのではなく、ポップアップ自体がフェードインアニメーションしながら動きをもって表示されることでより、利用者の注意をひくことができそうです。 見た目も影付きでカッコいいのが特徴です。 デザインは選べます。 何かにカーソルを合わせた時だけじゃなくて最初から特定のエレメント上に表示しておくこともでき
たった１行でIEでも使えるブロックの角丸を実現できるjQueryプラグイン「Pina」:phpspot開発日誌
Pina たった１行でIEでも使えるブロックの角丸を実現できるjQueryプラグイン「Pina」 pina(20, 'blue', 'classname1'); のようにするだけで角丸が実現できます。 IE6のような古いブラウザにも対応しているのが特徴。 CSS3になって対応ブラウザでは便利になったとはいえ、クロスブラウザ対応というと１行では実現できないので、利用を検討してみてもよさそうです。 pina 関数の第一引数の値で角丸のradiusサイズを指定できます。 関連エントリ CSSで角丸テクニック２５ IEでも動作する画像を超簡単に角丸化できるjQueryプラグイン「IMGr」 角丸を使った可愛いカレンダーピッカー実装JavaScript「jsDatePick」 CSS3で影付き角丸グラデーション付きのボタンを作成するサンプル
スマートフォン用のサイト作成に役立つテスティングツール７:phpspot開発日誌
7 Useful Tools for Mobile Website Testing | Tools スマートフォン用のサイト作成に役立つテスティングツールが７つ紹介されており、便利そうなものをピックアップしてみました。 サイトチェッカー W3C mobileOK Checker W3Cのモバイルサイトチェッカー。サイトのURLを入れるだけで、対応状態を〜％として表示してくれます。 何を改善すればポイントを上げられるか？についても詳細にレポートしてくれるところがいいですね。 mobiReady URLを入力するとサイトのモバイル対応状態をレポート結果として表示してくれる。 レポート結果は次のようになります 機種が微妙ですが、JAVAをつかったシュミレーターで動作確認できたりします Gomez Mobile Website Readiness Test URLのほか必要情報を入れるとサイトのモ
画像自体をBase64エンコードしてHTML内に埋め込んで高速化するPHPコード例:phpspot開発日誌
Base64 Encoding for Images. 画像自体をBase64エンコードしてHTML内に埋め込んで高速化するPHPコード例。 Googleがインスタントプレビューや画像検索で導入してその読み込み速度に驚いた方も多いかもしれません。 その手法をPHPで実現するコードが掲載されていましたのでご紹介。 PHPでやるにはそんなに難しいわけではなさそう。 <?php $img_src = "image/sample.png"; // 画像ファイルの指定 $imgbinary = fread(fopen($img_src, "r"), filesize($img_src)); // バイナリデータを読み込み $img_str = base64_encode($imgbinary); // base64エンコード echo '<img src="data:image/png;base6
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
フォーム要素をクールにするためのjQueryプラグイン集:phpspot開発日誌