5509

Site Search

OS X LionでApacheの設定をする

MAMPとかXAMPPは使わないでやります。
標準でApacheが入っているので、前準備はなしでだいじょぶです。

# ターミナル初めての人向け
$ で始まってるやつはターミナルから入力します。また sudo はroot権限で実行します。通常ファイルやディレクトリにはPermissionが設定されていて、ユーザーディレクトリより上位階層のファイル・ディレクトリはroot権限がないと変更できません。

ゴール

ゴールはローカルのhogeディレクトリに
ブラウザから「http://ho.ge/」でアクセスできるようにすることにします。

Read more

カスタムイベントとイベントの発火

IE8以下以外は普通にaddEventListenerするだけなんだけど、IE8以下はaddEventListenerが使えないのと、イベントハンドラには既に予約されてるonhogehogeしか使えないので、ondataavailable(※)に全て登録しておいてeventオブジェクトに処理を保存しておく。triggerする際は、evtObj.nameをキーに処理を引き出してhogehogeする。

※ なんかサイ本みたらondataavailableに登録するみたいなことが書いてあったからそうした。

Chromeのキャッシュをオフにする方法

全然気がつかなかった・・・いつからだろう・・・
Chromeにビルトインされてるのですぐ使えます。

ちなみに、キャプチャはChromeのdev版なのでstable版は少し違うかもしれません。stableでもcacheの項目あるのは確認してます。

通常、キャッシュがあればそっちを見に行くので304になりますが

右下にギアアイコンがあって、そこからインスペクタのSettingが開けます

Disable cacheにチェックを入れておくと

Cacheが常にオフになり

常に200、キャッシュを見にいかなくなります

exValidationにチェックボックスで必須をトグルにできるやつを実装しました

exValidation(jQuery.validation.js含め)で今まで一番要望が多かったのですが、汎用的にするのは微妙かなぁと思って実装していませんでした。以前WebDesigningで連載しているjQuery Labで実装方法を書いたものを、もう面倒なので組み込みました。これで割と簡単に使えるんじゃないでしょうか。表示非表示とかはできません、あくまで必須をトグルにできるだけです。表示非表示も実装したい場合はがんばってアドオンしてください。(アドオンは割と簡単にできます)

チェックボックスで必須をトグルにできるやつのサンプル

実装方法

実装方法はサンプルに尽きるのですが、ポイントはトグルにしたい要素はルールを書くときにchkrequiredを必ず含めてください

<tr>
  <th>Favorite<span>*</span></th>
  <td>
    <span id="fav">
      <label for="f1"><input type="checkbox" id="f1" name="fav[]" value="f1">books</label>
      <label for="f2"><input type="checkbox" id="f2" name="fav[]" value="f2">music</label>
      <label for="f3"><input type="checkbox" id="f3" name="fav[]" value="f3">game</label>
      <label for="f4"><input type="checkbox" id="f4" name="fav[]" value="f4">study</label>
      <label for="f5"><input type="checkbox" id="f5" name="fav[]" value="f5">fishing</label>
      <label for="f6"><input type="checkbox" id="f6" name="fav[]" value="f6">other</label>
    </span>
  </td>
</tr>
<tr>
  <th>Favorite Other</th>
  <td>
    <input type="text" id="favOther" name="favOther" value="">
  </td>
</tr>

で、チェックボックスを含むグループにはchktoggle_hoge_fugaのように

  • hoge: トグルを発火させるためのチェックボックスのID
  • fuga: チェックボックスの状態によって必須をトグルさせるinputのID

ルールを入れておきます。これだけです。

$("form")
  .exValidation({
    rules: {
      fav: "chkgroup chktoggle_f6_favOther",
      favOther: "chkrequired"
    },
    stepValidation: true
  });

そんなわけで、実装しましたのでよければ使ってください。

チェックボックスで必須をトグルにできるやつのサンプル

いつappendされるか分からないDOMノードを監視して何かする

最後の手段として使える場合があります。最後の手段です。
プラグインとか使いまくってると(そもそも挙動を理解していないプラグインを使いまくるのはよくないので、注意したほうがいいです)、「プラグインで生成したノードがDOMツリーに追加された後なんかしたい」みたいなときがあったりするかもしれないですが、そういうときになんとかする方法です。

jQuery使ってないときは$(“object”)をquerySelectorとかに変えます。

var object = undefined;
(function() {
    object = $("object");
    if ( object && object.length > 0 ) {
        // ここに処理書く
        return;
    }
    setTimeout(arguments.callee, 30);
}());

上の例だと、objectを監視し続けてほしい個数分取れたときに何かするっていう感じです。取れないときは取れるまでループし続けるので、アレですアレ。。前もって、コンソールからほしい要素が最終的に挿入されてるかどうか見てからにしましょう。

自分で書いたコードならカスタムイベント入れとくと、後で使うときに楽ですね。つまりプラグイン使うとノードの生成タイミングとか自分で把握できなくなるので、気をつけたほうがいいです。

書いてるひと

nori
nori
- フロントエンド・エンジニア
Location
- 東京