[JavaScript] スマートフォンでウィンドウの高さを取得する

スマートフォンでウィンドウの高さを取得するのは簡単…なはず。

window.innerHeight;

これで一応取得できる。

困るのはURLバーが表示されている時とされていない時で数値が変わってくること

URLバーが出てる場合は

実際のウィンドウの高さ - URLバー
が返ってくる。

要はコンテンツを表示する部分のサイズってことなんだけど、動的にサイズを決めたりする場合はメンドくさいこともある。

scrollTo(0, 0);//スクロールさせてURLバーを隠す
var windowH = window.innerHeight;

こんな感じにすればURLバーがない場合で統一できる


参考：
スマートフォンサイトのディープな作り方

iScrollを設定した要素が非表示の時に、画面を回転させて向きを変えるとうまく動かなくなる

スマートフォン向けサイトでiScrollを使ってるんだけど、iScrollを適用させてる箇所がデフォルトでは非表示になってる。
ボタンをクリックすると、そこが表示されるって感じ。

非表示中は高さをうまく取得できないらしく、非表示のまま画面を横向きにした後、iScroll部分を表示させるとうまく動かない。
iScrollには設定を更新するrefreshというメソッドがあるのでそれを使う

var iSc = new iScroll(wrap);

setTimeout(function(){

  //iScrollの要素を一旦表示にする
  wrap.style.display = "block";
  //iScrollの中身を更新
  iSc.refresh();
  //表示を戻す
  wrap.style.display = "";
}, 0);

これを画面回転時のイベントで呼び出す


ちょっと前に「css切り替えたのに表示がかわらん！」っての書いたんだけど、色々変更しているうちに治ってた…。
原因調べとかないとな…

[WordPress] ファイル名を指定して、画像パスを取得する

WorePressにはアイキャッチ画像って便利な機能あるけど、1枚しか設定できないから、物足りないときがある。
各記事に、決まったタイプの画像を複数掲載する場合など…
例：メイン画像とサブ画像とタイトル画像を記事に使ってるとか
メイン画像をアイキャッチに登録した場合、他2つはどうするか？
カスタムフィールドに登録してもいいけど、その場合はサイズを指定して取得したりするのが難しくなる(っぽい。)

なんでその記事に登録されている画像からファイル名を使ってパスを取得する方法を考えた



function getImgByName($post_id, $name, $size = 'thumbnail'){

  //その記事に登録されている画像を全部取得
  $files = get_children('post_parent=' . $post_id . "&post_type=attachment&post_mime_type=image");

  foreach($files as $key => $file){

    //ファイル名だけ取り出す
    $path = explode("/",$file->guid);
    $path = end($path);

    //ファイル名取得する関数あったね
    $filename = basename($file->guid);

//ファイル名を調べて、指定したものだったらそのimgタグを返す
    if($name === $filename){
      return wp_get_attachment_image($key, $size);
    }
  }
  return false;
}

function.phpに追加すれば、テンプレでは
<?php echo getImgByName($post->ID, 'title.png'); ?>
みたいに使える

[iPhone] css切り替えたのに表示がかわらん！

タッチする毎にクラスを切り替えて背景色を変えるって処理をしてたページにiScrollを設置したら、iPhonで見ると、タッチしてから背景色が変わるまでにすごく時間がかかるようになった(体感で4秒くらい)

なにもしないとそれくらいかかるんだけど、画面をタッチするとすぐ表示が切り替わる。

でも、再度タッチした分の表示は変わらない。

どうやら描画するタイミングがおかしくなっているみたい。

スクロールしないページだったので、

scrollTo(0, 0);

で描画を更新するようにした。

対症療法だけど…

原因はわからず…

[JavaScript] スタイルの値を取得する

element.style.***だとcssファイルで設定している値が取得できない。
この場合はgetComputedStyleを使う

var styles = getComputedStyle(取得したい要素, 疑似要素);

第二引数の「疑似要素」は指定しない場合は、空の文字列を渡す

[JavaScript 高速化] 初期設定やなんやかんやもイベントが起きるまでやらん！

参考にした記事が2007年と2008年のものなので、今では古いテクニックなのかもしれんけど…

最近、スマートフォン向けのサイトを作った。
PC向けと比べてネットワークが細いのと処理速度が遅いことを考えて、より高速化に対してシビアにならんといかん。

で、ボタンをクリックしたら、画面下からシュッとモーダルウインドウが出るような機能をつけた。
そのモーダルウィンドウ内でも、あれやこれやと機能がついてる。
でも、そのボタンは押されないかもしれないっていうサブ的な機能。


この機能の設定をJavaScript読み込み時にやっても使われなかったりする

なので、できればボタンがクリックされるまで、機能設定も動かないようにしていたい。

要は最初の1回だけ初期設定機能を付けて、2回目以降はそれを動かさないようにしたい。

パッと思いつくのが↓(ダメパターン)
var flag = false;
var kinou = function(){
  if(flag === false){
    //初期設定処理

    //フラグを切り替え
    flag = true;
  }

  //通常の処理
}

まあ、これでも動くんだけど、flagって変数が必要になるのと、関数呼び出すたびに条件判定をする必要がある。
こんなときには「Lazy Function Definition Pattern」
直訳すると「怠けた機能の定義様式」

var kinou = function(){
  //初期設定処理をここに書く

  //ここで関数上書き
  kinou = function(){
    //通常処理
  }

  //通常処理を起動
  kinou();
}

1度関数が呼ばれると、初期設定をする。
その後、関数内でその関数を上書き。初期設定機能はなくなって、通常機能のみの関数になる
2回目以降は、通常機能のみが動くようになる

「関数の外の変数を見にいかなくなる ＆ 条件分岐がなくなる」より高速になるってことね。

「高速化」じゃなくて「早漏化」っていってみるととたんにやる気がなくなる。


参考：
JavaScriptの動作を軽くするための工夫
Lazy Function Definition Pattern(英文)

[Linux] サーバーの負荷を調べる

サーバーの負荷を調べることは多いと思う。
サイトが重いとか、cronで重い処理を定期的に動かしているとか。

・topコマンド
現在のシステムの状態を表示する
5秒おきに表示が更新される

・uptimeコマンド
cpuの負荷が見れる

・sarコマンド
管理者向けのいろんな情報が見れる
さかのぼってデータを見ることができる

参考：
top - システム情報をリアルタイム監視 | Linuxサーバ監視
uptime - システムの稼動期間・平均負荷調査
sarコマンド - CPU・ネットワーク・メモリ・ディスク情報確認