jQueryサイト:sampleページを進めました

今週はサンプルページをかなり進めることができました。
サンプルページ目次
 

診断系コンテンツの完成

診断系コンテンツのページがすべて完成しました。Flashで作成した時には2次配列を利用しま
したが、jQuery版では得点をhtmlの属性として組み込み2次配列を利用しなくても済むように
しました。これで少しは難易度が下がったと思うのですが、それでも難しいと思うので2章に
移動しています。
 

シンプルなサンプル集

診断系を2章にしたので、急いで1章を作成しました。そしてスムーススクロール
は完成しました。スムーススクロールはプラグインなどもでているので、自作する必要はない
かもしれませんが簡単に作成できるので、最初のサンプルとしてちょうど良いと思ったのです。
 
でもって、調子に乗ってタブメニューの途中まで作成しました。
ブログの記事では「情報の記憶」を利用してタブを作成したのですが、これも初心者には難しく
診断系コンテンツで説明しているので別な方法で実現します。
タブメニュー(1)
 
 
 

jQueryサイト:v1.9によるリファレンス更新

v1.9にともなうリファレンスの更新

今週は以下のリファレンスを更新しました。今回で全ての更新作業が完了しました。

trigger(ラジオボタン/チェックボックス)

これはバグ修正に近いと思います。これまでラジオボタンやチェックボックスをtriggerでクリック
した場合は、直接クリックしたのと異なる動作をしていました。これが修正されています。
リファレンスの「メモ」に一番下にサンプルを追加しました。
→リファレンス:triggerイベント

focusとblurの実行順

v1.9以前はフォームの要素でフォーカスが移動する際、本来であれば「以前フォーカスされていた
要素のblur処理」が実行されてから「新しくフォーカスされた要素のfocus処理」を実行すべきが
逆になっていました。v1.9ではこの問題が解決されています。
focusのリファレンスの「メモ」にサンプルを追加しました。
→リファレンス:focusイベント
 
 
 

リファレンスを変更しなかった項目

バグ修正や、もともとドキュメントにない機能の変更/削除などはリファレンスに反映しません。

htmlタグとセレクタの判断方法

v1.9以前は、$()内にhtmlタグがある場合はhtml文字列と判断し、それ以外はセレクタと認識して
いました。しかしv1.9からは「<」で始まる文字列をhtmlと判定するようになりました。 →本家サイト:jQuery(htmlString) versus jQuery(selectorString)

ピリオドを含んだdata属性に対応

ピリオドはクラスを示す記号でもあるので、データ属性の名前として利用すると紛らわしいのでは?
と思うのですが、この仕様変更によって何かメリットがあるのでしょうか?。
→本家サイト:Events not fired by the .data() method; names with periods

ドキュメント上にない要素のソート

前回説明したafter、before、replaceWith、addの仕様変更はこれが原因なのでしょう。
→本家サイト:Ordering of disconnected nodes within a jQuery set

htmlコンテンツ内のスクリプトの実行

wrapメソッドやappendメソッドによってスクリプトの実行を含むhtmlコンテンツが追加されても
スクリプトを実行しなくなりました(というか実行する方が問題のような…)。
もしスクリプトを実行したい場合はgetScriptメソッドを利用してください。
→本家サイト:Loading and running scripts inside HTML content

propメソッドとattrメソッド

2つのメソッドの違いはリファレンスのpropメソッドで説明しているのですが、更新しません
でした。リファレンスで説明している使い分けを徹底するようにすれば良さそうです。
→本家サイト:.attr() versus .prop()

input要素のtype属性設定時のエラー

IE6〜9ではattrメソッドでinput要素のtype属性を設定するとエラーになっていましたが
v1.9ではエラーを無視(throw)するようになったそうです(無視しているだけなので内部的
にはエラーのままです)。というかinput要素のtype属性を変更するシチュエーションなんて
想像つきません。→本家サイト:$(“input”).attr(“type”, newValue) in oldIE

疑似イベントとしてのhover

これまではonやbind等のイベントとして”hover”を指定すると”mouseenter mouseleave”と
置き換えていたそうですが、それを廃止したそうです(そんな仕様だったとは知りませんでした)。
マウスイベントのhoverは変更無しで問題なく利用できます。
→本家サイト:“hover” pseudo-event

.selectorプロパティの非推奨化

私がリファレンスを作成したのはv1.7〜v1.8の期間だったのですが、その際に.selectorなんて
プロパティは本家サイトにありませんでした(たぶん)。なので当然リファレンスにも無いため
リファレンスの変更はありません。→本家サイト:.selector property on jQuery objects

attrメソッドの裏引数の廃止

attrメソッドにはドキュメントにない裏引数のpassがあったそうなのですが、それが廃止
になりました。そんなの知らなかったのでリファレンスには載せていません。というわけで
これによりリファレンス修正もありません。→本家サイト:jQuery.attr()

jsonでのカラの文字列の問題

これもバグ修正だと思います。これまでjsonデータを読み込む時にカラの文字列が返される
様な時も通信成功とされていましたが、カラのjsonなんて利用できないので、
失敗と判断されるようになりました。
→本家サイト:jQuery.ajax returning a JSON result of an empty string

proxyメソッドのコンテキストにfalse

これはproxyメソッドの第2引数にfalseを設定した場合の動作を変更したということだと思うの
ですが、そもそもfalseを設定する意味が分かりません。条件式を設定して、条件によって
thisを変更するような手法があるのでしょうか?だとしたらtrueの時は何が設定されるの?
理解不足のため、良いサンプルが作成できないのでリファレンスは修正していません。
→本家サイト:jQuery.proxy() context

dataメソッドによるイベントの取得

ドキュメントにない裏技でdataメソッドでイベントを取得することができていたそうですが
それが廃止されたそうです。もともとドキュメントにない技なので、これによるリファレンスの
修正はありません。→本家サイト:data(“events”)

マイナーなイベントオブジェクトの廃止

attrChange,attrName,relatedNode,srcElementのようなクロスブラウザでない
マイナーなイベントオブジェクトが削除されました。しかしevent.originalEventを利用すれば
これまで通り利用できます。これはスマートフォン特有のイベントオブジェクトにアクセスする時
にも利用します。→参考:iOS+jQuery:部分横スクロール(3)
→本家サイト:Removed properties of the Event object

ドキュメントにない引数やプロパティ,メソッドの廃止

ドキュメントにない引数やプロパティ、メソッドが廃止になりました。もともとリファレンスに
内ので更新はありません。
 
これで本家サイトの1.9アップグレードガイドに即したリファレンスの更新作業は完了です。
 
 
 

jQueryサイト:sampleページの作成を開始しました

サンプルページ制作開始

いい加減にサンプルページを進めないといけないので、連休を返上して頑張りました。
まだ3ページしか完成していませんが…
→サンプル:選択肢の作成(1)
 
 
他のjQuery入門サイトと被らないように診断系コンテンツを使うことにしたのですが
初心者の苦手な配列を利用していて難易度も高く、入門サイトに相応しくないのではないか…
と、途中でモチベーションが下がってきました。
 
しかし削除するのももったいないので、章立てを変更して対応しようと思います。
現在は1章が診断系コンテンツになっていますが、これを最後に移動して、現在「短編集」と
まとめられているコンテンツを1章に移動しようと思います。
 
スムーススクロールやタブメニューに関しては多くのサイトでも紹介されているので
差別化は難しいのですが、入門向けのサンプルとしては良いと思うので。
 
 
あと当初予定していた以下の内容は廃止することにしました。
プラグインで紹介予定のショーケース系のプラグインを利用したほうが良いと思ったので。
スライダー型ショーケース
スライダー型ショーケース2
スライダー型ショーケース(分割型)
スライダー型ショーケース(分割型)その2
一定時間でバナーを切り替える
 
 
 

v1.9にともなうリファレンスの更新

v1.9の登場に伴い随時リファレンスページを更新しているのですが、
今週は以下のページを更新しました。

afterメソッド、beforeメソッド、replaceWithメソッド

3つのメソッドとも同じような仕様変更になりました。新規に作成した要素に対して各メソッドを
利用した際に、返されるjQueryオブジェクトはメソッドの効果を反映しない物となりました。
詳細はafterメソッドとreplaceWithメソッドのメモに記述しました。
→リファレンス:afterメソッド
→リファレンス:replaceWithメソッド

addメソッド

この仕様変更も上記の例と同じです。新規に作成した要素に対してaddメソッドを利用した時の
仕様が変更されました。詳細はメモの最下段に追加してあります。
→リファレンス:add()

addBackメソッド

andSelfメソッドが進化したメソッドです。基本的な機能はandSelfメソッドと同じですが
引数にセレクタを指定してフィルタリングできるようになりました。
このメソッドが追加されたことで、andSelfメソッドは廃止となりました。
→リファレンス:addBackメソッド

Ajax通信のグローバルメソッド

セレクタにdocumentを設定しないと機能しなくなりました。グローバルメソッドなので
そのようなセレクタの方が良いと考えていたため、サンプルは全てbodyをセレクタにして
いましたが、今回の修正で全てdocumentに置き換えました。
グローバルメソッドは以下の6種類です。
→リファレンス: ajaxStartメソッド
→リファレンス: ajaxStopメソッド
→リファレンス: ajaxSendメソッド
→リファレンス: ajaxCompleteメソッド
→リファレンス: ajaxErrorメソッド
→リファレンス: ajaxSuccessメソッド
 
 
 
 
 

リファレンスを変更しなかった項目

バグフィクスなどリファレンスに影響しない項目についてはリファレンスを更新しませんでした。

appendTo, .insertBefore, .insertAfter, and .replaceAll

→参考:本家サイトの説明
返されるjQueryオブジェクトが更新されなかったバグが修正されました。
リファレンスにバグに該当するサンプルがないためリファレンスは変更していません。

 
 

英語メモ

技術的な英語は辞書では訳しにくいです..以下の様な解釈であっているのかな..
・document order … (ドキュメント内の)要素順
・disconnected node … ドキュメント内にない要素
 ルート(つまりdocument)に含まれない(接続されていない)要素だから。
 
 
 
まだまだ終わらないので来週もリファレンスの更新を続けます。
 
 
 
 

windows8の購入

これまでのメインの仕事はFlashだったので、ブラウザごとの動作確認は必要なかったのですが
jQuery(というかCSS)の場合はブラウザごとに動作確認しなければなりません。
 
Windows8はマイクロソフトのサーフェイスがでるまで待とうと思っていたのですが
そうもいっていられなくなったので、購入することになりました。
 
windowsはデスクトップ機(osはxpでIEtesterのテスト環境)があるのでタブレット機から
windows8&タッチパネルを搭載しているものを選択することにしました。
 
色々悩んだのですが、解像度が1920×1080の「ICONIA W700」に決めました。
googleでの「ICONIA W700」の検索結果
 


上の写真がキーボードの付いていないwindows機のICONIAで、
下のはキーボード付きのスマートフォンのIS11T。
 
色々な方がレビューしているとおり、とても良いマシンだと思います。ただ..
メトロ版のIEには開発者メニューが付いていないため、IEのバージョンごとのチェックは
クラッシックモードで行うのですが、11.6インチに1920×1080を表示しているため
ボタン類がとても小さく、タッチペンでも碌に操作ができません…。結局タブレット機にマウスを
つなげて検証しました(写真で左上に小さな突起がありますが、これが無線マウスの端子)。
 
 
 

メトロ版のIEで気付いたことのメモ

IEはメトロ版もクラッシック版も同じ描画エンジンだけれど、微妙に仕様が異なっていました。
メトロ版では横にした時と縦にした時で表示の拡大率が変わりました。つまりAndroidやiOSの
タブレット機のブラウザと同じ仕様です。
 
なので、AndroidやiOSのviewportのような仕様を変更するメタタグが利用できるのか
確認したのですが機能しませんでした。特に問題も不満もないのですが、html側から制御
することはできるのか気になります。
→参考:仕様を変更するメタタグ
 
 
 

Windowsへのグチ

まだブラウザ以外はあまり利用していないのですが、Windowsストアに接続できない現象が
しばしば発生します…。解決方法は以下のサイトにあるようにWSReset.exeを実行します。
せっかく初心者にも利用しやすいメトロUIなのに、こんな操作をしなければならないなんて…
→:Windwsストアに接続できない場合の対策
 
 
 

jQueryサイトの更新

1月末が非常に忙しかったので、今週もサンプルを進めることはできませんでした…。
なので代わりに、使用例に3サイトを追加しました。
jQueryサイト:使用例