ググったこと（1）

シリーズものとして連載予定。
ググったものを淡々と記録していくよ。
ある程度の長さになるまで追記していくよ。

/作成者:

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

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. ここまで終わったら、以下の２ファイルのオナ―を変更しておきます。（○○決済モジュール設定時に、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 がウザいから１回で止めてくれと、お客様じゃなくて社内から声が。あんたが入れろって言ったんじゃんか！と喉元まで出かかった言葉を呑み込んで、ハイハイと素直に答える優しい技術者。
でも、ソースを読んでも、止める方法が書いてない。

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

/作成者: