PHPのhtmlspecialcharsにはENT_QUOTESを付ける:phpspot開発日誌
htmlspecialchars ( ) でセキュリティ対策（ ENT_QUOTES もね！） PHPのhtmlspecialcharsにはENT_QUOTESを付ける。 htmlspecialchars でXSS対策をしていたと思ったら、デフォルトでは シングルクオートをエスケープしてくれない(マニュアル参照) htmlspecialchars($str, ENT_QUOTES); ENT_QUOTES を指定することで、シングルクオートも ' にエスケープ出来ます。 ZAPAブロ〜グのZAPAさんの指摘するh関数を定義してフレームワークなどに組み込んでおくのがスマートなのかもしれませんね→htmlspecialchars関数を簡単にする 意外に知られていないかもしれないので、念をのため紹介しておきます。(知っている人はごめんなさい) その危険な例をしめしてみます。 例えば、h
画像レイアウト関連で便利なjQueryプラグイン等まとめ:phpspot開発日誌
ちょっと画像レイアウト関連で便利なjQueryプラグインを調査仕事でまとめていたのでついでにご紹介。 この手のプラグインはjQuery Masonryが最初だったかと思いますが、色々と出てきたのでここら辺で全部しっておくとよいかも。 Wookmark 比較的新しめのPinterest風レイアウトを作る際に便利なプラグイン。 jQuery isotope レイアウトだけではなくダイナミックに要素をアニメーションさせることも出来るプラグイン 異なる幅・高さの画像も超綺麗に整列させるjQueryプラグイン「Atteeeeention plugin」 Google画像検索みたいに画像を綺麗にならべられます ↓↓↓↓ ボックス要素をレンガ状に綺麗に整列させる「jQuery Masonry」が凄い 要素の整列系の初期のプラグイン。最初に見た時はあっと驚いたものです ↓↓↓↓ 並べた画像を敷き詰めて超カ
PhotoshopでデザインしたシェイプをCSS3に変換するプラグイン「CSS3Ps」:phpspot開発日誌
CSS3Ps PhotoshopでデザインしたシェイプをCSS3に変換するプラグイン「CSS3Ps」 CSS3でちょっと凝ったオブジェクトを作りたい場合に、Photoshopがそのまま使えてCSS3にコンバートしてくれます。 CSS3で描画した驚きのグラフィックス、というのも、こうしたツールを活用すると驚きのCSS3グラフィックスでもなんでもなくなるのかも。 シェイプをデザインします グラデーションなんかもつけつつ プラグインのボタンをクリックで出力。そのまんま。 画像じゃないから軽いという点もポイントですね 関連エントリ CSS3でシャレオツなリストを作るチュートリアル アニメーションするバナーをCSS3で作るチュートリアル CSS3で出来たクールなLightBox実装チュートリアル CSS3で描かれたシェイプのサンプル集
ストレス無しでGoogleマップを使ったサイトが作れる「gmaps.js」:phpspot開発日誌
gmaps.js ? the easiest way to use Google Maps ストレス無しでGoogleマップを使ったサイトが作れる「gmaps.js」 Googleマップのサイトへの実装が本当に簡単で、かつ多機能なライブラリのご紹介です 簡単なマップを出すのに必要なコードは以下。 表示させるdivと緯度経度を指定するだけです 出来ることリストは以下 マップのクリック、ドラッグ時のイベントハンドラ実装 マーカー付与 ジオロケーション・ジオコーディング マップオーバーレイ マップ上のコンテキストメニュー実装 地図上の区画指定 目的地までのルート描画 静的な画像をマップ表示 などなど超多機能。 Googleマップ使うかもしれない場合は覚えておいて損はありません 関連エントリ Googleマップ関連のjQueryプラグインとチュートリアル集 スマホやタブレットでGoogleマップ風
綺麗にデザインされたピクトグラムアイコン100個セット:phpspot開発日誌
Dribbble - Free 16px Broccolidryiconsaniconsetitisfullof…icons by Visual Idiot 綺麗にデザインされたピクトグラムアイコン100個セット。 次のようなシンプルだけど綺麗なPSD形式のアイコンセットがダウンロードできます。 PSDファイルですが、ベクター形式なので拡大しても劣化がありません。Retinaディスプレイ対応も可能。 種類も汎用に使えそうなものが多いです 関連エントリ フリーでシンプルなピクトグラムアイコン６０個セット「Jigsoar icons」 いい感じのOpenType形式ピクトグラムアイコン集100個「Entypo」 ピクトグラム等、ミニマムなアイコンが２４個まとまったアイコンまとめ ピクトグラムが７００種類以上集まったアイコンセット「Pictodeck Icon Set」
Twitterエンジニアの作ったサイトデザインモック作成ツール「Stylo」:phpspot開発日誌
Open-sourcing Stylo by Alex MacCaw Twitterエンジニアの作ったサイトデザインモック作成ツール「Stylo」。 CoffeeScript, Spine, Sprockets といったテクノロジーを使っているらしいです。 なんかwebkit限定だったりしますが、インタフェースが良い感じに出来ていて、同じようなツールを作るのに参考にすることもできそう。 ツール自体は非常にシンプルで図形を配置して図形をカスタマイズしたり文字を配置したりといったものですが、容易に習得でき快適に動くため素早くモックをブラウザ上で作りたい際に使えそう 単に置くだけじゃなくて、オブジェクトを綺麗に並べるような機能もついており、シンプルだけど、こういう地味に大切なところはちゃんとしています。 Twitterエンジニアが作ったということで、なんとなくインタフェースの印象がBootstr
デザインそのままにfacebookのウォールをサイトに埋め込めるjQueryプラグイン「fb.wall」:phpspot開発日誌
Facebook Wall - a jQuery Social Media Plugin デザインそのままにfacebookのウォールをサイトに埋め込めるjQueryプラグイン「fb.wall」 facebookのウォールとはTwitterのタイムラインのようなものですが、それを簡単にサイトの特定エレメント内に埋め込めるプラグインです。 Twitterのタイムラインを表示している方もおおいですが、facebookのタイムラインも表示させたいという場合はこれが便利に使えそうです。 デザインは次のようにそのままのデザインでページに埋め込むことが可能。 Live Demo として動作デモをカスタマイズして動かせるので試してみましょう。 コード例は次のようにIDなどをオプションしてあげればOK $('#live-demo').fbWall({ id:'pehpspot', showGuestEnt
モダンな５０のPhotoshopのボタン用スタイル集:phpspot開発日誌
Free Button Styles | MediaLoot モダンな５０のPhotoshopのボタン用スタイル集。 クリック一発でリアルな質感を実現できるスタイルですが、次のような、モダンなボタン作成にはぴったりのスタイルが公開されているではありませんか。 Appleっぽいボタンもあっていい感じ。 ５０種類のデザインから選びます。カラーは自由にレイヤーカラーを変更すればよいですね これは入れるっきゃないですね 関連エントリ 映画のロゴみたいな超カッコイイロゴが一瞬で作れるPhotoshopスタイル集 Photoshopのクリエイティブで効率化ができるレイヤースタイル２０ ストライプ等、Photoshop用の４００個のパターンまとめ
長〜いulリストを１行で複数行に分割できるjQueryプラグイン「Multi-column lists」:phpspot開発日誌
長〜いulリストを１行で複数行に分割できるjQueryプラグイン「Multi-column lists」 2011年02月03日- Multi-column lists | jQuery Plugins 長〜いulリストを１行で複数行に分割できるjQueryプラグイン「Multi-column lists」。 <ul><li>1</li><li>2</li> ....... </ul> と、長い ul リストを、jQuery("ul").columns(5, true);のようにすることで、5行に勝手に分割してくれます。6行にしたければ6を指定 次のようになります。 通常これをやろうとすると、数値で割って、規定値にきたら一旦</ul>で閉じてみたいなことをする必要がありますね。 これをたった1行で出来るというのはかなりHTML出力側のプログラムが楽ちんになり、頭を使う必要がないですね。 行
HTML5で美麗なページめくり効果が作れるJSライブラリ「turn.js」:phpspot開発日誌
turn.js - The page flip effect for HTML5 HTML5で美麗なページめくり効果が作れるJSライブラリ「turn.js」 ドラッグ＆ドロップでべらっとめくるあのインタフェースがHTML5で実現でき、iPadやiPhoneなどでも動作します。 電子書籍ビューアとして使えそうですね ページに立体感を出すために影なんかも描画されてます。 マークアップや初期化も超簡単です。<div>を並べて初期化するだけ。 関連エントリ HTML5で超リアルなページめくり効果を実装するチュートリアルとサンプル モバイルブラウザでのHTML5対応状況が一目瞭然の「Mobile HTML5」 HTML5/JavaScriptでテキストtoスピーチを実現できる「speak.js」
ブラウザのCSS3、HTML5絡みの対応が一発で分かるようにできるライブラリ「Modernizr」:phpspot開発日誌
ブラウザのCSS3、HTML5絡みの対応が一発で分かるようにできるライブラリ「Modernizr」 2009年07月07日- Modernizr ブラウザのCSS3、HTML5絡みの対応が一発で分かるようにできるライブラリ「Modernizr」 ライブラリを使って、Canvas、opacity、Multiple backgrounds といったCSS3やHTML5の機能に対応しているかを簡単に調べることが出来るようです。 Google Ghrome の場合で対応を明示 Firefox 3 の場合で対応を明示 JavaScript では、次のように使えるようです。 if (Modernizr.cssgradients) { alert('対応'); } else { alert('未対応'); } cssgradients の他には以下のようなプロパティが利用可能。 Modernizr.ca
画像スライダーに関することならお任せ！なjQueryプラグイン「Slider Kit」:phpspot開発日誌
画像スライダーに関することならお任せ！なjQueryプラグイン「Slider Kit」 2011年04月12日- Slider Kit, sliding contents with jQuery 画像スライダーに関することならお任せ！なjQueryプラグイン「Slider Kit」 このプラグインを使うことで実に様々なスライダーが実現出来ます。以下にサンプルを。 一見普通の画像 カーソルを合わせるとページ送りが出るUI。これだけでもシンプルでかなり使えそう。無駄なUIは不要という方に。 ページインデックスを次のように○で表示したスライダーも作れます。 ページ番号がついたもの サムネイルがついた物 サムネイル＋ラベル付き サムネイルを横に配置したもの シンプルにサムネイルを敷き詰めた例 何らかの製品等の特徴を表示するようなおなじみのタブUI型スライダーも。 画像だけでなくHTMLも使える タ
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
