2013.03.16
Simple Tweetが動かないんだども
すみません実験しました。
というかちゃんと動いてます。お騒がせしました。
Twitter API 1.1に対応しているので、3月5日のTwitterAPI 1.0 終了祭りには関係ないと思われるのですが。
さっきの投稿反映されなかったなー Error! って表示だけでた。
2013.03.16
すみません実験しました。
というかちゃんと動いてます。お騒がせしました。
Twitter API 1.1に対応しているので、3月5日のTwitterAPI 1.0 終了祭りには関係ないと思われるのですが。
さっきの投稿反映されなかったなー Error! って表示だけでた。
2013.03.16
前回と同じ.filter(function(){})で要素を選択しようというネタなんですが、調子に乗って今度はidをふるい分けてみました。
なんでidをふるい分けるんじゃ!id最強だろう!!なのですが…。
今回はWordpressのプラグインWP SyntaxHighlighter の吐き出す idを練習を兼ねてごにょごにょしてみたいと思います。
1 2 3 4 5 |
<p>ほにゃらら〜</p> <div> <div id="highlighter_364948" class="syntaxhighlighter notranslate css">syntaxのテーブル</div> </div> <p class="syn_next">ひよこをもっちりとさせるスクリプトです</p> |
Wordpressが書き出してくれるhtmlはこんな構成になっております。
’p’のmarginを広くとっているためsyntaxhighlighterが文章から浮いた感じになってしまっておりました。
syntaxhighlighterの前後にある’p’のみ、marginを調整して、文章とのつながりを持たせたい。
よく見るとsyntaxhighlighterは名無しdivの子要素のdivに個別のidを割り振ってます。
id="highlighter _364948"
こっからなんとかたどれそうだけど、一つずつに’highlighter_連番’が振られた膨大な数のidをセレクタにするのは無理です。
でも、’highlighter’部分は共通だよね!
そこで、さっき覚えた正規表現とやらを試してみることに。
1 |
/^highlighter/ |
^ という記号で先頭からの位置指定ができるようです。
「もしかしてセレクタに使えるんじゃ!」と思いつきましたが、セレクターに正規表現は使えないようです。
やっぱり、覚えたての.filter(function(){})をまたしても使うことにします。
1 2 3 4 |
var $main = $('#main'); var synFTp = $main.find('div').filter(function (){ return this.id.match(/^highlighter/); }).parent('div'); |
思いっきり同じです。$mainという変数は単純にメインカラムのwrapのdivです。
メインカラムからfindしたdivのうち、idの先頭の文字列がhighlighterのdivをfilterしています。ルー大柴みたい。
しかし、最終的に操作したいのは’p’なので、いったんhighlighterの親要素の名無しdivにさかのぼり、変数にぶっこみました。
ここまで前回と全く同じです。
変数 synFTpでは最終的にsyntaxhighlighterをラップしている名無しdivを選択しています。前後のpはこのdivの兄弟要素ということになります。
そこでjQueryの強力なAPIを使います。Traversingというらしい。findもfilterもそうなんだけど、横断するという意味らしい。
おなじみヌーさんの所から引用させていただきますと
要素集合の各要素の「前」にあたる兄弟要素を、全て抽出する。
このprev関数はあくまで各要素のすぐ隣の要素のみを抽出し、前以前を全て選択するわけではない。その場合はprevAll()を用いること。
引数には条件式を指定し、結果セットから更に絞込みを行うことも可能。
要素集合の各要素の「次」にあたる兄弟要素を、全て抽出する。
このnext関数はあくまで各要素のすぐ隣の要素のみを抽出し、次以降を選択するのではない。その場合はnextAllを用いること。
引数には条件式を指定し、結果セットから更に絞込みを行うことも可能。
このprevとnextを使い前後の兄弟要素’p’へクラスを加えcssでmarginを設定しました。
1 2 3 4 5 6 7 |
$(function(){ var $main = $('#main'); var synFTp = $main.find('div').filter(function (){ return this.id.match(/^highlighter/); }).parent('div'); synFTp.prev('p').addClass('syn_prev').end() .next('p').addClass('syn_next'); |
動かないんです。WP SyntaxHighlighterはfooterにscriptを書き出しているので、別の外部ファイルにしてwp_enqueue_scriptでfooterに書き出してやればいいかなと思ってました。
実際、WP SyntaxHighlighterのscriptの後に書き出されるのですが、動きません。うっ。
間に合わせの手段ですが、
1 2 3 |
$(function(){ $(window).on('load',function(){・・・・・・}); }); |
function(){・・・・・・}の中に書いてやるとページが読み込まれてから中に書いたscriptが実行されます。
だがしかし…これを足したせいか、せっかく速くなったキノコ表示が遅くなったような気がします…
2013.03.14
jQueryの独自フィルターは重いらしい…。
書籍でもお世話になっているこちらのサイト様を参考にへっぽこスクリプトの改善を日々図っている訳ですが。
jQueryを良くする25のTIPS[to-R]
確かにOじろーんちの細い回線では:contains()をセレクターに使っている当ちゅんもす置き場のキノコが一瞬みえちゃう。
WordPressのloopでコメント数を表示してるですが、コメントがある時はキノコを表示。ノーコメントの時はキノコを隠蔽してありますw。
テンプレートタグcomments numberの引数にコメント0の場合にnを、他は数値のみを出力させるようにして、フィルター:containsでnを拾って.remove()。
ちょっと方法を変えました〜WordPress キノコは最初から隠すべき キリッ!(コメント件数の表示)
なぜcssでdisplay:none;にしないのかは、無効な表記がHTMLで繰り返されるのが煩わしかったというか、大した理由ではないのですがなんとなく。
1 2 3 |
<div class="comments-link"> <a href="<?php comments_link(); ?>"><?php comments_number('n', '1', '%'); ?></a> </div> |
1 2 3 4 |
$(function(){ var comm_l = $('.comments-link','#main'); comm_l.find('a:contains("n")').remove(); }); |
ちょっとハードルが高い気もしますが、勉強がてらなんとか書き換えてみようと思います。
やりたいことは、コメントリンクの中に "n"という文字がある時、表示しない。
まずは文字を探す方法から。
1 2 3 |
<div class="comments-link"> <a href="https://chun-oki.sw8field.com/webworks/20130213/1113.html#comments">n</a> </div> |
htmlはこんな感じで書き出されています。divの中にa そしてテキスト。
.findでaを見つけるところまでは現状と同じ、そこからfilterで文字の合致をふるい分けできないかやってみました。
filterの引数のコールバック関数でtextを取得して、比較すればいいような気がする…
1 2 3 |
comm_l.find('a').filter(function () { return $(this).text()=='n'; }); |
filterの戻り値はObject[a 1113.html#comments]となったし、どうやらできたっぽい…
しかし、スペースや改行が入るとだめな模様。改行や空白が入るブラウザがあるとの情報もありもう一工夫必要ですな。
噂には聞いていた”正規表現”とやらで一致とか、含むとか、ができるとか…
1 2 3 4 5 6 |
$(function(){ var comm_l = $('.comments-link','#main'); comm_l.find('a').filter(function () { return $(this).text().match(/n/m); }).parent().remove(); }); |
これで□□nでも<br>nでも大丈夫なはず……。
スラッシュで囲うと正規表現となり、オプションmでマルチラインを検索となるらすぃ…。
.parentでaの親要素であるcomm_lに戻って.remove() できた(∩・ω・)∩
正規表現についてはこちらでもっと勉強したいと思うのです。
JavaScript初級者から中級者になろう:四章第六回 正規表現
でも、.matchの戻り値は配列とのことで一文字しか無いし戻り値は["n"]なんじゃなかろうか?という疑問も。
なんもない時はnullが返る。
これって、.filterが真偽値で判定してるとしたらどうなんでしょう?
要素集合から、引数で渡したコールバック関数で合致と判定しなかった要素を全て削除したものを返す。
この関数は、全ての要素に対して $.each のように順に実行されます。この時にfalseを返せば、その要素は集合から外される。
false以外の値を返せば、その要素は残る。
filter(fn) – jQuery 日本語リファレンスさんより引用
false以外の値を返せば、その要素は残る。という部分が気になります。
nullはfalseじゃないよなぁ。3行目はもしかして、
1 |
return $(this).text().match(/n/m) == "n"; |
と書かなくてはならないんだろうか?
しかし、いかにも冗長な気がします。
このメソッドの2番目の構文は、セレクタではなく関数によって要素をフィルタリングができます。要素ごとにその関数を実行し、true(もしくは、真偽値としてtrueと同等の値)を返した場合、その要素は選択されます。そうではない場合、除外されます。
.filter() – jQuery API Documentation 日本語訳さんより引用
ともあり、Firefox、Safariでは動作確認できてますし、まあ、いいかという気が激しくしています。ちゅんもす置き場では.matchのまま行こうかと。
精神上よくない気もするのでもうちょっと書いてみます。Javascriptの.testメソッドは真偽値が返ります。
1 2 3 4 5 6 |
$(function(){ var comm_l = $('.comments-link','#main'); comm_l.find('a').filter(function () { return /n/m.test($(this).text()); }).parent().remove(); }); |
今回は1文字しか判定してないので真偽明白ですが、’先頭にxxxを含む文字列’とか条件がもっと複雑だったりする場合、.filterするにはこちらの方がいいのかなぁ。
FirefoxのアドオンFirebugのコンソールで計測してみました。
1 2 3 4 5 6 |
console.time('mochi'); var comm_l = $('.comments-link'); for (i = 0; i < 1000; i++) { comm_l.find("a:contains('n')").append('もち'+i); } console.timeEnd('mochi'); |
.find("a:contains('n')")と記述した場合0.689秒かかっております。
1 2 3 4 5 6 7 8 |
console.time('mochi'); var comm_l = $('.comments-link'); for (i = 0; i < 1000; i++) { comm_l.find('a').filter(function () { return $(this).text().match(/n/m); }).append('もち'+i); } console.timeEnd('mochi'); |
0.186秒!!!!!
ぐわーっ!速い!
よし!これで行こう!!
ps.当ブログがなんかおかしなことになっていたら教えて下さい…
2013.02.23
ちょっとわけわかめになったので覚え書きです。
ということで、偶数番目に振られたclass(.icon)に対して、普通にnth-child(6n)の疑似クラスを当ててみました。
1 2 3 4 5 6 7 8 |
<div id="kome"> <div class="indiv"><img src="kame.png"></div> <div class="indiv icon"><a href="kame.zip"><img src="ico.jpg"></a></div> <div class="indiv"><img src="suzume.png"></div> <div class="indiv icon"><a href="suzume.zip"><img src="ico.jpg"></a></div> <div class="indiv"><img src="nattou.png"></div> <div class="indiv icon"><a href="nattou.zip"><img src="ico.jpg"></a></div> </div> |
1 2 3 |
$(function() { $('#kome').find('.icon:nth-child(6n)').addClass('last_icon'); }); |
6番目に.last_iconが追加されました。
CSS3の nth-child() 疑似クラスでは
親要素内の隣接している子要素を頭から数えて、n番目の要素を選択(スタイルを指定)できる。
間に別の要素が入っても、それもカウントしてn番目。
.icon:nth-child(6n)という記述をすると間の.indivも数えて6の倍数番目。
ところが.icon:nth-child(3n)としてもちゃんと6番目の.iconだけに適用されます。
んー?3番目の子要素(.iconの兄弟要素)のdivにも適用されちゃわないの?
されないってことは、div兄弟数えないで、.iconだけ数えてるの?
それだと「間に別の要素が入っても、それもカウントしてn番目。」ということにならないんだけど…
いやいやいや兄弟は数えてるんだ!
クラス.iconにマッチした子要素だけを選択できるんですね!!
3番目には、.iconがないので除外。
6番目には、.iconがあるので適用!
例はjQueryですが、一応jQueryなしcssのみのテストサンプルはこちら。
上の例と違ってごめん。文字のみ。下はキャプチャ画像です。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 |
<style type="text/css"> #kome {width:300px; margin:100px auto; border:2px solid #CC3333;} .indiv {color: #CC3333;padding:5px;} .icon:nth-child(3n) {background:#ffd700; font-weight:bold;} </style> <div id="kome"> <div class="indiv">かめ</div> <div class="indiv icon">アイコン</div> <div class="indiv">すずめ</div> <div class="indiv icon">アイコン</div> <div class="indiv">なっとう</div> <div class="indiv icon">アボカドとあうよ!</div> </div> |
2013.02.13
さてさて…考えてみますよ。
問題児は、webkitエンジンを使用しているSafari。(Choromeも。)
時代は変わった物だわさ。
何が?かと言うと、タイトルのlinear-gradientについてです。
自サイトなりの対応と古いブラウザの対応ラインを改めて考えてみました。
もちろん広い層に見て貰うためのサイトでは、もっと細かくブラウザごとの対策をしなくてはいけないかと思います。
1 2 3 4 5 6 7 8 9 |
#footer_wrap { background: -webkit-gradient(linear, left top, left bottom, from(rgba(102,51,0,0)), color-stop(0.169, rgba(102,51,0,0)), color-stop(0.169, rgba(102,51,0,100)), to(rgba(102,51,0,100))); /* Safari,Chrome */ background: -moz-linear-gradient(top, rgba(102,51,0,0), rgba(102,51,0,0) 16.9%, rgba(102,51,0,100) 16.9%, rgba(102,51,0,100)); /* Firefox */ background: linear-gradient(to bottom, rgba(102,51,0,0), rgba(102,51,0,0) 16.9%, rgba(102,51,0,100) 16.9%, rgba(102,51,0,100));/* firefox16 ie10 */ } |
今まで↑のようにベンダープレフィックスなる接頭辞と独自書式で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、再確認ということになりました。
うぐぐな考察になりましたが、現在のところ古いブラウザを加味しない理想はこうでしょうかねぇ↓
1 2 3 4 |
#footer_wrap { background: -webkit-linear-gradient(top, rgba(102,51,0,0), rgba(102,51,0,0) 16.9%, rgba(102,51,0,100) 16.9%, rgba(102,51,0,100)); background: linear-gradient(to bottom, rgba(102,51,0,0), rgba(102,51,0,0) 16.9%, rgba(102,51,0,100) 16.9%, rgba(102,51,0,100)); } |