jQueryMobile

 

「jQuery Mobie」のテーマに「Windows Phone」の「Metroスタイル」に最適化されたものが登場したそうです。

参考記事：jQuery MobileのテーマにMetroスタイルが登場。Microsoft Open Technologiesが発表 － Publickey

 

これまで、「jQuery Mobile」では「iPhone」風のデザインを採用していた為、「Windows Phone」で表示した場合に、ユーザーインターフェイスがかけ離れているという問題がありましたが、このテーマがリリースされたことにより一応の解決となるようです。

ダウンロードはこちらよりどうぞ。

「jQuery Mobile 1.1.0 RC2」がリリースされています。

参考記事：jQuery Mobile 1.1.0 RC2 Released | jQuery Mobile

スマートフォンやタブレット向けのJavaScriptライブラリ「jQuery Mobile 1.0」正式版をリリースしました。

参考記事：Announcing jQuery Mobile 1.0 | jQuery Mobile

 

Downloadページより無料でダウンロードすることができます。

「jQuery Mobile」では、プログラミングの知識がなくともHTMLのタグだけで、モバイル向けのサイトを構築することができます。また、クロスプラットフォームとなっていますので、Web製作者は、iOSやAndroidなどの閲覧環境を意識することなく作成することができます。

モバイル向けの部品なども多数揃っていることも特徴の一つです。

「jQuery Mobile RC3」がリリースされました。

参考記事：jQuery Mobile RC3 Released! | jQuery Mobile

 

「jQuery Mobile RC3」は、RC2からパフォーマンスチューニングされ、より高速化されています。

問題がなければ、このまま正式版としてリリースされるようです。

スマートフォン向けフレームワーク「jQuery Mobile」のリリース候補版となる「jQuery Mobile 1.0 RC1」が公開されました。

参考記事：jQuery Mobile 1.0 RC1が公開！ 正式版は数週間以内に － Publickey

 

「jQuery Mobile 1.0 RC1」では、ユーザーインターフェイス周りが改善など細かい点が修正されているのみとなっています。

対応するプラットフォームは以下。

• Apple iOS 3.2-5.0 beta
• Android 2.1-2.3、Android Honeycomb
• Windows Phone 7
• Blackberry 6.0/7/Playbook
• Palm WebOS (1.4-2.0)、Palm WebOS 3.0
• Firebox Mobile (Beta)
• Opera Mobile 11.0
• Meego 1.2、Kindle 3
• Chrome Desktop 11-13
• Firefox Desktop 3.6-4.0
• Internet Explorer 7-9
• Opera Desktop 10-11

 

正式版の公開は数週間後とみられています。

「jQuery Mobile Beta 3」がリリースされました。

参考記事：jQuery Mobile Beta 3 released! | jQuery Mobile

 

バグの修正や機能の追加などが行われています。また、「jQuery Mobile 1.0 正式版」のリリースに向けて最初のRC版の開発に取り組んでいるそうです。

ダウンロードは以下。
jQuery Mobile Beta 3 released! | jQuery Mobile

jQuery Mobile Beta 2がリリースされました。

参考記事：jQuery Mobile Beta 2 Released! | jQuery Mobile

 

このバージョンでは、ユーザーインターフェイスの変更やコードの最適化、指摘を受けていたXSS脆弱性の修正されています。また、対応するプラットフォームも増えているということです。

 

ユーザーインターフェイスに関しては、ラジオボタンやチェックボックスのデザインがシンプルに変更されているとのことです。

2011年5月16日～5月22日までの間に見つけたjQuery関連記事のまとめです。

 

カーソルを合わせると拡大するかっこいい検索窓作成jQueryサンプル:phpspot開発日誌

カーソルにフォーカスを当てると、検索ボックスがびよーんとアニメーションしながら伸びるインターフェイスを実現できるjQueryプラグインの紹介記事です。

デモ：jQuery Smooth Animated Search Field Freebie

ページの要素を3D化できる面白jQueryプラグイン「3Dify」:phpspot開発日誌

ページ内にある要素を3Dオブジェクト化して動かすことができるjQueryプラグインの紹介記事です。

デモは、WebKit系（Safari、Google Chrome等）でしか動作しませんのでご注意ください。

デモ：Edit this Fiddle – jsFiddle – Online Editor for the Web (JavaScript, MooTools, jQuery, Prototype, YUI, Glow and Dojo, HTML, CSS)

テーブルを使ったいろいろなjQueryプラグイン26個まとめ | Web活メモ帳

並び替えやページング、グラフ表示など色々な機能をもったテーブル用のjQueryプラグインのまとめ記事です。

テーブルをツリー化できるものや、エクセルのように扱うことができるもの等色々なプラグインがあります。

縦長テーブルをスクロール対応にするシンプルなjQueryプラグイン「Lightweight Scrollable Tables」:phpspot開発日誌

縦に長くなりがちなテーブルをスクロールできるようにするjQueryプラグインの紹介記事です。

デモ：scrollbarTable-0.1 Demo

【CSS3】 jQuery を使って iPad でネイティブアプリ並に滑らかなアニメーションを実現する書き方 (フェンリル | デベロッパーズブログ)

動作の遅い jQuery.animate() を使わずに、 transform:translate3d を使ってアニメーションを実現する方法の紹介記事です。

jQuery.animate() だとカクカクした動きになるそうなので、iPad向けにWebサービスを作りた場合は、覚えておいた方がいいでしょう。

Gmail風にドラッグ&ドロップでファイルアップロードが出来るjQueryプラグイン「jQuery HTML5 Uploader」 | Web活メモ帳

ファイルをWebページにドラッグアンドドロップすることで、ファイルをアップロードできるようになるjQueryプラグインの紹介記事です。

デモは、上記画像にファイルをドラッグアンドドロップしてください。

デモ：jQuery HTML5 Uploader

背景画像に更にドットパターンを合成して超カッコよくできるjQueryプラグイン「Vegas Background」:phpspot開発日誌

背景画像の上にドットパターンをかぶせる背景画像を改造できるjQueryプラグインの紹介記事です。

デモ：Documentation: Overlay – Vegas Background jQuery Plugin

jQueyを使う場合に覚えておくと便利なChrome拡張:phpspot開発日誌

jQueryを便利に使えるようになるGoogle Chromeの拡張の紹介記事です。

紹介されている拡張は、ツールバーからjQueryのサンプルを検索できるようになる「jQuery API Browser」と、jQueryのマニュアルを検索ボックスから検索できるようになる「jQuery API Search」の2つです。

jQueryと「linq.js」を連携させてDOMをLINQにより処理するには？ − ＠IT

「linq.js」を利用してjQueryでコレクション機能を強化する方法の紹介記事です。

コンテンツを流し読みしたいような場合に便利なUIを提供してくれる自動スクロール実装jQueryプラグイン「aautoscroll」:phpspot開発日誌

コンテンツを自動スクロールする為のjQueryプラグインの紹介記事です。縦方向のスクロール以外にも横方向のスクロールにも対応しています。

デモを動作させるには、画面右上にある「start」というリンクをクリックします。

デモ：jquery.aautoscrol Demonstration

jQuery1.6のattr()で困ったら、1.6.1にすればいいみたい。 | Ginpen.com

jQuery1.6で変更された .attr() の動作で困った人は1.6.1にバージョンアップしましょうという記事です。

jQuery1.6で仕様が変更された背景など詳しく書いてあります。

キーボードで画面操作するスライド系jQueryプラグイン・Ascensor – かちびと.net

キーボーの矢印キーを使って画面を縦横にスクロールさせることができるjQueryプラグインの紹介記事です。

ボタンやタブ、スライドなどのコンポーネントを実装するjQueryベースのUIライブラリ・Ninja UI – かちびと.net

「Ninja UI 」という名前ですが、忍者的な要素はほとんどありません。

必要と思われるコンポーネントはひと通り揃っているので、使用するには十分だと思います。

デモ：Ninja UI

jQueryを使って閲覧中のWebサイト自体をその場でプレゼンするサンプル・Screen Presenter – かちびと.net

ちょっと説明するのが難しいんですけど、Webサイトをそのまま使用してプレゼンテーションにするサンプルの紹介記事です。

デモサイトを見てもらった方が分かりやすいと思います。

デモ：Screen Presenter V1

2011年5月9日～5月15日までの間に見つけたjQuery関連記事のまとめです。

 

[JS]ページ内のリンクを印刷時にQRコードにして配置するスクリプト -printQr | コリス

Webページを印刷すると、ページ内にあるリンクをQRコードにして、ページの末尾に追加してくれるjQueryプラグインの紹介記事です。

デモ：jQuery.printQr() Plugin

WEB上で動くプレゼンテーションを作る際に便利なjQueryプラグイン「Awkward Showcase」:phpspot開発日誌

Web上でプレゼンテーションを作る際に最適なjQueryプラグインの紹介記事です。

デモ：Awkward Showcase – Demo #1

テキストがくるりとスライドしていくようなエフェクトをjQueryで実現するためのチュートリアル | IDEA*IDEA

マウスオーバーするとテキストがアニメーションするエフェクトを実装するためのチュートリアルの紹介記事です。

デモ：Sliding Letters with jQuery

[JS]複数のパネルの一つだけ内容を変更してハイライトさせるスクリプト -Hoverpanels | コリス

マウスオーバーしたパネルを強調表示して、内容も変更できるjQueryプラグインの紹介記事です。

デモ：http://jonathanfielding.com/experiments/jquery-hoverpanels/

リンクの開きかたを自在に管理できるjQueryプラグイン「Link Manager」:phpspot開発日誌

リンクを新しいウィンドウ、現在のウィンドウで開くという処理をjQueryを使って一元管理できるjQueryプラグインの紹介記事です。

デモ：jQuery Link Manager Plugin

モールス信号を再生できるjQueryプラグイン「Morse.js」 | Web活メモ帳

指定したテキストをモールスコードに変換＆再生してくれるjQueryプラグイン『Morse.js』 | IDEA*IDEA

テキストの内容をモールス信号で再生してくれるjQueryプラグインです。

デモを利用する場合は、HTML5に対応したブラウザを使用してください。

デモ：Morse.js Demo

jQuery MobileでGoogleMap APIを使ったサンプルがMITライセンスで公開されてた – かちびと.net

jQuery MobileでGoogleMap APIを使ったサンプルの紹介記事です。

ストリートビューを表示することも可能なようです。

デモ：jQuery mobile with Google maps v3 examples

WordPress で知らないと損する簡単に jQuery などの外部ファイルを読み込む wp_enqueue_script() | ウェブル

WordPressでjQuery等の外部ファイルを読み込むwp_enqueue_script()という関数の紹介記事です。

どんな解像度のディスプレイでも文字をぴったり大きく画面にフィットできるjQueryプラグイン「FitText」:phpspot開発日誌

表示されているディスプレイの解像度に合わせて文字のサイズを最適に変更できるjQueryプラグインの紹介記事です。

デモ：FitText – A plugin for inflating web type

jQuery Mobileを使ったフリーのスマートフォン向けWordPressテーマ・Generic jQuery Mobile – かちびと.net

jQuery Mobileを使ったWordPressのスマートフォン向けテーマの紹介記事です。

[JS]さまざまなタイプのスライドショーが簡単に設置できるスクリプト -Agile Carousel | コリス

いろいろなタイプのスライドショーを簡単に設置できるjQueryプラグインの紹介記事です。

デモ：Agile Carousel – Javascript Slideshow – Image Carousel

スポットライトを画像にあてる効果を作れるjQueryプラグイン「Spotlight」:phpspot開発日誌

マウスオーバーした部分にスポットライトが当たったように、元画像が見えるユーザーインターフェイスを実現できるjQueryプラグインの紹介記事です。

デモ：Spotlight v1.1 Example

jQuery 1.6.1 リリース：CodeZine

5月13日に「jQuery 1.6.1」がリリースされたというニュース記事です。

ツールチップのデザイン変更が容易なjQueryプラグイン・Tooltipsy – かちびと.net

CSSでツールチップをデザインすることができるjQueryプラグインの紹介記事です。

デモ：tooltipsy – jQuery tooltip plugin for control-obsessed designers.

2011年4月18日～4月24日までの間に見つけたjQuery関連記事のまとめです。

 

jQueryベースのWebフォームライブラリ「jFormer」 | DesignDevelop

使い方簡単で見た目も綺麗なダイアログ実装jQueryプラグイン「Apprise」:phpspot開発日誌

Webサイトで利用できる、ログインフォームやコメントフォームなど多彩なフォームに対応したjQueryプラグインの紹介記事です。

フォーカスを当てると説明文が表示されたり、バリデーション機能を備えたりしています。

デモ：Demos – jFormer

ツールチップも出せるニュースティッカー用jQueryプラグイン・Dynamic News – かちびと.net

RSSをスライドで表示できるニュースティッカー用jQueryプラグインの紹介記事です。

デモ：RSS Driven Dynamic jQuery News Slider Plugin

PHP＆jQuery＆CSS3でMacのPhotoboothを作るチュートリアル:phpspot開発日誌

Macに搭載されている、Photo BoothというアプリをPHP、jQuery、CSS3を使ってWeb上で再現するチュートリアルの紹介記事です。

デモ：Photobooth with PHP, jQuery and CSS3 | Tutorialzine Demo

jQueryベースの画像スライダー３０まとめ:phpspot開発日誌

jQueryで作られた画像スライダーのまとめ記事の紹介記事です。

ざっと見た感じ、なかなかクオリティの高いもの多いのではないかと思います。

[JS]アラート・ダイアログボックスの実装が簡単にできるスクリプト -Apprise | コリス

多彩なアラートボックス、ダイアログボックスを簡単に実装できるjQueryプラグインの紹介記事です。

デモページでは、様々なアラートボックス、ダイアログボックスを試すことができます。

デモ：Apprise – The attractive alert alternative for jQuery

「ノンプログラマーのためのjQuery入門」のスライドが凄く分かりやすいですね – かちびと.net

「ノンプログラマーのためのjQuery入門」というjQueryの基本をスライドを使って分かりやすく説明されています。

すごく分かりやすいので、これからjQueryを学びたいという人は、是非、見てください。

[JS]多彩なエフェクトが面白い、ボックスにパネルをスライド・フェード表示するスクリプト -Mosaic | コリス

画像のキャプションを多彩なエフェクトで表示できるjQueryプラグインの紹介記事です。

画像にマウスを合わせると、画像のキャプションがスライドやフェードなどアニメーションして表示されます。

デモ：Mosaic – Sliding Boxes and Captions jQuery Plugin

ページ内のテキストを動的に分かりやすくハイライトさせられるjQueryプラグイン「highlight」:phpspot開発日誌

Webページ内のテキストをハイライト表示できるjQueryプラグインの紹介記事です。

デモページの「Demo」項目に「highlight」、「javascript」というリンクがあるので、そのリンクをクリックするとハイライトのデモを試すことができます。

デモ：highlight: JavaScript text higlighting jQuery plugin

メニューに困ったら参考にできる40個のプラグインやスクリプト:phpspot開発日誌

jQueryだけでなく、JavaScriptを使ったメニュー用のスクリプト紹介記事です。

アニメーションするスピードメーターを実装できるjQueryプラグイン「Speedometer」:phpspot開発日誌

数値を指定すると、スピードメーターの針がアニメーションして移動するjQueryプラグインの紹介記事です。

デモ：Speedometer | Jacob King

現在閲覧しているページへのリンクをハイライトできるjQueryプラグイン「currentPage」:phpspot開発日誌

現在表示しているページのリンクをハイライト表示するjQueryプラグインの紹介記事です。

メニューバーなどで有効に使えるjQueryプラグインです。

デモ：currentPage – a jQuery plugin

jQuery Mobileを使ったスマートフォン用壁紙ダウンロード用サイト『WALLPAPER COLLECTION for スマートフォン』つくりました！

WordPressとjQuery Mobileを使って作られたスマートフォン用の壁紙ダウンロードサイトの紹介記事です。

iPhone以外にもAndroidスマートフォン用のサイズも用意されています。

以下のサイトよりダウンロードできます。
WALLPAPER COLLECTION for スマートフォン

Webデザイナー&UIデベロッパー向けのHTML5/CSS3/jQuery/PHPフレームワーク・G5 Framework – かちびと.net

HTML5、CSS3、jQuery、PHPを使って作られたデベロッパー向けのフレームワークの紹介記事です。

デモ：HTML5 Front-End Development Framework | G5 Framework