表示領域に入ったかどうかを検知する「in-view.js」:phpspot開発日誌
in-view.js - Get notified when a DOM element enters or exits the viewport. 表示領域に入ったかどうかを検知する「in-view.js」 アニメーション等は画面領域外でしても静止画と変わらず意味の無いものになってしまいますが、表示領域に入ったタイミングでアニメーション等をさせるためのライブラリです 依存性がなく軽量でで使うことが可能です 関連エントリ SVGを使ったアニメーションがクールなスライド実装サンプル 円形にアニメーションするSVGグラフ実装JS「circles」 文書スクロールと共に地図をアニメーション表示できるデモがすごい Bootstrapのナビメニューにアニメーションを付けてかっこ良くする「Hoverify Bootnav」
単体で動くドラッグ＆ドロップ用JSライブラリ「Draggabilly」:phpspot開発日誌
Draggabilly 単体で動くドラッグ＆ドロップ用JSライブラリ「Draggabilly」 ドラッグ＆ドロップだけ使いたい場合に使えそう。マウスだけでなく、タッチにも対応しています。 ドラッグ開始、移動中、終了時にイベントハンドラを設定できます スマホサイトで軽く手軽にドラッグを使いたい場合に検討してみてもよさそうですね 関連エントリ ドラッグ＆ドロップでアップロードが簡単実現できるjQueryプラグイン「Dropzone.js」 ドラッグ＆ドロップによるクールなファイルアップロードを実現できる「Dropzone.js」 ドラッグ＆ドロップで並び替えができるダッシュボード作成jQueryプラグイン「sDashboard」 ドラッグで回転する3Dオブジェクトが作れる「ThreeSixty」 クロスブラウザでファイルのドラッグ＆ドロップ、Ajaxアップロードを可能にする「FileDrop」
画像のレイアウトに使えるjQueryプラグイン「jQuery Photoset Grid」:phpspot開発日誌
jQuery Photoset Grid - Style Hatch 画像のレイアウトに使えるjQueryプラグイン「jQuery Photoset Grid」 １つのdiv内に<img>で画像を並べるだけで写真をレイアウトしてくれるプラグインです。 コードは以下 次のようにレイアウトされます。 元の写真がいいというのはあるんでしょうけど、写真がよりオシャレに見えますね 関連エントリ テキストを新聞風のレイアウトにできるjQueryプラグイン「Columnizer」 CSSレイアウトをWEB上でサクッと作れる「PageBlox」 アイテムをドラッグ＆ドロップで画面レイアウト出来るjQueryプラグイン「gridster.js」 画像レイアウト関連で便利なjQueryプラグイン等まとめ これは新しい!パネルレイアウトが美しいスライドショー実装デモ コンテンツ幅に対してテキストを最大にして美し
文字や画像にリアルタイムでモザイク処理がかけられるjQueryプラグイン「SPOILER ALERT!」:phpspot開発日誌
文字や画像にリアルタイムでモザイク処理がかけられるjQueryプラグイン「SPOILER ALERT!」 2013年03月21日- SPOILER ALERT! 文字や画像にリアルタイムでモザイク処理がかけられるjQueryプラグイン「SPOILER ALERT!」。 $ ('spoiler, .spoiler').spoilerAlert()のように初期化するだけで、画像や文字をモザイク処理することが出来ます。 マウスオーバーでうっすらみえるように、クリックでモザイク解除みたいなことが可能です。 あとはどう使うか？というところですが、実装の際にJS側でやってしまえるというのは楽でいいですね。 関連エントリ アニメーションしながらソートできるjQueryプラグイン「Animated Table Sorter」 高機能なカラーピッカーを実現出来るjQueryプラグイン「Spectrum」 i
HTMLメール用のレスポンシブテンプレート「Antwort」:phpspot開発日誌
Antwort | Responsive Layouts for Email HTMLメール用のレスポンシブテンプレート「Antwort」 HTMLメールを送る際に、メールクライアントに併せてレスポンシブに動くみたい。 float対応していないクライアント向けにtableタグを使う等しているところが、他のレスポンシブフレームワークと違うところ メールでのマーケティングに活用したいところですね 関連エントリ レスポンシブなiPhoneのサイドメニューっぽいメニューが作れるjQueryプラグイン「Sidr」 レスポンシブなCSSベースのドロップダウンメニュー「Top Drawer」 レスポンシブな日付ピッカー実装jQueryプラグイン「pickdate.js」 最初からレスポンシブなCSSデザインのHTMLテンプレート３５ レスポンシブなテーブル作りに役立つjQueryプラグイン「FooTab
ページ内のどこにいるかを分かりやすくナビしてくれるjQueryプラグイン「scrollNav.js」:phpspot開発日誌
ページ内のどこにいるかを分かりやすくナビしてくれるjQueryプラグイン「scrollNav.js」 2013年01月29日- scrollNav.js ページ内のどこにいるかを分かりやすくナビしてくれるjQueryプラグイン「scrollNav.js」。 ページの見出しを<h1〜6>のタグで定義しているとして、見出しを自動でサイドバーに固定で出してくれて、カレント位置の見出しを太字にしてナビゲーションしてくれます。 当然、ナビ部分をクリックすれば指定位置までアニメーションしながらスクロールしてくれます。 コンテンツを追加した際も、ナビゲーションを変えなくていいので、とっても便利ですね jQueryプラグインなので初期化するだけで利用もとっても簡単。 関連エントリ レスポンシブなナビゲーションの見本やチュートリアル ページ上部に隠れるナビゲーションバーが実装できるjQueryプラグイン「j
テキストを要素内にうまく収めてはみ出させないjQueryプラグイン「trunk8」:phpspot開発日誌
trunk8 | Rick Viscomi テキストを要素内にうまく収めてはみ出させないjQueryプラグイン「trunk8」 WEB開発に携わる人なら必ず経験する、要素からのテキストのはみ出しやレイアウト崩れ。 指定したサイズの要素ないのテキストは、どんなものが入ってきても綺麗にまるめたい、という場合に使えます。 元のテキストが以下のようにあったとします。 スクリプトを読み込んだ後、$(elem).trunk8(); とJSで記述すると次のように一瞬で1行に収めることができます。 （オプションで行数指定も可能） 綺麗に要素内に収める「もっと読む」も次のように実現できます。 省略バージョンはきっちり枠内にはまっていますね。これをJSとライブラリレスで実現するのはなかなか難しい所がありますね。 これは便利。 関連エントリ テキストをブロックの中にフィットするように自動リサイズできる「jQue
PhotoshopでデザインしたシェイプをCSS3に変換するプラグイン「CSS3Ps」:phpspot開発日誌
CSS3Ps PhotoshopでデザインしたシェイプをCSS3に変換するプラグイン「CSS3Ps」 CSS3でちょっと凝ったオブジェクトを作りたい場合に、Photoshopがそのまま使えてCSS3にコンバートしてくれます。 CSS3で描画した驚きのグラフィックス、というのも、こうしたツールを活用すると驚きのCSS3グラフィックスでもなんでもなくなるのかも。 シェイプをデザインします グラデーションなんかもつけつつ プラグインのボタンをクリックで出力。そのまんま。 画像じゃないから軽いという点もポイントですね 関連エントリ CSS3でシャレオツなリストを作るチュートリアル アニメーションするバナーをCSS3で作るチュートリアル CSS3で出来たクールなLightBox実装チュートリアル CSS3で描かれたシェイプのサンプル集
faviconを書き換えてfacebookの通知っぽくしてくれるfaviconアラート実装ライブラリ「Tinycon」:phpspot開発日誌
faviconを書き換えてfacebookの通知っぽくしてくれるfaviconアラート実装ライブラリ「Tinycon」 2012年02月09日- Tinycon - Favicon Alert Bubbles faviconを書き換えてfacebookの通知っぽくしてくれるfaviconアラート実装ライブラリ「Tinycon」 次のように、Chromeのfavicon部分を書き換えて何件の通知があるかを分かりやすくできるJSライブラリです。 Chromeで開いてみると通知がどんどん増えていくのが面白いです。 IEでも、タイトルを書き換えて (27) タイトル のような感じで通知が分かるようになっています。 facebook等で通知があると嬉しいものですが、こうした形で通知がよりわかり易くなるといいですね。 関連エントリ 高機能なカルーセルを実装するjQueryプラグイン５０まとめ 時間の入
通常のフォームを瞬時にAjax化できるjQueryプラグイン「ALAJAX」:phpspot開発日誌
ALAJAX - a jQuery plugin for ajax auto form sending | Freelancer ID 通常のフォームを瞬時にAjax化できるjQueryプラグイン「ALAJAX」 フォームなんかを作る場合はAjax前提で作ったりしますが、このプラグインで $('#form').alajax(); のように初期化すれば一瞬でajax化が完了します。 もちろん、サーバ側のプログラムの調整は必要ですが、簡単にajax化できるというのはよいかもしれませんね。 やっぱりajaxフォームの速度ってはやくて利用者としては速いほうがいいわけなので、こういう風にマークアップの作り手側は簡単に対応できると作り手としては嬉しいですね。 関連エントリ Ajaxスタイルのローディングも画像を使わずピュアCSSで実現するデモ 画面遷移なしのAjaxでファイルアップロードするjQuer
並べた画像を敷き詰めて超カッコよくするjQueryサンプル:phpspot開発日誌
Automatic Image Montage with jQuery | Codrops 並べた画像を敷き詰めて超カッコよくするjQueryサンプル。 <img>を単に並べるだけであとはブラウザの幅に応じて画像を次のように並び替えてくれちゃうデモとスクリプトのダウンロードが可能です。 画像間の調整や背景色の調整等が行えるようです。 デモページはこちら ブラウザサイズを変更しても画像を再計算して表示しなおしてくれます。 背景を黒にするとよりオシャレな感じです。 関連エントリ 異なる幅・高さの画像も超綺麗に整列させるjQueryプラグイン「Atteeeeention plugin」 ブロックサイズ内に画像を綺麗に収めるjQueryプラグイン「CJ Object Scaler」
HTML5で超リアルなページめくり効果を実装するチュートリアルとサンプル:phpspot開発日誌
Create a page flip effect with HTML5 canvas | Tutorial | .net magazine HTML5で超リアルなページめくり効果を実装するチュートリアルとサンプル。 canvasなんかも活用しつつ次のようにリアルに実現できちゃってます。Chromeなんかでは超なめらかでした。 Flashじゃなくてもできちゃうんですね。 ライブデモ 実装のためのコードがチュートリアル形式で解説されていますが、このテクニックは色々と使えそうですね。 関連エントリ CSS3を使った驚きのデモいろいろ２５種類 画面をスワイプさせてページ送りができるWordPressプラグイン「iPad Swipe」 iPadのブラウザ上で電子書籍風のめくる操作を可能にするJavaScript
これは注目の超リッチなUIを実装できるjQueryベースのUIライブラリ「jQuery EasyUI」:phpspot開発日誌
これは注目の超リッチなUIを実装できるjQueryベースのUIライブラリ「jQuery EasyUI」 2011年07月19日- jQuery EasyUI - help you build your web page easily これは注目の超リッチなUIを実装できるjQueryベースのUIライブラリ「jQuery EasyUI」 Ext.jsばりに美しくてリッチなUIをjQueryでも実現できちゃいます。さらに、使い勝手がjQueryなので誰でも簡単に実装できちゃいます。Extはなんとなく取っ付きにくいと感じたかたも簡単に使えそう。 サイト上のチュートリアルやドキュメントも充実していて分かりやすいです。 リッチなものが作れるのはいいけど使い方が難しかったりメンテナンス大変だと、使う気が少し失せてしまいそうですがこれなら大丈夫かもしれません。 テーマやマルチリンガルにも対応しているらし
画面をスワイプさせてページ送りができるWordPressプラグイン「iPad Swipe」:phpspot開発日誌
WordPress iPad Swipe WordPress Plugins 画面をスワイプさせてページ送りができるWordPressプラグイン「iPad Swipe」。 プラグインをダウンロードして有効化するだけで、スワイプが有効になります。 iPadやiPhone向けのブログで使い勝手を向上させる用に覚えておいてもよさそうです。 左にスワイプすることで、次のエントリ、右にスワイプで前のエントリに移動することが出来ます。 設定ページではiPad以外でも有効にするかどうかの設定（デフォルトはiPadのみ）や、ポップアップでスワイプが効くことをメッセージ表示できるのですが、そのメッセージを指定できます。 ブログを、ページをめくる要領でページ送りが出来るというのはタッチパネル型のデバイスではなかなか使い勝手がよいみたいです。 関連エントリ iPhone/iPad用サイト作成時に使えるスワイプイ
HTML5サイトの土台を作ってくれる「Initializr」:phpspot開発日誌
Initializr HTML5サイトの土台を作ってくれる「Initializr」。 １からHTMLを作っていくのもいいですが、Initializrを使えばウィザード形式で進めると基本的なファイルをzipでダウンロード可能です。 基本HTMLを含むか、jQueryを含むか？の設定や、サーバ設定も含んだ形でパッケージ化が可能です。 HTMLに初期コンテンツを含むかどうか？ jQueryを含むかどうか？ その他設定した後、ダウンロード デザインはHTML５のロゴをモチーフにしたのだと思いますが、UIはなかなか分かりやすいウィザードになっています。 関連エントリ HTML5を使ったサイトをまとめたギャラリーサイト色々 見ておくべきHTML5サイト集 HTML5のcanvasタグで描くグラフ描画ライブラリ「AwesomeChartJS」 PCやスマフォでどこでも持ってる音楽を聴けるHTML5ベース
知っとくと便利なPHPのテクニック９つ:phpspot開発日誌
9 Useful PHP Functions and Features You Need to Know | Nettuts 知っとくと便利なPHPのテクニック９つが掲載されていました。 初心者の方は勿論、PHPを長年使ってる人にも使えるテクニックが載っていましたので勉強がてらにメモ。 func_get_args() 関数で可変引数 を受け取る 通常、関数といえば、次のように引数と共に定義します。 function hoge($arg1, $arg2) { } のように定義して引数を受け取りますが、好きな個数で引数を受け取りたい場合は、次のようにfunc_get_argsで受け取れます。 function hoge() { $args = func_get_args(); foreach ($args as $key=>$value) { echo "arg{$key} is $value
AjaxなTODOリストをMySQL＋PHP＋jQueryで作成するデモとチュートリアル:phpspot開発日誌
AJAX-ed Todo List With PHP, MySQL & jQuery ? Tutorialzine AjaxなTODOリストをMySQL＋PHP＋jQueryで作成するデモとチュートリアルが公開されています。 プログラムのダウンロードも可能です。UIも次のようになかなかお洒落でシンプル 編集時はインラインでそのまま編集することが出来ます。 削除の際にはダイアログが次のように現れて削除の確認を行います。 なんらかのプログラムのベースとして使えそうですね。 入門としてもなかなか、やりごたえのあるチュートリアルではないでしょうか。 関連エントリ PHPとjQueryのAjax連携の学習用チュートリアル PHPによってCSSを動的に出力する初心者向けチュートリアル Ajax/CSS/PHP等のチュートリアルまとめ
node.jsに関する基礎や開発・チュートリアルのまとめ:phpspot開発日誌
node.jsに関する基礎やチュートリアルのまとめ。 リアルタイムなWEBを実現するには必須のサーバサイドJS、node.jsについて色々とまとめてみました。 node.js node.jsについて node.js なんとなく凄そうだけどよく分からないという方も多いかもしれないので簡単に解説。 一番最初見た時は何かのJavaScript ライブラリかと思ったのですが、全く違って、V8というChromeにものっている高速JavaScriptエンジン上で動くサーバを動かせる仕組み。 サーバ自体を具体的に言うと次のようなコードで実現します。 var http = require('http'); http.createServer(function (request, response) { response.writeHead(200, {'Content-Type': 'text/plain
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
JSONデータをHTMLフォームに変換し、更にJSONに戻せる「medea」:phpspot開発日誌
JSでデータのビジュアリゼーション機能が豊富に詰まった「Pt.js」:phpspot開発日誌