web制作の現場で使うjQueryデザイン入門が激しくお勧めな件
『web制作の現場で使う jQueryデザイン入門』 jQueryを、プログラムとしてとらえるのではなく、デザインとしてとらえて解説している一冊。 つまりデザイナー向けの攻略本となっている。個人的に超お勧めの内容だったのでご紹介。 この作者は、西畑氏です。 何度か私のブログでもjQueryの記事かいてるのですが、そのときに色々教えてくれたto-Rのあの人です。 2010年2月15日発売予定で、書店では明日買えるようです。 「JavaScriptとしてjQueryに興味を持っている」という人よりも、「ウェブデザインをもっとクリエイティブに表現したい」という人のための一冊です。 目次 第1章 jQueryを始める前に。 ここでは、jQueryとは何なのか？あたりからきっちり説明されてます。 ある程度知ってる人は飛ばしちゃってもいいかも・・・。 第2章 サンプルで学ぶjQueryの基本 HTML
第20回 jQueryでAJAX入門：正規表現でサイトに表示したTwitterにリンクをつける | gihyo.jp
Twitterにリンクをつける 前回は.getJSON()メソッドを使い、Twitter上での発言をサイトに表示できるようにしてみました。しかし、時にはTwitterの発言文中にはURLやhashタグや@ユーザー名などが含まれていることがありますが、前回のままではそのままテキストとして表示されるだけになってしまいます。 以前、フォームの内容を紹介した時に正規表現の紹介をしましたが、今回はその正規表現を利用して、Twitterの発言文中に含まれるURL・hashタグ・@ユーザー名をリンクをつけるサンプルをご紹介します。 URLにリンクをつける まずは文中に含まれるURLにリンクをつけてみましょう。文中からURL部分だけを見つけるために、正規表現を利用します。 URL用の正規表現 /(http:\/\/[\x21-\x7e]+)/gi 「[\x21-\x7e]」の部分は16進数で表現したASC
スクロールで順に画像読み込みLazy Load Plugin for jQuery
Mon, Jan 1, 0001 Lazy Load delays loading of images in long web pages. Images outside of viewport will not be loaded before user scrolls to them. This is opposite of image preloading. This is a modern vanilla JavaScript version of the original Lazy Load plugin. It uses Intersection Observer API to observe when the image enters the browsers viewport. Original code was inspired by YUI ImageLoader ut
第19回 jQueryでAJAX入門：JSONを使いサイトにTwitterを表示 | gihyo.jp
jQueryでAJAX入門2回目：JSON形式を扱う 前回はXML形式のRSSをAJAXで取得してリストで表示させました。今回はXMLではなく、JSON（ジェイソン）と呼ばれる形式を扱い、同じようにリストを表示させてみることにします。今回ご紹介するJSON形式も、前回紹介のXML形式同様jQueryで取得・表示をさせることができます JSON？ JSONはJavaScript Object Notationの略で、JavaScriptで簡単に扱えるテキストベースのデータフォーマットです。たとえば下記のような構造になっています。 JSONサンプル [ { "name": "技評太郎", "age" : 26, "skills":["PHP" , "JavaScript"] }, { "name": "長谷川広武", "age":25, "skills":["HTML" , "CSS"] },
Gears+jQueryでローカルからドラッグ&ドロップによる画像のアップロードを可能にするPlupload
デスクトップなどのローカル上から ブラウザに画像をドラッグ&ドロップし、 アップロードを可能にするPlupload をご紹介します。GoogleGearsと jQueryで実現しているようです。 実装にはGearsAPIが必要になります。 Drag files here.とあるところに、デスクトップから画像をドラッグ&ドロップすると画像を認識し、アップロードする事が可能です。 CMS向けに作成したとの事です。もちろんデスクトップ上に限らず、ローカル上のどこからでもアップロード可能。また、複数の画像をまとめてドラッグ&ドロップでアップロードする事も出来ます。これ、WPに入れられないかな・・・ GoogleGearsAPI Pluploadを使うにはGoogleGearsAPIが必要です。gears_init.jsはGoogleから無料でダウンロード可能ですよ。 Gears以外にMSのSilv
第11回 今すぐできる！ユーザビリティを向上させるフォーム操作実践（3） | gihyo.jp
これで、src属性の中から「.jpg」だけを検索できます。今回はわかりやすいようにsrc属性全体（src=""）を対象にできるようにしたのですが、下記のようにしても同様に検索することが可能です。 src属性の「○○.jpg」となっているタグだけ検索 その2 src.+\.jpg イコール（=）とダブルクォーテーション（""）を含めていないだけですが、これでも検索が可能です。 また、今回は任意の1文字を対象に「.+」を利用したのですが、今回の例であれば「.*」でも同様の結果を得ることができます。 覚えておくと便利な正規表現検索 先ほどの例の他にも、覚えておくと便利な正規表現の検索はいくつもあります。しかし、たくさん覚えておくというのも難しいので、ものすごく簡単な例だけをいくつかあげておきます。 改行を含む検索 Dreamweaverであれば、正規表現を使わずとも、任意の改行を含む文字列を検索
jQuery UIで実現！ Ajaxで複数選択ドラッグ＆ドロップ
jQuery、プラグイン、jQuery UI、Web経由のCDNとは CSSの書き方も分かるjQueryプラグイン実践活用法（1） 基本／おさらいとしてプラグインやjQuery UIについて簡単に触れ、Web経由でjQueryを使うCDNについて解説 デザインハック ＜ リッチクライアント 2009/12/8 今回は「jQuery UI」のより進んだ活用例 ■ jQueryのプラグイン「jQuery UI」とは？ 今回紹介するjQuery UIは、JavaScript（Ajax）フレームワークjQueryのプロジェクトがjQuery用に開発している、以下の機能を提供するプラグインです。 ドラッグ＆ドロップなどのマウス操作の機能拡張 ユーザーインターフェイスを改善するウィジェット（アコーディオン、日付入力、ダイアログ、スライダー、タブなど） 今回は、jQuery UIのドラッグ＆ドロップ機能
リンク先ウェブサイトのスクリーンショットをポップアップ表示 - デザインスタジオウェブログ - WEB関連 - ウェッジ
セールスプロモーション・WEBサイト・マルチメディアコンテンツ 等 広告の企画コンサルタント・グラフィックデザイン制作 インターネットサーバ ホスティング 2013年4月1日 追記 アダルト・商用サイトからの利用があまりにひどいので規制しました。 ご利用をご希望の場合、メールにてお問い合わせ下さい。 個別に許可させていただきます。 ウェッジのウェブサイトで利用するために作成した JavaScript ですが、需要がありそうなのでダウンロードできるようにしました。 リンクに class="previewlink" と書くだけで、リンク先ウェブサイトの縮小画像(サムネイル)をポップアップで表示します。 以下2点のおまけ機能付きです。 リンクに title が設定されている場合、タイトルの内容をポップアップ表示 リンクに rel="external" が設定されている場合、リンク先を別ウィンドウ
jQueryによるLightbox風モーダルウィンドウの作り方 (1/3)
HTMLとCSSによる表現を考える 複数のサムネイル画像を並べておき、画像をクリックするとモーダルウィンドウで拡大画像を表示するWebページを作成します。はじめに、HTML／XHTML（以下、HTML）とCSSでどのようにモーダルウィンドウを表現するか、静的なページを作って考えてみましょう。 HTMLは、ul/li要素で並べたサムネイル画像の後に、「glayLayer」と「overLayer」というid属性をつけたdiv要素を配置します。glayLayerはページ全体に重ねる半透明のレイヤーを表示するための要素で、overLayerは子ウィンドウを表示するための要素です。子ウィンドウに表示したい要素（今回はimg要素）はoverLayer内に配置します。 ▼サンプル01（HTML部分） <h1>jQueryを利用したモーダルウィンドウの作成</h1> <ul> <li><a href="i
The Book and the Cover » jQuery: jqAlbumParser Plugin, parses out Flickr, Picasa clientside
The jQuery jqAlbumParser Plugin takes a link linking to your Flickr or Picasa photo album and parses it into your current layout as is or hook in another plugin like the jqGalView Plugin, the jqGalScroll Plugin, the jqGalViewII Plugin or the jqShuffle Plugin to create your photo gallery on the fly and with very little coding on your part. Why jqAlbumParser? Well, after building a few photo gallery
Plugins | jQuery Plugins
Can't find a Plugin you are looking for? Check out the jQuery Wiki page. Are you a plugin developer? Please move your plugin over to this site.
透過PNG対応！jQueryでオリジナルツールチップ (1/3)
「ツールチップ」の完成画面。左から、CSSで装飾するツールチップ、透過GIFを使ったツールチップ、透過PNGを使ったツールチップ（画像クリックでサンプルページを表示します） CSSで装飾するシンプルなツールチップ 最初に作成するのは、リンク（a要素）にマウスカーソルが重なると補足テキストをフェードインで表示する、シンプルなツールチップです。ツールチップはマウスカーソルの右下にピッタリくっ付いて表示され、マウスの動きに合わせて移動します（サンプル01）。 HTML／XHTML（以下、HTML）は以下のようになります。ツールチップを設定するリンクはa要素で通常通りマークアップします。ツールチップ内に表示する補足テキストは、a要素の後ろにspan要素で記述します。span要素には「tooltip」というclass属性を設定します。 ▼サンプル01（HTML部分） <p>Lorem （中略） qu
第4回 ドロップダウンメニューの実装 | gihyo.jp
jQueryを利用してナビゲーションを実装する 第3回・4回はナビゲーションの実装について説明しています。前回はアコーディオンパネルの実装を行いましたので、今回はドロップダウンメニューを実装してみましょう。まずは完成したドロップダウンメニューを見てください。 ドロップダウンメニュー 今回の記事で使うメソッドの紹介と簡単な説明 前回同様本題に入る前に、まずはドロップダウンメニューを実装するにあたって必要になるメソッドなどを紹介をしていきます。前回説明した通り、メソッドとは任意のjQueryオブジェクトに対して実行する命令文です。 jQueryオブジェクト 第1回、2回でセレクタについて説明しましたが、セレクタで取得できる要素はひとつではありません。例えば$('div')のようにすると、HTML上の全てのDIV要素をjQueryオブジェクトとして取得します。要素は配列としてHTML出現順に保存
シンプルなWYSIWYGエディタ作成用JSライブラリ「jWYSIWYG」:phpspot開発日誌
jWYSIWYG This plugin is an inline content editor to allow editing rich HTML content on the fly. シンプルなWYSIWYGエディタ作成用JSライブラリ「jWYSIWYG」。 必要なスクリプトを読んだ後、次のようにマークアップ。 <div class="box"> <textarea id="wysiwyg" rows="11" cols="69"></textarea> </div> 初期化は「 $(function(){ $('#wysiwyg').wysiwyg(); }); 」だけでOKみたい。 WYSIWYGエディタは他にも色々ありますね。 Yahoo UI Library ベースのWYSIWYG prototype.jsでクロスブラウザなWYSIWIGエディタ FCKEditor Tin
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
もっと便利に！jQueryでラクラクサイト制作（実践サンプル付き） 記事一覧 | gihyo.jp
google picasa api #3 - 拝啓化石燃料
Picasaのイメージギャラリーを作るチュートリアル – creamu
Google Sites: Sign-in
jQueryのTimerプラグイン | 眠る開発屋blog
IDEA * IDEA
