タグ別アーカイブ: JQuery

jQueryのanimateで自由にアニメーションできるようになろう | webOpixel

jQueryにはアニメーションをするための機能がいろいろとありますが、ここでは「animate」メソッドの扱い方をご紹介いたします。

動かす前の準備

jQueryの前に動かす要素をhtml&cssで作成しておきましょう。

html

1 <div id="box"></div>

css

1 #box {
2     width: 100px;
3     height: 100px;
4     background: #3399FF;
5 }

jQueryコードを書くときの基本的な形は次のようになります。

javascript

1 <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min.js"></script>
2 <script type="text/javascript">
3 $(function() {
4     //ここにjQueryのコードを書く
5 });
6 </script>

以降は「ここにjQueryのコードを書く」という部分にコードを書いていきます。

「animate」メソッドを使用した単純なアニメーション

最初はページが表示されたら右に「500px」スライドさせるだけのアニメーションです。

「animate」メソッドはこのように使います。

「animate」の基本的な書き方

ここでは作成した要素(#box)を右(margin-left)へ500xpスライドさせたいのでしたね。

これを先ほどの図にあてはめるとこうなります。

javascript

1 $('#box').animate({
2     'marginLeft': '500px'
3 });

これで実行するとスライドしているはずです。簡単ですよね。

ちなみにcssでプロパティは「margin-left」と「-(ハイフン)」で句切られていますが、「animate」メソッドでは単語間の最初の文字を大文字にするキャメルケースという書式で記述します。

なので「margin-left」は「marginLeft」と書きます。

ここでは「marginLeft」を使用しましたが「fontSize」でも「width」でも数値で指定するようなパラメータならほとんどのものはアニメーションできます。

親要素を基点とする

posirionの設定がないと要素を配置した位置を基点としてアニメーションされるので、複数の要素を操作したいときは不便なときがあります。

そこで、jQueryという話ではないですが、複数の要素を同じ基点で動かす方法をご紹介します。

boxを2つにしたら「div」で囲みます。

html

1 <div id="wrap">
2 <div id="box1"></div>
3 <div id="box2"></div>
4 </div>

親にを「position: relative」にして、子は「position: absolute」を指定しましょう。

css

01 #wrap {
02     position: relative;
03 }
04 #box2,
05 #box1 {
06     position: absolute;
07     width: 100px;
08     height: 100px;
09     background: #5EA9F4;
10 }

これで「#wrap」を基点として、「left」や「top」で移動できるようになります。

javascript

1 $('#box1').animate({
2     'left': '500px'
3 });
4 $('#box2').animate({
5     'left': '300px',
6     'top': '200px'
7 });

斜めに移動させる

斜めに移動させる

横にスライドさせるだけなら「left」を動かすだけでしたが、斜め下に移動する場合はどうしたら良いでしょうか?

はい。「left」と「top」を同時に動かせば良いですよね。

やり方は簡単ですプロパティと数値を1セットとして「,」で繋げていくだけです。

javascript

1 $('#box1').animate({
2     'left': '500px',
3     'top': '300px'
4 });

3つでも4つでもアニメーションさせたいパラメータをどんどん追加できます。

連続で移動させる

連続で移動させる

2つ指定すれば斜めに移動できることはわかったのですが、たとえば右に移動してから下に移動するといった処理はどうしたらいいでしょうか。

これはjQueryのメソッドチェーンという書き方をすれば簡単です。

javascript

1 $('#box1')
2     .animate({'left':'500px'})
3     .animate({'top':'500px'})
4     .animate({'left':'0px'})
5     .animate({'top':'0px'});

このようにすれば上から順番にアニメーションが実行されます。

速度を調節する

「animate」メソッドは第2引数以降でオプションの設定をすることができます。

アニメーション速度を変更するには、第2引数に「slow」「normal」「fast」の文字列を指定するか、直接数値で指定します。

javascript

1 $('#box1').animate({
2     'left': '500px'
3 }, 1500);

オプションは次のように記述することもできます。

javascript

1 $('#box1').animate({
2     'left': '500px'
3 },{
4     'duration': 1500
5 });

動きに変化をつける(イージングの設定)

そのままだと一定の動きしかしないのでつまらないですが、イージングの設定をすれば「徐々に速くなる」などアニメーションに変化をつけることができます。

標準では「linear」と「swing」の2種類しかありませんが、「jQuery Easing Plugin」などを導入することでバリエーションが増えます。

javascript

1 $('#box1').animate({
2     'left': '500px'
3 },{
4     'duration': 600,
5     'easing': 'linear'
6 });

アニメーションが終わったあとに何かする

アニメーションが終了したら何か処理を実行したいといったケースはよくあります。

そんなときは「complete」オプションに関数を設定してあげます。

javascript

1 $('#box1').animate({
2     'left': '500px'
3 },{
4     'duration': 600,
5     'complete': function(){
6         alert('終わりました');
7     }
8 });

以上です。まだオプションなどあったりしますが、これだけでもいろいろできるのではないのかと思います。

参考サイト Effects/API/jQuery

フローティングメニューの使い方(スクロールするメニュー) : HTMLコーディングのノウハウ : HTML/XHTML、CSSコーディング最安保障~クロノドライブ~

今回は、ブラウザのスクロールに合わせてするする付いてくるフローティングメニューのご紹介です。
あまり使う機会はありませんが、覚えておくといざというときに便利です。

それでは早速使い方のご紹介

必要なデータを揃える

まずは、JQUERY SCROLL FOLLOWから下記ファイルをダウンロードしましょう。

ここではファイル名を下記の通り保存しました。

  • jquery.js
  • jquery-ui.js
  • jquery.easing.js
  • jquery.scrollfollow.js

ディレクトリはこのようになりました( jsフォルダの中にダウンロードした jsファイルが全て入っています)。

HTMLからjsデータを読み込む

フローティングメニューを使用するHTMLファイルから先ほどダウンロードした jsファイルを読み込みます。
{path}の部分はHTMLファイルからのパスにしてください。

<script type="text/javascript" src="{path}/jquery.js"></script><script type="text/javascript" src="{path}/jquery-ui.js"></script><script type="text/javascript" src="{path}/jquery.easing.js"></script><script type="text/javascript" src="{path}/jquery.scrollfollow.js"></script><script type="text/javascript">

次にフロートさせる要素のIDとオプションの設定をします。ここでは #sideBar をフロートさせる要素のIDとして指定しています。このID指定を間違えると動かないので気をつけましょう

<script type="text/javascript">$( document ).ready( function (){        $('#sideBar').scrollFollow({});});//オプション$( document ).ready( function () {        $( '#sideBar' ).scrollFollow( {                //アニメーションの速度の設定。0 にするとアニメーションなしになります。                speed: 500,                //ブラウザの領域とフロート要素との余白。0にするとぴったりくっつきます。                offset: 0        } );} );</script>

最後に、フロートさせる要素に position: relative; か position: absolute; を指定します。
これで完了です。
◆サンプル
▼HTMLデータのダウンロード

jsファイルは再配布すると怒られちゃうかもしれませんので、自力でダウンロードしてください・・・!

—————

ブラウザ側の実装が不十分な position: fixed; の代わりに使うことでデザインの幅も広がりそうですね。

画像を使ったいろいろなjQueryプラグイン224個まとめ( 200+ collection of jQuery for images ) – かちびと.net

画像にエフェクトをかけて拡大表示
したり、スライドを作ったり、ツール
チップで表示したり、というような
画像を使用したjQueryプラグイン
が沢山あるのと、探してる方が直ぐ
に見つけられるように、という事で
リンク集を作りました。

という訳で、集まっているjQueryのプラグインの共通点は画像を使っている、という事だけです。一貫性無いといえば無いですが、個人的にも必要とする事が多いので自分用のメモも兼ねてシェア。

結構カテゴリ分けはいい加減かもしれませんのであしからずご了承下さい。画像じゃなくてもいいんじゃ・・みたいのもありますが、デモで画像を使ってる、画像と相性が良さそう、みたいなものは基本的に掲載しています。

リンクにマウス乗せればキャプチャが出ます。

    Lightbox

    Lightbox風に画像を表現できるjQueryいろいろ

  1. Lightbox2 / ベーシックなタイプ。グループ化可能
  2. colorbox / 多数のエフェクトが実装可能でグループ化も出来る
  3. FancyBox / ロードとオーバーレイが素敵なLightbox
  4. prettyPhoto / 太枠と角丸のLightboxでタイトルは枠外に付ける
  5. ThickBox / 画像以外にテキストでも出来る。グループ化可能
  6. jQuery lightBox plugin / アニメーションが可愛い。グループ可能
  7. Slimbox / これもアニメーションとオーバーレイが素敵
  8. Facebox / Facebookライクなやつ。テキストとかも対応
  9. NyroModal / シンプルで多機能。アニメーションが素敵
  10. Pirobox / インターフェースが素敵。グループにするとより素敵です
  11. FancyZoom meet-jquery / スムーズに拡大縮小します。オーバーレイは無し
  12. imgBox / オーバーレイの有無を選択できる
  13. IMAGEBOX / アニメーションかわいいです
  14. PICBOX / ダイナミックに表示。画像もドラッグで移動できます
  15. CeeBox / フレームなどにも対応した多機能ライブラリ
  16. TopUp / 動画やFlaにも対応した多機能Lightbox
  17. NotesForLightBox / ベーシックなやつ。オーバーレイにアニメは無い
  18. YoxView / 拡大アニメーションの素敵なLightbox
  19. Fancy Zoom / 人気のLightbox。アニメーションが好みです
  20. Image Zoom / 拡大アニメーションがスピーディー
  21. ZOOMIMAGE / スムーズに拡大します。グループ可
  22. Sexy LightBox / 上からストーンと落ちてくる
  23. Image Magnify / シンプルで軽量なLightbox
  24. SuperBox! / オーバーレイが独特
  25. スライド / ギャラリー

    スライド、ギャラリーやカルーセルなどなど

    1. ベーシック

  26. slideViewer / ツールチップも実装するスライダー
  27. jFlow / ベーシックなスライダー。キャプション付
  28. jQuery.flickrGallery / ベーシックにクリックで画像を表示させるギャラリー
  29. Photo Slider / サムネイルが可愛いギャラリー
  30. s3Slider / 自動で変わっていくギャラリー。キャプションが素敵
  31. jqGalScroll / エフェクトの無い、シンプルなギャラリー
  32. Dynamic Image Gallery / サムネイル付きのシンプルギャラリー
  33. GalleryView / サムネの大きさも選べるギャラリー
  34. AD Gallery / スピード感のあるスライドのギャラリー
  35. Moving Boxes / 画像とキャプションが拡大しながら切り替え
  36. slideViewerPro / キャプション、サムネ付きのベーシックスライダー
  37. Pikachoose / フェードエフェクトのギャラリー、サムネ付
  38. CrossSlide / フェードのみのシンプルギャラリー
  39. Apple-style Slideshow Gallery / Appleライクなクールスライダー
  40. jqFancyTransitions / ブラインドエフェクトがクールなギャラリー
  41. Nivo Slider / いくつかのエフェクトが使えるスライド
  42. A Simple jQuery Slideshow / フェードのみのシンプルなスライド
  43. Image Strip / ベーシックなコンパクトギャラリー
  44. jQuery Blinds / スピーディーなブライドエフェクトのシンプルなギャラリー
  45. BBC Radio 1 Zoom Tabs / オンマウスでメニューが出てくるベーシックスライダー
  46. jquery.showcase / フェードするギャラリー。マウスを乗せるとキャプション
  47. jQuery slideView / 縦にスライドするシンプルスライダー
  48. 2. ユニーク

  49. SPACEGALLERY / 奥から順に表示されるユニークなギャラリー
  50. jQuery Cycle Plugin / 省スペースで複数エフェクトのあるミニギャラリー
  51. Slider Gallery / ドラッグで移動するスライダー
  52. jQuery.popeye / 省スペースのギャラリー
  53. supersized / 画面いっぱいに画像を使うギャラリー。リンクも貼れる
  54. Beautiful jQuery slide / キャプション表示がクールなスライドギャラリー
  55. morphing gallery / 画像の大きさに合わせられたユニークなギャラリー
  56. ImageFlow / ドラッグで動かし、画像に反射や拡大も加えてある
  57. Sliding Image Gallery / 次の画像をクリックするとその次のが出てくる
  58. Animate Panning Slideshow / 斜めにも移動するギャラリー
  59. Looped Slider / 戻らずにループするスライドギャラリー
  60. Mosaic Slideshow / 升目で切り替わるユニークなスライド
  61. Zoomer Gallery / オンマウスで拡大、キャプションがアニメーションするギャラリー
  62. Smooth Div Scroll / マウスを乗せるor自動で動くスライド
  63. Simple Controls Gallery / オンマウスでナビが出てくるコンパクトギャラリー
  64. z-index gallery / 1枚1枚後ろに行くユニークなギャラリー
  65. Image Cube / ボックスで表現したユニークなギャラリー
  66. Micro Image Gallery / コンパクトながらサムネ表示にも切り替えられるギャラリー
  67. background image slideshow / 背景と同時にキャプションも変えるダイナミックスライダー
  68. Flip! / 画像がひっくり返るスライド
  69. Switch Display / グリッドと縦並びに変更可能なギャラリー
  70. jFancyTile / タイル状に切り替わるギャラリー
  71. Gallery Slider Plugin / 全画面を使ったダイナミックギャラリー
  72. 3. コンテンツごとスライド

  73. Easy Image or Content Slider / 縦にも出来るしテキストも出来るコンテンツスライダー
  74. horinaja / ベーシックなコンテンツスライダー
  75. loopedSlider / テキストにも対応したコンテンツスライダー
  76. Slick and Accessible Slideshow / テキストも対応のベーシックなコンテンツスライダー
  77. Making a Content Slider with jQuery UI / ドラッグで動かすコンテンツスライダー
  78. Content Slider with jQuery / アニメーションが独特なコンテンツスライダー
  79. EOGallery / アニメーションが面白いコンテンツスライダー
  80. dualSlider / 動画にも対応したコンテンツスライダー
  81. simplesli.de / 見た目の素敵なコンテンツスライダー
  82. 4. 多機能

  83. Galleria / 超多機能なスライドギャラリー。おすすめ
  84. Galleriffic / 様々な形を選べる高性能ギャラリー
  85. JQUERY MULTIMEDIA PORTFOLIO / ドラッグで動かすタイプ。動画にも対応
  86. FeaturedContentSlider / サムネ、キャプションも付いたコンパクトギャラリー
  87. Start/Stop Slider / テキストと画像がクロススライド。ストップ機能付
  88. AnythingSlider / 高機能で人気のスライダー
  89. COIN SLIDER / エフェクトが多数あるギャラリー、キャプション付
  90. jQuery.slideShow({}); / 色々なタイプのある多機能ギャラリー
  91. aviaslider / エフェクトが豊富なシンプルギャラリー
  92. カルーセル

  93. prettyGallery / テキストにも対応したカルーセル
  94. jQuery Image Scroller / 自動で流れ、オアウスオーバーで止まり、キャプションを出す
  95. Infinite Carousel / シンプルで汎用的なカルーセル
  96. Step Carousel Viewer / ナビゲーション付きのカルーセル
  97. jCarousel / 人気の高機能カルーセルプラグイン
  98. jCarousel Lite /  ベーシックなカルーセル
  99. jQuery.ScrollShow / アニメーションがユニークなカルーセル
  100. Agile Carousel / コンテンツごとスライドするカルーセル
  101. infinite JQuery carousel / ベーシックで使いやすそうなカルーセル
  102. Feature Carousel / サークル状に移動するカルーセル
  103. Tiny Carousel / 縦にもスライド可能なカルーセル
  104. bxCarousel / スッキリしてシンプルなカルーセル
  105. ツールチップ

    ツールチップ内に画像を含められる、または画像で表示可能なもの

  106. jtip / 画像とテキストを一緒に出せるツールチップ
  107. clueTip / こちらも画像とテキストを出せる。エフェクト無し
  108. Digg-style post sharing tool / ソーシャルメディアアイコンをツールチップで表示
  109. jQuery Popup Bubble / フェードインしながら画像が降りてくるツールチップ
  110. Easiest Tooltip / この記事で使ってるやつです
  111. Simple CSS + Javascript Tooltip with jQuery / マウス追従ツールチップ。テキストでも画像でも
  112. Coda Bubble / ふわっと浮き上がるエフェクトが可愛いツールチップ
  113. Sticky Tooltip / ベーシックな画像ツールチップ。マウス追従
  114. BeautyTips / 様々なタイプに対応した多機能ツールチップ
  115. Thumbnail Hover Popup / こちらも画像をツールチップで出す
  116. qTip / 柔軟性の高い高機能ツールチップ
  117. tinyTips / 軽量のツールチップ
  118. MopTip / divなども使える国産高機能ツールチップ
  119. マウスオーバーエフェクト

    マウスを乗せた時のエフェクトを実装するもの

  120. Sliding Boxes / 画像がスライドして別jコンテンツを出したりキャプション出したり
  121. Creating an Image Slider / ガレージ式に画像が降りて別の画像を表示
  122. Image Overlay / キャプションがアニメーションで表示
  123. Photo Zoom Out Effect / マウスを乗せると縮小される珍しいタイプ
  124. Thumbnail with Zooming Image / キャプションとちょいズームを実装
  125. Hover Zoom / オーバーレイと縮小するエフェクト
  126. captify / シンプルなキャプション表示
  127. hover-block-jquery / スムーズに画像がスライドする
  128. Greyscale Hover Effect / モノクロになる珍しいエフェクトを実装
  129. Hover fading transition / フェードしながら切り替わるボタン
  130. Fade Method / フェードしながら切り替え
  131. Stunning Sliding Door Effect / 4方向に分かれる面白いエフェクト
  132. Using Opacity to Show Focus / 画像を載せると別の画像にエフェクトをかける
  133. Thumbnail with Fading Caption / クールなエフェクトで切り替える
  134. jSquares / マウスを乗せるとハイライト化、コンテンツが浮き上がる
  135. hoverFade / フェード効果を与えるライブラリ
  136. Fade In-Fade Out / 画像にオンマウスで画面全体をフェードインアウト
  137. 拡大

    拡大鏡的なもの

  138. JQZoom / マウスの動きに合わせて脇に拡大鏡を表示
  139. Featured Image Zoomer / 拡大したままマウスホイールで調整も可能
  140. Cloud Zoom / エフェクトがクールなズーマー
  141. Image Power Zoomer v1.1 / こちらもマウスで拡大調整可能です
  142. AnythingZoomer / シンプルな拡大鏡
  143. Loupe and Lightbox / Lightbox効果をプラスした拡大鏡
  144. Apple-like Retina Effect / 丸い拡大鏡のズーマー
  145. Zoomple / ツールチップで画像の一部を拡大表示
  146. メニューっぽいやつ

    ギャラリーとどう違うのか分からないけどメニューになりそうなもの

  147. Image Rotator with Description / サイドのメニューをクリックすると画像が変わる&キャプション
  148. Fancy Thumbnail Hover Effect / サムネイルをクリックすると大きな画像が切り替わる
  149. Feature List / 見た目もクールなイメージタイプのナビゲーション
  150. slidedeck / マウスだけで全てを閲覧できるスライドメニュー
  151. Content Slider Using jQuery UI / ベーシックな画像ナビゲーション
  152. bxGallery / シンプルな画像ナビゲーション
  153. Background Image Navigation / 背景がマウスオーバーでスライドするメニュー
  154. IconDock / アイコンが滑らかに拡大していくドックメニュー
  155. Horizontal Tooltips Menu / アイコンメニューにツールチップがスムーズに追従
  156. Realistic Hover Effect / 影や反射のあるアイコンがふわっと浮くエフェクト
  157. Rolling Rounded Menu / アイコンが回転しながら開くユニークなメニュー
  158. Garage Door Style Menu / ガレージのドアのように開く画像メニュー
  159. Animated Menus / ゆっくり切り替わるクールなメニュー
  160. Outside the Box / アイコンが滑らかに拡大するドックメニュー
  161. BubbleUp / ユニークなアニメーションで拡大するアイコン
  162. AutoSprites / cssスプライトとjQueryをあわせたメニュー
  163. jQuery Dashboard / ダッシュボードパネルに隠されたアイコンメニュー
  164. Smooth Animated Menu / すとんとアイコン付きの画像が降りてくるメニュー
  165. Elastic Thumbnail Menu / スムーズに拡大するサムネイルを使ったメニュー
  166. megamenu / 画像がドロップダウンするメガメニュー
  167. Spy Effect / 縦にどんどん下がっていくアイコン付き可変メニュー
  168. quicksand / アニメーション付きでソートできるアイコンメニュー
  169. Simple Image Viewer / クールなアニメーションで切り替わるシンプルイメージメニュー
  170. Horizontal Accordion / 画像チラ見せアコーディオン
  171. CSS3

    css3を使ってるプラグイン

  172. polaroid photo viewer with CSS3 / ポラロイドを動かせるcss3のギャラリー
  173. CSS3 Lightbox Gallery / バラバラに散らばった写真をクリックするとLightboxで拡大
  174. Cufonized Fly-out Menu / クールなアニメーションエフェクトのフライアウトメニュー
  175. Slide Down Box Menu / マウスオーバーで画像が降り、テキストが上がるクールなメニュー
  176. Pretty Simple Content Slider / キャプションとタイトルのスライドインが素敵なメニュー
  177. ShineTime / マウスオーバー時のエフェクトがかっこいいギャラリー
  178. css3 transition slide / キャプションがクロススライドするシンプルなスライド
  179. Contextual Slideout Tips / クリックでコンテンツがアニメーションしながら広がる
  180. Bubble Navigation / マウスオーバーでサークルが広がり、子メニューが出現
  181. A Fresh Bottom Slide Out Menu / 遅れて出てくるアイコンがキュートなメニュー
  182. Apple-Style Icon Slide Out Navigation / アイコンが降りて来て、裏に入っていくメニュー
  183. Little Boxes Menu / バラバラになるアニメーションがユニークなボックスタイプのメニュー
  184. Slide Out Navigation / アイコンの出方が可愛いスライドサイドメニュー
  185. Interactive Picture / マウスオーバーでキャプションがスライド、クリックで画像が上がってくる
  186. Thumbnails Navigation Gallery / サムネイルギャラリーを使ったメニュー
  187. Sliding Panel Photo Wall Gallery / 画像を全体に表示、ギャラリー化
  188. Photo Desk / クリックするたびに角度が変わるポラロイドタイプギャラリー
  189. Beautiful Photo Stack Gallery / スライドギャラリーとLightboxをあわせたもの
  190. Image Highlighting and Preview / 少し回りくどいLightbox
  191. Kitchen Table / ギャラリーとLightboxをcss3も使って実装
  192. その他

    そのほかいろいろ

  193. PANORAMA VIEWER / 360度ビューアを実現するライブラリ
  194. VIRTUAL TOUR / パノラマビューアにキャプション機能を追加
  195. Create a Resizable Image Grid / バーのドラッグで全ての画像のサイズを変更
  196. imgAreaSelect / 画像の範囲をドラッグで指定、位置やサイズを表示
  197. Jcrop / 画像の範囲を指定して切り取る
  198. gzoom / バーのドラッグで拡大縮小
  199. Image Upload And Crop / PHPを使って、アップロード&切り取り可能なコンテンツに
  200. PhotoShoot / 画像内の一部を撮って写真内に収める
  201. Image Flip / クリックするとフリップする
  202. jQuery Corner / 角丸を作る。画像も角丸に
  203. jQSlickWrap / 画像の形状に合わせてテキストを詰める
  204. Image Reflection / 画像にリフレクション効果を与える
  205. jcoverflip / 画像をスクロールバーで動かす際に拡大アニメーション
  206. ANIMATED INNERFADE / 画像が自動でボックス内で斜めに動いたりする
  207. jThumb / 画像をサムネイル化する
  208. It’s a Rainbow! / 背景の画像の色が七色に変化
  209. Page Peel Effect / 角にめくれをつくる
  210. QuickFlip / クリックでフリップするコンテンツ。背景に画像しても可
  211. 以上、224個の画像系jQueryプラグインでした。

    mitukiii.jp | Rails 3.1 と JQuery Mobile でスマートフォン用 Web サイトを作った

    スマートフォン用 TINAMI ビューア “ちなみびゅあ” 作りました
    ちなみびゅあ

    Rails 3.1jQuery Mobile で作りました。
    その雑感やメモなど。

    Ruby on Rails 3.1

    まだ正式にリリースされてはいない Ruby on Rails 3.1 ですが、各所から “面白い” “クール” などという声が聞こえてきたので、使ってみることにしました。

    Rails 3.0 との違いや新機能としては、

    • 標準の JavaScript ライブラリが protoype.js から jQuery になった。
    • 標準の JavaScript の記述言語に CoffeeScript になった。
    • 標準の CSS の記述言語に SCSS になった。
    • JavaScript / CSS が結合/圧縮されるようなった。
    • Rails 2.x 系との互換性をバッサリ切り捨てた。

    特に上記した部分が目に付きやすい部分じゃないでしょうか。今回はビューを中心に書いて、コントローラやモデルはほとんど触ってません。そのためビューの機能を中心の紹介になりました。他にも HTTP Streaming や Identity Map などの面白そうな新機能があるので是非触りたいです。

    以前のバージョンでも CoffeeScript や SCSS を使うことは出来ますが、標準として組み込まれてるのがとてもクールだと思いました。CoffeeScript によって JavaScript の記述量が減り、また俯瞰しやすくなったことでメンテナンス性が上がりました。SCSS は Better CSS と言った感じで、既に CSS を書ける人はすんなり馴染むことが出来ます。デザイナーの方も違和感なく触ることが出来るんじゃないでしょうか。

    CoffeeScript のコンパイルのため JavaScript 実行環境が必要になり、開発環境を整えるのが少し面倒になりました。また 2.x 系との互換性がなくなったことや、フォルダの構造が変わってたことで、既存のアプリケーションのアップグレードも大変だと思います。しかし、これから Rails を学習する、新規にアプリケーションを作る、などと言った方は Rails 3.1 を触らない理由はありません。ひとつひとつの機能が尖っていて触ってて面白いです。

    因みに Rails 3.1 の正式リリースは8月30日予定だそうで、現在の最新は Rails 3.1 rc6 です。(8月17日現在)

    参考リンク

    Rails Hub情報局: AjaxからPjaxへ、Ruby on Rails 3.2はどうなる!?
    Riding Rails: Rails 3.1: Release candidate

    合わせて読みたい

    edge rails(Rails 3.1)の新機能を調べてみる – おもしろWEBサービス開発日記
    Rails 3.1 でサポートされるHTTPストリーミング機能について – おもしろWEBサービス開発日記
    Asset Pipelineを備えたRails 3.1のリリースに向けて、その根幹を担うSprocketsをちょっと触っておくことにした。 – Sooey

    jQuery Mobile

    jQuery Mobile も正式リリースされていないのですが、簡単に弄ってみると中々良かったので使うことにしました。

    jQuery Mobile を使うことのメリットは、

    • 自分でデザインしたりコードを書かなくとも HTML にメタ情報を埋め込むだけでそれらしい見た目になる。
    • デスクトップ、タブレット、スマートフォンなど幅広いプラットフォームをサポートしている。

    特に大きいところとしては上記でしょうか。適当に書いただけでそれっぽい見た目になり、それっぽい動きをしてくれます。汎用スマートフォン Web アプリケーションを作る際は jQuery Mobile を使うことで楽が出来ます。JQTouch は使ったことがないので比較は出来ません。

    使ってて気に入らないなと思った部分は、ナビゲーションが hash fragment で行われてることです。Twitter などで使われてる #! ってやつです。設定でオフにすることが出来るので、オフにしてあります。代わりに Pjax を利用し自分でナビゲーションしようとしたのですが、上手く動かなくて諦めました。将来的にはライブラリ側で Pjax を使ったナビゲーションをサポートしてくれることを願います。

    因みに正式リリースは9月またはそれ以降、現在の最新は jQuery Mobile β2 です。(8月17日現在)

    HTML5のDesktop Notificationを簡単に実現するjQueryプラグイン「jwNotify」:phpspot開発日誌

    Test HTML5 Desktop Notification Plugin

    HTML5のDesktop Notificationを簡単に実現するjQueryプラグイン「jwNotify」。
    画面の右下にポップアップ通知を出す機能がHTML5であるみたいですが、それをjQueryで超簡単に実装するプラグイン。

    jQueryで実装することで、とりあえず次のように簡単に実装できます。画像のパスなんかも指定してアイコンを設定出来ます。

    $.jwNotify({    image : 'path-to-image-file',    title: 'title-to-be-shown',    body: 'body-of-the-notification',    timeout: 10000});

    通知の際には次のように確認バーが出ますが、一度許可してしまえば出ない模様。

    ウィンドウ外でアニメーションしながら出てくれる分、気付きやすいこの Desktop Notification。
    使い方次第ではより便利なサイト作りに活用することができそうです。