jQuery｜WEB制作・WEB開発のTips＆News Kamimoto.biz Labs

2010年1月16日

人気のAjaxライブラリであるjQueryがメジャーバージョンアップ。

jQuery 1.4登場、素晴らしい速度

ベンチマークを見てもすばらしく速い。

これは便利そう。

jQueryは1年前の同じに日にjQuery 1.3がリリースされた。jQuery 1.3の最大の注目点もパフォーマンスの改善とされていたが、この1年ですべての主要ブラウザに対してさらにパフォーマンスの改善を実現してきたことは興味深い。パフォーマンスの面からも採用を検討する価値のあるバージョンといえる。

Googleによる配布もされていて、下記からDLできます。

• jQuery 1.4 通常版
• jQuery 1.4 ミニファイ版

• Ajax
• jQuery
• バージョンアップ
• ライブラリ

2009年10月23日

今年の下半期のWebデザインのトレンドは、確実にこれでしょう。

ウィンドウサイズを変えるとコンテンツが再配置される可変グリッドレイアウトです。

ということで、まずはサイトから。

可変グリッドレイアウトなサイト

• 小林聡美.jp
• Marunouchi.com

前者は面白さがありますよね。
あと、後者は、あの中村勇吾さん率いるtha ltd.さんが制作です。

可変グリッドレイアウトを実現するための日本語ライブラリ

私もこうした大それたタイトルのブログを書いてますが、別にプログラマーではなくて、ただのディレクター・プロデューサーです。

なので、「コードを書けないけど、どうにかしてサクッと作りたい」と考えてしまいます。

そんなときのライブラリ。

可変グリッドレイアウトのjQueryプラグイン書いたよ

これは、便利ですね。
サンプルの6番目は、消去もできるようになっています。

• jQuery
• グリッドレイアウト
• トレンド
• プラグイン

2009年9月 6日

webでは、今も昔もポップアップを使いたくなるときがあります。

今回、ちょうどよさげなのがあったのでご紹介。

jQueryで作るポップアップウィンドウ「prettyPhoto.js」

今回は、モバイルデザインアーカイブのお問い合わせで、iframe版を使用しました。

「サイト掲載依頼」を選択し、表示される『モバイルサイトのデータをアップロードいただけます。』をクリックしてください。

lightbox風の表示で、別のファイルをiframe表示してくれます。

導入は簡単です。

下記のように、jQueryとprettyPhoto.js、CSSを読み込み、prettyPhoto用のスクリプトを読み込みます。

今回のiframeは下記のようなソースになります。

Google.com

• jQuery
• prettyPhoto
• ポップアップ

jQueryとprototype.js を同時に使う際は、ときどきあるかと思います。

jQuery、Prototype.jsともに、書式が似てるために競合（コンフリクト）してしまいます。

たとえば、こんな感じです。

$('id_name');

これを解除するために、jQueryの $(); を違う名前に変えて使用します。

通常、headタグの中に下記を読ませますが、その際に2行JavaScriptを追加するだけです。

読ませる順番も、Prototype.js、jQuery、コンフリクト回避のスクリプトの順になります。

• Prototype.js
• jQuery

今回、仕事で、jQueryでのtableの行の表示・非表示を行ったので、それのメモです。

JavaScriptのソースは下記です。

クライアント案件でも結構出くわしますよね。知ってると便利です。

$("#radio01").click(function() {
    $("#row").show();
});
$("#radio02").click(function() {
    $("#row").hide();
});

• JavaScript
• jQuery
• table
• tr

2009年6月19日

Web制作・開発のための今日のブックマークです。

・「アドビ vs Web標準」の決着はどうなる
読む価値ありです。

それでもFlashの重要性の低下は不可避だ

・Flashを応用して便利にファイルアップできる「SWFUpload」のjQueryプラグイン
jQueryでいけます。

・[JS]CSSスプライトにスライドやフェードのアニメーションを加えるスクリプト -SpriteMenu
きれいなナビゲーション。

・さらなる"ユーザー中心設計"を目指すために ［最終回］
今年の下半期のWeb業界のテーマは、UI・IAになるんではないかと思っています。

• Adobe
• Flash
• jQuery
• アップローダ

2009年5月28日

Web制作･開発のための今日のブックマークです。

・CSS Nite in Ginza：復活して10回が経過しました
Web制作者向けセミナーの参加者アンケートのシェア。

・アイデア溢れるロゴデザインのインスピレーション集「36 Clever and Creative logo」
こういう類では、アイデアプラステンという書籍がお勧めです。

アイデアプラステン

アイデアプラステン（2）

・あらゆるサイトのカラーにあうフリーのアイコンがダウンロードできる -Iconza
アイコンいっぱい

・これは注目！jQueryでExtばりにリッチなＵＩが実装できる「jQuery Ribbon」
jQueryライブラリ！すごいです！！
こんな感じです　→　jQuery Ribbon

・自分の内に秘めた「すごい可能性」を解き放ちたい人のための一冊
プロデュース力。自分の能力をプロデュースする必要がある。

・CSS3はここがすごい【1】：CSS 3分コーディング
そろそろCSS3。

・若い時にプログラムを書こう，必ず人生の豊かさにつながる

Webの世界でもプロデューサー、ディレクターこそ、必要。

問題意識として、まだまだ真水の部分が足りないです。当たり前のことを言いますが、自分たちで作らないと自分たちで改善できない。頼んでいる限り改善はできない。

人生のどこかでプログラムを作る仕事を経験した方が絶対に面白い。一生やれと言われると少し考えるけれど。20代あるいは30代の前半くらいまでに真水の仕事をどれだけやったか、その後の人生の豊かさにつながります。

我々の役目はITのシェルパみたいになること。このブリザードの中でも、お客さんと一緒にいる。ブリザードだから俺たちだけでこの山は下りますね、という訳にはいかない。

・Google Bets Big on HTML 5: News from Google I/O
html5のお話。

・FlashLite1.1で制作時のつまづきポイント3点
携帯Flash。

• Google
• JavaScript
• html5
• jQuery

2009年5月20日

jQueryを使ってメニューを装飾：LavaLamp menuを使ったメニューを作ってみる その２

LavaLamp menuというjQueryのライブラリを使用してのナビゲーションのデザイン強化を説明したサイトです。

CSS Nite in OSAKAのサイトでも使用されていますね。

• JavaScript
• LavaLamp menu
• jQuery

2009年5月12日

Web制作・開発のための今日のブックマークです。

・ディップ、情シスをSaaSからパッケージソフトに「逆移行」　コスト7割減へ
→状況により、SaaSばかりがいいとは限らない。
逆に言うと、提案者側はそこを提案の軸に据えることができる。

・ユーザビリティ改善の費用対効果を測る6つのステップ（後編）
→ユーザビリティのお話。

・Webデザイン劇的ビフォーアフター09年春版
→モバイル版を運営中のモバイルデザインアーカイブでぜひやりたい。

・コナミコマンドを仕込む方法
→最近流行りのコナミコマンド。

・FlashとSilverlight、ベストな適用ケースまとめ
→2つのRIAの得意なものとは。

• SaaS
• コナミコマンド

2009年5月11日

Web制作・開発のための今日のブックマークです。

・やたらとハイクオリティなフリーのアイコンをコレクションした -We Love Icons
「やたらと」って...

・[CSS]半透明のパネルを使ったドロップダウン型ナビゲーションのスタイルシート
ドロップダウン型のUI。

・jQueryを使ったフルスクリーンのスライドショー『supersized』
jQueryのスライドショー。
フルスクリーンは珍しいかも。

• jQuery
• アイコン
• スライドショー
• ドロップダウン
• ナビ

こちらで紹介してるWEB制作・WEB開発は、各種サービスサイトでご相談ください。各種ライブラリ（Prototype.js、script.aculo.us、jQuery）によるAjax開発、Movable Typeサイト制作のサイトへぜひ一度アクセスしてみてください。

• サイトマップ
• お問い合わせ
• ホームページ制作
• Web制作アイデア
• HTMLコーディング
• SEO
• SEO対策情報ブログ
• ウェブデザイン
• twitterデザイン
• twitterサービス
• twitter情報
• 動画まとめ