「ノンプログラマーのためのjQuery入門」のスライドが凄く分かりやすいですね
Twitterに流れてきたスライドがとっても 分かりやすかったのでブログでより多く の方に拡散。ノンプログラマー向けの jQueryの基本講座。これからjQuery を使おう、という方は読んでおくと良さ そうですね。 ノンプログラマー向けにjQueryの基礎をスライド化してくれています。 @pocotan001さん作のスライドです。 このスライドを見ながらコーディングする、というより、基礎知識を頭に入れるのに適したスライドだと思いますので気軽にご覧になってみて下さい。ハードルがかなり下がると思います。 また、当ブログでもjQueryプラグイン等の情報を取りあえげていますので合わせてどうぞ。 jQueryのリファレンスサイトと入門書籍 [2011.09.21アップデート] よくアクセスいただくのでハブ的な役割くらいは果たそうと思います。 jquery / jQueryの本家です。jQuery
ログイン/ユーザ登録といったフォーム実装用のフレームワーク「jFormer」:phpspot開発日誌
jQuery Form Framework - jFormer ログイン/ユーザ登録といったフォーム実装用のフレームワーク「jFormer」。 JavaScript と PHP、CSSファイルが１つのセットになっており、このフレームワークを使って便利なフォームをPHPで簡単構築できるライブラリです。 例えば、ログイン用のフォームを見てみると、次のように、demoユーザの案内を出すことも出来ます。 デモページ上には、単にデモだけではなく、実現するためのPHPコードがデモページ上から確認でき、比較的容易に実現できるようになっています。 全てPHPのコードで記述出来てしまうところがこのフレームワークの特徴。PHPとJavaScriptの思考をいったりきたりする必要がなくて作り安いというわけです。 テキストのバリデーション機能なんかも入ってます。 ここら辺もPHPでrequiredに設定することで
[JS]新聞のカラムのようなレイアウトを生成するスクリプト -ezColumns
div要素だけでなく、p要素やli要素で実装されたパラグラフを新聞のカラムのようなレイアウトにするjQueryのプラグインを紹介します。 ezColumns デモ [ad#ad-2] ezColumnsの実装例 HTML p要素で実装したパラグラフをdiv要素で内包します。 <div id="groups"> <p>A - Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec mattis libero</p> <p>B - Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec mattis libero</p> <p>C - Lorem ipsum dolor sit amet, consectetur adipiscing elit. Done
ハイクオリティーなスライダー集「Top 20 Premium Quality Sliders 」
FLASHの代用として多くのサイトで取り入れられているスライダー。主にjavascriptなどで制作されており、管理のしやすさや、お手軽に導入できることから人気を集めています。今日紹介するのはハイクオリティーなスライダー集めたエントリー「Top 20 Premium Quality Sliders 」。 o’Slider 様々なタイプのスライダーがまとめられています。今日はその中からいくつか気になったものをピックアップして紹介したいと思います。 詳しくは以下 ■SV Slider- Slideshow Script 様々なタイプのスライダー表現が可能なスライダー。フューチャリストのような見せ方もできます。 ■JQuery Slider/Image Rotator 爽快感のあるアニメ表現と豊富なトランジションが魅力のスライダーjQueryを使って制作されています。 ■jQuery List
prototype.jsからjQueryに移行するたったひとつの冴えたやりかた - os0x.blog
どうもこんにちは、os0xです。 実は(Twitterに書いただけで)ブログに書いてなかったのですが、3ヶ月ほど前からクックパッドで働いています*1。なんかもう今更ですよね、すみません。 さてさて、クックパッドですが、つい一昨日までprototype.jsを使っていました。で、昨日jQueryへの移行をリリースしたところだったりします。 というわけで、その辺の話を少し書いてみたいと思います。 そもそも、なんでjQueryに移行するのか まあ、prototype.jsとjQueryどちらを使うかと問われたら、大抵の人はjQueryと答えますよね。確かにjQueryの使いやすさは魅力的です。使いやすいということは、みんなでjQueryを使ってサービスを作ることができます。特定の誰かに依存してボトルネックになったりすることがないなら、それは素晴らしいですね。 しかし、ライブラリを変えるのは簡単な
ウェブページのサイドバーに生じる空きスペースの活用方法
ページのデザイン時に悩むのが、2カラムレイアウトなどでサイドバーにどのくらいのコンテンツを配置するのか、というのがあります。 理想的なのは、メインとなるコンテンツと同じくらいの高さになるのが無駄もなくいいかもしれません。しかし、メインのコンテンツ量が決まったものではなく、しかも長い場合はサイドバーに未使用のスペースが多く生じてしまいます。 [ad#ad-2] この無駄になってしまう空きスペースの解決方法の一つとして、スペースの量に合わせてダイナミックにサイドバーのコンテンツを配置する方法を紹介します。
サイト内にヘルプシステムを埋め込めるjQueryプラグイン「Embedded Help System」 | Web活メモ帳
操作説明など複数手順が必要な説明って言葉だけだと難しいですよね。 このプラグインを使用する事で 操作させる順番の数字アイコンを表示させたり、どこにマウスを持っていけばよいか、を簡単に伝えられるようになります。 以下は実際に使ってみた様子です。 ↑１番のアイコンが表示されるのでマウスオーバーすると説明が表示されます。 ↑２番目のアイコンにマウスオーバーした所です。 実際の動きはデモページから確認する事ができます。 サイトの左側にあるHow to…と赤字になっているメニューをクリックしてみてください。 ユーザーを誘導するマウスのアニメーション表示など便利そうです。
リンクにカーソルを合わせるとQRコードをポップアップさせられるjQueryプラグイン「qrTip」:phpspot開発日誌
リンクにカーソルを合わせるとQRコードをポップアップさせられるjQueryプラグイン「qrTip」 2011年01月14日- kovshenin.com // Thinking about WordPress, PHP, MySQL, jQuery, Web 2.0, PR and Social Media リンクにカーソルを合わせるとQRコードをポップアップさせられるjQueryプラグイン「qrTip」 次のように、カーソル位置のＵＲＬをQRコードに変換して表示させちゃうことができます。 画像自体はGoogle Chart APIを使うので、サービス終了の懸念は少ない上にスピードも高速です。 使い方はいたって簡単で、jQuery(element).qr() のように qr メソッドを読んであげるだけです。 デザインもなかなかいい感じですね。 携帯サイトへのリンクの誘導にはもってこいのプラ
jQueryベースのグローバルナビゲーション20選 | designaholic
主に大規模サイトのグローバルナビゲーション向けのjQueryプラグインです。マウスオーバーやクリックでサブメニューを表示するものや第3階層以降への直接リンクが設置できるものなど使い勝手のいいものが揃っています。 Beautiful Slide Out Navigation
最初に必要なものだけ効果的に見せるAppleサイト風エフェクト実装jQueryプラグイン「Apple Effect」:phpspot開発日誌
最初に必要なものだけ効果的に見せるAppleサイト風エフェクト実装jQueryプラグイン「Apple Effect」 2010年12月06日- jQuery Apple Effect 最初に必要なものだけ効果的に見せるAppleサイト風エフェクト実装jQueryプラグイン「Apple Effect」。 最近Appleのサイトを見たことがある方なら分かると思いますが、最初に1枚の画像を表示しておいて、ナビゲーションなんかは少し待たせて、フェードインしながら表示するというカッコいい効果を作れます。 最初に1枚の画像を表示 フェードインしながらナビゲーションを表示する こちらのデモで動きを確認 実装は1行。 $('#target').appleEffect(); オプションを渡すことでアニメーション開始までの時間を設定したり、コールバック関数を指定できたりします。 ちょっとめんどくさそうなこの機
カッコよく動くポップアップでより分かりやすくメッセージを表示出来る「JQUERY BUBBLE POPUP」:phpspot開発日誌
カッコよく動くポップアップでより分かりやすくメッセージを表示出来る「JQUERY BUBBLE POPUP」 2010年11月29日- JQUERY BUBBLE POPUP v.2.3.1 - display animated and shadowed "bubble" popups with few lines of code in jQuery カッコよく動くポップアップでより分かりやすくメッセージを表示出来る「JQUERY BUBBLE POPUP」 カーソルを合わせた際に、単にポップアップするのではなく、ポップアップ自体がフェードインアニメーションしながら動きをもって表示されることでより、利用者の注意をひくことができそうです。 見た目も影付きでカッコいいのが特徴です。 デザインは選べます。 何かにカーソルを合わせた時だけじゃなくて最初から特定のエレメント上に表示しておくこともでき
[JS]Googleマップにさまざまなオプションを追加して簡単に設置できるスクリプト -GMAP3
Google Mapsにオリジナルのマークやポリゴン、任意の画像などを簡単に加えて設置できるjQueryのプラグインを紹介します。 GMAP3 -jQuery plugin to manage Google Map API デモ [ad#ad-2] GMAP3はGoogle Map APIを使用するため、使用するページに外部ファイルとして記述します。 <script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script> Googleマップの設置は簡単で、空のdiv要素にidを指定して配置します。 下記に簡単な例を紹介します。 HTML <div id="test1"></div> JavaScript $.gmap3.setDefault({ init:{ center:
コンテンツの概要を好きな高さできっちりピクセル指定できデザインを崩させないjQueryプラグイン「DivGrow」:phpspot開発日誌
コンテンツの概要を好きな高さできっちりピクセル指定できデザインを崩させないjQueryプラグイン「DivGrow」 2010年10月29日- DivGrow jQuery Plugin ? Easily make your DIV containers expandable & collapsable (with animation) HibboBlog コンテンツの概要を好きな高さできっちりピクセル指定できデザインを崩させないjQueryプラグイン「DivGrow」。 ブログの記事の概要なんかを次のように画像の横に表示させるとして、このプラグインを使うことでピッチリと画像の高さをあわせてデザインをスッキリさせることが可能です。 通常こういうことをやろうとすると結構めんどくさいですがjQueryプラグインなので高さを渡してあげるだけで綺麗にそろいます。 で、「Show More」という部分
指定位置までスクロールするとヒントを表示させられる便利jQueryプラグイン「SlideNote」:phpspot開発日誌
指定位置までスクロールするとヒントを表示させられる便利jQueryプラグイン「SlideNote」 2010年10月25日- SlideNote | A jQuery Plugin For Sliding Notifications 指定位置までスクロールするとヒントを表示させられる便利jQueryプラグイン「SlideNote」。 $(element).slideNote(); として初期化しておくと、element 位置までスクロールした時点でアニメーションして分かりやすいヒントを表示できます。 ページの上の方（まだ表示されていません） スクロールしていくと現れます（右からアニメーションしながらいい感じにきます） 特定の位置でヒントを出したいような場合に導入するとユーザビリティをあげられそうですね。 関連エントリ Twitterのようにスマートな通知バーを一瞬で実装できるjQueryプ
広告等に使えそうなjQueryプラグインいろいろ
広告表示などにうまく使えそうな jQueryプラグインのまとめです。 諸事情で調べたのでついでに メモしておきます。応用すれば 画像を使ったものは全て広告に 使えますが、その中でも特に 良さそうだったものを中心に。 広告に使えるというか、クリック率を高めそうとか目立たせるとかそういう類のプラグインになります。曖昧なまとめですが個人的なメモになりますのでご了承下さい。順不同です。 Cycle Plugin 省スペース内で画像を切り替えるプラグインです。エフェクトもいつくか選べます。 Cycle Plugin jQuery.popeye こちらも省スペースに置けるギャラリー。マウスを乗せるとキャプションが出てそこにリンクも貼れます。 jQuery.popeye Step Carousel Viewer シンプルなカルーセルです。複数の広告をまとめて表示するのに使いやすそう。 Step Caro
[jQuery]本格LPOを手軽に実践 – jLPO地域/検索ワード/新規・リピーター等でコンテンツを切り替えるjQueryプラグイン | レポート | 日本電子工藝社
LPO（Landing Page Optimization）とは Webサイトの中でユーザーが最初に開くページ（ランディングページ）を、アクセスしてきた条件により変化させることで、ユーザーを到達させたいページ・アクションへ導く手法のことです。 ページに訪れた際の検索キーワードや、広告を掲載していたページ（参照元URL）などにより振り分けるのが一般的ですが、ユーザーの地域・新規訪問かリピーターか・最終アクセスからの経過時間・アクセスした曜日・時間帯などによりターゲットを絞り込むことも、狙いによっては効果的です。 jLPOでできること 上で挙げたターゲティング表示機能のすべてが、jQueryのプラグインとしてLPOツールが簡単かつ無料で利用できます。高コストだった地域による絞込みも、GoogleAPIの利用で実現しました。（対応する地域の精度はGoogleAPIの機能に依存します。） 適用箇所
どんなHTML要素もカルーセル化してしまえるjQueryプラグイン「CarouFredSel」:phpspot開発日誌
infinite, circular jQuery carousel --- CarouFredSel 2.1.3 どんなHTML要素もカルーセル化してしまえるjQueryプラグイン「CarouFredSel」。 指定した要素以下に<div>や<img>を単に並べるだけでカルーセル化してくれるプラグインです。 少ないスペースで多くのコンテンツを格納するのに便利です。 横だけでなく、縦スクロールもオプションで指定することが出来ます。 ページ下部にexamplesが多数紹介されているので他にも色々な機能があることを確認できます。 関連エントリ 関連アイテムを出す場合等に使えそうなjQueryカルーセル「bxCarousel」 JavaScriptで実装するクルクル回転する3DカルーセルUI実装ライブラリ 無限に回転するカルーセルＵＩ実現用jQueryプラグイン実装チュートリアル
リンク切れをその場でポップアップ通知するjQueryプラグイン「Catch404」
「サイトで紹介していたリンク先のページが、いつのまにやら404エラーになってしまっていた。」 そういったことはよくあることですよね。このようなリンク切れは、管理が大変な上に、訪問者にとっても迷惑この上ないものです。（すみませんm(_”_)m） 今回ご紹介するのは、そういったリンク切れのページへ遷移する前に、サイト内で404エラーを通知してくれるjQueryプラグインです。 組織のマインドマップツールをマインドマイスターにすべき理由 伸びてる産業、会社、事業を紹介しまくるStrainerのニュースレターに登録!! 404エラー（リンク切れ）を事前に教えてくれるjQueryプラグイン 「Catch404」は、リンク切れしてしまったリンクをクリックすると、その場で吹出しをポップアップさせて教えてくれるjQuery プラグイン。 サイト訪問者にとって迷惑な、リンク切れページへの遷移を自サイト内でと
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
IDEA * IDEA
IDEA * IDEA
