CSSを使ってカッコいい円形メニューを作る:phpspot開発日誌
metal.ize - tutoriales Este es un peque・ experimento con CSS que muestra un men・circular con los elementos a su alrededor.CSSを使ってカッコいい円形メニューを作るサンプル。 次のような円形でアイコンにカーソルを合わせるとツールチップが表示されるような円形メニューのサンプルが紹介されています。 尚、紹介したページの言語は英語ではないのですが、解説ページのサンプルコードを読みつつ原理を理解するとよいでしょう。 HTMLがリスト要素になっていて綺麗なHTMLになっているのが特徴。ＣＳＳをオフにすると次のようなリスト要素の見栄えになります。 Flashや画像のクリッカブルマップでこういったナビゲーションを作るのは簡単そうですが、リスト形式のものはなかなか無かった気がします。
超クールなCSSデザインされたUIのレーティングシステムのサンプル:phpspot開発日誌
Rater ? Robarov: Webdesign, zoekmachine optimalisatie, hosting 超クールなCSSデザインされたUIのレーティングシステムのサンプル。 サンプルを使って次のようなカッコいいレーティングシステムを実装することができます。 デザインその１ デザインその２ いずれも、CSSによってデザインされており、HTMLは次のようにシンプル。 <ul id="rating"> <li id="r1"><a href="#1" title="give this site a 1"><span>Abysmal</span></a></li> <li id="r2"><a href="#2" title="give this site a 2"><span>Terrible</span></a></li> <li id="r3"><a href="#3"
PHPで複数の写真を一括サムネイルにするサンプル:phpspot開発日誌
PHP multiple photo thumbnail generator - AnyExample.com Built-in PHP library gd does not have ready-to-use function for photo(jpeg) thumbnail generation. PHPで複数の写真を一括サムネイルにするサンプルが公開されています。 <?php function thumbnail_calcsize($w, $h, $square){ $k = $square / max($w, $h); return array($w*$k, $h*$k); } $params = array( array('size' => 200, // first thumbnail, should fit in square 200x200 'file' => 'thu
PHPでのHTTPアクセスを超簡単に行える「PEAR::HTTP_Request」:phpspot開発日誌
PHPでのHTTPアクセスを超簡単に行える「PEAR::HTTP_Request」。 HTTP_Request は、PHPユーザの方ならご存知の方も多いと思いますが、WEB上にコピペですぐ使えるサンプルが無かったので作ってみました。 単純にHTTPリクエストを行うなら、PHPなら、file 関数や file_get_contents で1行でできてしまいます。 (php.ini にて allow_url_fopen=Onにした場合のみ) ただ、タイムアウトの秒数を設定したり、リダイレクトされた場合の処理や、HTTPリクエストする際のヘッダーなどの指定はカスタマイズ出来ません。 HTTP_Request ならそれが次のように簡単に行えます。 <?php // リクエストを行うURLの指定 $url = "http://〜"; $option = array( "timeout" => "10
PHPで動画形式の各種変換が行えるffmpegのラッパークラスライブラリ「ffmpeg」:phpspot開発日誌
JavaScriptでボックス要素の角丸を自由自在に操るライブラリ「RUZEE.Borders... 次の記事 ≫：Webサーバ上のエクスプローラー「PHPEXPLORATOR」 PHP Classes - Class: ffmpeg This class is a wrapper around the ffmpeg program to manipulate and convert video files. PHPで動画形式の各種変換が行えるffmpegのラッパークラスライブラリ「ffmpeg」。 ffmpegを使えば、あらゆる動画形式のファイルの相互変換を行うことが出来ます。 例えば、Flashのビデオ形式であるflvをmpegやmp3に変換したり、WindowsMedia形式の動画をiPod用の動画形式に変換することが出来ます。 今回はそのffmpegを、PHPから簡単に扱うためのク
Flashで本をペラペラめくる感じのUIを実装する「Dynamic Page Flip v2」:phpspot開発日誌
Dynamic Page Flip v2 from shift control Based on the popularity of my original adaption of Macc’s page flipping engine, I’ve gone back and made several major improvements to the dynamic page flip files: Flashで本をペラペラめくる感じのUIを実装する「Dynamic Page Flip v2」。 Webページだけど、本を見るみたいなＵＩにしたいっていう需要はなかなかあるんじゃないか、と思っていたのですが、そんなＵＩを実装するためのFlashサンプルが公開されました。 次の画像のように、マウスでページの右端をドラッグ＆ドロップでページをめくれます。 本の中身は自由に書き換えることができるの
タブ風ＵＩを実装するための色々:phpspot開発日誌
Tab Interface Scripts | Dr. Web Weblog タブ風ＵＩを実装するための色々。 標準的なタブＵＩから変り種タブＵＩまで、いろいろなタブ式ＵＩを実現するためのライブラリがまとまっています。 Javascript Tabs vom Stilbüro AJAX Tabs Content Script Tabmenu dhtmlxTabbar ActiveWidgets 2.0 続きをみる いろいろあって面白いですね。 関連エントリ クールなタブＵＩを簡単に実現できるJavaScriptライブラリ「LivePipe」
HTMLを許可しつつXSS対策を行えるPHPライブラリ「HTML Purifier」:phpspot開発日誌
HTML Purifier - Filter your HTML the standards-compliant way! HTML Purifier is a standards-compliant HTML filter library written in PHP. HTMLを許可しつつXSS対策を行えるPHPライブラリ「HTML Purifier」。 HTMLをちゃんとパースして、XSSに関わる問題のあるタグなどは除去して返してくれます。 例えば、次のコードが(Before)、 phpspot <a href="hogehoge" onclick="alert('test1');">hogehoge</a> <script type="text/javascript"> <!-- alert("test2"); --> </script> 次のコードのようにクリーンになります。(A
クールなタブＵＩを簡単に実現できるJavaScriptライブラリ「LivePipe」:phpspot開発日誌
Control.Tabs : Projects : LivePipe Control.Tabs is a javascript library for creating accessible, flexible & unobtrusive tabbed interfaces in your applications or pages. クールなタブＵＩを簡単に実現できるJavaScriptライブラリ「LivePipe」。 次のようなCSSベースのクールなタブＵＩを簡単に実現できます。 prototype.jsベースのライブラリとなっており、次のようなソースで動きます。 タブ部分のHTMLはulタグとdivタグを使っており、シンプルで分かりやすいですね。 <script> Event.observe(window,'load',function(){ $$('.tabs').each(fun
スクロール可能なテーブルを作成するJavaScriptライブラリ「ScrollableTable」:phpspot開発日誌
スクロール可能なテーブルを作成するJavaScriptライブラリ「ScrollableTable」 2007年03月16日- Scrollable HTML table This JavaScript code can be used to convert tables in ordinary HTML into scrollable ones. スクロール可能なテーブルを作成するJavaScriptライブラリ「ScrollableTable」。 次のようなスクロールしてもカラム名が消えず、小さいスペースで配置できるテーブルを作成できます。 （※↓は画像です） 知っておくと、レイアウトを崩さないでテーブルのようなＵＩ が必要な部分で使えそうですね。 設置方法は次の様に簡単 １．ライブラリを読み込み <script type="text/javascript" src="webtoolkit
超リッチJavaScriptコンポーネント集「Ext」がprototype.jsに対応:phpspot開発日誌
Ext Documentation Centor 超リッチJavaScriptコンポーネント集「Ext」がprototype.jsに対応。 以前、「Yahoo UI Libraryを拡張した超リッチなコンポーネント集」で紹介したリッチなコンポーネント集はYahoo UI Library 用のものでしたが、 なんと、prototype.js+script.aculo.usでも動作するようになりました。 尚、jQueryにも対応しているようです。 こうしたコンポーネントライブラリで、コアとなるライブラリを選択できるのはより多くの開発者が使えていいですね。 ライブラリだけではなく、テーマを切り替えることも出来て、自由度がいい感じです。 コアとなるライブラリを切り分ける、という、このライブラリ自体の設計部分にも注目したいですね。 コアライブラリの切り替え 画面内ウィンドウ データグリッド タブ風Ｕ
Webデザイナー/開発者が覚えておくとよい２５のテクニック:phpspot開発日誌
25 Code Snippets for Web Designers (Part1) There are loads of handy scripts, bits of html and widgets that you can incorporate into your websites and blogs - here we bring together 25 of the most helpfull in the first part of this series … Webデザイナー/開発者が覚えておくとよい２５のテクニックが紹介されていました。 知っておいてサイトに組み込めば、一歩レベルが上のサイトを構築できるはずです。 CSSを使うものだけでなく、JavaScript や PHP も絡んでくるものもありますが、サンプルを改変することで設置をすることも出来るはずです。 バブルツー
Ajax機能をオブジェクト化してAjax機能のみ単体で使える「Ajax Object」:phpspot開発日誌
The Ultimate Ajax Object Ajax 機能をオブジェクト化してAjax機能のみ単体で使える「Ajax Object」。 prototype.jsなどを使えば、Ajaxは簡単に使えるけど、Ajaxのみの機能を使いたいのに、要らない機能までもブラウザに読み込ませるのは無駄な場合も多いことと思います。 そんな際に使える、ajaxObjectの紹介。ほんの４５行程度のライブラリですが、クラス化されていて再利用が容易です。 使い方は次のように簡単です。 myRequest = new ajaxObject('http://somedomain.com/ad.html'); // オブジェクト初期化 myRequest.callback = function(responseText) { // ajax成功時のコールバック document.getElementById('so
Flashを使ってリモートＰＣを操作できるVNCクライアント「FVNC」:phpspot開発日誌
Jaslabs: High performance php VNC client in flash FVNC is an open source VNC client for flash. Flashを使ってリモートＰＣを操作できるVNCクライアント「FVNC」。 VNCというリモートＰＣをＧＵＩで操作できるソフトがありますが、そのＦｌａｓｈ版がダウンロードできるようです。 次のようにブラウザ上でログイン画面や、ＶＮＣを経由したＧＵＩ操作画面のスクリーンショットが見れます。 ログイン画面 VNC操作画面。 SWFということで、インストール簡単＆ブラウザで動くということで色々と役立つ場面がありそうです。
CSSでデザインされたテーブルレスでクールなフォームサンプル:phpspot開発日誌
Tableless forms consider this a very important step in learning web design the right and straightforward way. CSS is no longer just a way of adding some simple styles to an element in your page. CSSでデザインされたテーブルレスでクールなフォームサンプル。 次のようなフォームのサンプルがダウンロードできます。 HTMLとCSS、画像がセットになっているので、ちょっと編集していろいろと応用できそう。 ログインの横にアイコンが表示されていると直感的かつ、オシャレなフォームになってますね。デザイン面で参考に出来そうです。 関連エントリ ブログのコメント部分やコメントフォームのデザインを色々集めたサイト
超シンプルで使い勝手のよいJavaScriptコード集「Nomadic Functions」:phpspot開発日誌
NoFunc Nomadic Functions 超シンプルで使い勝手のよいJavaScriptコード集「Nomadic Functions」。 他のどのライブラリにも依存しない、★投票システムや、Ajaxリクエスト、カラーピッカー、ドラッグ＆ドロップ、テーブルソートなどを実現するためのJavaScriptコード集です。 例えば、ajaxリクエストをするのに、次の関数があって、wReq('http://www.YourDomain.com/',0,function(v) { alert(v); }); のようにシンプルに呼び出せるコードが紹介されています。 function wReq(u,s,change) { var r=[function(){ return new XMLHttpRequest(); },function(){ return new ActiveXObject("Ms
JavaScriptでフォームの値をリアルタイムにバリデートするライブラリまとめ:phpspot開発日誌
JavaScriptでフォームの値をリアルタイムにバリデートするライブラリまとめ。 バリデートするライブラリも沢山でてきました。とここら辺で一度まとめておきました。 Really easy field validation (デモ) - 入力値がおかしいと、エラーメッセージをフェードインさせながら超クールに表示できます。 ※ ページの最後で使い方紹介（これは良いです） Remember the milk風の登録フォームも作れそう prototype.js依存。 Realtime validation using Ajax (デモ) - Ajaxなどを駆使して、入力値を動的にチェックするライブラリ Validate.js (デモ) - リアルタイムではないけど、入力値をチェックするためのライブラリ Tooltip for forms - 入力チェックではないけど、フォームの入力ヒントを出して
JavaScriptでLightBox風のインストーラ用ウィザード作成ライブラリ「ModalBox」:phpspot開発日誌
JavaScriptでLightBox風のインストーラ用ウィザード作成ライブラリ「ModalBox」 2007年02月27日- ModalBox ? An easy way to create popups and wizards JavaScriptでLightBox風のインストーラ用ウィザード作成ライブラリ「ModalBox」。 次のように、LightBox風に同一ページ内で動作するウィザードを作成することが出来ます。 動画が軽くてサクサク動くこのUI は使いどころによってはかなり便利なサイトであるという印象を与えることが出来そう。 実装方法は次の流れ 1) まず、JavaScriptファイルとCSSファイルを読み込みます。 <script type="text/javascript" src="includes/prototype.js"></script> <script type
PHPからjQuery（JavaScriptライブラリ）を簡単に使うことができる「PQuery」:phpspot開発日誌
PQuery - PHP and JQuery at NGCoders PQuery is a set of helper classes for JQuery JavaScript library. PHPからjQuery（JavaScriptライブラリ）を簡単に使うことができる「PQuery」。 PQueryは、PHPにjQuery用のオブジェクトを提供してくれます。要はPHPからjQueryが扱いやすくなります。 JavaScriptをそこまで知らずとも、PQueryを使うことで、PHPのみでAjax等のJavaScriptが持つ機能を実装できるようです。 PQueryを使ったTODOリストのデモも公開されてます。 JavaScript苦手なPHPプログラマの方は試してみましょう！
iPod風の階層的なナビゲーションを実装する面白ＵＩサンプル「ColumNav」:phpspot開発日誌
ColumNav Documentation ColumNav is a hierarchical menu implementation utilizing Bill Scott's Yahoo UI Carousel component. iPod風の階層的なナビゲーションを実装する面白ＵＩサンプル「ColumNav」。 一見、アイコンのついたコンボボックス風ＵＩでiPodライクな次のようなナビゲーションを実装する方法. ファイルをクリックでファイルを表示し、フォルダをクリックでアニメーションしながら階層を移動します。 動きがなめらかでクールな印象を出すことが出来そうです。まさにiPod風。 Ajaxを使って無制限に階層を辿ることが出来たり、なかなか工夫されているようです。 ソースも次のようにクリーンになるので使いやすそう。 <ul id="basketball-list"> <li>
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
