[WordPress] ウィジェットが登録されているサイドバーの種類を取得する

WordPressはサイドバーやウィジェットを使うとかなり自由にコンテンツを配置できる。
その際に、例えば左側のサイドバーと右側のサイドバーの幅が違っていて、アイキャッチ画像やcssの指定をそれぞれに合わせたいなんて時がある。

その場合は…function.phpにウィジェットの処理を書く箇所で取得可能。

view plainprint?

1. function widget($args, $instance) {  
2.  //$argsという変数にサイドバーのIDやらの情報が入っている  
3.  var_dump($args);  
4.   
5.  //色々処理  
6.  if(isset($args['id']) && $args['id'] === 'left-sidebar'){  
7.   //サイドバーの種類に合わせてなにか処理を変える  
8.  }  
9. }  

function widget($args, $instance) {
 //$argsという変数にサイドバーのIDやらの情報が入っている
 var_dump($args);

 //色々処理
 if(isset($args['id']) && $args['id'] === 'left-sidebar'){
  //サイドバーの種類に合わせてなにか処理を変える
 }
}

[JavaScript] JavaScript 高速化 for編。lengthだけじゃないよ！

オライリーの「続・ハイパフォーマンスWebサイト」に書いてあったのでメモ。
ループの最大数をローカル変数に入れるってのは最初の一歩としてよく聞く。

view plainprint?

1. //ダメな例  
2. //ループの回数分、itemの長さを取得しにいってしまうので遅い！  
3. for(var i = 0; i < item.length; i++){  
4.  //処理  
5. }  
6.   
7. //良い例  
8. //itemの長さを取得するのは最初の1回だけなので早い！  
9. var len = item.length;  
10. for(var i = 0; i < len; i++){  
11.  //処理  
12. }  

//ダメな例
//ループの回数分、itemの長さを取得しにいってしまうので遅い！
for(var i = 0; i < item.length; i++){
 //処理
}

//良い例
//itemの長さを取得するのは最初の1回だけなので早い！
var len = item.length;
for(var i = 0; i < len; i++){
 //処理
}

上の2つ、chromeとfirefoxではほとんど差がなかったぞ…

■今回知ったのはループをi++ではなくi--でやる方法
それは…

view plainprint?

1. for(var i = item.length; i--){  
2.  //処理  
3. }  

for(var i = item.length; i--){
 //処理
}

これだけで、Chrome, Firefoxで60～70%くらいの時間で処理できるようになった。
IEは面倒なので確認してない。誰かやって！

i < length だとtrueかfalseの判定だけど、i--だと0かどうかの判定になる。
そっちの方がtrue、falseの判定よりも速いかららしい。

これだともちろん通常のi++でやる方法とは順番が逆になるので注意。

[JavaScript] Mediatorパターンを使ってみる

FormなどのGUI部分で、このラジオボックすでこっちが選ばれている時はこのinputを効かなくさせて、ここの値が20以下だった場合はこっちのselectリストをコレにして…
というのを1つ1つ条件分岐して処理を分けてると、そもそも大変で、仮に後から要素が1つ増えたりしたら、もうコントロールできなくなる。
なので、デザインパターンの1つMediatorパターンを使って管理するのが良いらしいので、JavaScriptでやる方法を調べてみた

複数のオブジェクト間の調整をする「相談役」を作る。
個々のオブジェクトはその相談役とだけコンタクトして、各オブジェクト同士ではコンタクトしない。
表示のコントロールのロジックは相談役にだけ書く

仲裁オブジェクトと各要素オブジェクトを作る。

view plainprint?

1. //仲裁オブジェクト  
2. var chusai = {  
3.  elems: [],  
4.  add: function(elem){  
5.   //要素を登録するメソッド  
6.   this.elems.push(elem);  
7.  },  
8.  change: function(){  
9.   var elems = this.elems;  
10.   for(var i = 0, len = elems.length; i < len; i++){  
11.    //要素のパラメータを取得したりとか色々やって処理する  
12.   }  
13.  }  
14. };  
15.   
16. var Elem = function(elem){  
17.  this.elem = elem;  
18. };  
19. Elem.prototype = {  
20.  add: function(){  
21.   //chusai任せ  
22.   chusai.add(this.elem);  
23.  },  
24.  change: function(){  
25.   //chusai任せ  
26.   //どういう処理するかは仲裁オブジェクト任せ  
27.   chusai.change();  
28.  }  
29. };  
30. var elem = new Elem(要素);  
31.   
32. elem.add();  
33. elem.change();  

//仲裁オブジェクト
var chusai = {
 elems: [],
 add: function(elem){
  //要素を登録するメソッド
  this.elems.push(elem);
 },
 change: function(){
  var elems = this.elems;
  for(var i = 0, len = elems.length; i < len; i++){
   //要素のパラメータを取得したりとか色々やって処理する
  }
 }
};

var Elem = function(elem){
 this.elem = elem;
};
Elem.prototype = {
 add: function(){
  //chusai任せ
  chusai.add(this.elem);
 },
 change: function(){
  //chusai任せ
  //どういう処理するかは仲裁オブジェクト任せ
  chusai.change();
 }
};
var elem = new Elem(要素);

elem.add();
elem.change();

あってんのかな…？やや不安
参考：オライリーのサンプルコード（英語）

Zend_Http_Clientでのエラー [Cannot handle content type '' automatically.]

調べてみたらどうってことはなかったけど、日本語で解説してくれてるページがなかったのでメモ。

Zend_Http_Clientでのエラー
「Cannot handle content type '' automatically.」

対処法は…
$client = new Zend_Http_Client($url);
//↓コレ
$client->setEncType();

setParameterPostでパラメータをセットしているか、setFileUploadでファイルをセットしていると、エンコードタイプの指定が必要になるので、明示的にエンコードタイプを指定する。
引数無しの場合、デフォルトでURLエンコードになる。
エンコードタイプにはurlエンコードとform-dataがある。
両方共Zend側に定数が用意してあるので、それで指定するといい
$client->setEncType(Zend_Http_Client::ENC_FORMDATA);


Zendのコード読めばすぐ分かるんだけどね…。
英語だからって逃げたせいで、より時間がかかった…。

[JavaScript] [高速化] JSファイルの非同期読み込み。遅延ロードっていうのか？

オライリーの「続・ハイパフォーマンスWebサイト」を読んでる。
すぐ使えそうなやつもあるのでメモメモ。

JavaScriptの外部ファイルの読み込み方法として一般的なhead内にscriptタグを書く方法、これだとJavaScriptを読み込んで実行している間は他のファイルの表示をブロックしてしまう。
JavaScriptはページ内のいろんな要素やファイルと関係したりするので、実行中に他のいろんな要素に動かれると困るらしい。
最近は1つのページで何個もJavaScriptファイルを読み込んでいたりするので、これはなかなか大変

「ハイパフォーマンスWebサイト」では、JavaScriptファイルは閉じbodyタグの直前に書けって言われる。
こうすれば、とりあえずJavaScriptファイルを読み込み出すまでに、htmlの表示はほとんど終わらせておくことができる。

それでもJavaScript実行中のダウンロード、表示のブロックは防げない。

■対処法
最初は最低限必要な処理のみ記述されたJavaScriptファイルを読み込む。
その中で、他に必要なファイルを読み込む処理を書く

view plainprint?

1. //scriptタグをJavaScript内で追加する  
2. var script = document.createElement('script');  
3. script.src = '次に読み込みたいファイル名';  
4. document.getElementsByTagName("head")[0].appendChild(script);  

//scriptタグをJavaScript内で追加する
var script = document.createElement('script');
script.src = '次に読み込みたいファイル名';
document.getElementsByTagName("head")[0].appendChild(script);

このやり方だと、他の読み込み・表示をブロックせずに進めることができる
調べてみると、昔から使われている技だったのね。

参考：
↓2006年の記事
動的に JavaScriptを読み込む

[Mootools] ウィンドウのスクーロール量を取得する

ライブラリを使わずにスクロール量を取得しようとして、ブラウザ間の違いに苦しんだりするのでメモ

view plainprint?

1. //縦のスクロール量  
2. window.getScrollTop()  
3. //横のスクロール量  
4. window.getScrollLeft()  

//縦のスクロール量
window.getScrollTop()
//横のスクロール量
window.getScrollLeft()

参考：
縦のスクロール量を取得する
横のスクロール量を取得する

[CakePHP] cssをhead内に追加する

マニュアルに書いてはいるんだけど、見つけるのに時間かかったのでメモ。 テンプレごとに読み込むcssファイルを指定する場合、はテンプレート側にcssの記述を追加する。 Htmlヘルパーを使うんだけど、そのままechoすると、その記述をした箇所(body内)にlinkタグが追加されてしまう

view plainprint?

1. //オプションにinline = false を追加する  
2. $this->Html->css('ファイル名', null, array('inline' => false));  
3. //1.3以前だと$html->css(****って書けばいい  

//オプションにinline = false を追加する
$this->Html->css('ファイル名', null, array('inline' => false));
//1.3以前だと$html->css(****って書けばいい