jQueryの書き方

2011.08.16 もう少しまとめた → 続・jQueryの書き方

jQueryのプラグインが便利なのでイロイロ使っていると変数が衝突したり、prototype.js(最近は全然使わないなあ…)と同時に読むとコンフリクトしたりとかあるので、最低でも自分で書いたトコだけでも回避できると心配事がひとつ減っていいよね。
という事であちこち参考にしつつ、今現在使っている書き方を。

1
2
3
(function($){
// ここでは $ は jQuery として使える
})(jQuery);

だいたいこの記述を<head>タグ内に書くか、または<head>タグから<script>タグで読み込むので、onload後に処理をするために次のようにする事が多いかな。

1
2
3
4
5
(function($){
  $(function(){
    // onload後の処理はここに書く
  });
})(jQuery);

以前は $ を使わず全部 jQuery(‘#id’).click… のように書いてたけど、そんな事みんなせんのね…

2011.01.07 追記
コメントで下記のような書き方教えてもらいました。
こっちの方が見た目スッキリしていてカッコイイですね。

1
2
3
jQuery(function($){
  // onload後の処理はここに書く
});

jQueryゼロから / Tab Interface (処理を組み合わせる)

タブインターフェイスはプラグインごろごろ転がっているので、実際に使うのはそちらがいいと思うけど、jQueryの基本的な処理の組み合わせの練習で。
タブクリックに加えて、マウスオーバー入れたい場合もあって、調整する場合もあるし。

まずは適当にHTMLを決めちゃいます。タブとタブの中身の id 属性に統一ルールをつけるくらいかな。
あとは、タブの中身は最初は非表示にすることにします。

1
2
3
4
5
6
7
<span id="tab1" class="tab">タブ1</span>
<span id="tab2" class="tab">タブ2</span>
<span id="tab3" class="tab">タブ3</span>
<br style="clear: left;" />
<div id="target-tab1" class="target" style="display: none;">タブ1の内容</div>
<div id="target-tab2" class="target" style="display: none;">タブ2の内容</div>
<div id="target-tab3" class="target" style="display: none;">タブ3の内容</div>

jQueryでタブにロールオーバーやクリックのアクションを指定します。大まかに下記のような流れにします。

1
2
3
4
5
6
7
$('span.tab').mouseover(function(){
// マウスオーバー処理
}).mouseout(function(){
// マウスアウト処理
}).click(function(){
// クリック処理
});

タブの挙動は背景画像を入れ替えて対応することにします。
jQueryではマウスオーバーなどのイベントから対象となるDOMを拾ってこれるので、これを利用します。
※大体は this で間に合う事も多いですが

1
2
3
4
$('span.tab').mouseover(function(e){
  var target = e.currentTarget;
  $(target).css('background-image', 'url("tab_mouseover.png")');
});

マウスアウトもだいたい同じ。やってることは show / hide の時とほとんど同じ。
タブクリックで中身を展開します。展開には slideUp / slideDown を使います。今回は展開する対象が複数あるので、今どれが開いているかを変数 current で管理することにします。クリックされた状況に合わせて処理を分岐します。

1
2
3
4
5
6
7
8
9
10
11
12
13
$('span.tab').click(function(e){
  var target = e.currentTarget;
  if (current == target.id) {
    // 開いているタブをクリックした場合は閉じる
    current = false; // すべて閉じている
  } else if (current) {
    // 他のタブが開いている場合は、閉じてから対象のタブを開く
    current = target.id; // クリックしたタブが開いている
  } else {
    // タブが全てとじている場合は、対象のタブを開く
    current = target.id;
  }
});

タブを閉じるアニメーションが完了してから開く様な処理は jQuery で次のように指定します。

1
2
3
$('#target-' + current).slideUp('fast', function(){
  $('#target-' + target.id).slideDown('slow');
});

こんな感じでアニメーション(今回はslideUp)の引数に関数を渡すと、処理が完了してから実行してくれます。
サンプル

色のもつイメージ

すごく今更感あるテーマだけど、大事なことなのでメモ。
サイトのテーマカラー決めるときに参考になれば。

  • レッド
    活発、エネルギー、情熱、衝撃、勇気、積極的
    ※あんまり多用するとイライラするかも
  • オレンジ
    躍動感、親しみ、暖かい、健康的、自信、フレッシュ
  • イエロー
    健康的、鮮やかさ、元気、上昇志向、天真爛漫、希望
    ※危険や幼稚というイメージもあるので注意
  • グリーン
    安らぎ、癒し、ナチュラル、新鮮、平穏、安全
    ※無難だが消極的な印象にならないように
  • ブルー
    清涼感、クール、信頼、誠実、静寂
    ※青は色合いによってかなりイメージ変わる
  • パープル
    高貴、神秘的、セクシー、優雅、治癒
    ※高級感のある色だが、ストレスのある人が好む傾向にある色でもあるらしい
  • ビンク
    優しい、可愛い、ロマンティック、リラックス、幸福
  • ブラウン
    素朴、落ち着き、生命の源、伝統、安心
    ※大地のイメージがありグリーンより強い癒しの印象があるが、地味で古風な面もある
  • グレー
    都会的、保守的、堅実、老いた
    ※メインには使いにくいかな…
  • ブラック
    高級、硬い、不安、暗い、フォーマル
    ※高品質な印象もありつつ、重苦しい雰囲気も。背景に使うこともまれにあるが可能なら避けたい
  • ホワイト
    純粋、無垢、清潔
    ※基本背景色にしか使わないけど、白が占める割合が多すぎると眩しく感じる

これに加えてトーンや配色でもイメージが変わってきます。
インテリアとかだとさらに素材や質感、手触りなども併せてテイストを決めたりします。
革や金属を使って高級感を演出したり、細くて背の高い家具を組み合わせて軽さを演出したり。

Webならば同業他社と差別化したり、ターゲットとなるユーザによって色を決めるなど様々な要素が絡んでくるので、クライアントの主観に偏らないよう注意が必要ですね。
サイトを見るのはクライアントではなかったりしますので。

よくあるWordPress / カテゴリ別で画面遷移したい時

WordPressをCMSちっくに使うときに、「お知らせ」「お客様の声」とかでカテゴリ分けして、それぞれ /news, /voice みたいに出来ないかなと思い少し調べてみた。
今まで複数ブログ立てたり、ネットワークモードとかで何とかならんかと試行錯誤していたのだが、意外と簡単に出来た。

ブログを個別表示した際、ベージナビゲーションがカテゴリにまたがってしまうので、single.php の previous_post_link と next_post_link に 3 番目の引数として true を与えると解決します。
それぞれ上下2箇所ずつあります。

1
2
in_same_cat
    (論理値) 表示している記事と同じカテゴリーの次の記事を表示するかどうかを設定します。TRUE の場合、同じカテゴリーの記事だけが表示されます

next_post_link

あとは管理画面から「パーマリンク設定」で「一般的な設定」をカスタム構造にして、/%category%/%post_id%/ とか /%category%/%postname%/ とかで見えるようになります。
WordPressのページ機能とカブらないように注意!