jQueryサイト:トラバースに関するリファレンスを一部修正

今回は更新漏れしていた以下のページをリファレンスに反映させようと思っていたのですが
忙しくてできませんでした…。
→本家ページ:category:ver1.9
 
 
なので、以前書き置きしていた以下の部分を投稿します。
 
 

リファレンスの一部修正

いまiOS向けのjQuery問題集を作成しているのですが、それに合わせて
連携用の復習用ページも作成しています。この作業はリファレンスページ
の確認しながら進めているのですが…この過程で私のトラバースに関する
勘違いが発覚したので該当部分を修正しました。
 
リファレンスのトラバースの項目には、同じjQueryオブジェクトを繰り返し
利用する場合に処理速度の向上が期待できると書いたのですが、
実際に計測したところ速度は変わりませんでした…。
 
この内容は、以下のチュートリアルの「トラバースによる高速化を検証」の項目に
記事を追加したので確認してください。
→チュートリアル:jQueryの高速化
 
これに伴い、リファレンスのトラバースの各メソッドのメモの項目に速度的な
メリットの記述はすべて削除しました。
 
その代わりthisを絡めたサンプルを追加しました(すべてのトラバースに追加
したわけではないのですが)。
一例として以下の.nextAllの「メモ:Traversingのメリット」を確認してください。
リファレンス:.nextAll( )
 
 
 

廃止されたメソッドなどの扱い

あとリファレンスツアーも修正しています。現在は廃止されたメソッド(coreのsubや
eventのtoggle)なども組み込まれていますが、これらをリファレンスツアーから
外し、左メニューには分かりやすく「廃」のアイコンを設置します。
※現在途中までしかできていません..。
 
この作業が終わったら、非推奨のメソッドにも「非」のアイコンを設置する予定です。
非推奨のメソッドはリファレンスツアーから外しません。
 
以上
ほとんど個人的なto Doメモですが…。
 
 
 
 
 

jQueryサイト:リファレンス更新(v1.8)

前回のリファレンス更新でv1.8とv1.9で追加されたメソッドなどを追加し忘れていることが
発覚したので、それに合わせてリファレンスを修正しました。
 
今回はv1.8の更新時の修正です。
本家サイトの「Category: Version 1.8」を参考にしました。
 
・addBack
これはすでに追加済みだったので修正無し。
リファレンス:addBack
 
 
・deferred.pipe()
これはv1.8で非推奨となり代わりにdeferred.then()を利用するようにとのことなので
リファレンスを修正しました。→リファレンス:deferred.pipe( )
 
 
・deferred.then()
本家サイトには記述がありませんでしたが、上記のpipeメソッドを調べている過程で
thenメソッドも調べたらv1.8で修正が入っていたので、これに合わせて修正しました。
リンク先は構文がたくさん並んでいますが、doneの設定だけでも機能するようになっただけです。
リファレンス:deferred.then( )
 
 
・セレクタのeq()/lt()/gt
本家サイトにはeqについてしか書いていませんが、lt()とgt()も変更されていました。
もぅ!分かりやすくまとめてくれればよいのに。
 
変更内容は負のインデックス番号に対応したことです。トラバースのeq()は以前から
負のインデックス番号に対応していたので、セレクタも追いついた感じです。
リファレンス::eq( )
リファレンス::lt( )
リファレンス::gt( )
 
 
・jQuery.parseHTML()
前回の記事でv1.8の追加漏れが発覚した原因となったメソッド。
jQuery(html)と同じ機能ですが、より高機能になっています。
リファレンス:jQuery.parseHTML( )
 
これに合わせてjQuery(html)の記事でjQuery.parseHTMLを紹介するようにしました。
 
 
これでv1.8の追加は終わりです。次回はv1.9の追加漏れを調べていきます。
 
 
  
 

jQueryサイト:リファレンスをバージョン1.10.2に対応

とはいってもほとんどバグフィクスだけなので、一部しかリファレンスの内容を
修正していません(詳細はブログの記事で)。
 
 

1.10.0に関する変更点

本家サイト:jQuery 1.10.0 and 2.0.1 Releasedより
 
・Relaxed HTML parsing
jQuery(html)の構文では引数にhtml要素を設定できますが
タグの前にスペースや改行があっても機能するようにしました、とのこと。
 
あと$.parseHTMLで外部の(他人が作成した)ソースを読み込む時には注意しましょう
とアドバイスしています。タグに紛れて悪意のあるコードを実行させることができる
からでしょう。他人の作成したソースを読んで利用することは少ないと思いますが
危険性があることは覚えておきましょう。
 
ここで当サイトのリファレンスにparseHTMLの項目がないことに気が付きました!
あとで追加します!
 
 
 
・Increased modularity
当サイトでは(デザイナー向きではないかな?と思い)説明していませんが、
jQuery1.8からカスタムビルドをサポートしていて貧弱な環境でも(多少は)快適に
利用できるようにカスタマイズすることができます。以下のサイトが詳しいです。
→参考:ikuya@blog様「jQueryのカスタムビルドを使って容量を削減する
このカスタムビルドで削除できる項目が増えたということです。
 
 
 
・No more IE9 focus of death
IE9でのiframeを利用した時のフォーカス等の問題を修正したそうです。
 
 
 
・jQuery 1.10.0 Changelog
ほとんどバグの修正ですが、supportプロパティのboxmodelが削除された
ので、それに合わせてリファレンスを修正しました。
jQuery.support#boxModel
jQuery.boxModel
 
このプロパティはIE6,7での互換モード(Quirks Mode)を利用するとfalseに
なるそうです。→本家サイトjQuery.support
 
jQuery1.xはIE6にも対応していますが、このことはIE6,7の互換モード
はサポートしなくなったということですよね?
IE6や7の互換モードってIE5をシミュレートするの?
コーディングの仕事はしてこなかったのでよく分からないのです…
 
 
 
 

1.10.1に関する変更点

本家サイト:jQuery 1.10.1 and 2.0.2 releasedより
 
・1.10.0 breaks relative animation
たった1週間で1.10.1がリリースされたのは、この1.10.0のバグが原因。
animateメソッドで算術複合代入子(+=や-=)が機能しなかったのを修正。
jQueryではアニメを利用することも多いので、このバージョンの利用は避けましょう。
 
 
・finish() only finishes last item of a set being .animated().
これもバグ修正なのですが、v1.9で追加された、このfinishメソッドを
当サイトのリファレンスに追加し忘れているので、あとで追記しないと!
 
リファレンスを1.9に更新した時は「このページ」を参照したのに、ここには
finishメソッドなんて無かったのですもの…
色々調べたら「こんなページ」があるので、ここにあるものをリファレンスに
追加しないと…追加したら、またブログで報告します。
 
 
 
 

1.10.2に関する変更点

本家サイト:jQuery 1.10.2 and 2.0.3 Releasedより
 
このバージョンはマイナーなバグ修正しかないので特になしです。
 
 
 
今回の更新に合わせてリファレンス目次も更新しました。
リファレンス目次
 

 
 
 

iOS:サウンドの再生

BGMや効果音がないと寂しいかな?と思い始めたのでテスト。
私は音の素材集を10年くらい前にたくさん購入していたのですが
いまのOSXではアプリが起動しない…もうクラッシック環境も無いのですね…。
ということでフォルダからチマチマとサウンドを開いて確認するハメに…。
 
ともあれ、まずはyoutubeで確認。
独学xcode:サウンドの再生

動画の最後の方でボタンを連打していますが、
同じサウンドは重複して再生されない仕様のようですね。

サウンドを再生する方法は色々あるようですが、ネットで検索すると
フレームワークのAVFoundationがよく利用されていそうなので、これを利用しました。
framework
 
このフレームワークを組み込むためにヘッダファイルにインポートします。
import
 
そして利用するサウンドごとにAVAudioPlayerオブジェクトを作成します。
今回はBGMと正解のSE,不正解のSEで3つ作成しました。
avaudio
 
続いて実行ファイルにサウンドの設定を記述。
viewDidLoadのタイミングでBGMの再生と、SE(正解/不正解)のサウンドの準備。
サウンドファイルもhtmlのような扱いで設定します。
viewloaded
ループの設定はnumberOfLoopsプロパティで設定し、無限ループさせたい時は-1を
設定します。ループさせたくない(1回だけ再生)したい場合は0を指定します。
※1でないことに注意してください。
 
prepareToPlayを利用すると、再生した時のタイムラグがなくなるそうなので利用してみた
のですが、なくてもタイムラグはなかったのでコメントアウトしました。
BGMだけvolumeプロパティを0.1にして小さめに再生します。
 
BGMはviewDidLoadのタイミングでplayメソッドを利用して再生しますが、
SEはボタンをタップした時に実行されるcorrectButtonFuncとmissButtonFuncで実行しました。
soundSwitch_flgによって再生するか否かを決めています。
スクリーンショット(2013-09-08 20.07.00)
 
スイッチの仕組みは以下の様になっています。
スクリーンショット(2013-09-08 20.07.11)
今回はbgmの停止でstopメソッドを利用していますが、pauseメソッドというのもあります。
しかし動画でも確認できるようにstopメソッドを利用して止めた後に、再びplayすると
前回停止した部分から再生されます。これではpauseとの違いがわかりません…。
なんなのだろう?
 
 
 

 
 
 

jQueryサイト:使用例追加

使用例に追加

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

マージンをマイナスにした時のバグ

今回の更新で気が付いたのですが、使用例のページで画像をクリックできない状態に
なっていました。原因を調べると、cssのマージン設定でマイナスを利用したことのようです。
バナーを無理矢理入れるのに位置をマイナスマージンで指定していたのです。
 
googleで調べたのですが、いまいち情報が少ないです。しかし予測変換には出てくるので
結構検索されているのでしょう。何とか見つけたページが以下。
→小粋空間さま「CSS ネガティブマージンで重なった要素のリンクをクリックできるようにする
 
しかし上記サイトにあるz-indexを操作する方法では直せませんでした…。
で、さらに検索して見つけたのが以下のサイト。
→「firefoxでテキストやリンクが選択できない場合
 
バナーを配置しているdiv要素のcss設定に、本来なら必要のないfloat:leftを追加。
その結果、画像のリンクができるようになりました!
しかし、不要なfloatを設定したので、レイアウトが崩壊…。
バナーは全ページに配置してあるので、なんとかcssだけで修正しないと…。
バナーの次には必ずh2要素が来るようになっているので、h2要素のcssにclear:both
を追加。これでレイアウトの崩壊が治った!
 
ぱっとサイトを確認したけれど問題なさそう。
もしレイアウトが崩れていたりリンクがクリックできない部分などありましたら
ご連絡ください。よろしくお願いいたします。
 
 
 

iOS:結局iOS5は切ることにしました…

iOS5は切ることに

前の記事でシミュレータのSIGABRTでハマっって、なんとかiOS5でもシミュレータが
起動しましたが、結局iOS5は切ることにしました…。
 
iOS5のシミュレータで動作確認したら、position:fixedで固定したフッターのボタンが
タップできないのです。position:fixedを外すとタップできるので、これが原因でしょう。
 
ここで選択肢は2つ。iOS5の対応をやめる。iScrollなどのプラグインを利用して対応する。
その中でiOS5の対応をやめることに決めました。
理由としては、無理に古いOSに対応してバグの危険性が大きくなるのを避けるためです。
あと秋にiOS7もでますしね。
 
iOS6はiPhone3GS〜、iPodTouch第4世代以降の機種が対応しています。
iPhone3GS以前の機種を利用している方は殆どいなさそうですが、iPod第3世代(2009年)
を利用している方は少しいるような気がします。
→参考:wikipediai「iOS6.x
 
 
 

Retina 4inchに対応

SIGBARTのせいでInterfaceBuilderを使わず以下の様にプログラムによって
UIWebViewを表示するようにしたわけですが、これによって画面一杯にUIWebViewを
設定することになったので、jQuery側では$(window).height()で高さを取得できます。
———————————————————————
CGRect frame = [[UIScreen mainScreen] applicationFrame];
CGRect rect = CGRectMake(0,0,frame.size.width, frame.size.height);
UIWebView *wv = [[UIWebView alloc] initWithFrame:rect];
———————————————————————
なので、その値によってcssを変更することでretina 4inchに対応することができました。
とはいえ、3.5inchでも納まるような文字数にしているので、4inchのメリットは
リスト画面くらいしかないのですけどね。
iOS7搭載の新iPodTouchがでたら検証用に購入しようかな…
携帯は当分androidで行く予定だし。
 
 
以下の画像はクリックで拡大します。
apliCapture

iOS:jQueryベースのアプリについての色々

昨日の記事で現在作成しているjQuery問題集の現状をお見せしましたが、そのときに
遭遇したトラブルなどを色々とメモ。時間が無いので箇条書きのメモ。
 
jQueryで大まかな仕組みを完成させたのでxcode3で表示して確認。

cssで設定したフッターが正常に配置されない

cssのposition:fixedはos5から対応。xcode3はos4までしか
シミュレーションできないため配置されませんでした。

念のため古いiOS用の対応策を調べたところ、iScroll(javaScriptライブラリ)や
jQueryMobileが見つかりました。

でもiOS5はiPhone3GSや第3世代のiPodでも利用できるので、
iOS5以降の対応で良いかな。それより新しいOSでシミュレートできない方が問題かな

なのでxcode4に移行しよう。せっかくmacBookProにインストールしたのだし。

xcode4のシミュレータはiOS6.1しかない
他のバージョンは別途ダウンロードしなくてはいけないのでダウンロード

4.3/5.05.1/6.0/6.1のシミュレート環境になった。
position:fixedを使いたいのでターゲットを5.0にして作成

ビルドは成功するもののシミュレータがエラー「Thread1:signal SIGABRT」

この問題はネットで調べると、たくさん出てくる…。
再起動すれば治るとか、デバッガを変更すれば治るとか
そもそもxcode4.6.3では改善されてでなくなっているとか..

たしかにシミュレート環境が6.1だと絶対発生しないけれどシミュレート環境が
5.0の時の場合のSIGABRTの情報は見つからない(英語のサイトでも)。
というかSIGABRTの記事ではOSのバージョンが議論されてない。

でもストーリーボードが問題らしいことがわかる。
試しにストーリーボードにボタンを配置しただけのサンプルを作成する

SIGABRTのエラー

ストーリーボードを使わない設定があるらしいことを見つける。
新規に作成する際、にストーリーボードのチェックを外しておく。

そのかわりinterfaceBuilderを利用する。というか、interfaceBuilderが
ストーリーボードに進化したと思っていたら実際は別々のものだった。

xcode4でのinterfaceBuilderはxibの拡張子を持つファイル。
これにボタンをのせてiOS5でシミュレート

SIGABRTのエラー。interfaceBuilderでもダメなのかよ!

ネットで色々調べるも分からない。どうせならiOS5ではinterfaceBuilderも
ストーリーボードも使えないよ、という記事があれば見切りを付けられるのに…。

もうinterfaceBuilderも使うのをやめよう!過去の記事でInterfaceBuilderを
利用せずプログラムでUIWebViewを使うテクニックへのリンクをメモしていたので、
これを利用。

やっと動いた!
ホントはもっと進めるはずだったのにSIGABRTでほぼ1日が潰れた…。

いろいろシミュレータを使っていて、iPhone5って解像度が違う事を知る。
縦に長くなっていて、retina 4inchとよばれている(既存のはretina 3.5inch)。

retina3.5で納まるように作成したのでretina4だと微妙な余白ができる…。
ウインドウサイズを取得してretina4のときはレイアウト調整するようにしないと…。

**********************************************************
その他

iOSでのclickイベント

iOSではjQueryのclickイベントが機能しません。しかしcssのcursor属性をpointerに
設定すると機能するようになります。なぜ?
→参考:raundrop様
 
  
メモ
UIWebViewでインターフェイスを作成する際に参考になるテクニックがたくさん。
→参考:SSSSLIDE様「UIWebViewでつくるUI
 
 
 

iPhone用アプリ:jQuery問題集

jQuery入門サイトの「このサイトについて」の今後の野望の項目に
iPhoneアプリの作成があります。現時点では、以下の様な感じになっています。
※動画の圧縮がひどい状態ですが、実際のアプリはretinaに対応してキレイです
 
iPhone用アプリ:jQuery問題集

 
 

動画の最後の方にある復習メールについて説明

最初はアプリないで完結するような内容にしたかったのですが、
解答の説明をもっと詳しくしたかったので、PCと連動させることにしました。
 
具体的には、iPhoneアプリで解答した問題(と成績)の情報(圧縮された文字列)を
利用者のPC用メールへ送信し、それをweb上に用意した所定のフォームに入力すると
復習の用のwebページが作成される感じにします。
 
今日はここまで作成するのにちょっとハマったのでメモしておかないと…
明日はiOSのカテゴリに記事を書こうと思います。