Archive for 7月, 2010

クライアント証明書による認証がかかったサイトへのアクセス

ssl

あまりご縁がないので、あれ?どうすればいいんだっけと迷ってしまった。
こういうときは、すぐメモメモ。
クライアント証明書による認証がかかっているということは『クライアント証明書』が手元にあるということなので、まずはこれを確認。
手元には『Mdev-YYYYMMDD.pfx』というファイルがありました。中はバイナリでした。
 
これを Firefoxにぶち込みます。
ツール > オプション > 詳細 > 暗号化 > 証明書を表示 > あなたの証明書 > インポート で、パスワード(秘密キー)を聞かれますから、入力すれば、OKです。
簡単ですね。

EC-CUBE:決済モジュールの組込み

eccubelogo

EC-CUBEに決済モジュールを組み込むときの手順。
あまり公開しているサイトがないので、どうしてかなぁ?と思いつつ、もしかしたら守秘義務うんたらかんたらが関係あるかもしれないので、とりあえず、どこの会社の決済モジュール組込みかは特定しないで手順のみメモ。

  1. EC-CUBE OWNERS STOREの会員になる。そうすると、オーナーズストア認証キーが送られてくる。これが必要。
  2. オーナーズストアの決済サービスから自分が入れたい決済モジュールを選択。ダウンロード無料。
  3. EC-CUBE管理画面の『OWNERS STORE』で認証キー設定をしたうえで、購入商品一覧から自分が購入した決済モジュールを選択してダウンロード。続いて設定したいところだが、インストールが済んでないとダメなので後回し。
  4. ここからは、○○決済モジュールのインストール。cURL関数を使っているから、PHPで使えるようにしておけと。
  5. うちの php5.2.6-3ubuntu4.5 では curlが入っていなかったので、まずこれを入れる。PHPが –with-curl[=DIR] をつけたコンパイルしてあるかどうかは後で確認。
    # apt-get install php5-curl
    # /etc/init.d/apache2 restart
    
  6. これで PHPから cURL関数が使えるようになったかどうか、簡単なテストコードを書いてみる。
    
    

    ちゃんとログファイルにHTMLが書かれたので OKっぽい。(logディレクトリは、www-data:www-data にしておくか、777にしておかないと Permissionエラーになるよ)

  7. ○○決済モジュールで用意された PHP版モジュールをサーバへコピー。
    eccube-2.4.4/data/downloads/module/mdl_○○ の下にPHP版モジュールをごっそりと。オナ―はwww-data:www-data にしておかないとたぶんダメ。
  8. php.ini に include_path を追加する。(どこの php.ini を使用しているかは、phpinfo()のLoaded Configuration Fileを見ること)
    # e /etc/php5/apache2/php.ini
    include_path = ".:/usr/share/php:/usr/share/pear:/home/www/eccube-2.4.4/data/downloads/module/mdl_○○"
    
  9. ○○決済モジュールの接続モジュール用パラメータを設定(modenv_properties.php)

    # cd /home/www/eccube-2.4.4/data/downloads/module/mdl_○○
    # e modenv_properties.php
    
    ○○B2Bmodule.client_file_path=/home/www/eccube-2.4.4/data/downloads/module/mdl_○○/client_mdev_20090123.pem
    ○○B2Bmodule.ca_file_path=/home/www/eccube-2.4.4/data/downloads/module/mdl_○○/curl-ca-bundle.crt
    ○○B2Bmodule.log_output_path=/home/www/eccube-2.4.4/data/downloads/module/mdl_○○/connectmodule.log
    
  10. ここまで終わったら、以下の2ファイルのオナ―を変更しておきます。(○○決済モジュール設定時に、SPSモジュール連携用に新たに書き加えられた部分を削除するようです)
    /home/www/eccube-2.4.4/html/shopping/load_payment_module.php
    /home/www/eccube-2.4.4/html/mobile/shopping/load_payment_module.php
    
  11. EC-CUBE管理画面の『OWNERS STORE』で購入商品一覧から○○決済モジュールの『設定』を選択します。ここまでちゃんとやれれば、エラーなくOKがでるはず。

※ 以上は、トライ&エラーの経過を記録したもので、○○決済モジュールのインストールのアドバイスはできません。エラーがでたときは素直に決済会社のサポートに聞きましょう。

jQuery:later

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を止めてしまえ、です。フェードの途中でも有無を言わさず止まってしまって面白いです。

jQuery:LavaLamp

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:CrossSlide

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を大きくすると、すぐエラーで怒られたりするので、使い方がちょっと難しいけど、まぁ、お手軽です。

SQL:CASE WHEN

 
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:巧妙な手口?

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:メディア追加のときのタグ編集

wordpress_logo

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

  • <div class=”img-shadow”></div>を追加
  • <a>タグを削除
  • <img src=”">の http://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>でくくって、いろんなものを削除ということです。

スタイル・チェンジ

obama

「わかっちゃいるけど、止められない」じゃなくて、「わかっていても、できない」ことが多いので、いまさらながら、Life is beautifulの「私のとっておきのプログラミングスタイル」に感化されて、自分なりの指針をまとめておく。

  1. スタードダッシュ重要
    最初の二週間で八割がたの目途をつける。
  2. 仕事を「タスク」に細分化
    「タスク」は、半日から三日ぐらいでできるもの。最初にすべきものほど明確に定義し、後でやるものはある程度曖昧にしておく。
  3. 一日の始めに「今日やるマイクロタスク」のリストを作る
    「マイクロタスク」は、うまく行けば15分ぐらいで、なかなかうまく行かなくても二時間ぐらいで完成できるもの。
    そんなマイクロタスクを数個から十数個並べたリストを書いて、例えば「今日は7つを絶対終える。余裕があったら次の2つもこなす」と自分で宣言する。
  4. マイクロタスクは「割り込み禁止状態」で
    マイクロタスクは「決して他の仕事を間に挟んではできない仕事」と覚悟して、全力疾走でこなすこと。
arigato

ということで、自分にプレッシャーを与えるつもりで、Google Docsにタスクリストを公開してみた。もちろん、お客様の名前やプロジェクトの詳細はイニシャルになっている。

PostgreSQL:いろいろ Tips

 
INSERTで「nonstandard use of \\ in a string literal」というエラーが出たとき。
シングルコートを「E’」にすれば OK。「E’C:\\hogehoge.txt’」
 
PostgreSQLで INSERT直後の主キーの値をとりたいとき。

SELECT currval(pg_catalog.pg_get_serial_sequence('test_table', 'pkey'))

SELECT lastval()

下の方は同じセッション内でとるとき。次のやつは nextvalでとる。

SELECT nextval(pg_catalog.pg_get_serial_sequence('test_table', 'pkey'))

EC-CUBEでは関数が用意されているので、それを使うのが吉。(でないと、MySQLになったとき動かない)
 
ついで。PostgreSQLのユーザ設定。GRANTはテーブル単位しかかけられないって知ってました?
オートインクな主キーのあるテーブルは、シリアルキーのテーブルの方も grantしとかないとエラーになるので要注意。
 
も一つついでに。Ruby + DBI + Postgresでなにかやろうとしたときは、「Ruby DBI モジュールを使う」は必見。

次ページへ »