jquery

例の CrossSlide がウザいから1回で止めてくれと、お客様じゃなくて社内から声が。あんたが入れろって言ったんじゃんか!と喉元まで出かかった言葉を呑み込んで、ハイハイと素直に答える優しい技術者。
でも、ソースを読んでも、止める方法が書いてない。

$.fn.crossSlideFreeze = function()
{
    this.find('img').stop();
}

crossSlideFreezeという関数を呼べば止まるみたいだけど、どうやって呼べばいいんだ?
スライドに飽きたら[Stop]ボタンをユーザに押してもらうか。そんなバカな。
ということで、ある程度時間が経ったら止めることにしました。

(function($) {
	$.fn.later = function(arg, fn) {
		var self = this;
		var timer = setTimeout(function() {
			clearTimeout(timer);
			self.each(fn);
		}, arg);
		return self;
	};
})(jQuery);

こういうのを外部ファイル(例えば、jquery.later.js)に置いておいて、こんな風にします。

<script type="text/javascript" src="/js/jquery.later.js">

  jQuery(function($) {
    $('#gallery1').later(80000, function() {
       $(this).find('img').stop();
    });
  });

80秒経ったら、gallery1のすべての imgを止めてしまえ、です。フェードの途中でも有無を言わさず止まってしまって面白いです。

lavalamp

LavaLampと書いてもピンときませんよね。
グローバル・ナビゲーションで、マウスをもっていくと、ビヨーンと背景ブロックが追っかけてくるやつです。
こう書いてもきっとわかりませんね。
 
lavalamp1
こんなやつです。使い方。
頭で指定しておくのはお決まり。ULにメニューを書いていきます。
下の例は、ULの背景にメニュー画像を置いて、その上を透過パネル(少し斜がかかったもの)が移動するようにしたものです。
メニュー画像を載せられればわかりやすいんだけど、今制作中のお客様のやつなんでね。


<script type="text/javascript" src="/js/jquery.lavalamp.js">
<script type="text/javascript" src="/js/jquery.easing.1.1.js">

  jQuery(function($) {
    $("#nav1").lavaLamp(
      {
        fx: "backout",
        speed: 700
      }
    );
  });

<ul class="lavaLampNoImage">
    <li class="current"><a href="#">MENU</a></li>
    <li><a href="/party/">PARTY PLAN</a></li>
    <li><a href="/access/">ACCESS</a></li>
    <li><a href="/contact">CONTACT</a></li>
</ul>
.lavaLampNoImage {
	background:#fff url(images/top-menu.png) no-repeat;
	width: 898px;
	height: 78px;
	position: relative;
	overflow: hidden;
	padding:1px;
	margin: 0;
	border: none;
}
.lavaLampNoImage li {
	margin:0;
	padding:0;
	float: left;
	list-style: none;
}
.lavaLampNoImage li.back {
	position: absolute;
	z-index: 8;
	height: 76px;
	background-color:#fff;
	opacity:0.2;
	filter:alpha(opacity=20);
	-ms-filter:"alpha( opacity=20 )";
}
.lavaLampNoImage li a {
	position: relative;
	z-index:10;
	display:block;
	overflow: hidden;
	float: left;
	height: 76px;
	font-size:8px;
	color:#C1955C !important;
	text-decoration:none;
}
.lavaLampNoImage li a:hover, .lavaLampNoImage li a:active, .lavaLampNoImage li a:visited {
	border:none;
}
#nav1l1, #nav1l1 a { width:152px;	}
#nav1l2, #nav1l2 a { width:197px; margin-left:2px;	}
#nav1l5, #nav1l5 a { width:121px; margin-left:2px;	}
#nav1l6, #nav1l6 a { width:123px; margin-left:2px;	}
jquery

 
大きな画像を上下左右にスライドさせて表示するプラグイン。
Ken Burns effectみたいにグイングインさせるのではなく、up、downにゆるゆると動かしてフェードみたいな感じが使いたくて。
使い方は割と簡単。
注意点は、jquery.js?ver=1.2.6 だと動かなかったこと。jQuery.isEmptyObject()を使っているので、1.4 over じゃないとダメみたいね。


&lt;script type=&quot;text/javascript&quot; src=&quot;/js/jquery.cross-slide.js"&gt;

  jQuery(function($) {
    $('#gallery1').crossSlide(
    {
      speed: 15, //in px/sec
      fade: 4    //in sec
    },
    [
      { src: '/tops-1.jpg', dir: 'up'   },
      { src: '/tops-2.jpg', dir: 'down' },
      { src: '/tops-3.jpg', dir: 'up'   }
    ]
  );
});

$tmp、$imgはそれぞれのディレクトリを適宜セットすること。
使いたいところに、#gallery1 を書いて、cssは width と height だけ指定しておけば、OK。

<div>Now Loading ...</div>
#gallery1 {
	width:900px;
	height:388px;
}

ウィンドウサイズより画像の方が小さかったり、fadeを大きくすると、すぐエラーで怒られたりするので、使い方がちょっと難しいけど、まぁ、お手軽です。

 
PostgreSQLだけというわけじゃなくて、いまのいままで(自分が)知らなかったのがびっくりというネタ。
それは、SQL文での CASE式。昔々、Accessで IIF(三項演算子)は使ったことがあったけど、SQLに IIFがないというのも、これを書こうと思って、ググって知ったくらい。

SELECT name, CASE sex WHEN 1 THEN '男' WHEN 2 THEN '女' ELSE '未記入' END as sex
FROM test_tbl

ほかの使い方はこちら「SQL の CASE 式って知ってますか?」参照。

SELECT count(*),
  CASE code WHEN 'M' THEN '男性' WHEN 'F' THEN '女性' ELSE 'オカマ?' END
FROM table1 GROUP BY code;

SELECT
 SUM( CASE WHEN code = 'M' THEN 1 ELSE 0 END ),  -- 男性の人数
 SUM( CASE WHEN code = 'F' THEN 1 ELSE 0 END )   -- 女性の人数
FROM table1;

CONSTRAINT check_salary  -- 平社員は給与が20万円以下という制約の例
 ( CASE WHEN code = '平社員' THEN 
   CASE WHEN salary = 100000 THEN 販売価格 * 0.9 ELSE 販売価格 END;
twitter_logo_header

Twitterを使った巧妙なダイレクトセールスじゃないかな?と思われる販売手法があったのでメモ。
もちろん、なにかを買ったわけではないけど、「これは使えるかもね、むふふ」という感じなので。

  1. WordPressの公式Twitterをフォローした
  2. LONDONの TipsOnWordpressからフォローされる
  3. 見に行ってみると女性がやってるらしい
  4. LONDON+female+WordPressTips ということで即フォロー返し
  5. 「フォローしてくれて、ありがと」というメッセージとともに、Tutorial Video販売のURLが送られてくる。 ←いまココ
  6. がんがんDMが来るようなら、アンフォロー。そうでなければ放置

アイディアとして秀逸だなと思うところは、

  • WordPress公式Twitterのフォロワーをモニタしてるとこ ← ターゲッティングが明確
  • Twitter-ID「TipsOnWordpress」がいかにも技術系っぽくて好感が持てるとこ ← 警戒感を抱かせない
  • LONDONという地名がなんとなくいい ← 本当かどうかはわからない
  • やってるのが笑顔の女性というところも技術系との落差を感じてGood。別な意味でもGood ← 本当かどうかはわからない

自分が売りたいもの(物販、情報、集客、認知等)があって、それに興味を持ちそうな人が集まるTwitterのフォロワーに対して、上手にダイレクト・メッセージを送るという手法は、SPAMと紙一重だけど、やり様によってはアリかも。

wordpress_logo

あとであとでと思っているといつまでたってもやらないので、思い立ったときにやってみたシリーズ。
「メディアを追加」ボタンで画像を投稿エディタへ挿入してから、毎回毎回手作業で次のようなことをしてました。(自分使用&仕様)

  • <div class=”img-shadow”></div>を追加
  • <a>タグを削除
  • <img src=””>の https://dev.satake7.net を削除。titleも削除。altは空に。classも削除

それをフィルタ一発でやったろーぜというわけです。参考にさせていただいたのは「WordPress のエディタに埋め込むメディア用タグを自動編集する」。
きっとこっちを見た方がわかりいいと思うので、自分でやったとこだけメモ。

function add_image_send_to_editor($html, $id, $alt='', $title='', $align='', $url='', $size='') {
 $wk_html    = "";
 if (preg_match("/^<a>]*?&gt;.*?$/i", $html)) {
   $wk_html .= '<div class="img-shadow">'.preg_replace("/^<a>]*?&gt;(.*?)$/i", "$1", $html).'</div>';
   $wk_html  = preg_replace('/(title=".*?"|class="align.*"|http:.*satake7.net)/i', "", $wk_html);
 }

<a>タグだったら、<div class=”img-shadow”></div>でくくって、いろんなものを削除ということです。