jQueryサイト:使用例追加

今週は忙しかったので、使用例でお茶を濁すことに..。
いつものように3件追加してみました。
使用例のページ
 
 

jQuery問題集アプリの進捗

jQuery問題集は問題数が予定より大幅に増えたので前編/後編に分けることにしました。
前編の問題データが完成し、問題数は213問に確定。後半も多分同じくらいになります。
 
で来週からxcodeの作業に入るのですが、xcode3では問題も多そうなので
xcode4をインストールする事にしました。そのためにはOSもアップグレードしないと…
というわけで週末を利用して、OSをmountain lionにアップグレードして
xcode4.6.3をインストールしました。今のところ問題なし。
 
osはmavericksが最新だけれど、もう少し様子をみてからインストールしようと
思います。apple storeからはmountain lionはすでに削除されているのですが
以前購入していたので、購入済みのアプリからインストールしました。
 
あとxcode5も出ているのですが、iOS6以前のアプリが作成できないと聞き
xcode4.6.3からインストールすることに、xcode5との共存も可能だそうなので
今週中にxcode5をインストールしようと思います。
google検索:xcode5 ios6
 
 
 

jQueryサイト:問題集復習用ページ

現在iOS用のjQuery問題集を作成しているのですが、この問題集は
間違った問題の情報を利用者のPCメール宛に送付し、復習してもらうような
スキームを考えています(通勤中にスマホで問題を解き、会社/自宅で復習)。
 
そして今回、利用者がPCのメールで受け取った情報を入力するサイトが機能するところ
までできたので紹介しようと思います。
*********************************************************
jQuery問題集 復習用ページ
*********************************************************
 
現在はダミーの復習コードが設定されているので、ページ内の「復習ページ」作成
ボタンをクリックすれば、復習ページが作成されます。
 
復習ページとはいっても、リファレンスの該当記事にリンクしているだけです。
最近のリファレンス更新は、ここからリンクすべき記事を追加していたのです。
→過去記事:問題集作成に伴うリファレンス更新(3)
 
 
問題のデータや復習ページなど、当初の予定より工数がかさんでいて
最近xcodeのことはスッカリ忘れてしまっています…。
 
 
 

jQueryサイト更新:商品抽出サンプルの修正

サンプル目次の製品抽出サンプルを弄んでいたら…
 
選択画面と結果画面を何度も行き来していると、合計得点がドンドン加算され
スゴイ得点になってしまうバグを発見…。
 
原因を探すと、製品データの増加に配慮した処理に問題がありました。
どのように対処しようか迷ったのですが、後で急遽追加した部分なので
削除して「無かった事」にしました。
 
削除した部分はコメントにしてあるので、興味のある方は以下のhtmlで
ソースを確認してください。→商品抽出:得点の集計(2)>
 
 
 

バグの原因詳細

合計得点は計算する前に毎回リセットしないといけない。でないと、
得点を計算する度に前回の得点に加算されてしまう。そのため、
得点を管理する配列「totalArray」は得点を計算するcalcFuncの先頭で
実施しなければいけない。この説明は「得点の集計(1)」で行っています。


しかし商品数に変更があった場合、totalArrayも変更しなければならないの
ですが、calcFunc内だと変更忘れ去れる危険がある。ということで
得点の集計(2)で、この問題に対応するための処置を追加。


考え方自体は間違っていない買ったのですが…
処理を追加した場所が「calcFunc」ではなく$.getで設定した
functionというのが問題でした…。
このことにより「計算の前に必要な得点のリセット」がデータを読み込む
タイミング(つまりページを表示した1回きり)でしか行われず
得点がドンドン加算されるバグにつながったのです。
 
 
 

バグ有りのサンプルで確認

バグったサンプルがないと分かりにくいと思うのでバグったサンプルへの
リンクも用意しました。ソース内にバグの原因がコメントとして記述されて
いるので参考にしてください。
バグ有りのサンプル
何回も選択画面と結果画面を行き来すると、得点が加算されてしまうのを
確認してください。
 
 
 

もう少しシンプルなサンプルを追加しようと思います

なぜ、このようなバグが今まで報告されなかったのかAnalyticsのデータを確認したら
商品抽出のコンテンツはtop100ページにも入っていない不人気コンテンツでした…。
1日のユニークユーザーが1,500人程度のサイトの100位圏外…。
バグに気付かれないのも納得です。
 
一番人気はリファレンスなのですが(私自身も一番利用しています)
サンプルページの「タブメニュー」や「カテゴリ切替」のような
シンプルなサンプルはそこそこ人気があるので、iOSアプリのプロジェクトが終わったら
シンプルなサンプルを追加しようと思います。
あとサンプルをダウンロード出来るようにもしようと思います。
 
 
 

jQueryサイト:問題集作成に伴うリファレンス更新(3)

今回もリファレンスをチェックしながら問題集を作成していました。
先週は時間が取れなかったので連休中も頑張って作業を進めてみました。
 
 
 

loadメソッド

外部データを読み込むloadメソッドはid名を指定することで、特定の要素の内容のみを
読込みます。これを利用したサンプルを追加しました。
→リファレンス:load「XMLの苦手な方に良いかも
 
  

getメソッド

XMLを読み込むサンプルを追加しました。
→リファレンス:load「読み込んだXMLファイルはパース済です
 
上記の記事に関連してjQUeryメソッドにも同じサンプルを追加しています。
→リファレンス:load「XMLにも利用可能
 
 

ajaxStartメソッド

ajaxSendメソッドとの違いを比較するサンプルを追加。
→リファレンス:ajaxStart「ajaxSendとの比較
 
 

ajaxStopメソッド

ajaxCompleteメソッドとの違いを比較するサンプルを追加。
→リファレンス:ajaxStop「 ajaxCompleteとの比較
 
 

ajaxPrefilterメソッド

本家サイトにあるサンプルをアレンジしたサンプルを追加。
→リファレンス:ajaxPrefilter「どの様な時に利用できるのか?
 
 

$.isNumeric

$.isNumericメソッドは数値にクォートを付けて文字列にした値でも数値と判断しますが
厳密に文字列と数値を区別したい時は$.typeメソッドを利用して下さい。
→リファレンス:jQuery. isNumeric「厳密に数値であることを確認したい時は
 
 

$.isXMLDoc

htmlでもjQuery.parseXMLメソッドを利用してxmlとしてパースすれば
XMLとして認識されます(当たり前か…)。
→リファレンス:jQuery.isXMLDoc「色々確認してみた
 
 

$.grep

配列を合格組と失敗組に分別するサンプルを追加しました。
→リファレンス:jQuery.grep「配列の分別(第3引数にtrueを設定する)
 
 

$.unique

本家サイトでは要素配列にしか機能しないと説明がありますが、普通の配列で試したら
機能しました…。
→リファレンス:jQuery.unique「要素配列にしか利用できないというけれど…
 
 

$.globalEval

javaScriptのevalメソッドとの違いを確認するサンプルを追加しました。
→リファレンス:jQuery.globalEval「javaScriptのevalとの違い
 
 

$.now

javaScriptのgetTimeメソッドとの違いを確認するサンプルを追加しました。
→リファレンス:jQuery.now「javaScriptのgetTimeメソッドとの違い
 
 

$.trim

タブや改行も削除することを確認できるサンプルを追加しました。
→リファレンス:jQuery.trim「改行やタブも削除します
 
 

data

自動的に値の型を判定していることが確認できるサンプルを追加しました。
→リファレンス:jQuery.trim「値の型を自動的に設定してくれます
 
 

index

構文によって「ページを通して」か「兄弟要素のみ」か切り替えられるのですが
それが分かりやすいように全体的にサンプルを変更しました。
→リファレンス:index「index()
 
 

get

ブラケットアクセスでも同じ事ができることを説明するサンプルを追加しました。
→リファレンス:jQuery.trim「ブラケットアクセスで同じ事ができます
 
あとjQuertyオブジェクトが欲しいのであればeq()を利用した方がよいというのを
説明するサンプルも追加しています。
→リファレンス:jQuery.trim「jQueryオブジェクトが欲しいのであればeq()
 
 
ここまでの問題数
core:6
selectors:71
attribute:21
travering:45
manupilation:28
css:19
event:67
effect:35
ajax:21
Utilities:41
data+misc:12
合計:366問