2011/09/30

[jQuery] イージング一覧

jQueryのイージングの名前をいつも忘れてしまうのでメモ


linear
swing
jswing
easeInQuad
easeOutQuad
easeInOutQuad
easeInCubic
easeOutCubic
easeInOutCubic
easeInQuart
easeOutQuart
easeInOutQuart
easeInQuint
easeOutQuint
easeInOutQuint
easeInSine
easeOutSine
easeInOutSine
easeInExpo
easeOutExpo
easeInOutExpo
easeInCirc
easeOutCirc
easeInOutCirc
easeInElastic
easeOutElastic
easeInOutElastic
easeInBack
easeOutBack
easeInOutBack
easeInBounce
easeOutBounce
easeInOutBounce


実際の動きは↓↓を参考にしてください
参考
jQuery日本語リファレンス Easing/jQuery

2011/09/28

スケートボードもった選挙ポスター。選挙も滑りましたってか!



・スケートと選挙ポスターというミスマッチさ・意外性。意外性のあるものは目を引く

・スケートボードメーカーが会社としてやってるってのはびっくり。反発も考えるとリスキーだと思ったが、そもそも会社のターゲットは社会の良識派じゃないか。

・若者たちに選挙への興味を持たせるためじゃなくて、自分の会社へ興味を持たせたいんだよな。
そりゃ、スーツ姿のおじさんおばさんがボード持ってたら、スケーターは興味持つよな。

・スケーターの価値観ってのは具体的に知らんが、社会のアウトサイド側ってことで考えると、大人で、真面目くさった嘘つき達を相手にふざけるってとこが「クールだぜっ」って思わせられるんじゃないんかな

「うんうん、意外性を持たせることで興味を引けるんだな、わかった!」なんてタマキンみたいなしたり顔してましたが、じゃあ具体的にやってみろよって言われると、タマキンみたいな案しかでてこないっすね。
この人らはなんで意外性をもたせるやり方を選んだんかな。
うーん…面白いから…?

参考:
“選挙ポスター”を利用したスケボーメーカーのゲリラ広告

[jQuery] 指定した要素まで画面をスクロールさせる方法


フォームで項目が多くて、フォーム全体が1画面内に収まらなかった時に、フォームの先頭にエラー文を出して、その文をクリックするとエラーがあった項目までスクロールさせるという機能をつけたい。

どうやってその場所までスクロールさせるか
↓↓↓

var btn = $(".btn");
var target = 移動先の要素



btn.click(function(){
  $('html,body').animate({

    scrollTop: $target.offset().top}, {
    duration: 400,
    easing: "swing",
    complete: function(){
      //アニメーション後になにかしたいならここに書く
    }
  });
});
ウィンドウのスクロールはhtmlとbody要素のsrollTopの数値を変えるといい。

今回の場合は、エラーになっている項目を目立たせたかったので、その項目のタイトルに背景色をつけた。
アニメーション後にハイライトしたり、点滅させたりでもいいかも。

2011/09/26

[JavaScript] チェックボックスでチェックが入っている要素を取得する

css3で使えるようになった:checkedを使うと、チェックが入っている要素が簡単に取得できる。

docment.querySelectorAll("input:checked");

でチェックが入ったinput要素のリストが取れる。

cssでも指定できる
input:checked{
  color: red;
}

2011/09/25

PHPでファイルのURLから、そのファイルの有無を判定する

phpだとfile_exists($file)でファイルの有無判定できるけど、URLの場合はこれだと判定できない。
file_get_contentsでも判定できそうだけど、中身は必要ないって時ようの関数。
ファイルがあるか無いかの判定だけを返す

function url_exists($url){
  $header = get_header($url);

  //ヘッダーの中身から判定する


  if(preg_match('/OK$/', $header[0]){
   return true;
  }else{
    return false;
  }
}

2011/09/22

[WordPress] カスタム投稿タイプ別にカスタムフィールドを使い分ける

WordPressでサイトを構築して、更新を人に任せる場合は、入力項目の管理なんかが難しくなりますね。
カスタム投稿タイプができて、投稿ごとにカテゴリーを選んでもらうという作業が亡くなった分楽にはなったんですが、カスタムフィールドを使おうとすると、更新する人によってはハードルが高いこともあります。

投稿タイプごとに、表示するカスタムフィールドを切り分けることができれば、とりあえず、出ている項目に必要なデータをいれて投稿すればOKって感じにできそうです。

Custom Field GUI Utility 3 - WordPress プラグイン

昔からずいぶんお世話になってるプラグインです。
投稿タイプってのができたことに対応して、投稿タイプごとにカスタムフィールドの表示・非表示を切り分ける機能がついたらしい。

ありがたや、ありがたや。

2011/09/21

[JavaScript] スマートフォンかPCか判別する

正確には、タッチパネルかどうかを判定する機能。
これからノートパソコンにもタッチパネルとか出てくるかもしれないから、確実じゃないかも。

var clickType;
var hasTouch;

if("ontouchend" in window){
  hasTouch = true;
  clickType = "touchend";
}else{
  hasTouch = false;
  clickType = click;
}


こうやってタッチパネルかどうか判断しといて、クリック(またはタッチ)イベントには

element.addEventListener(clickType, function(){
  //ここに処理
});


touchendイベントの設定だけだと、タッチした後、ドラッグアウト(でいいのかな?)した時でもイベントが起きるようになるので注意。
必要ならtouchmoveが起きた時はイベントが起きないようにしないとだめ

詳しくは「iPhone、アンドロイドでのクリックイベント

2011/09/16

HTML5ではscriptタグもlinkタグもtype属性は必要ない

いつも忘れてしまうのでメモ

HTML5ではscriptタグもlinkタグもtype属性は必要ない

<script src="javascript.js"></script>
<link href="css.css" rel="stylesheet">

参考:
HTML5タグリファレンス
link 要素

2011/09/15

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

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

window.innerHeight;

これで一応取得できる。

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

URLバーが出てる場合は

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

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

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


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


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

2011/09/09

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切り替えたのに表示がかわらん!」っての書いたんだけど、色々変更しているうちに治ってた…。
原因調べとかないとな…

2011/09/08

[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'); ?>
みたいに使える

2011/09/05

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

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

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

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

スクロールしないページだったので、
scrollTo(0, 0);
で描画を更新するようにした。
対症療法だけど…

原因はわからず…

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

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

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

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

2011/09/02

[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(英文)

2011/09/01

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

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

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

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

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

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