2013.03.16

Simple Tweetが動かないんだども

すみません実験しました。
というかちゃんと動いてます。お騒がせしました。
Twitter API 1.1に対応しているので、3月5日のTwitterAPI 1.0 終了祭りには関係ないと思われるのですが。

さっきの投稿反映されなかったなー Error! って表示だけでた。

2013.03.16

jQuery 調子に乗って正規表現でfilter(function(){~しまくってみる

前回と同じ.filter(function(){})で要素を選択しようというネタなんですが、調子に乗って今度はidをふるい分けてみました。
なんでidをふるい分けるんじゃ!id最強だろう!!なのですが…。
今回はWordpressのプラグインWP SyntaxHighlighter の吐き出す idを練習を兼ねてごにょごにょしてみたいと思います。

Wordpressが書き出してくれるhtmlはこんな構成になっております。
’p’のmarginを広くとっているためsyntaxhighlighterが文章から浮いた感じになってしまっておりました。
syntaxhighlighterの前後にある’p’のみ、marginを調整して、文章とのつながりを持たせたい。

よく見るとsyntaxhighlighterは名無しdivの子要素のdivに個別のidを割り振ってます。

id="highlighter _364948"

こっからなんとかたどれそうだけど、一つずつに’highlighter_連番’が振られた膨大な数のidをセレクタにするのは無理です。
でも、’highlighter’部分は共通だよね!
そこで、さっき覚えた正規表現とやらを試してみることに。

^ という記号で先頭からの位置指定ができるようです。
「もしかしてセレクタに使えるんじゃ!」と思いつきましたが、セレクターに正規表現は使えないようです。
やっぱり、覚えたての.filter(function(){})をまたしても使うことにします。

思いっきり同じです。$mainという変数は単純にメインカラムのwrapのdivです。
メインカラムからfindしたdivのうち、idの先頭の文字列がhighlighterのdivをfilterしています。ルー大柴みたい。

しかし、最終的に操作したいのは’p’なので、いったんhighlighterの親要素の名無しdivにさかのぼり、変数にぶっこみました。
ここまで前回と全く同じです。

変数 synFTpでは最終的にsyntaxhighlighterをラップしている名無しdivを選択しています。前後のpはこのdivの兄弟要素ということになります。
そこでjQueryの強力なAPIを使います。Traversingというらしい。findもfilterもそうなんだけど、横断するという意味らしい。
おなじみヌーさんの所から引用させていただきますと

prev([expr]) – jQuery 日本語リファレンス

要素集合の各要素の「前」にあたる兄弟要素を、全て抽出する。

このprev関数はあくまで各要素のすぐ隣の要素のみを抽出し、前以前を全て選択するわけではない。その場合はprevAll()を用いること。
引数には条件式を指定し、結果セットから更に絞込みを行うことも可能。

next([expr]) – jQuery 日本語リファレンス

要素集合の各要素の「次」にあたる兄弟要素を、全て抽出する。

このnext関数はあくまで各要素のすぐ隣の要素のみを抽出し、次以降を選択するのではない。その場合はnextAllを用いること。
引数には条件式を指定し、結果セットから更に絞込みを行うことも可能。

このprevとnextを使い前後の兄弟要素’p’へクラスを加えcssでmarginを設定しました。

だがしかし…動かないよー

動かないんです。WP SyntaxHighlighterはfooterにscriptを書き出しているので、別の外部ファイルにしてwp_enqueue_scriptでfooterに書き出してやればいいかなと思ってました。
実際、WP SyntaxHighlighterのscriptの後に書き出されるのですが、動きません。うっ。
間に合わせの手段ですが、

function(){・・・・・・}の中に書いてやるとページが読み込まれてから中に書いたscriptが実行されます。
だがしかし…これを足したせいか、せっかく速くなったキノコ表示が遅くなったような気がします…

2013.03.14

jQuery 重いらしいcontainsフィルターを書き換えてみる

jQueryの独自フィルターは重いらしい…。
書籍でもお世話になっているこちらのサイト様を参考にへっぽこスクリプトの改善を日々図っている訳ですが。
jQueryを良くする25のTIPS[to-R]
確かにOじろーんちの細い回線では:contains()をセレクターに使っている当ちゅんもす置き場のキノコが一瞬みえちゃう。

WordPressのloopでコメント数を表示してるですが、コメントがある時はキノコを表示。ノーコメントの時はキノコを隠蔽してありますw。
テンプレートタグcomments numberの引数にコメント0の場合にnを、他は数値のみを出力させるようにして、フィルター:containsでnを拾って.remove()。
ちょっと方法を変えました〜WordPress キノコは最初から隠すべき キリッ!(コメント件数の表示)
なぜcssでdisplay:none;にしないのかは、無効な表記がHTMLで繰り返されるのが煩わしかったというか、大した理由ではないのですがなんとなく。

ちょっとハードルが高い気もしますが、勉強がてらなんとか書き換えてみようと思います。

filterを使ってみる

やりたいことは、コメントリンクの中に "n"という文字がある時、表示しない。
まずは文字を探す方法から。

htmlはこんな感じで書き出されています。divの中にa そしてテキスト。
.findでaを見つけるところまでは現状と同じ、そこからfilterで文字の合致をふるい分けできないかやってみました。
filterの引数のコールバック関数でtextを取得して、比較すればいいような気がする…

filterの戻り値はObject[a 1113.html#comments]となったし、どうやらできたっぽい…
しかし、スペースや改行が入るとだめな模様。改行や空白が入るブラウザがあるとの情報もありもう一工夫必要ですな。
噂には聞いていた”正規表現”とやらで一致とか、含むとか、ができるとか…

これで□□nでも<br>nでも大丈夫なはず……。
スラッシュで囲うと正規表現となり、オプションmでマルチラインを検索となるらすぃ…。
.parentでaの親要素であるcomm_lに戻って.remove() できた(∩・ω・)∩

正規表現についてはこちらでもっと勉強したいと思うのです。
JavaScript初級者から中級者になろう:四章第六回 正規表現

ちょっと考察…疑惑のスクリプト

でも、.matchの戻り値は配列とのことで一文字しか無いし戻り値は["n"]なんじゃなかろうか?という疑問も。
なんもない時はnullが返る。
これって、.filterが真偽値で判定してるとしたらどうなんでしょう?

要素集合から、引数で渡したコールバック関数で合致と判定しなかった要素を全て削除したものを返す。
この関数は、全ての要素に対して $.each のように順に実行されます。この時にfalseを返せば、その要素は集合から外される。
false以外の値を返せば、その要素は残る。
filter(fn) – jQuery 日本語リファレンスさんより引用

false以外の値を返せば、その要素は残る。という部分が気になります。
nullはfalseじゃないよなぁ。3行目はもしかして、

と書かなくてはならないんだろうか?
しかし、いかにも冗長な気がします。

このメソッドの2番目の構文は、セレクタではなく関数によって要素をフィルタリングができます。要素ごとにその関数を実行し、true(もしくは、真偽値としてtrueと同等の値)を返した場合、その要素は選択されます。そうではない場合、除外されます。
.filter() – jQuery API Documentation 日本語訳さんより引用

ともあり、Firefox、Safariでは動作確認できてますし、まあ、いいかという気が激しくしています。ちゅんもす置き場では.matchのまま行こうかと。

精神上よくない気もするのでもうちょっと書いてみます。Javascriptの.testメソッドは真偽値が返ります。

今回は1文字しか判定してないので真偽明白ですが、’先頭にxxxを含む文字列’とか条件がもっと複雑だったりする場合、.filterするにはこちらの方がいいのかなぁ。

なにはともあれ、速くなるのか?

FirefoxのアドオンFirebugのコンソールで計測してみました。

.find("a:contains('n')")と記述した場合0.689秒かかっております。

0.186秒!!!!!
ぐわーっ!速い!

よし!これで行こう!!
ps.当ブログがなんかおかしなことになっていたら教えて下さい…

2013.02.23

jQuery/css .class:nth-child(数n)ってしたら兄弟はどーなの?

ちょっとわけわかめになったので覚え書きです。

  • 共通のクラスを振ったdivが6つ。それぞれ画像が配置されている。今後同様のdivは増える予定。
  • 偶数番目のdivにはもう一つ別のクラスが指定されている。
  • 6個置きのdivにclassを追加して、cssを指定したい。

ということで、偶数番目に振られたclass(.icon)に対して、普通にnth-child(6n)の疑似クラスを当ててみました。

6番目に.last_iconが追加されました。

CSS3の nth-child() 疑似クラスでは
親要素内の隣接している子要素を頭から数えて、n番目の要素を選択(スタイルを指定)できる。
間に別の要素が入っても、それもカウントしてn番目。
.icon:nth-child(6n)という記述をすると間の.indivも数えて6の倍数番目。

3nにしたら間の兄弟はどうなるの?

ところが.icon:nth-child(3n)としてもちゃんと6番目の.iconだけに適用されます。
んー?3番目の子要素(.iconの兄弟要素)のdivにも適用されちゃわないの?
されないってことは、div兄弟数えないで、.iconだけ数えてるの?
それだと「間に別の要素が入っても、それもカウントしてn番目。」ということにならないんだけど…
いやいやいや兄弟は数えてるんだ!

クラス.iconにマッチした子要素だけを選択できるんですね!!
3番目には、.iconがないので除外。
6番目には、.iconがあるので適用!

例はjQueryですが、一応jQueryなしcssのみのテストサンプルはこちら。
上の例と違ってごめん。文字のみ。下はキャプチャ画像です。
nth_c

2013.02.13

css3 linear-gradientの記述を減らせんかのぅ(減らせませんでした)

さてさて…考えてみますよ。

  • webkit組 Safari、Choromeは対応なし
  • Firefoxは16.0から対応
  • Opera は12.1.0から対応。
  • IEは 6,7,8,9は問題外、もともと別対応必須。
  • 未知数なのがIE10だが、モダンブラウザにはちがいな…てか、どういう風の吹き回しでしょうか!。

問題児は、webkitエンジンを使用しているSafari。(Choromeも。)
時代は変わった物だわさ。

何が?かと言うと、タイトルのlinear-gradientについてです。
自サイトなりの対応と古いブラウザの対応ラインを改めて考えてみました。
もちろん広い層に見て貰うためのサイトでは、もっと細かくブラウザごとの対策をしなくてはいけないかと思います。

今まで↑のようにベンダープレフィックスなる接頭辞と独自書式でcss3のグラデーションに対応していた訳ですが、ここに来て

IE10、Opera12.10〜、Firefox16〜がプレフィックス無しと新しい書式に対応しました。

新しい書式ではグラデーションの方向をto bottomとtoを付け終点へ指定するようになってます。
角度については勉強不足なので割愛。

webkit組用(webkit一辺倒のようなMobileブラウザ組含む)のプレフィックスを着けた※webkitルールを前に、対応ブラウザ用プレフィックス無しto付き新書式を後ろに、2つのcssを書けばいいかなぁー(後の記述ほど有効:Opera対応&7行目-moz-を削除)と思っているわけです。

Safariも5.1〜は-moz-linear-gradientと同じ書式に対応しているのですが、LeopardのSafari最終版5.0.6が対応していないため、-webkit-gradientという独自書式のまま使用しております。この時点であんまり減らない。

Opera使いはもともとコアなファン(偏見)で最新版使うだろうし問題はないような。
Firefoxはどうすっかなー
Firefox16のOS対応状況は
WindowsはXP 2004年9月発売のsp2まで。
Macは2007年10月発売の 10.5 Leopard まで。

Firefoxは怒涛のバージョンアップ告知ありますし…
WinでFirefoxの人はコアファン(またもや偏見)だろうし、
Appleは足切りが早いのでMac使いは戦々恐々としてOSを確保するはめに陥ってますし、Leopard以外選択のない人はFirefox16が最後な訳で早々に対応していると思われ…

うん、-mozはいらないかな。いらないよね。いらないと思うなぁ。
えっ!PowerPCプロセッサ搭載MacではFirefox 3.6.28最終ですか、そうですか…

では-moz-を付けざるを得ない。

自サイトのブラウザ対応ラインを
MacはLeopardで使えるブラウザ基準(Firefox16、Safari5.0.6)をメインで設けるが、最低限、崩したくないところだけPowerPCプロセッサ搭載MacとTigerの最終版Firefox3.6用にプレフィックス有り保留。
Safari4からは-webkit-gradientが効くので現状保留。
IEはコンディショナルコメントが使える9までは多少の崩れは気にしない最低限の対応。
ぜんぜん見直せてないですしw、再確認ということになりました。

うぐぐな考察になりましたが、現在のところ古いブラウザを加味しない理想はこうでしょうかねぇ↓

参考サイト:
クロスブラウザな css3 linear-gradient が面倒になりそうな件について – ほむらちゃほむほむ
結局CSS3のlinear-gradientはどう書いたらいいのかまとめてみた (最新仕様・全ブラウザ対応版) – Studencheskie Programmisty
PageTop