jQueryサイト:リファレンスと使用例の更新

今週はサンプルを進めたかったのですが、仕事が色々と重なり進めることができませんでした
土日も頑張ったのですが…。

ですが、少しだけ更新しました。
更新内容は以下の通りです。

使用例

使用例のページに3つのサイトを追加しました。
 
 
 

リファレンス

リファレンスのトップにバージョンについての説明「jQueryのバージョンについて」を
追加しました。また、jQueryのv1.9へのバージョンアップに伴いリファレンスを更新しました。
今回は、廃止されたメソッドを紹介しています。
更新内容は右記のサイトを参考にしています。→jQuery Core Upgrade Guide

・toggleイベント

予てから廃し予定となっていましたが、とうとう廃止されました。演出効果のtoggleメソッドは
廃止となっていないため、イベントのつもりでtoggleと記述しても演出効果のメソッドと判定
されてしまいます。詳細はリファレンスを確認して下さい。
→リファレンス:toggleイベント(解説の一番下で説明しています)

・browserプロパティ

予てから廃し予定となっていましたが、とうとう廃止されました。代わりにsupportプロパティを利用して下さい。→リファレンス:browserプロパティ

・liveイベント/dieイベント

負荷が高いため廃止となりました。代わりにonイベントやoffイベントを利用して下さい。
→リファレンス:liveイベント dieイベント

・subメソッド

プラグインに移行されるとのことでv1.9では廃止となりました。→subメソッド
 
 
次回の更新もv1.9によるリファレンスの修正となります。
 
 
 
 

jQueryサイトの状況(お薦め本とバグノートとv1.9)

javaScriptのお薦め本

先週、東京に出る用事があったので、ついでにjQueryを始める前に読むべき本を探してきました。
事前にamazonで良さそうな本をチェックしておいたのですが、実際に確認すると1冊しか
お薦めできそうな本がありませんでした。本はチュートリアルのトップで紹介しています。
チュートリアル:トップ
 
ほかにも良いjavaScriptの本はありそうだったのですが、本格的すぎる本はjQueryにつなげる
にあたって混乱を招くと思ったので、このようなチョイスとなりました。
 
 
 

バグノート

仕事で作成するコンテンツはサンプルで紹介するようなシンプルなものではないため
思わぬバグに遭遇することがあります。そのような情報を残すページを用意しました。
 
あまり数が多くなるとは考えていないので、チュートリアル内に作成しました。
左メニューで目次の下にある「バグノート」がそれです。すでに、2件登録してあります。 
バグノート(1)
 
 
 

v1.9がリリースされました

jQueryのv1.9がリリースされました。次回以降、このバージョンアップに伴いリファレンスの
内容を更新していきます。内容は本家サイトのアップグレードガイドのページを参考にします。
jQuery Core Upgrade Guide
 
 
 

jQueryサイトの状況

プラグインページと使用例のページを追加しました。
これで各コンテンツの体裁が一応整いました。
しかし、まだまだ完成には遠いので、これからも頑張ろうと思います。
仕事の合間に作業するのでペースは遅いと思いますが、よろしくお願いいたします。
 
 
プラグインページに3つのプラグインの記事を追加しました。
プラグイン:目次
 
使用例に3つサイトを追加しました。
使用例:目次
 
 
 

リファレンス:animateメソッドの修正

いまプラグインのページで「イージング」の項目を作成しているのですが、
サンプルを作成している過程で、animateメソッドの構文に対する私の認識
が間違っていたため修正しました。
 
animateメソッドは引数を省略して、他の引数を詰めて設定できると
考えていたのですが、期間を省略してイージングを詰めて設定することは
できませんでした。
 
詳細はリファレンス:.animate(prop)のメモの最初の項目「引数の省略について」
を確認して下さい。

SNSボタンについて

jQuery入門講座のサイトに各種SNSボタンを付けてみました。
更新頻度が低いので必要ないかもしれないのですが、練習しないといけないので…。
 
で、動作確認したところfacebookボタンをクリックした際に、以下の様にコメント欄が
隠れてしまう現象に出会いました…。

 
原因を調べると、floatの問題を解決するために利用していた「overflow:hidden」が
原因と判明。面倒ですがoverflowの設定の代わりにclearbothのテクニックを利用する
ことで問題を回避できました。
→参考サイト:float指定によるレイアウト崩れを回避する方法
 
 
しかし、まだ問題がありました…。
タイムラインに表示される画像を指定していなかったため、以下の様に
「はてなブックマーク」の画像が利用されてしまいました…。
動作確認で自分のサイトに「いいね」をクリックしまくりました…

 
 
この問題はオープングラフの設定で回避することができるそうなので
以下の様なメタタグを追加しました。
<meta property=”og:image” content=”http://www.jquerystudy.info/images/forFaceBook.gif” />
その結果、以下の様に指定した画像が表示されるようになりました。

 
最初この設定を相対パスで指定していたのですが、エラーとなって正しく
反映されませんでした。絶対パスでないとダメだったようです。
そのようなエラーをチェックするためにfacebookのデバッグページを利用しました。

 
オープングラフをフル設定?すると「jQuery入門講座」のサイトをfacebookのページに
見立てて更新状況などを発信することもできるらしいです。
更新頻度は低いのですが、時間が合ったら挑戦したいと思います。
 
 
 

jQueryサイトの状況

あけましておめでとうございます。

サンプルページのtop(仮)が完成しました。目標のサンプルである「診断系コンテンツ」も
確認することができます。意外と少ないスクリプトで作成されており、大まかですがコメント
を書いているのでソースも確認してみてください。
サンプル目次