画像要らずのローディング表示を実装できるjQueryプラグイン「Activity Indicator」:phpspot開発日誌
画像要らずのローディング表示を実装できるjQueryプラグイン「Activity Indicator」 2011年01月31日- Activity Indicator 画像要らずのローディング表示を実装できるjQueryプラグイン「Activity Indicator」。 通常こうしたローディングイメージを実装するにはアニメーションgif等で対応しますが、このプラグインを使うと、画像なしに綺麗なアニメーション付きの読み込みエフェクトを実装出来ます。 SVGやVMLを使ってクロスブラウザで動作するように設計されており、なんとIE6等でもＯＫだそう。 背景が何色だって気にする必要もありません。 関連エントリ クリックした位置にそのままローディング画像を出せるjQueryプラグイン「Spinner」 現在ローディング中であることをマウスカーソル近くにちょこんと可愛く出せる「prettyLoade
ボックス要素をレンガ状に綺麗に整列させる「jQuery Masonry」が凄い:phpspot開発日誌
ボックス要素をレンガ状に綺麗に整列させる「jQuery Masonry」が凄いです。 普通、高さの違うボックス要素を float とかで並べると次のような、どう見ても見れない崩れたデザインになってしまいます。 が、今回紹介するjQuery Masonry を使うと、次のように、綺麗にテトリスっぽく整列できてしまいます。 ↓↓↓↓↓↓↓↓↓↓ これを実現するのに必要なJavaScript コードは以下のように数行。これで実現可能です。 $('#primary').masonry({ columnWidth: 100, itemSelector: '.box' }); この仕組みを使ってブログ等を表示するともっと面白いことになります。 新聞っぽくなりましたね。 ブラウザ幅を変える事でいろいろな見え方になるのも面白いです。 以下のエントリを参照してください。 jQuery Masonry ? B
PHPで暗号化の際に便利に使えるCrypterクラスが公開:phpspot開発日誌
Creating a Crypter Class with PHP - Nettuts PHPで暗号化の際に便利に使えるCrypterクラスがNettutsにて公開されました。 Mcrypt関数の単なるラッパーに過ぎませんが、コンストラクタで、アルゴリズムを指定し、Encrypt($data), Decrypt($data) という直感的なメソッドによって暗号化が行えるようです。 $crypter = new Crypter("Any password", MCRYPT_RIJNDAEL_256); $encrypted = $crypter->Encrypt("himitu"); // 暗号化 echo $crypter->Decrypt($encrypted); // 複合化 注） バイナリはbase64化されます という感じで、シンプルに、後から見てもコードが分かりやすく暗号化が行
iCal風の美しいカレンダーをページ上に配置可能なライブラリ:phpspot開発日誌
Create astonishing iCal-like calendars with jQuery | Stefano Verna iCal風の美しいカレンダーをページ上に配置可能なライブラリ 次のようなカレンダーをウェブ上に設置して自身のスケジュール公開なんかが出来ます。 動作デモはこちらでイベントのある日にカーソルを合わせるとアニメーションポップアップで内容を知ることが出来ます。 単にスケジュールを羅列するよりこうした仕組みで表示するようにしておけば、スマートかつオシャレな印象を与えられそうです。 関連エントリ とても洗練されたＵＩの日付ピッカー＆カレンダー集 超クールなカレンダー型日付入力補助用JSライブラリ
HTMLで雑誌のような美しい段組みレイアウトを軽く実現できるjQueryプラグイン:phpspot開発日誌
HOKYPOKY. | MULTICOL. jQuery Plugin MULTICOL. はHTMLで雑誌のような美しい段組みレイアウトを実現するだけのシンプルなjQueryプラグインです。もちろん、日本製のプラグインなので日本語もきれいに段組みにします。HTMLで雑誌のような美しい段組みレイアウトを軽く実現できるjQueryプラグインの紹介。 次のようにコードを書くと、複数のブロックを簡単に4カラムにすることが可能です。 $("#sample1").multicol({colNum:4, colMargin: 10}); マージンを指定できるところも良いですね。 関連エントリ 複雑なブロックレイアウトもシンプルかつ簡単に実装可能な「malo」 複雑なCSSレイアウトもサクッと実装できるCSSフレームワーク「emastic」 CSSレイアウトのチート集「CSS Layout Cheats
PHPで暗号化、ハッシュする色々:phpspot開発日誌
PHPで暗号化、ハッシュするガイドライン記事「A Guide to Cryptography in PHP」が公開されています。 ハッシュ関数の、md5, sha1や、暗号化関数のcryptなどがPHPには標準で備わっていますが、ハッシュ・暗号化のライブラリが色々と紹介されていました。 MCrypt - cryptの代替でファイルの暗号化なんかも出来るみたい MHash - SHA、HAVAL、MD4/5、TIGER、CRCなど、多種多様のハッシュアルゴリズムを提供 Crypt_Blowfish - Blowfish暗号 Crypt_RSA - RSA暗号 Crypt_ HMAC - HMACハッシュ Crypt_DiffieHellman - DiffieHellman暗号 PHPで暗号化する際の参考になりそうですね。 追記）HASH関数なんていうものも5.1.2から存在するみたい
ページ全体に枠線をつけるCSSテクニック:phpspot開発日誌
CSS Trick: Creating a?Body-Border - CSS-Tricks Hicksdesign has been “fiddling” with their site design. ページ全体に枠線をつけるCSSテクニック。 ↓ブラウザのサイズを変更しても、水色の枠が画面にフィットするCSSサンプルです。 まず、マークアップ。上下左右用にdivを作成 <div id="left"></div> <div id="right"></div> <div id="top"></div> <div id="bottom"></div> 次にCSS。left,right,top,bottomのtop,left,rightなどを調節して、上下左右に設定して枠線を表現しています。 #top, #bottom, #left, #right { background: #a5ebff
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にリクエストし、その結果を待ちます。 そして、そこからはてなブック
モバイルキャリア判定用のPHPライブラリ「PEAR::Net_UserAgent_Mobile」最新版を入れよう:phpspot開発日誌
PEAR :: Package :: Net_UserAgent_Mobile モバイルキャリア判定用のPHPライブラリ「PEAR::Net_UserAgent_Mobile」が2/10にアップデートされました。 前回のリリースは、2007/2/20。1年ほど経っているわけなのですが、その間に携帯端末のユーザエージェントの状況なんかも変わりましたね。 新しく、モバイルかPCのどちらか、というのを判別するために、isMobile メソッドが追加されています。 (これまでは、isDocomo、isEZWebなど、具体的なキャリア名の指定が必要でした） より詳しい変更点はこちらを参照してください 携帯サイトをPHPで構築されている方は要チェックですね。 関連エントリ 携帯端末のUserAgentを扱うライブラリ:Net_UserAgent_Mobile
画像を同一Window内でスムーズにズームしてくれるJSライブラリ色々:phpspot開発日誌
画像を同一Window内でスムーズにポップアップしてくれるJSライブラリ色々。 LightBox風ではなく、クリックした画像がそのままズームイン、されるライブラリを紹介。 FancyZoom 1.1 - 最近リリースされたFancyZoom。クリックでアニメーションしながら画像がズーム Highslide JS - 以前にも紹介した、Highslide JS。FancyZoomと動きはほぼ同じ。 Live Thumbnail Demo - 画像をその場でズイズイっとリサイズ (参照記事: サムネイルと元画像の見せ方) 今回新しく紹介する「FancyZoom」は、スクリプトを読み込んで、初期化するだけで、<a href="大きい画像"><img src="小さい画像(サムネイル)"></a> のマークアップにズーム機能が追加されるという点で実装はすごく容易でマークアップも綺麗にできます。
PHPから各種ウェブサービスにアクセスするためのライブラリ集 2008年2月版:phpspot開発日誌
PHPから各種ウェブサービスにアクセスするためのライブラリ集 2008年2月版 をまとめてみました。 2006年に「PHPからWEB2.0なAPIサービスを使う際に便利なモジュールまとめ」というエントリでウェブサービス用モジュールをまとめましたが、あれから時間が経ったので再度まとめてみました。 Services_Amazon - Amazon用 Services_Delicious - del.icio.us用 Services_Google - Google用 (古いので使えないかも) Services_Yahoo - Yahoo!Webサービス用 Services_Technorati - Technorati用 Services_Youtube - youtube用 Services_Digg - digg 用 Services_Twitter - Twitter用 PEAR::Fl
PHPでファイルをDLさせる際のPHPコード例:phpspot開発日誌
2008/2/22: sotarok様より、連絡がありコードを一部訂正 参考1）http://d.hatena.ne.jp/odz/20080215/1203099900 参考2) http://d.hatena.ne.jp/cocoiti/20080221#1203611811 PHPでファイルをDLさせる際のPHPコード例 通常、PHPでファイルをダウンロードさせるとすると、次のようにシンプルにかけます。<?php header('Content-Type: application/octet-stream'); readfile("dl.zip"); ?> が、これだと、ダウンロード時に、保存名がアクセスしたphpでのファイル名になってしまいます(例えば、dl.php)。 そこで次のように Content-Disposition でファイル名をブラウザに通知することで、dl.zip
WEBアプリ用のテストデータを作るもの色々:phpspot開発日誌
Test (Sample) Data Generators Sample / test data is an effective way to test web projects & applications. WEBアプリ用のテストデータを作るもの色々。 テストデータの生成は結構面倒ですが、ツールを使えば簡単、ということで１つはテストデータ生成ためのツールは押さえておきたいですね。 以下に列挙 generatedata.com テストデータをHTML、Excel、XML、CSV、SQLの形式で出力可能。 出力データも、個人情報データや、テキストデータをフォーマットを選択して出力できます。 Datagenerator - GUIで動作するデータジェネレーター DBMonster データベースにランダム生成データを入れられるオープンソースソフト CSV data generator Ruby
使えるPHP等のコードスニペット（１６進カラーを反転など）が一杯のサイト:phpspot開発日誌
PHP snippets 使えるPHP等のコードスニペット（配列をランダマイズ，１６進カラーを反転など）が一杯のサイト １６進カラーを反転 ２つの文字列の類似性を調べる 配列をランダマイズ ディレクトリパスをノーマライズ array_walk のデバッグ例 配列の空エントリ削除 バイナリファイルをテキスト形式のPHPコードに変換 ディレクトリのリカーシブ処理 ＦＴＰでファイルアップロード HexをRGB値に変換 PHPでMingの使用例 などなど（ほかにも） その他、当ブログで紹介した便利なPHP機能スニペット集など PHPとMecabでキーワード自動リンクを実装 PHPを使ってたった2行で絵文字を取り除く方法 PHPで絵文字を壊さずに文字コードや全角半角変換を行う方法 PHPやPerlでQRコードを超簡単に作れるサンプルスクリプト CDドライブを開ける等、Windows上で動作する面白＆
ピュアCSSでクールなグラフサンプル「Pure Css Data Chart」:phpspot開発日誌
Pure Css Data Chart | Css Globe Data visualization is mostly achieved with flash applications or with help of some programming languages. Are those solutions the only way to present, let's say simple data chart? How about giving it a try with nothing but good ol' css? ピュアCSSでクールなグラフサンプル「Pure Css Data Chart」。 次のようなグラフを描画するCSSとHTMLマークアップのサンプルが紹介されています。 マークアップも次のように綺麗に記述できます。 <dt>Day 1</dt> <dd class
JavaScriptでド派手な電光掲示板を実装するためのライブラリ:phpspot開発日誌
JavaScript LED Message Scrolling Display JavaScriptでド派手な電光掲示板を実装するためのライブラリ。 街角にあるような、電光掲示板をウェブページにも組み込みたい、そんなニーズにお応えするのがこのライブラリ。 次のような文字が残像をのこしながらスクロールします。 ソースコードは次のように記述。 <div id="ledSet"><!--ここにLEDがはいる--></div> <script> // LEDのサイズ( 16, 32, 48, 64 or 128 pixels から選べる) var ledSize = 16; // LED間の距離 var ledPadding = 1; // LEDのカラー設定 var ledColor = 'rainbow'; // スクロールの速度設定 var scrollDelay = 100; // ぼか
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
CakePHP 1.2 でモバイルサイトを構築する手順まとめ:phpspot開発日誌
画面遷移なしのクールなフォーム作成サンプル:phpspot開発日誌
HTMLの閉じ忘れをチェックできる「Page Scanner Tool」:phpspot開発日誌