ホームページ制作関連の技術ネタを備忘録的にまとめています

スマートフォンサイトでは、PCサイトとは違いマウスがありませんのでロールオーバー効果は表現できませんが、タップしたときにロールオーバーのような効果をつけることはスマホサイトでも可能です。

検索してもaddClass()やremoveClass()を使用したclass操作だったり、background-imageを利用した操作だったりと手間がかかるため簡単に画像を差し替えられるスクリプトを作成しました。

<img>にclassを設定するだけで、タップしたときに画像が切り替わります。

スクリプトは下記になります。
rollover.jsのような名称を付けたファイルに保存しておいて、使用するときはjQueryと一緒に読み込むようにするとソースもすっきりします。

プリロード機能もあるので、手間いらずです。

//ロールオーバー用画像のプリロード

$(function(){
$(“.rollover”).each(function(){
if(String($(this).attr(“src”)).match(/_off\.(.*)$/)){
var img = new Image();
img.src = String($(this).attr(“src”)).replace(/_off\.(.*)$/,”_on.$1″);
}
});
});

//_offと_onを切り替える

$(function(){
$(“.rollover”).bind(“touchstart”,function(){
$(this).attr(“src”,$(this).attr(“src”).replace(“_off.”, “_on.”));
});
$(“.rollover”).bind(“touchend”,function(){
$(this).attr(“src”,$(this).attr(“src”).replace(“_on.”, “_off.”));
});
});

【使い方】

jQueryと上記のソースを外部ファイル化（rollover.js）したものを読み込んで、イメージにクラスを指定するだけです。

その際、画像のファイル名は、「_off.拡張子」というように、「_off」のついた名称にする必要があります。

<img src=”hogehoge_off.jpg” class=”rollover”>

SSL3.0のプロトコルについて、新たな脆弱性「POODLE」が確認されたという事で、その対応を行ったので備忘録としてまとめておきます。
使用していたサーバーは使えるネットのVPSシルバープランです。

まず、SSL3.0が有効なのか無効なのかを調べてみました。
コマンドは下記のとおりです。

openssl s_client -ssl3 -connect [サイトのドメイン名]:[ポート]

無効な場合は、以下のようなエラーになりますので、この場合は対応しなくて大丈夫です。

SSL routines:SSL3_READ_BYTES:sslv3 alert handshake failure:
/xx/src/ssl/s3_pkt.c:xxxx:SSL alert number 40
SSL routines:SSL3_WRITE_BYTES:ssl handshake failure:/xx/src
/ssl/s3_pkt.c:xxx:

私の環境は有効な状態でしたので、対応してみます。
私の場合は、apacheなので、apacheの設定ファイルを以下のように修正します。

まず、/etc/httpd/conf.d/ssl.confのバックアップをとって、
ssl.confを見てみますと下記のような記述がありましたのでその部分を変更します。

【変更前】
#SSLProtocol all -SSLv2

↓

【変更後】
SSLProtocol all -SSLv2 -SSLv3

あとはapacheを再起動して、最初のコマンドで確認してみると
無事に無効化されていました。

QRコードの生成プログラムを作りたかったので、Pearの「Image_QRCode」を使いたかったのでインストールしてみました。

使用するサーバーは、さくらインターネットのスタンダードプラン。

以前、他のサーバーで行った方法と同じ、go-pear.phpを利用したインストールを行ってみました。

1）http://pear.php.net/go-pear　の内容をgo-pear.phpという名前で保存

2)FTPソフトを使用して、サーバー内にアップロードします。

3）アップロードしたgo-pear.phpにブラウザでアクセス。

4）画面に従って進めていき、2箇所だけ設定

1のInstallation prefixは、/home/（アカウント名）/pear

11のphp.ext pathはさくらインターネットの場合「/usr/local/bin/php」

ここで、どうしても、21％から先に進んでくれません。

調べてみると、go-pear.php自体に問題があるらしく、下記のサイトからgo-pear.phpをダウンロードしたら無事に完了しました。

http://d.hatena.ne.jp/furyu-tei/20140501/1398940857

5）次にシェルで.cshrcにパスを設定する

私の場合、Tera Termで、$HOMEで、ホームディレクトリに行き、.schrcをviで編集しました。

set pathの末尾に「$HOME/（インストールフォルダ名）/bin」を追記。
（私の場合は$HOME/pear/bin）

6）これでPearのインストールは完了です。

次に今回必要なパッケージ「Image_Qrcode」をインストールします。
安定版（stable）が無いようですので、下記のコマンドでインストールします。

pear install channel://pear.php.net/Image_QRCode-0.1.3

すると、下記のようなエラーが！

Cannot install, php_dir for channel “pear.php.net” is not writeable by the current user

pear config-showで設定を確認すると、さくらインターネットの共用部分を指していますので、

私の場合、下記のコマンドでディレクトリを変更することで、無事にインストールできました。
pear config-set php_dir /home/（アカウント名）/pear
pear config-set data_dir /home/（アカウント名）/pear/PEAR/data
pear config-set doc_dir /home/（アカウント名）/pear/PEAR/docs
pear config-set test_dir /home/（アカウント名）/pear/PEAR/tests

7）最後に、さくらインターネットのコントロールパネルでphp.iniを変更します。

include_path=”.:/usr/local/php/5.3/lib/php:.:/home/（アカウント名）/（PEARインストールフォルダ名）”
デフォルトのインクルードパスと、今回Pearをインストールしたパスを:（コロン）でつなげて複数指定します

以上で、無事に「Image_QRCode」を使う事が出来ました。

ECCUBEの商品画像を増やすカスタマイズを行ったので、備忘録として方法をまとめます。
ECCUBEのバージョンは2.13.2で、使用しているサーバーは使えるネットのVPSサーバーです。

とりあえず、10点まで登録できるようにしてみました。

（1）データベースに格納する領域を確保
phpMyAdminを使用します。
dtb_productsテーブルを見ると、写真６までのフィールドがあるので、
７から追加していきます。
まず、以下のSQLを実行。

ALTER TABLE dtb_products ADD COLUMN sub_title7 text;
ALTER TABLE dtb_products ADD COLUMN sub_comment7 text;
ALTER TABLE dtb_products ADD COLUMN sub_image7 text;
ALTER TABLE dtb_products ADD COLUMN sub_large_image7 text;
ALTER TABLE dtb_products ADD COLUMN sub_title8 text;
ALTER TABLE dtb_products ADD COLUMN sub_comment8 text;
ALTER TABLE dtb_products ADD COLUMN sub_image8 text;
ALTER TABLE dtb_products ADD COLUMN sub_large_image8 text;
ALTER TABLE dtb_products ADD COLUMN sub_title9 text;
ALTER TABLE dtb_products ADD COLUMN sub_comment9 text;
ALTER TABLE dtb_products ADD COLUMN sub_image9 text;
ALTER TABLE dtb_products ADD COLUMN sub_large_image9 text;
ALTER TABLE dtb_products ADD COLUMN sub_title10 text;
ALTER TABLE dtb_products ADD COLUMN sub_comment10 text;
ALTER TABLE dtb_products ADD COLUMN sub_image10 text;
ALTER TABLE dtb_products ADD COLUMN sub_large_image10 text;

すると、dtb_productsテーブルの末尾に新たなフィールドが作成されます。

（2）/data/class/SC_Product.phpの修正
alldtlSQL関数内に下記を追加

,dtb_products.sub_title7
,dtb_products.sub_comment7
,dtb_products.sub_image7
,dtb_products.sub_large_image7
,dtb_products.sub_title8
,dtb_products.sub_comment8
,dtb_products.sub_image8
,dtb_products.sub_large_image8
,dtb_products.sub_title9
,dtb_products.sub_comment9
,dtb_products.sub_image9
,dtb_products.sub_large_image9
,dtb_products.sub_title10
,dtb_products.sub_comment10
,dtb_products.sub_image10
,dtb_products.sub_large_image10

（3）ECCUBEの管理画面の設定を変更する
EC-CUBE管理画面＞システム設定＞パラメーター設定　の
PRODUCTSUB_MAX を10に変更

ECCUBEの変更箇所は以上の通りです。

ただ、私の環境では、９枚目以降の登録ができませんでした。
これは、サーバーのmax_file_uploadsの値が20になっていた為のようです。
私の場合は、PLESKにログインして「PHP設定」のページの一番下にある
「追加ディレクティブ」の入力ボックス内に
max_file_uploads = 100
と設定することで、９枚目以降の画像も登録できるようになりました。

Bashの脆弱性が見つかったというメールがサーバ会社から来たので、早速対応しました。
今後の為に、対応策をメモしておきます。

まず、SSHでログインして、下記のコマンドを入力して確認しました。
env x='() { :;}; echo vulnerable’ bash -c “echo this is a test”

脆弱性ありの場合、以下のようになります。

# env x='() { :;}; echo vulnerable’ bash -c “echo this is a test”
vulnerable
this is a test

やはり問題があるようなので、yumでアップグレードします。

# yum update bash

そうすると、アップグレードするbashのダウンロードをするか聞いてきますので
「y」キーを押して、ダウンロードとインストールを続行します。

Complete!とメッセージがでたらインストール終了なので、最後に
/sbin/ldconfig　と入力して共有ライブラリの依存関係情報を更新しておきます。

尚、私の使用しているサーバはCentOSです。