これは衝撃的！CSS開発を爆速化する「Emmet LiveStyle」:phpspot開発日誌
Emmet LiveStyle ? live bi-directional CSS edit of new generation CSS開発を爆速化する「Emmet LiveStyle」。 ブラウザのDOMインスペクタの方でCSSを修正するとSublimeTextに反映され、またSublimeTextを編集するとブラウザに即反映されるというプラグインです。 ブラウザで編集しちゃえば簡単にカスタマイズはできるけど、テキストエディタにコピーが必要で、逆にテキストエディタで書くのもブラウザのリロードが必要といった具合に手間がかかりますが、その手間がなくなります 更に、複数のブラウザウィンドウに即座に反映されるため、横幅を小さくしたブラウザ、通常のブラウザを開けば、レスポンシブデザインのプレビューが同時に終わります。 片方のブラウザのDOMインスペクタでCSSをカスタマイズしてももう一方のブラウザ
パララックスを活用した一見の価値ありなサイト２１:phpspot開発日誌
21 Examples of Parallax Scrolling in Web Design | Inspiration パララックスを活用した一見の価値ありなサイト２１。 パララックスは視差という意味ですが、マウスとかスクロールの位置によって、背景などが立体的に見えるというものです。 どれもうまい具合作られていて、みるだけでも勉強になります。 普通につくると、当たり前のように平面ですが、立体的にすることでインパクトを上げて覚えてもらいやすくなったり、よりプロダクトなどを魅力的にみせることができるのかも。 関連エントリ デザインに役立つ美麗サイトデザイン集やロゴデザイン・写真集 奥行きをうまく使ったサイトデザイン集３０ 次のサービスに使えるかもしれないロゴデザイン集２２ なんとなく和むイラストベースのWEBデザイン集60 黒ベースのクールなWEBサイトデザイン集
１個目のselectで２個目のselectの内容を簡単に変えられるjQueryプラグイン「Doubleselect」:phpspot開発日誌
１個目のselectで２個目のselectの内容を簡単に変えられるjQueryプラグイン「Doubleselect」 2010年05月26日- jQuery Doubleselect Plugin １個目のselectで２個目のselectの内容を簡単に変えられるjQueryプラグイン「Doubleselect」。 次のように、１個目のSelectボックスの内容によって２個目のselectボックスの内容が容易に切り替えるようなUIが簡単に実現できてしまうプラグインです。 １個目が野菜(Vegetables)の場合は、tomato, potato, asparagus が表示されます。 １個目をフルーツ(Fruits)にすると、apple, orange, kiwi, melon になります。 いざ実装しようとすると面度臭そうなのですが、jQueryプラグインによって、比較的簡単に実装できま
jQueryでXMLをパースして表示するコードサンプル例:phpspot開発日誌
Parse XML with jQuery | Papermashup.com jQueryでXMLをパースして表示するコードサンプル例が公開されています。 jQueryマスターな方には無用の物かも知れませんが、スニペットとしても使えそうなので便利かも、というのでご紹介。 $.ajax でサイト内にある .xml ファイルを取得して、success のハンドラによってXML処理させます。 普通に書くと大変ですが、jQueryを使うことで次のように簡単になります。 .xml のパスはサイト内のURLであれば何でもいいので、サーバ側に xml を出力するようなAPIが既にある場合、jsonに変換することなく簡単に使えますね。 jQueryのDOM操作の簡単さによってこれだけ短縮できているところが何とも凄いです。
プログラム内のデータベース処理高速化TIPS:phpspot開発日誌
10 sql tips to speed up your database プログラム内のデータベース処理高速化TIPSが10個紹介されているエントリのご紹介です。 SQLが適切に設計されていないとすぐにデータベース処理がCPUを圧迫してしまいますので可能な限り知っておきたいですね。 基本的な事から応用的な事まで参考になりそうだったのでメモ程度にご紹介。 explainでインデックスが使われているかを調べる 最も速いクエリは、クエリを発行しないこと、ということでデータをキャッシュしよう Memcached, CSQL Cache, AdoDB などでそれが可能 必要じゃないモノをselect しないようにする select * from table; ↓ select id from table; limit を使って取得する結果を少なくする foreach ループなどの中でsqlクエリを
地図のクリックした位置で地名をゲットできるjQueryプラグイン「jQuery-PlacePicker」:phpspot開発日誌
地図のクリックした位置で地名をゲットできるjQueryプラグイン「jQuery-PlacePicker」 2010年02月19日- nickspacek/jQuery-PlacePicker @ GitHub 地図のクリックした位置で地名をゲットできるjQueryプラグイン「jQuery-PlacePicker」が公開されてます。 次のようにGoogle Map の地図が現れて、クリックし、「Save」ボタンを押すと地名をゲットできます。直接文字列での検索も出来ます。 次はゲットしてinputに地名を入れた例です。日本でも対応しているところがいいですね。 地図→住所への変換をするような場面で使うことができますね。 関連エントリ 現地案内の説明ページ等で重宝しそうなインタラクティブなマップ作成用jQueryプラグイン Microsoftの地図サイトAPIをjQueryから簡単に使えるプラグイ
PHPでメールアドレスを画像化せずに簡単にスパム対策する方法:phpspot開発日誌
hide_email PHPでメールアドレスを画像化せずに簡単にスパム対策する方法です。 方法というよりも関数が公開されていて、次のように非常に簡単に使うことができます。 <?php echo hide_email('test@test.com'); ?> hide_email 関数に 自分のメールアドレス を渡すだけです。 これだけで、次のようにメールアドレスがクリックできる形で表示されます。 [javascript protected email address] HTMLに出力されるコードは以下です。 <SPAN id=e282852682>[javascript protected email address]</SPAN> <SCRIPT type=text/javascript>/*<
「HiFi RegExp Tool」を使って超高速に学ぶ正規表現入門:phpspot開発日誌
「HiFi RegExp Tool」を使って超高速に学ぶ正規表現入門。 先日『その場で動作させて確認する正規表現入門ツール「HiFi RegExp Tool」』として視覚的に動作が分かる正規表現ツールをご紹介しましたが、このツールを使った正規表現の入門実習を実際にしてみましょう。 入力してその場でマッチングされた文字がリアルタイムにハイライトするのですぐ効果が得られ、学習ツールとして非常に便利です。 HTML5では正規表現が使える、ということで、まだやってないというマークアップエンジニアやデザイナーの方、プログラミング勉強中な方は速攻でマスターしちゃいましょう。 HTML5以外でも、Windows用のエディタ等で文字列を一括置換したり、JavaScriptやPHP、Perlなどの言語でマッチングや置換に使えて覚えておいて損はありません。 ツールのURL: HiFi RegExp Tool
CSSでリストを整形するなら覚えておくべき８つのリストデザインサンプル集:phpspot開発日誌
CSSでリストを整形するなら覚えておくべき８つのリストデザインサンプル集。 リストデザインというと、CSSの整形方法によって様々な見せ方が可能ですが、ソースコード＆チュートリアル付きがまとまったエントリが公開されています。 リストデザインの際は、いつも単調になりがち、という方は覚えておくと、ちょっと変わったデザインも作れそうですし、テクニックを駆使してまったく新しいデザインを考えることも出来そう。 それでは以下にそのデザインされたリストのサンプルをご紹介。 1. サイトのナビゲーション風にデザインされたリスト 2. 番号付き＆番号の横に縦のラインがはいった見やすいリスト 3. 矢印画像を使ったリスト 4. iPhoneスタイルのクールなボックスリスト 5. ツリーっぽい形式にできるリストデザイン 6. 複数行にしてテキストっぽく表示できるテキストリスト 7. ワンラインにして、カンマを付与
ブラウザごとの面倒で分かり辛いCSSハックとはサヨナラできそうな「PHP CSS Browser Selector」:phpspot開発日誌
ブラウザごとの面倒で分かり辛いCSSハックとはサヨナラできそうな「PHP CSS Browser Selector」 2009年09月14日- ブラウザごとの面倒で分かり辛いCSSハックとはサヨナラできそうな「PHP CSS Browser Selector」。 CSS の記述の単純化 PHPでUserAgentを解析し、<html> に class を振ってしまうことで、CSSの指定が次のように楽になります。 /* IEのみに適用 */ .ie body { background-color: yellow } /* IE7のみに適用 */ .ie7 body { background-color: orange } /* geckoベースのブラウザのみに適用 */ .gecko body { background-color: gray } 使い方 (1) 必要なPHPファイルをインク
使える２１のPHPコードスニペット:phpspot開発日誌
使える２１のPHPコードスニペットが紹介されています。 例えば、以下のような便利なスニペットが紹介されています。 ・ランダム文字列作成 ・メールアドレスのエンコード ・ディレクトリ内のコンテンツ表示 ・ディレクトリ削除 ・JSONデータのデコード ・XMLデータのパース ・ファイルダウンロードヘッダー表示 ・タグクラウド作成 ・Ajaxリクエストかどうか判別 但し、掲載されているメールアドレスの正規表現チェックのコードは注意が必要です（参考）。 コードは以下エントリにて掲載されています。 21 Really Useful & Handy PHP Code Snippets 関連エントリ WEBデザイナーな方向けのPHP入門によさそうな、CSS内でPHPで使うサンプル PHPからTwitterに投稿するサンプルコード＆サンプルアプリ
RSAの公開鍵暗号方式でフォームのデータの暗号が行えるjQueryプラグイン「jCryption」:phpspot開発日誌
RSAの公開鍵暗号方式でフォームのデータの暗号が行えるjQueryプラグイン「jCryption」 2009年08月10日- jCryption - JavaScript data encryption RSAの公開鍵暗号方式でフォームのデータの暗号が行えるjQueryプラグイン「jCryption」。 2048bit のRSAで暗号可能。Ajaxでのサブミットもサポート。 暗号化は既にしてあり、SSLも不要。インストール簡単という特徴があります。 ちゃんとしたプロダクトに組み込む際は、きちんとした検証が必要だと思いますが、面白い仕組みですね。 デモページで各種デモが見れます。 データを送信すると、以下のように jCryption をキーとして暗号化が行われていることがわかります。 decrypted POST で元データが取れていますね。 これはすごいです。
MySQLの管理に役立ちそうな超多機能モニターツール「MONyog」:phpspot開発日誌
MySQL GUI Tools. MySQL Monitor and Manager MySQLの管理に役立ちそうな超多機能モニターツール「MONyog」が結構便利そうです。 WindowsやLinux上で動作するブラウザベースのツールです。 以下に、一部ですがそのフィーチャーについて紹介。 サーバごとのデータ、インデックスサイズが一覧できる データベースごとのサイズ、インデックスサイズなどをグラフで表示 クエリーアナライザー。クエリの統計が見れます。SQLごとの平均、最大実行時間などが分かりやすい どんなクエリが何回呼ばれたかといった統計 接続履歴、トレンド レプリケーションのステータス表示 プロセスリスト ダッシュボード Monyogの更なるスクリーンショットはこちら こちらにMonyogのドキュメントがあるので参考にしてください。 $99 〜のツールになりますが、これだけ多機能で、管
WEB開発者は必携かもしれないHTTPパラメータ解析用Firefoxアドオン「UrlParams」:phpspot開発日誌
WEB開発者は必携かもしれないHTTPパラメータ解析用Firefoxアドオン「UrlParams」 2009年08月17日- UrlParams :: Firefox Add-ons WEB開発者は必携かもしれないHTTPパラメータ解析用Firefoxアドオン「UrlParams」。 もうご存知の方も多いかもしれませんが、知らなかったのでご紹介。 Yahoo! などの検索エンジンにアクセスすると、「http://search.yahoo.co.jp/search?p=test&ei=UTF-8&fr=moz2」のように色々と引数がつきますが、これを分かりやすく解析してくれます。 さらに解析するだけでなく、独自パラメータを定義して送信するといったことも可能です。 上記GETによるアクセスで、以下のようにパラメータを分かりやすく表示してくれます。 POSTの場合は別のペインにパラメータが表示さ
ユーザのマウスの動きを保存して再生できるPHP+Ajaxな仕組み「smt」:phpspot開発日誌
(smt) simple mouse tracking // home ユーザのマウスの動きを保存して再生できるPHP+Ajaxな仕組み「smt」がなかなか興味深いです。 次のように、マウスを移動した軌跡を描画してくれ、利用者のマウスの動きを元にユーザビリティ向上に貢献できそう。 smtを使ったデモムービー集ページ mousemove イベントを使って座標をトラッキングさせてデータをサーバに保存、あとはデータを元にタイマーを使って描画するという仕組みのようで、なかなか面白いですね。 アクセスが多いとデータ量も結構なものになってきそうなので、自前でやるしかこうしたデータをちゃんと見ることは難しいのかもしれません。 このsmt は、ダウンロードしてサーバ設置型なので、遠慮なく使えますね。 関連エントリ Yahoo!のアクセス解析ツール「Yahoo! Web Analytics」 ケータイ用高機
オープンソースで本格的なＥコマースサイトが作れる「DantoCart」:phpspot開発日誌
DantoCart :: Open Source Ecommerce オープンソースで本格的なＥコマースサイトが作れる「DantoCart」。 以下はデモ用のサイトなのですが、ＵＩも綺麗で使いやすそうです。 デモサイトを見てみる こうしたショッピングサイト構築用のオープンソースは色々ありますが、選択肢の一つとして覚えておいてよいかもしれません。 関連エントリ PHP製のショッピングカートシステムいろいろ 超かっこいいJavaScriptショッピングカート「simpleCart(js)」 Ajaxベースのクールなショッピングカート作成
FirebugでXpathやCSSセレクタによってエレメントを高速に検索できるようになる「Firefinder」:phpspot開発日誌
FirebugでXpathやCSSセレクタによってエレメントを高速に検索できるようになる「Firefinder」 2009年05月25日- Firefinder for Firebug :: Firefox Add-ons FirebugでXpathやCSSセレクタによってエレメントを高速に検索できるようになる「Firefinder」。 Firebugの拡張として動作し、インストールすると Firefinder タブが表示されます。 まずは css セレクタによって探してみます。 div.content で検索すると、<div class="content">がマッチします。 divだけで検索するとすべてのdivを探すことが可能です。 XPathｄｅ検索してみたところ、同じように検索が可能 マッチしたエレメントは赤色でハイライト表示されます Firebug標準の検索機能は、1個1個検索して
CSSでピンバルーンを作成するチュートリアル:phpspot開発日誌
Create CSS pin balloons with ease CSSでピンバルーンを作成するチュートリアル。 次のような、カーソルを合わせるとハイライトされるような吹き出しをJavaScriptなしで作るチュートリアルです。 実際の動作はデモページを確認。 CSSのpositionとかhoverとかを組み合わせて作成してるみたいです。 吹き出し画像は透過PNG画像。 デモページ自体がサンプルページとなっているので、同じようなものを作りたい時に画像とCSSをちょっと書き換えて、サッと作れちゃうかもしれません。 タグ構造もとてもスッキリ <div id="map"> <div id="america"></div> <div id="europe"></div> <div id="africa"></div> <div id="asia"></div> <div id="australi
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
PHPで作るお手軽監視スクリプトのサンプル:phpspot開発日誌
jQueryでリアルタイムにCSSを書き換えるサンプル:phpspot開発日誌