ブラウザ上で物凄いアートが作れるHTML5ベースの描画ツール「The Endless Mural」:phpspot開発日誌
ブラウザ上で物凄いアートが作れるHTML5ベースの描画ツール「The Endless Mural」 2011年06月23日- The Endless Mural ブラウザ上で物凄いアートが作れるHTML5ベースの描画ツール「The Endless Mural」。 マウスの軌道に追尾して予め用意されたシェイプがアニメーションしながら描画されます。描画の方式も色々選べます。 Photoshopのブラシでも似たようなことが出来ますが、シェイプがランダムで決まって描画されるものが予測できないところに面白さがあります。 さらに、描画の過程をアニメーションで保存してソーシャルサイトにシェアすることが出来ます ために超適当に描いてみたグラフィック。本当に適当なんですがなんとなく面白いグラフィックになってますね。 とりあえず触ってみるだけでも面白いツールなので是非使ってみてください。 関連エントリ ブラウ
ECサイトで使えそうな画像のレンズズームを超簡単に実装できるjQueryプラグイン「Lens Zoom」:phpspot開発日誌
ECサイトで使えそうな画像のレンズズームを超簡単に実装できるjQueryプラグイン「Lens Zoom」 2011年06月23日- A jQuery plug-in for Lens Effect Image Zooming ECサイトで使えそうな画像のレンズズームを超簡単に実装できるjQueryプラグイン「Lens Zoom」。 次のように、画像の特定部分の円形のみをズームするようなUIが簡単に作れちゃいます。 ECサイトなどで商品を拡大するように実装されていたらお客さんに喜んでもらえるかも。 レンズの大きさもピクセル指定で自由自在です。 白黒写真がレンズを入れることでカラーになるみたいな効果も。 レンズの色やサイズも選べます。 実装の容易さも素晴らしくて、.imageLensで初期化するだけです。 関連エントリ タイマーを作る際に便利なjQueryプラグイン「jQuery Timer」
PHPで画像からHTMLのカラーパレットを作るサンプルプログラム:phpspot開発日誌
Generating a color palette from a image in php PHPで画像からHTMLのカラーパレットを作るサンプルプログラムがcode dieselにて公開されています。 画像を渡せば、GDを使って使われている色を分析し、頻度の多い順に配列で受け取ることができます。 なんらかのWEBサービスやツールに応用することができそうです。 クラスライブラリの形なので再利用も超簡単です。 元記事ではテーブルタグを使ったカラーパターンの出力用プログラムも公開されています。 関連エントリ PHPでWEBサイトのスクリーンショットを作成するチュートリアル PHPでAmazon SESを使うチュートリアル
PHPでWEBサイトのスクリーンショットを作成するチュートリアル:phpspot開発日誌
Taking screenshots of websites in PHP PHPでWEBサイトのスクリーンショットを作成するチュートリアルが紹介されています。 スクリーンショットの撮影には wkhtmltopdf というオープンソースソフトウェアを利用します。 このソフト自体がMac OS XやWindows、Linuxで動作するコマンドラインツールとなっているようなのでクロスプラットフォームで動作します。 このツールを使えば、「wkhtmltoimage --quality 50 //phpspot.org/blog/ snap.jpg」のようにコマンドを打つことでスナップショットが撮れます。 コマンドラインオプションが多数あるのでPHPerじゃない方も覚えておいて損はなさそうです。 例えば、 JavaScriptをオフにした状態でスクリーンショットを撮ったり、高さや幅の指定、切抜きの
タイマーを作る際に便利なjQueryプラグイン「jQuery Timer」:phpspot開発日誌
jQuery Timer Demo タイマーを作る際に便利なjQueryプラグイン「jQuery Timer」。 単純に、指定エレメントの値を指定秒数で＋していくタイマーの実装がjQueryのプラグイン形式で簡単にできるものです。 setIntervalとかでやっちゃえばいい話なのですが、オブジェクト指向っぽく使えて後から見たときのコードも分かりやすくできます。 var myTimer = $.timer(); myTimer.set({ action : function() { alert('This message was sent by a timer.'); }, time : 5000 }).play(); myTimer.set(options); myTimer.play(); myTimer.pause(); myTimer.toggle(); myTimer.once(
自動リサイズしつつ手動でサイズも切り替えられるテキストエリア実装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いらないんじゃないかとい
簡単なコードでリンク先をサムネイルプレビューできるjQueryプラグイン「jLinkPreview」:phpspot開発日誌
簡単なコードでリンク先をサムネイルプレビューできるjQueryプラグイン「jLinkPreview」 2011年06月15日- jLinkPreview 簡単なコードでリンク先をサムネイルプレビューできるjQueryプラグイン「jLinkPreview」のご紹介。 リンクを合わせたときにリンク先のイメージが分かるといいですが、それをjQueryプラグインの形で、簡単に実装できます。 サムネイル画像にはwimg.caというサービスが使われています。 サムネイル表示の例 使い方は以下のように初期化すればよいみたい。 画像のプレロードや、サムネイルサイズ（幅・高さ）、フェードや背景色など自在にカスタマイズできますね プラグインもそこまで大きくないため、サムネイルのプロバイダを変更するのもソースをちょこちょこっと変えれば対応できます。 関連エントリ テキストシャドウを自在にアニメーションさせられる
IKEAの家具紹介画像っぽくイメージに注釈を入れるjQueryチュートリアル:phpspot開発日誌
Making an Interactive Picture with jQuery | Build Internet IKEAの家具紹介画像っぽくイメージに注釈を入れるjQueryチュートリアル 室内のいい感じの写真をベースに家具を紹介するあのIKEAサイトのUIをjQueryを使ってクールに再現しているチュートリアルです。 単純な商品の紹介よりも、より商品を魅力的にみせることに成功していると思うのですが、これを自分でもやりたいという時に参考にできます デモページはこちら ECサイトを構築する際等に、いい仕事ができるかもしれませんね。 関連エントリ オシャレなECサイト構築用のWordPressテーマ３０ PR: 全部入りECサイトを安価に構築できる「Live Commerce」が素晴らしい！ Ajaxスタイルのローディングも画像を使わずピュアCSSで実現するデモ
ハイクオリティなWEBデザイン用Photoshopパーツ５０:phpspot開発日誌
50 Ultra High Quality Free Web Design PSD Files | CreativeFan ハイクオリティなWEBデザイン用Photoshopパーツ５０が紹介されています。 全体のデザインPSDなんかもあったりしますが、こうしたパーツのほうが実は使いやすかったりしそうですね。 こういうPSDを提供してくれる方々に感謝しつつ使わせていただきましょう。 関連エントリ かなりクールなPhotoshop用フリーUIキット-PSDファイル50個 シンプルで汎用に使えるWEBレイアウトのPSDソース「Blackbeard template」 色々使えそうなフリーのPSD素材ファイル３０ ボタンやインフォボックスなどを集めたＵＩパーツのPSD
Google Chart APIを使ったQRコードを超簡単に描画してくれるjQueryプラグイン「MyQRCode」:phpspot開発日誌
Google Chart APIを使ったQRコードを超簡単に描画してくれるjQueryプラグイン「MyQRCode」 2011年06月14日- Official Demo page for MyQRCode jquery plugin Google Chart APIを使ったQRコードを超簡単に描画してくれるjQueryプラグイン「MyQRCode」。 Google Chart API でQRコードを作る際にURLが長くなってなんとなく後でHTMLの可読性が悪くなり保守性が悪くなってしまったりしそうですが、このプラグインを使えばシンプルに、しかも動的にQRコードを出すことができます。 直接Canvasなどを使って描画するスタイルのものもありますが、ブラウザが対応していなければ表示できないので、クロスブラウザを保証したい場合は無難に<img>タグに頼るのがよさそうですね。 コードは次のように
透過PNGで枠だけ作って背景をCSS3アニメーションするという新テクニック:phpspot開発日誌
Color Animate Any Shape with a Knockout PNG | CSS-Tricks 透過PNGで枠だけ作って背景をCSS3アニメーションするという新テクニックが掲載されています。 CSS3の登場でハックの幅は広がりましたが、今後こういうテクニックが色々現れてくると思うと楽しみです。 まずはマリリンをかたどった縁の画像を透過PNGで作ります このデモは必見 あとは背景をCSS3の keyframes, animation を使ってアニメーションさせると、なんとマリリンが７色に変化します。これはすごい！ マリリンはたまったものではありませんが、色々応用の効くテクニックかもしれませんね 関連エントリ CSS3で動くプログレスバー作成サンプル IE9にも対応したCSS3リファレンスサイト「css3files」 超シンプルなマークアップで実現できるCSS3による画像を使
コピペで使える！Photoshop不要になりそうな高品質テキストシャドウサンプル集:phpspot開発日誌
コピペで使える！Photoshop不要になりそうな高品質テキストシャドウサンプル集 2011年06月13日- 12 Fun CSS Text Shadows You Can Copy and Paste | Design Shack コピペで使える！Photoshop不要になりそうな高品質テキストシャドウサンプル集のご紹介。 Photoshop不要には絶対ならないとは思うんですが、Photoshopで作るのと遜色ないテキストシャドウが実現されております コードと実例を元に紹介されていてコピペで使えます。 こういうものはいつでもデザインを変えられるという意味でCSS3でやっちゃうのがデベロッパー的には楽ですよね。 画像を作成→アップロード→タグ置き換え を CSS3で一発置換っていう方がはるかに効率的です 一日も早く、ほとんどのブラウザでCSS3が使えることを願います。 関連エントリ CSS
jQueryとHTML5でジオロケーションするデモ:phpspot開発日誌
Geo Location with HTML5 and Jquery jQueryとHTML5でジオロケーションするデモとサンプルがダウンロード可能になっています。 特にスマートフォン向けの機能として実装する際に参考にできそうです。 いざ実装するという段階になったときにサクっと実装できそうなので覚えておいて損はなさそうですね。 関連エントリ HTML5のデスクトップ通知を簡単に扱えるjqueryプラグイン「desktopify」。 HTML５でブラウザにドラッグ＆ドロップでファイルアップ可能なjQueryプラグイン「jQuery HTML5 Uploader」 HTML5のDesktop Notificationを簡単に実現するjQueryプラグイン「jwNotify」 jQueryとCSS3、HTML5でここまで出来るホバーインタフェース
これは斬新！木のUIで訪問者を驚かせよう、なUIパーツ:phpspot開発日誌
Got Wood? UI Design Elements | MediaLoot これは斬新！木のUIで訪問者を驚かせよう、なUIパーツ。 木のiPhoneケースや木のキーボード等、木とITを絡めるとなぜかインパクト絶大ですが、木のUIキットを発見しました。 これでページデザインをすれば自然の温かみによってリラックスした気分でページを使えるのかも。 基本的なUIパーツはそろっているので頑張ればページに適用できるはず。 レイヤーに綺麗に分かれているのがいいですね。 見ていてなにか作りたくなりました。 関連エントリ かなりクールなPhotoshop用フリーUIキット-PSDファイル50個 モックアップ作成用PhotoshopのUIキット「Soft UI Kit」 ブルーが美しいモダンなＵＩキットPSD 色々と使えそうなフリーのUIエレメントPSD７０種
phpMyAdminクローラーの恐怖:phpspot開発日誌
サーバを立てているとログに怪しいアクセスが出るのは日常的なことですが、とあるサーバにphpMyAdminクローラーの恐怖のログが残っていたのでシェアします。 Apacheのログを見ていたら下記のようなログを見つけました。 /path/to/www/ は apache のDocumentRoot です。 phpMyAdminを使っている方で、レンタルサーバ等を使っている場合、public_html 以下等に設置しているかと思いますが、クローラーは片っ端から存在しそうなパスを総当りしてきます。 URLが存在すれば200ステータスで検知してそこにphpMyAdminがあるみたいなことが分かってしまいます。(phpMyAdminだけ狙っているようでもなさそうですが) 仮に、MySQLのパスワードを設定していない人がいた場合はrootでDBを消されたり、データを盗まれたりする危険性があったのでシェア
レイアウトに関する強力なjQueryプラグイン６つ:phpspot開発日誌
6 Powerful jQuery Plugins to Create and Enhance Website Layout | Queness レイアウトに関する強力なjQueryプラグイン６つが紹介されていました。 一昔前では不可能では？と思われたような複雑なレイアウトもjQueryを使うことで簡単に実現できます。 ちょっと変わったレイアウトにしたいっていう時に参考にさせてもらいましょう UI.Layout リサイズ可能な複雑なレイアウト作成 Masonry ブロックを新聞みたいにしきつめて表示 jLayout divをならべてその親divのclassにルールにしたがって記述することで複雑なレイアウトが簡単に作れます jQuery pageSlide ページ全体をズラしてアニメーションしながらサイドバーを出すエフェクト jQSlickWrap 画像にあわせて文書をまわりこませられる C
スクロール位置に応じて注釈表示が可能なｊQueryプラグイン「SmartScroll」:phpspot開発日誌
SmartScroll スクロール位置に応じて注釈表示が可能なｊQueryプラグイン「SmartScroll」 スクロールバーが長いとどの位置に何があるかっていうのを知りたくなりますが、SmartScrollを使えば次のように、この位置にこんなことが書いてあるよ、を示すことが可能。 使い方次第では長ったらしい文章も分類して分かりやすく表示することができそうですね。 注釈だけじゃなくてデザインも色々と変更できるみたいです。 注釈を付ける部分も何がいいって実装が簡単な点。 ちゅうす役をつけたい位置に次のようにマークアップしておけばいいっていうのはお手軽ですね 上記コードで次のように表示 スクロールバーも次世代に。ｊQueryが出来ることをどんどん拡張していってくれますね。 本当にjQueryは偉大です。 関連エントリ HTML5のデスクトップ通知を簡単に扱えるjqueryプラグイン「deskt
超かっこいいmarquee2.0を実現するjQueryプラグイン「fMarquee」:phpspot開発日誌
jQuery Marquee Animation Plugin Preview - CodeCanyon 超かっこいいmarquee2.0を実現するjQueryプラグイン「fMarquee」。 ホームページをつくりはじめた時には誰もが使ったマーキー。覚えていくにつれ、ほとんど使われないかわいそうなマーキー。 そんなマーキーもjQueryで超かっこ良く、まるで映画のプロモーション動画に使われるようなエフェクトに生まれ変わったようです。 生まれ変わったマーキーを見てみよう 実装は超簡単！ <script language="javascript"> $(document).ready(function() { $('.marquee').fMarquee({width: 960, height: 100}); // サイズをオプション指定 }); </script> <!-- 内容はdivに入
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
フリーの曲を入手できる１３サイト:phpspot開発日誌
音楽関連のサービスを作る際に使えそうなフリーのPhotoshopブラシ３２:phpspot開発日誌