サイト内にパノラマ画像をモダンな感じに読み込めるjQueryプラグイン「Panorama Viewer」:phpspot開発日誌
jQuery Panorama Viewer by Pete R. | The Pete Design サイト内にパノラマ画像をモダンな感じに読み込めるjQueryプラグイン「Panorama Viewer」。 パノラマ画像をよみこんで、D&Dやスワイプによって動かせるという感じのUIを作れます 実装されたページはなかなかいい感じ 関連エントリ 色々なタイプのスライダーが実装できる「sGlide」 HTML5＆CSS3なレスポンシブなスライダー実装jQueryプラグイン「Slippry」 スライダーの背景もダイナミックに切り替えるクールなスライダ実装jQueryプラグイン「Immersive Slider」 クロス環境で動作するレスポンシブスライダー実装jQueryプラグイン「FerroSlider」 レスポンシブでタッチ対応な軽量なスライダー実装jQueryプラグイン「Unslider」
HTML5＋JSONでインタラクティブなテーブルを作れる「Dynatable.js」:phpspot開発日誌
Dynatable.js - jQuery plugin for HTML5 JSON interactive tables and more HTML5＋JSONでインタラクティブなテーブルを作れる「Dynatable.js」 JSONからtable、tableからJSON形式に変換でき、実装できるテーブルもソートしたり件数を絞り込めたり検索できたりと、リッチにしてくれ、かつシンプルなデザインで使いやすいテーブルが作れるライブラリです。 tableはデータと密接な関係にあることが多いですから、こういうライブラリは結構使えそうです。 関連エントリ テーブルを折りたたみ可能なツリー型グリッドに変換できる「TreeGrid」 普通のテーブルをExcel風に超カッコよくしてくれるjQueryプラグイン「ParamQuery」 テーブル行をインクリメンタル検索できるようにするjQueryプラグイン
iPhone 5sサイト風の１ページスクロールなページを作れるjQueryプラグイン「One Page Scroll」:phpspot開発日誌
jQuery One Page Scroll by Pete R. | The Pete Design iPhone 5sサイト風の１ページスクロールなページを作れるjQueryプラグイン「One Page Scroll」。 流行りの１ページスクロールサイトが作れるプラグインです。iPhone 5sのサイト divを並べて初期化するだけなのでだれでも簡単に使えそう 関連エントリ ページを水平にパララックスしつつスクロールさせられるjQueryプラグイン「jInvertScroll」 バウンスさせたりできるページのアニメーションスクロール実装jQueryプラグイン「AnimateScroll」 スクロールしてもブロックを固定位置に表示させられるjQueryプラグイン「Sticky-Kit」 スクロールすると上に固定される一見普通のナビゲーション実装jQueryプラグイン「SMINT」 アニメ
JavaScriptでIEかどうかをたったの1行で判別する方法:phpspot開発日誌
Dean Edwards: Sniff! My current frog exaggerator of choice JavaScriptでIEかどうかをたったの1行で判別する方法。 なんと、次の1行だけで、isMSIE 変数に、IEで見れば true 、そうでなければ false を代入することが出来ます。 var isMSIE = /*@cc_on!@*/false; 次のサンプルコードで確認しました。 <html> <script language="javascript"> var isMSIE = /*@cc_on!@*/false; if (isMSIE) { alert('IE!'); } else { alert('not IE!'); } </script> <body> </body> </html> IEであれば IE! を alert し、そうでなければ not I
grepをよく使うプログラマはどう考えても乗り換えるべき新しいgrepコマンド「ack」:phpspot開発日誌
Beyond grep: ack 2.04, a source code search tool for programmers grepをよく使うプログラマはどう考えても乗り換えるべき新しいgrepコマンド「ack」。 サーバに入ってコードを書いている人はかならず使うgrepですが、grepよりも高速に検索でき、git,svn等のソースコード以外のソースはgrepしないで検索できるツールらしいです。 Perlで書かれていて、Perlの強力な正規表現が使え、ハイライトしてくれます。ソースツリーの下で「ack 検索ワード」で検索するだけというシンプルさもいいです WEBサービスを書いているとhtmlやphp等色々なソースをいじりますが、ファイルの検索対象も選べるため、便利です。 ack --php <検索ワード> でphpのソースのみを対象とし、ack --nophp <検索ワード>でphp
ブラウザ上でアイコンを選んでアイコンフォントが作れる「IcoMoon」:phpspot開発日誌
IcoMoon App ブラウザ上でアイコンを選んでアイコンフォントが作れる「IcoMoon」。 予め用意されたアイコンセットを選んで必要なものだけのフォントセットをジェネレートしてダウンロードできます 軽い方がいいですし要らないものをインクルードするのも無駄なので便利かも。 SVGアイコンのインポートも可能みたい ダウンロードしたところ。WEBフォントとして使えます 関連エントリ フリーのアイコンフォント１０まとめ アイコンフォントをコマンドラインで生成できる「Font Custom」 メジャーなアプリケーションのアイコンフォント「Pictonic」 ピクトグラムが美しいシンプルなフォントアイコン「CONDENSE」 オシャレなアイコンが詰まったアイコンフォント「PulsarJS」 ゲームに使えそうな960種類以上のアイコンセット「Game icons」
jQuery風に簡単にCanvasを扱えるラッパーライブラリ「Canvas Query」:phpspot開発日誌
Canvas Query jQuery風に簡単にCanvasを扱えるラッパーライブラリ「Canvas Query」 canvasのコードが次のようにjQuery風かつ直感的に記述できます jQueryを使っている人にとってはCanvasがより身近になりそうなライブラリですね スマホ・タブレットの普及でCanvasも重要な技術要素になっていく可能性を秘めていますが、基本を学んだ後はこうしたライブラリを使って便利に扱うのもよさそう 関連エントリ オープンソースのHTML5お絵かきウィジェット「Literally Canvas」 canvasを使って画像をスタイリングするチュートリアル Canvasベースのお絵かきが実装できるjQueryプラグイン「Sketch.js」 CanvasとWebcamで作られたブラウザ上で動作する面白デモｘ２
レスポンシブで超クールなカレンダーデモとｊQueryプラグイン「Calendario」:phpspot開発日誌
Calendario: A Flexible Calendar Plugin | Codrops レスポンシブで超クールなカレンダーデモとｊQueryプラグイン「Calendario」。 次のようなグラデーションが美しいカレンダーのデモとプラグインが共に配布されています。 カレンダーのHTML構造は予め決められており、CSSでデザインされています。 カレンダー機能はシンプルなものですが、コールバック等である程度カスタマイズできそうです。 関連エントリ Googleカレンダー風操作感を持つ美しいカレンダーを実装できる「FullCalendar」 カレンダーやDateピッカー関連のjQueryプラグイン20 これは新しい!クールなタイル状の年間カレンダー実装jQueryプラグイン「jQuery Verbose Calendar」
8bitキャラクターを描画できるjQueryプラグイン「EightBit.js」:phpspot開発日誌
Jquery Eight-Bit Plugin 8bitキャラクターを描画できるjQueryプラグイン「EightBit.js」。 サイト上の描画ツールを使ってドット絵を描いて、そのドット絵を描画できるというもの。画像ではなくCSSなため、拡大してもうまい具合に８ビット感が出せます。 ボタンを押すと、グラフィックをコード化したものが出力されるのでそちらをデータとして描画できます なかなか面白い仕組みですが、画像の変換ツールなんかが出てきたら実用的ですかね 関連エントリ 見た目がクールなグラフ描画用jQueryプラグイン「Morris.js」 クールなドアノブ風の％グラフを描画できるjQuery Knob XMLを超見やすく折畳み表示できるjQueryプラグイン「XML Tree」 faviconをアニメーションさせたりテキストを付与できるjQueryプラグイン「jQuery Favicon
CSS3でボーダーを超かっこよくアニメーションするサンプル:phpspot開発日誌
Simple yet amazing CSS3 border transition effects CSS3でボーダーを超かっこよくアニメーションするサンプル とりあえずデモページを見ていただくのが一番ですが、ボーダーをアニメーションさせて未だかつて無い効果をブラウザ上で表現しています。 デモページ 応用することでかなりいろんなことができそうだな、という、なんだかとってもワクワクするデモでした。 関連エントリ CSS3でシャレオツなリストを作るチュートリアル PhotoshopでデザインしたシェイプをCSS3に変換するプラグイン「CSS3Ps」 CSS3やCanvas、JS等を使ったローディング画像実装プラグイン１２ フルスクリーン背景がスライドショーになるCSS3サンプル
超気合の入ったiOSアプリケーションアイコン４０:phpspot開発日誌
40 Stunning iOS App Icons for Design Inspiration | SpyreStudios 超気合の入ったiOSアプリケーションアイコン４０。 iPhoneアプリとダウンロード数の関係は大きいというわけでアイコンのインパクトは重要ですが、気合の入ったアイコン集が公開されています。 見るだけでも楽しいですが、真似てみたりしてもよいかもですね 関連エントリ iOSのAppアイコン作成用PSDテンプレート ６００以上のシンプルなベクターアイコンが入手できる「iconmonstr」 綺麗にデザインされたピクトグラムアイコン100個セット RetinaディスプレイOKなアプリ用PSDアイコン350
ロゴ入りのクールなQRコードが作れる「Unitag」:phpspot開発日誌
Unitag QR Generator- Create fancy QR Codes for free - Check out Premium access - Unitag - Connect to the world ロゴ入りのクールなQRコードが作れる「Unitag」。 WEBブラウザ上でサイトのロゴが入ったQRコードなどを簡単に作れるツールです サンプル例。なんかかっこいい。 ロゴ入り。こんなのでも読めるんですね ちょっとデザインされた感じのもの デザイナーの方はこういうところもデザインしたいということで、１つのツールとして試してみてもよさそう 関連エントリ Google Chart APIを使ったQRコードを超簡単に描画してくれるjQueryプラグイン「MyQRCode」
CSS3単体で動く垂直アコーディオンを:targetで実装チュートリアル:phpspot開発日誌
How to Create a CSS3-Only Vertical Accordion Using the :target Selector SitePoint CSS3単体で動く垂直アコーディオンを:targetで実装チュートリアル。 次のようなアコーディオンをCSS3単体で動かすためのチュートリアルが公開されています。 なんと、ブラウザの戻るボタンで戻ってもページ移動できちゃうというものになっています。 ちょっと勉強しないといつの間にこんなことになってるの、と絶叫してしまいますね。 CSS3さん、まだまだ本気出してないですね。 関連エントリ CSS3で画像レスなソーシャルサイト連携ボタンサンプル集「Zocial」 CSS3で画像を分割スライドする超クールなパネル実装例 CSS3のプロパティやサンプルを調べるのに便利な「CSS3 Click Chart」
ピクトグラムが７００種類以上集まったアイコンセット「Pictodeck Icon Set」:phpspot開発日誌
Pictodeck Icon Set: Over 700 Free Pictograms for Keynote - Noupe ピクトグラムが７００種類以上集まったアイコンセット「Pictodeck Icon Set」 次のようなシンプルだけどセンスのあるアイコンが７００個詰まったセットがダウンロード可能です。 こういうテイストのアイコンを使えばGoogle＋のようないい感じのサイトを作ることができそうですね 関連エントリ 白黒だけど汎用的にシンプルデザインのWEBアイコン５００ ソーシャル等シンプルデザインのアイコン144個セット シンプルだけど味のある１００以上のベクターアイコンセット シンプルさがいい感じのソーシャルアイコンセット「Simplito」
目を引くレトロな背景パターン１５:phpspot開発日誌
15 Free Retro Patterns for Eye-Catching Designs Graphic Fetish | Daily Creative Inspiration and Resources 目を引くレトロな背景パターン１５ なんとなく懐かしさを感じさせたりするような背景パターンが１５種類まとまっていたエントリのご紹介 統一性はありませんが、気に入ったらストックしておいてもよいかもしれませんね 関連エントリ 背景画像に更にドットパターンを合成して超カッコよくできるjQueryプラグイン「Vegas Background」 迫力あるフルスクリーンの背景スライドショーが実装できるjQueryプラグイン 背景画像を自動リサイズしてうまくフィットさせられるjQueryプラグイン「Backstretch」 CSS3な背景パターンのギャラリーサイト「CSS3 Patterns Ga
バックグラウンドを奇妙にアニメーションさせるjQueryプラグイン:phpspot開発日誌
very cool background animation with jquery | background animation バックグラウンドを奇妙にアニメーションさせるjQueryプラグイン。 very cool という元エントリですがこれは正確ではないと思います。マウス位置に応じて背景が動きます。 人によってはすこしウザい、と言われてしまうかもしれないプラグインですが、少し珍しかったのでご紹介です。 なぜ、これをつくろうかと思ったのか？は疑問ですが、ちょっとしたサプライズ効果にはよさそうです。 関連エントリ レイアウトに関する強力なjQueryプラグイン６つ 超かっこいいmarquee2.0を実現するjQueryプラグイン「fMarquee」 テキストにグラデーションをかけられるjQueryプラグイン「True Gradient Text」 ブロックサイズ内に画像を綺麗に収めるj
超シンプルなマークアップで実現できるCSS3による画像を使わない吹き出しサンプル:phpspot開発日誌
How to Create CSS3 Speech Bubbles Without Images JavaScript & CSS SitePoint Blogs 超シンプルなマークアップで実現できるCSS3による画像を使わない吹き出しサンプル。 吹き出しというと実装には若干階層を作ったマークアップが必要と考えますが、CSS3を使うと<p>だけで実現できるようです。 次のような吹き出しも、「<p class="bubble speech">SitePoint Rocks!</p> 」というシンプルなマークアップで実現出来ます。 影もついてますね。 角丸だけなら border-radiusで簡単に実現できそうですが、角のとんがったやつはちょっとしたハックを使っています。 border プロパティで枠線を設定し、左と上の線のみに色をつけることで三角形にしてます。それを２枚重ねることでとんがった
PHP開発者のMySQLの間違いトップ１０:phpspot開発日誌
WindowsアプリのツリービューっぽいUIをWEB上で簡単実装できるjQueryプラ... 次の記事 ≫：シンプルさがいい感じの１５４種類のアイコンセット Top 10 MySQL Mistakes Made by PHP Developers PHP開発者のMySQLの間違いトップ１０。 手慣れている人にとっては知ってることも多いかもしれませんが、初心者が役立ったり、知らない部分のカバーとしてメモとして書いてみます MyISAMを使っている デフォルトはストレージエンジンにMyISAMだけどInnoDBを使おう リカバリ可能でオンラインバックアップ機能、外部キー利用可能なInnoDBおすすめ 詳細：Open database life: MyISAMとInnoDBのどちらを使うべきか PHPのMySQL関数を使っている mysql_* 関数を使わず、PDO等でストレージ変更に対応しよう
PHPでMongoDBを使ってNoSQLするチュートリアル:phpspot開発日誌
PHP & MongoDB Sitting in a Tree: Part 1 | Inside DealTaker PHPでMongoDBを使うチュートリアルが公開されています。 MongoDBとはスキーマを指定せずにデータの格納が可能で高いパフォーマンスを発揮するドキュメント指向DBです。 MySQLから置き換えることでパフォーマンスの向上が見込める上に好きなarrayなんかを突っ込むことが出来て使い勝手もよさそうです。 MongoDBについてはMongoDBのパフォーマンスをBerkeley DB, H2, MySQLと比較 - kaisehのブログ を参考に。 この記事中のベンチマークではMySQLに比べて大きくパフォーマンスを上げられることが示されています。 で、今回のチュートリアルの記事なのですが、MySQLではこうやるけど、MongoDBではこうやる、といったコードの対応も書
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
アプリに使えそうな５０個のアイコンセット「Simplycons Icon Set」:phpspot開発日誌