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
新卒さん向け、速攻でプログラミングをマスターできるvimプラグイン「quickrun」:phpspot開発日誌
新卒さん向け、速攻でプログラミングをマスターできるvimプラグイン「quickrun」 2011年04月25日- 新卒さん向け、速攻でプログラミングをマスターできるvimプラグイン「quickrun」。 この春、会社に入って、サーバに入って vim でプログラミングさせられている人はそれなりにいそうですが、その場合に速攻でプログラミングをマスターできるquickrunプラグインを入れておきましょう。 プログラミングを覚えるには作って動かすが一番いいですが、「書いて」→「保存して」→「実行して」を一瞬で行えます。 具体的にはプログラムを書いていて、コマンドモードで「￥r 」をタイプするだけでペインが分かれてプログラムの実行結果が得られます。 VPSなどを借りて、これからプログラミングをはじめようって方にも有効です。 かなりインスタントに実行できるので、こう書くとこう出る、がサクサク進められる
WEBサービスを作るなら最低限覚えておきたいPHPのPEARモジュールまとめ:phpspot開発日誌
(追記) 2/16 23時 いくつかのライブラリを追記しました。 WEBサービスを作るなら最低限覚えておきたいPHPのPEARモジュールまとめ。 本家pearには560程のモジュールがあります(2011/2月現在)が、WEBサービスを作る上でよく使う物をまとめてみました。 これからPHPを使ってサービスを作ろうと思っている方は代替を使うことになると思うので参考にしてみて下さい。 php はインストール時点で既に多くの機能が備わっており、大体のことができてしまいますが、PEARを使うことで面倒なことがより簡単にできるようになります。 PEAR以外にも便利なライブラリはあるのですが、今回はあえて殆どをPEARサイトで公開されている物に絞ってご紹介します。 基本的なパッケージ まず、汎用に使える便利なパッケージのご紹介です。 HTTP_Request2 url を渡してリモートのテキストを取って
Windowsのインストーラみたいな便利なウィザードをブラウザ上で簡単実現できるjQueryプラグイン「SmartWizard」。:phpspot開発日誌
Windowsのインストーラみたいな便利なウィザードをブラウザ上で簡単実現できるjQueryプラグイン「SmartWizard」。 2010年11月18日- Tech Laboratory Windowsのインストーラみたいな便利なウィザードをブラウザ上で簡単実現できるjQueryプラグイン「SmartWizard」。 Windowsインストーラーは「次へ」を押していくとどんどんインストールを進められて簡単ですが、それをブラウザ上で簡単に実現してしまえます。 各ページの中身は、単純に<div>で並べるだけというお手軽さ。ルールに従ってHTMLを記述し、$(element).smartWizard() で初期化するだけです。 デモページはこちら タブを左にレイアウトしてもなかなかいい感じ。 デフォルトのデザインはお世辞にもカッコイイとは言い難いのですが、CSSデザインが可能なので、自由にスタ
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
Twitterをサイトに組み込むチュートリアル＆サンプル集:phpspot開発日誌
Twitterをサイトに組み込むチュートリアル＆サンプル集。 当サイトにて、色々とTwitterの機能を実装する仕組みを色々と紹介しましたが、それらをまとめてみました。 JavaScript によるTwitterメッセージの埋め込み Twitterのメッセージをページに載せられるJavaScript「Twitter.js」 JavaScript 単体でTwitterのメッセージをサイトに簡単に埋め込み可能 サイトにリアルタイム更新＆検索機能付きTwitter窓を設置できるjQueryプラグイン「Juitter」 画面遷移なしにTwitterステータス表示＆検索ができるウィジェットを設置可能。 PHP製のウィジェットや投稿用サンプルコード等 Twitterのメッセージ表示などができるPHP＆AJAXなブログパーツ実装が可能な「Ptwix」 Twitterのメッセージ表示用のリロード機能付きウ
立体的にクールにデザインされたWEBレイアウトのPSD:phpspot開発日誌
Creative 3D Layout 立体的にクールにデザインされたWEBレイアウトのPSDが配布されています。 次のような平面と思いきやヘッダーのナビゲーションにアイコンを並べて立体的にしたデザインがPSDファイルでダウンロード可能です 単にアイコンでナビゲーションするだけではなく立体的にしてわかりやすくなってますね。 綺麗にレイヤーごとに分かれています。 関連エントリ プロレベルのPhotoshopチュートリアル集 2009年の凄いPhotoshopチュートリアル100種 ボタン作成のPhotoshopチュートリアル集
画像を使わずにGoogle風のクールなボタンが作成できるjQueryプラグイン:phpspot開発日誌
jQuery imageless buttons a la Google 画像を使わずにGoogle風のクールなボタンが作成できるjQueryプラグイン。 次のようなボタンやドロップダウン風のボタンが画像を使わずに実装できるプラグインです。 画像を使っていないのですが、クリックするとちゃんと色が反転して押した感覚がでるようになっています。 原理的には複数の span を使って立体感を再現しているようです (Firebugを使って覗いてみたところ) 現在出ているほとんどのブラウザに対応しています。IE6にも対応してくれているようです。 ドロップダウンも実装できるところから、ページのナビゲーションメニューに組み込んでみてもよさそうです。 jQueryプラグインですので、$(element).styledButton( オプション ); のようにして簡単に初期化することが出来ます。 関連エントリ
Twitter風に残り文字数を表示してくれるテキストエリア実装jQueryプラグイン:phpspot開発日誌
jQuery plugin: Simplest Twitter-like dynamic character count for textareas and input fields | Css Globe via IDEAxIDEAさん Twitter風に残り文字数を表示してくれるテキストエリア実装jQueryプラグインがあるようです。 次のような、Twitter風の残り文字数を表示させながら入力できるテキストボックス実装の際に便利ですね。 Twitter同様 140 文字制限から、自由に好きな文字数に変えることができるそうです。 日本語でも、マルチバイト１文字を１文字と扱ってくれるみたいです。 実装方法は、まず次のようにtextareaを定義しておきます。 <textarea id="message1" name="message1"></textarea> その後次のように初期化する
Twitterのようにスマートな通知バーを一瞬で実装できるjQueryプラグイン「jQuery Notify bar」:phpspot開発日誌
Twitterのようにスマートな通知バーを一瞬で実装できるjQueryプラグイン「jQuery Notify bar」 2010年01月08日- jQuery 'Notify bar' Twitterのようにスマートな通知バーを一瞬で実装できるjQueryプラグイン「jQuery Notify bar」。 ページの上部にアニメーションされながら表示されるあの通知バーです。 時間がたつとアニメーションしながらスマートに消えてくれます。ページデザインがどんなものであろうと影響を受けません。 色を変えて、エラーモードにしてみたり、成功モードにしてみたり自由にできます。 実装は超簡単で、次のように初期化するだけです。 $(function () { $.notifyBar({ html: "メッセージ", delay: 2000, // 表示するミリ秒数 animationSpeed: "norm
CSS2を使って簡単に画像のプレロードをするテクニック:phpspot開発日誌
2010年あけましておめでとうございます。 今年は少し開始が遅くなってしまいましたが、本日よりブログを再開させて頂きます。 今年もよろしくお願いいたします。 それでは早速、CSS2を使って簡単に画像のプレロードをするテクニックをご紹介。 次のようにCSS2の「content」プロパティにリソースを指定してあげることで先読みが可能のようです。 content: url(img01.jpg) url(img02.jpg) url(img02.jpg) 複数指定してもOKということみたいです。 対応ブラウザは以下となっています。 IE8+ FF2+ Safari 3+ Chrome 1+ Opera 9.62+ IE6,7は対応していませんが、<img> のようにして呼ばれた時に結局読まれるので、実装の仕方によっては注意が必要ですが、使えないということではないようです。 以下のエントリを参照して
JavaScriptをやるなら覚えておくと超便利な、コードをブラウザ上で開発＆発行できる「JS Bin」:phpspot開発日誌
JavaScriptをやるなら覚えておくと超便利な、コードをブラウザ上で開発＆発行できる「JS Bin」 2009年10月23日- JavaScriptをやるなら覚えておくと超便利な、コードをブラウザ上で開発＆発行できる「JS Bin」というサイトを発見。 ちょっとした動作確認用のコードを書いたり、入門者の方がJavaScriptを学ぶのに非常に有用ですし、その結果も保存してサーバに置いてホスティングしてもらうことも可能。 また、比較的面倒なjQueryやjQuery UI、prototype.js 等の有名どころのフレームワークを簡単に読込めて使える機能もあります。 サイトを開くと、まず3つのタブがあって、JavaScript のタブにはJSを、HTMLのタブにはJavaScript から操作するHTMLを、Output には実行結果が出力されるようになっています。 JavaScript
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
2chのdat落ちしたスレを右クリックで即座に蘇生させられるFirefoxアドオン「fire2chDat」:phpspot開発日誌
超カッコいい光のブラシセットのまとめ:phpspot開発日誌