スクロールしてもブロックを固定位置に表示させられるjQueryプラグイン「Sticky-Kit」:phpspot開発日誌
スクロールしてもブロックを固定位置に表示させられるjQueryプラグイン「Sticky-Kit」 2013年08月08日- Sticky-Kit | jQuery plugin for sticky elements スクロールしてもブロックを固定位置に表示させられるjQueryプラグイン「Sticky-Kit」 スクロールしても、ナビゲーションは固定位置に表示させたいという場合があります。最近流行りですね。 かなり複雑なレイアウトであっても、簡単に要素を固定し、ユーザビリティ向上に繋げられるのは便利。 実際にこれを１からやろうとするとかなり大変ですが、jQueryプラグインのため、1行でサクッと実現できるあたりが素晴らしいです 関連エントリ アイテムをドラッグ＆ドロップで画面レイアウト出来るjQueryプラグイン「gridster.js」 ドラッグ＆ドロップで再編成できるPinteres
地図や動画、なんでも重力を付けてしまえるjQueryプラグイン「box2d-jquery」:phpspot開発日誌
地図や動画、なんでも重力を付けてしまえるjQueryプラグイン「box2d-jquery」 2012年12月19日- franzenzenhofer/box2d-jquery GitHub 地図や動画、なんでも重力を付けてしまえるjQueryプラグイン「box2d-jquery」。 一見普通のサイトに重力を与えることでサイトが崩壊し面白いエフェクトをかけられるjQueryプラグインです。 box2dというライブラリは数年前に話題になりましたが、そのjQuery版がgithubにて公開されています。 重力によってアイテムが崩壊していき、それぞれドラッグ＆ドロップが可能。 デモで面白いのは、地図や動画がマウスで投げられるところ。 動画にも重力。動画は問題なく再生されています。 ゲームに活用したり、エイプリルフールネタや、キャンペーンサイトにインパクトを与えたりと、覚えておけば使えそうですね 関
画像をCSSだけでハイクオリティに縮小サムネイル化する方法:phpspot開発日誌
Tip: High quality CSS thumbnails in IE7 ・Devthought 画像をCSSだけでハイクオリティに縮小サムネイル化する方法が紹介されています。 普通、IEで、img に対して、width, height 指定すると、画像が汚く縮小されちゃってましたが、CSSの指定をしちゃうとそれが解決されるということのようです。 具体的には以下のCSS指定によってそれが可能みたいです。 img { -ms-interpolation-mode: bicubic; } デモページ う〜ん、縮小してもとっても綺麗です。 FirefoxやChromeの場合は何も指定しなくても綺麗に縮小される、っていうのも知りませんでした。 これは、サーバサイドでサムネイルを生成しなくて良くなる場面が出てきて開発者としては手間の削減になりますね。 転送量を考えれば、サムネイルが完全に不要に
JSでのタイマー処理がもっと簡単になるjQueryプラグイン「timing」:phpspot開発日誌
timing: a jQuery plugin JSでのタイマー処理がもっと簡単になるjQueryプラグイン「timing」 setTimeoutやsetIntervalはタイマー関連の関数ですが、沢山使うとどこで何やってるかわかりにくくなって管理がめんどくさいですね。 timingプラグインを使えば、次のように書けば 0.3秒ごとにクラスをつけたり消したりということが可能。これにより文字を点滅させたりする処理が簡単にかけます $('.example1').repeat(300).toggleClass('blink'); repeat は setIntervalにあたり、何度も実行させるメソッドでありますが、setTimeoutの対応としてwaitメソッドがあります。 次のように書けば、0.5秒後にクラスを追加し、その0.2秒後にクラスを削除というような処理が可能です。これをsetTim
ストレス無しでGoogleマップを使ったサイトが作れる「gmaps.js」:phpspot開発日誌
gmaps.js ? the easiest way to use Google Maps ストレス無しでGoogleマップを使ったサイトが作れる「gmaps.js」 Googleマップのサイトへの実装が本当に簡単で、かつ多機能なライブラリのご紹介です 簡単なマップを出すのに必要なコードは以下。 表示させるdivと緯度経度を指定するだけです 出来ることリストは以下 マップのクリック、ドラッグ時のイベントハンドラ実装 マーカー付与 ジオロケーション・ジオコーディング マップオーバーレイ マップ上のコンテキストメニュー実装 地図上の区画指定 目的地までのルート描画 静的な画像をマップ表示 などなど超多機能。 Googleマップ使うかもしれない場合は覚えておいて損はありません 関連エントリ Googleマップ関連のjQueryプラグインとチュートリアル集 スマホやタブレットでGoogleマップ風
div全体をクリッカブルにするjQueryプラグイン「DIV LINKER」:phpspot開発日誌
Div Linker | jQuery Plugins div全体をクリッカブルにするjQueryプラグイン「DIV LINKER」。 次のようなマークアップがあったとして、この場合は「Link text」部分にしかリンクされません。 <div class="divlinker"> <img src="image.jpg" width="151" height="130" /> <br /> <a href="//www.google.com">Link text</a> </div> そこでこちらのプラグインを使って初期化します <script> $(".divlinker").divlinker(); </script> するとDIV全体がクリックできるようになるというもの。 デモページ HTMLをきれいにかきつつdiv全体を<a>みたいに動かすことができます 関連エントリ RSSやA
iPhone等でもスワイプで画像を送れるカルーセル実装jQueryプラグイン「Roto」:phpspot開発日誌
Roto | jQuery Plugins iPhone等でもスワイプで画像を送れるカルーセル実装jQueryプラグイン「Roto」 PCオンリーでも使えるのですが、iPhoneでもスワイプで画像をドラッグ＆ドロップで送れるプラグインです。 PCで見るとボタンが表示されて画像を送ることができますし、iPhoneでアクセスするとボタンは非表示で画像をカルーセルできます。 横に一列というだけじゃなくて、縦にもスライドできます。 HTML5アプリとしてphonegapなんかを使ってiPhoneアプリを作る場合なんかにもいいかもしれません。 関連エントリ スマフォサイト作成時に超便利な画像タッチでタッチ位置をズームできる「Cloud Zoom touch」 ソーシャルな活動を１個にまとめて配信できるjQueryプラグイン「LifeStream」 オープンソースのマルチタッチ用ジェスチャーアイコンセ
Instagram風エフェクトをかけられるPhotoshopアクション集:phpspot開発日誌
10 Photoshop Actions to Create Instagram Style Effects Instagram風エフェクトをかけられるPhotoshopアクション集がまとまっています。 カッコいいInstagram風のエフェクトをPhotoshop上でもアクションによりインスタントに実現することができます。 以下は加工エフェクトの例。全体的にいいかんじです。 関連エントリ 色調を様々に変えてくれるPhotoshopアクション80 画像にウォーターマークを追加してコピーライト表示を追加するPhotoshopアクション作成
複雑なデータ構造のJSONを扱う際にCSSセレクタ風にアクセスできて超便利な「JSONSelect」:phpspot開発日誌
複雑なデータ構造のJSONを扱う際にCSSセレクタ風にアクセスできて超便利な「JSONSelect」 2011年05月25日- JSONSelect 複雑なデータ構造のJSONを扱う際にCSSセレクタ風にアクセスできて超便利な「JSONSelect」 jQuery成功の背景には、そのDOMへのアクセスのしやすさがひとつの要因だと思いますが、JSONSelectを使うと、JSONデータへのアクセスをCSSセレクタっぽく、jQueryっぽく簡単にアクセスできます。 例えば、次のようなJSONデータがあったとしましょう。 JSONSelectで、「.languagesSpoken .language」として選択すると、次のように要素を選択できます。 例えば、検索結果などで、同じ構造の要素がリストとして帰ってくるようなケースにおいて、同じ名前の属性リストをサクッと取得可能。 上位階層が指定できるた
スマフォサイト作りの前に知っておくべきデザインギャラリー等リソースまとめ:phpspot開発日誌
スマフォサイト作りの前に知っておくべきデザインギャラリー等リソースまとめ。 「スマートフォン向けサイトの作り方エントリのまとめ」にてスマフォ用サイト作りの基本はまとめましたが、実際にデザインする際の参考になりそうなギャラリーサイトやブログエントリをまとめてみました。 インタフェースの研究ということで、サイトデザインのみではなくアプリのデザインギャラリーも紹介。 ギャラリーサイト CSS iPhone 様々な海外ポータルやデザインサイトのiPhone向けサイトをサムネイル付きで紹介。 どのサイトもよくデザインされており、非常に参考にできる部分が多そうです。 iOSpiration iPhone Web Design Inspirations - iPhone and iPad Design Inspiration iPhone/iPadサイトやiPhone/iPadアプリ・ゲームのデザインギ
Twitter・mixi・facebook等の国内主要ソーシャル用ボタンを超カンタンに作れる「jQuery.socialbutton」:phpspot開発日誌
Twitter・mixi・facebook等の国内主要ソーシャル用ボタンを超カンタンに作れる「jQuery.socialbutton」 2010年11月05日- 2011/5/7: 本ライブラリに脆弱性がありましたので速やかにバージョンアップを実施して下さい。(詳細) Twitter/facebook/mixi/GREEのボタンを超カンタンに作れる jQuery.socialbutton プラグインを作ったよ Twitter・mixi・facebook等の国内主要ソーシャル用ボタンを超カンタンに作れる「jQuery.socialbutton」。 仕様について理解しなくても、このプラグインを読み込んでちょちょっと数行書くだけで実装出来てしまいます。 例えば、facebookなら、$('.facebook').socialbutton('facebook_like'); と１行書くだけ。 mi
iPhone・Androidアプリ等に使えるアイコンセット総まとめ：2010:phpspot開発日誌
iPhone・Androidアプリ等に使えるアイコンセット総まとめ：2010 年末に暇な時間にアプリを作ろうなんて思っている方の参考になれば幸いです。 iconSweets 2 Even more free icons by Yummygum iPhone・Android・WEBに使える400以上のアイコンセット「iconSweets 2」 app-bits.com | Slick user interface and icon design 次のようなアイコン64個セット DEFAULT iCON ::: Free Elegant Icons 173のシンプルなアイコンセット 108 Mono Icons: Huge Set of Minimal Icons | Tutorial9 108個のシンプルデザインアイコン Free iphone toolbar icons | Blog |
JavaScriptコーディング等を書く上でのパフォーマンス確認事項３０:phpspot開発日誌
30 best practices to boost your web application performance - Web User Interface Architect JavaScriptコーディング等を書く上でのパフォーマンス確認事項３０。 自分へのインプット＆メモがてらにちょっとまとめてみます。 JavaScript DOMの操作は可能な限りやめる eval, new Function() は遅いので可能な限り使わない withステートメントを使わない（使った事ないですが） for-in 文ではなく for 文を使う。 ループの中で try-catch ではなく、try-catchの中にループを置く グローバル変数をなるべく使わない aaa+='AAA';aaa+='BBB'; の方が aaa+='AAA'+'BBB';より速い 複数の文字列連結には、Array で文字列
長い文字列が続いて文字がはみ出してしまうのを防止するCSS:phpspot開発日誌
Wrapping Long URLs and Text Content with CSS ? Perishable Press 長い文字列が続いて文字がはみ出してしまうのを防止するCSSが公開されてます。 CSS2/3, Opera4-7, Mozilla, IE5+ 用にクロスブラウザで動作するようにCSS例が示されていて参考になります。 通常だと文字がはみ出してしまうのを、はみ出さないようにしてくれるCSSです。 ハミ出しを防いでくれます。 対応したつもりが実は特定ブラウザだけっていうことがよくありそうなこの現象、この対策で簡単に対応出来そうです。 関連エントリ JavaScript使ってないのに使ってる風のピュアCSSなテクニック集 便利なＣＳＳテクニック３０選 CSSリストに関する5つのテクニック集
サイト内にTwitter投稿用のフォームを直接埋め込んでしまえるjQueryプラグイン「Like it? Tweet it!」:phpspot開発日誌
サイト内にTwitter投稿用のフォームを直接埋め込んでしまえるjQueryプラグイン「Like it? Tweet it!」 2010年05月14日- Like it? Tweet it! サイト内にTwitter投稿用のフォームを直接埋め込んでしまえるjQueryプラグイン「Like it? Tweet it!」。 Twitterの @anywhere API を使ってサインインして、サイト上でそのままコメント欄を表示し、現在みているサイトのコメントを投稿してもらえるようになります。 サイトに表示される投稿画面の例。デザインはいい感じです。 サイトのURLは自動で入力されます。 サイトをよりTwitterに投稿してもらえるようにしやすく出来ますね。 関連エントリ サイトにTwitterの機能を組み込むためのjQueryプラグイン集 TwitterのAPIを使ったり調べる際に便利な「Tw
JavaScriptでどうしても外部のドメインのコンテンツを読みたい際に使えるプロキシスクリプト「Simple PHP Proxy」:phpspot開発日誌
JavaScriptでどうしても外部のドメインのコンテンツを読みたい際に使えるプロキシスクリプト「Simple PHP Proxy」 2010年01月08日- JavaScriptでどうしても外部のドメインのコンテンツを読みたい際に使えるプロキシスクリプト「Simple PHP Proxy」が公開されています。 自分のサイトにおいた、proxy.phpに対して、proxy.php?url=//phpspot.org/blog/ といった形でURLを指定するとPHP内でcurlが外部ドメインのコンテンツをロードしてきてくれ、JS側からはそのまま自ドメインのproxy.phpにアクセスするという形でクロスドメインを可能にするajaxでは最も古典的なやり方を実現するためのPHPで書かれたプロキシスクリプトです。 クッキーなどもそのまま送ってくれる機能や、JSONでレスポンス値を受け取るモードなど
iPhoneブックマーク用のアイコンを作成しよう:phpspot開発日誌
今更、かもしれませんが、iPhoneブックマーク用のアイコン作成法のエントリがあがっていたので参考にやってみました。iPhoneユーザ用のアクセシビリティ向上に使えます。 次のような 57x57 ピクセルのPNG画像を作ります。 作ったらサーバにアップロードします。 そして、HTMLタグを追記します。 アイコン画像を光らせたい場合 iPhoneにはボタンを立体的に光らせる機能がありますがこれを実装するためのHTMLです。 <link rel="apple-touch-icon" href="/path/to/icon.png" /> アイコン画像を光らせたくない場合 自分で光る部分もデザインしたいという場合は以下のコードが使えるみたい <link rel="apple-touch-icon-precomposed" href="/path/to/icon.png" /> 実際にコードを仕込
2009年に発見した秀作アイコンのまとめ:phpspot開発日誌
今年も沢山のアイコンセットを発見しましたが、2009年に発見した秀作アイコンをまとめてみました。 WEBアプリ汎用、ソーシャルアイコン、Eコマース用アイコン、その他に分類してます。 WEBアプリ汎用 Led Icon Set - Psdtuts+ MinIcons by ~kyo-tux on deviantART 32px mania Vaga Onebit free icon set いい感じのアイコンセット Project Icon Set | Dezinerfolio WooFunction: 178 Amazing Web Design Icons?|?WooThemes WP WooThemes Ultimate Icon Set ? First Release?|?WooThemes 綺麗で汎用に使えそうなアイコンセット集「Function Icons」 Icon Set b
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
PNGを無劣化で圧縮できるWindowsソフト「PNGGauntlet」:phpspot開発日誌
FacebookのGUIレイアウトのPhotoshopテンプレートファイル:phpspot開発日誌