システム開発おぼえがき

nginx + Apacheで20万PV/日を捌く

2015-10-07T09:08:00.000+09:00

GMOクラウドVPSの2GBプランで運営しているWordPressサイトがあるのですが、5万PV/日を超えてだんだん重くなってきたので4GBプランに移行しました。
■これまでの経緯
・Apache：2GBプランだと2万PV/日くらいで厳しくなる（メモリ不足）
・nginx：5万PV/日を超えたあたりで重くなる（ロードアベレージが高すぎる）

chibiegg日誌を参考に、バックエンドの処理をApache、フロントエンドの処理をnginxにさせて負荷軽減を目指します。

Apacheの設定

不要っぽいモジュールは読み込まないようにします。8080ポートで動くように変更します。

/etc/httpd/conf/httpd.confの一部

StartServers       8
MinSpareServers    5
MaxSpareServers   15
ServerLimit      40
MaxClients       40
MaxRequestsPerChild  1000

Listen 8080

#LoadModule auth_basic_module modules/mod_auth_basic.so
#LoadModule auth_digest_module modules/mod_auth_digest.so
#LoadModule authn_file_module modules/mod_authn_file.so
#LoadModule authn_alias_module modules/mod_authn_alias.so
#LoadModule authn_anon_module modules/mod_authn_anon.so
#LoadModule authn_dbm_module modules/mod_authn_dbm.so
#LoadModule authn_default_module modules/mod_authn_default.so
LoadModule authz_host_module modules/mod_authz_host.so
LoadModule authz_user_module modules/mod_authz_user.so
#LoadModule authz_owner_module modules/mod_authz_owner.so
#LoadModule authz_groupfile_module modules/mod_authz_groupfile.so
#LoadModule authz_dbm_module modules/mod_authz_dbm.so
#LoadModule authz_default_module modules/mod_authz_default.so
#LoadModule ldap_module modules/mod_ldap.so
#LoadModule authnz_ldap_module modules/mod_authnz_ldap.so
LoadModule include_module modules/mod_include.so
LoadModule log_config_module modules/mod_log_config.so
LoadModule logio_module modules/mod_logio.so
LoadModule env_module modules/mod_env.so
LoadModule ext_filter_module modules/mod_ext_filter.so
LoadModule mime_magic_module modules/mod_mime_magic.so
LoadModule expires_module modules/mod_expires.so
LoadModule deflate_module modules/mod_deflate.so
LoadModule headers_module modules/mod_headers.so
LoadModule usertrack_module modules/mod_usertrack.so
LoadModule setenvif_module modules/mod_setenvif.so
LoadModule mime_module modules/mod_mime.so
#LoadModule dav_module modules/mod_dav.so
LoadModule status_module modules/mod_status.so
LoadModule autoindex_module modules/mod_autoindex.so
LoadModule info_module modules/mod_info.so
#LoadModule dav_fs_module modules/mod_dav_fs.so
LoadModule vhost_alias_module modules/mod_vhost_alias.so
LoadModule negotiation_module modules/mod_negotiation.so
LoadModule dir_module modules/mod_dir.so
#LoadModule actions_module modules/mod_actions.so
#LoadModule speling_module modules/mod_speling.so
#LoadModule userdir_module modules/mod_userdir.so
LoadModule alias_module modules/mod_alias.so
LoadModule substitute_module modules/mod_substitute.so
LoadModule rewrite_module modules/mod_rewrite.so
LoadModule proxy_module modules/mod_proxy.so
LoadModule proxy_balancer_module modules/mod_proxy_balancer.so
#LoadModule proxy_ftp_module modules/mod_proxy_ftp.so
#LoadModule proxy_http_module modules/mod_proxy_http.so
#LoadModule proxy_ajp_module modules/mod_proxy_ajp.so
#LoadModule proxy_connect_module modules/mod_proxy_connect.so
LoadModule cache_module modules/mod_cache.so
LoadModule suexec_module modules/mod_suexec.so
LoadModule disk_cache_module modules/mod_disk_cache.so
LoadModule cgi_module modules/mod_cgi.so
LoadModule version_module modules/mod_version.so

NameVirtualHost *:8080


        ServerName example.com
        DocumentRoot /home/example.com/html/
        CustomLog       /home/example.com/logs/access8080.log combined
        ErrorLog        /home/example.com/logs/error8080.log

nginxの設定

ポート80で待ち受けてキャッシュ。キャッシュになければ8080に飛ばします。（キャッシュのサイズはどれくらいがいいか分からなかったので適当）
また、wp-adminへの不正アクセスがあるのでIP制限をします。
（記事をスクレイピングされることもあるので、スクレイピングサイトからのアクセスも弾く） /etc/nginx/conf.d/default.conf

proxy_cache_path /var/cache/nginx/static_file_cache levels=1:2 keys_zone=cache_static_file:128m inactive=7d max_size=10g;
proxy_temp_path /var/cache/nginx/temp;

upstream backend{
    server 127.0.0.1:8080;
}

server {
    listen       80;
    server_name  localhost;

    location ~ wp-login\.php$|xmlrpc\.php$|wp-admin/((?!admin-ajax\.php).)*$ {
        allow 許可するIPアドレス;
        allow このサーバーのIPアドレス;
        allow 127.0.0.1;
        deny all;

        proxy_set_header Host $host;
        proxy_set_header X-Real-IP $remote_addr;
        proxy_set_header X-Forwarded-Host $host;
        proxy_set_header X-Forwarded-Server $host;
        proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
        proxy_pass http://backend;
    }

    location / {
        proxy_redirect off;

        set $do_not_cache 0;
        if ($request_method != GET) {
            set $do_not_cache 1;
        }
        if ($uri !~* ".(jpg|png|gif|jpeg|css|js|swf|pdf)$") {
            set $do_not_cache 1;
        }
        proxy_no_cache $do_not_cache;
        proxy_cache_bypass $do_not_cache;
        proxy_cache cache_static_file;
        proxy_cache_key $scheme$host$uri$is_args$args;
        proxy_cache_valid 200 2h;
        proxy_cache_valid any 1m;

        proxy_set_header Host $host;
        proxy_set_header X-Real-IP $remote_addr;
        proxy_set_header X-Forwarded-Host $host;
        proxy_set_header X-Forwarded-Server $host;
        proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
        proxy_pass http://backend;

    }
    deny スクレイピングサイトのIPアドレス;
    allow all;
}

MySQLの設定

上記で運用してみるとMySQLのCPU使用率が高かったので、クエリキャッシュを増やしてみました。
/etc/my.confの一部

query_cache_size=256M
query_cache_limit=16M

mod_rpaf

このままだと、Apacheのアクセスログは常に「127.0.0.1」となってしまいます。
Qiitaさんのブログを参考に、mod_rpafをインストールしました。

上記設定で、ピーク時（Google Analyticsで見たアクティブユーザー400人）でもロードアベレージは2くらいになりました。
このままで20万PV/日くらいまでならこなせると思います。
・php.iniでメモリを減らす
・MySQLをMyISAMからInnoDBに変更
・Apache, nginxのプロセス数調整
などをすればもう少しいけるかも？

中規模Webサーバーの設定

2015-06-13T08:23:00.000+09:00

メモリ2GBのVPSにCentOS 6.6を入れましたが、数万PV/日で遅くなったり、アクセスの多い時間帯にメモリ不足で落ちたりすることがありました。

チューニングしてしばらく様子を見てみます。

php.ini

memory_limit = 64M

標準では128MBですが、64MBにしました。本当は32MB程度にしたかったのですが、WordPressが動かず断念。プラグインを見直したほうがいいかもしれない。

httpd.conf

KeepAliveTimeout 5
StartServers 8
MinSpareServers 5
MaxSpareServers 10
ServerLimit 20
MaxClients 20
MaxRequestsPerChild 1000

httpd 1プロセスで60MBくらいなので、60MB × ServerLimit 20 ＝ 1.2GB。
これくらいなら大丈夫？

参考サイト
格安サーバーで実際どれだけのPVを処理できるかを調べてみた
php + apache のメモリ量をおさえる

ORDER BYでNULLを最後に

2015-01-27T11:10:00.002+09:00

Microsoft SQL Serverで、ソート時にNULLを最後に持ってくる場合、CASE WHENを使うと便利です。

通常

ORDER BY コード

コード

NULL

A01

A02

B01

CASE WHENを使用

ORDER BY CASE WHEN コード IS NULL THEN 0 ELSE 1 END DESC, コード

コード

A01

A02

B01

NULL

htmltemplate.incがPHP5.3で動かない

2014-08-13T08:44:00.001+09:00

PHPのテンプレートエンジンは、Hiroshi Ayukawaさんが作成したhtmltemplate.incをよく利用しています。
非常にコンパクトなので習得も早く、また軽いのも特徴です。

http://sourceforge.net/projects/htmltemplate/

ただ、このソース内で使われている関数 split() がPHP5.3以降非推奨となりました。
http://php.net/manual/ja/function.split.php
そのため、PHP5.3以降では警告が表示されるようになります。

対応策１：split()関数を変更

htmltemplate.incを修正して、非推奨の関数を使わないようにします。

2箇所あるので、ここをexplode()に置き換えます。
split()とexplode()は正規表現を使えるかどうかの違いなんですが、今回正規表現は使っていないので、どちらでも書き方は変わりません。
$ar = split("/", $m);
の箇所を
$ar = explode("/", $m);
にすれば大丈夫です。

対応策２：php.iniの変更

そもそもこの警告が表示されるようになったのは、PHP5.3から新しく E_DEPRECATED というエラーレベルが追加されたためです。
E_DEPRECATEDは、将来のバージョンで動作しなくなる場合に出力される警告です。 http://php.net/manual/ja/errorfunc.constants.php

これを非表示にする場合、

(1)php.ini

error_reporting = E_ALL & ~E_NOTICE & ~E_DEPRECATED

(2).htaccess

php_value "error_reporting" "E_ALL & ~E_NOTICE & ~E_DEPRECATED"

(3)PHPソース

error_reporting(E_ALL ^ E_NOTICE ^ E_DEPRECATED);

または

ini_set("error_reporting", E_ALL^ E_NOTICE ^ E_DEPRECATED);

以上のいずれかの方法で、E_NOTICE と E_DEPRECATED が表示されなくなります。

オールドドメインの取得方法

2014-07-12T13:34:00.000+09:00

SEOランクを上げるためには、ページランク（PR）の高いオールドドメインを使うこともひとつの方法だそうです。
業者から購入すると高いので、（時間と手間はかかりますが）自分で取得する方法をまとめました。

期限切れドメインの検索

期限切れドメインはいくつかのサイトで検索できますが、以下が分かりやすいです。
Expired Domains

このサイトで、たとえば "Deleted .com Domains" を選択。

最近期限が切れた.comドメイン一覧が表示されるので、PRをクリックしてページランク順にソート。

右側の "Status" が "available" になっているものが、取得できる可能性があるドメインです。

ここで、なるべくたくさんピックアップしておきます。

取得できるかどうか

いくつかピックアップしたら、取得できるかどうかムームードメインで一括検索します。
ID登録すると一括検索できるようになります。（無料）

メニュー左上の「ドメイン一括取得」を選択して、さきほど調べたオールドドメインを入力します。

PR5以上のものはすでに取得されているものが多いんですが、PR3～4だと結構あるみたいです。

優良ドメインかどうか

次に、そのドメインが優良なのかどうか、主観になりますが、調べます。

SEOチェキを使うのが便利です。

SEOチェキでURLを入力すると、このような画面が出てきます。

ページランク偽装チェック
aguse.jp（マルウェア検出、ブラックリスト判定、運営者情報）で"SAFE"になっているか
「インデックス数」で、過去にどのようなサイトが運営されていたか
発リンク、被リンクはどうか

などをチェックして、ドメインの質を調べます。

特にアダルトやギャンブル関係に使われていたドメインは避けたほうが無難です。

Galaxy Nexus(SC-04D)をeclipseに認識させる

2014-05-07T10:27:00.002+09:00

Galaxy Nexusをeclipseに認識させるための覚え書きです。

android_winusb.infの編集

android-sdk\extras\google\usb_driver あたりにandroid_winusb.infがあるので、[Google.NTx86]と[Google.NTamd64]のセクションに以下を追加。

;Google GalaxyNexus
%SingleAdbInterface% = USB_Install, USB\VID_18D1&PID_4E30
%CompositeAdbInterface% = USB_Install, USB\VID_18D1&PID_4E30&MI_01
%CompositeAdbInterface% = USB_Install, USB\VID_18D1&PID_D001&REV_0216
%CompositeAdbInterface% = USB_Install, USB\VID_04E8&PID_6860&REV_0216&MI_01
%CompositeAdbInterface% = USB_Install, USB\VID_04E8&PID_6860&MI_01

ドライバーの認識

デバイスマネージャーでGalaxy Nexusに「！」が表示されている場合、ドライバーを更新する。
（上記android_winusb.infを指定）

Cordova(Phonegap)で、イメージをローカルに保存

2014-04-25T10:28:00.000+09:00

カメラや写真を画面に表示して、永続的（PERSISTENT）に保存するサンプルです。
（Cordova 3.4.1、Androidの場合）

fileプラグイン

イメージをPERSISTENTに保存するためには、ファイル関係の操作が必要になります。
コマンドラインからfileプラグインを導入しておきます。

cordova plugin org.apache.cordova.file

コーディング例

// id="camera_button"の箇所がタッチされた場合
$('#camera_button').touchend( function() {
 getImage( 'camera' );
}
// id="album_button"の箇所がタッチされた場合
$('#album_button').touchend( function() {
 getImage( 'album' );
}

function getImage( type ) {
 if(type == 'camera') {
  var options = {
   destinationType: Camera.DestinationType.FILE_URI,
   sourceType: Camera.PictureSourceType.CAMERA,
   encodingType: Camera.EncodingType.PNG,
   quality: 70
  };
 }else if(type == 'album'){
   destinationType: Camera.DestinationType.FILE_URI,
   sourceType: Camera.PictureSourceType.SAVEDPHOTOALBUM, // Androidでは、SAVEDPHOTOALBUMとPHOTOLIBRARYは同じ
   encodingType: Camera.EncodingType.PNG,
   quality: 70
  };
 }
 // カメラ（ギャラリー）を起動
 navigator.camera.getPicture( camera_success, camera_error, options );
}

function camera_success(uri) {
 // uriのFileSystemオブジェクトを取得
 window.resolveLocalFileSystemURI( uri, resolve_success, file_error );
}

function resolve_success(entry) {
 var d = new Date();
 var n = d.getTime(); // ミリ秒
 var newFileName = n + ".png";  // ミリ秒でファイル名を付ければダブらない。たぶん。
 var myFolderApp = "com.example";  // イメージの保存先
 
 // (1)PERSISTENTのFileSystemオブジェクトを取得
 // (2)myFolderAppというディレクトリを取得（なければ作成）
 // (3)myFolderAppにファイルをコピー
 window.requestFileSystem( LocalFileSystem.PERSISTENT, 0, function( fileSys ) {
  fileSys.root.getDirectory( myFolderApp,
   {create: true, exclusive: false},
   function( directory ) {
    entry.copyTo( directory, newFileName, move_success, file_error );
   },
   file_error );
   },
  file_error );
}

function move_success(entry) {
 // id="image"のIMGに画像を表示
 $('#image').attr('src', entry.toNativeURL());
 // 以下、データベースやローカルストレージに保存
}

function file_error(error) {
 alert('File System Error:' + error.code);
}

function camera_error(message) {
 alert('Camera Error:' + message);
}

カメラやファイル操作は、iOS, Androidその他で振る舞いが微妙に違うようです。
cameraプラグイン
fileプラグイン

Cordova(Phonegap)のコマンドラインで署名付きapkを作成する

2014-04-15T10:05:00.003+09:00

コマンドラインから署名付きapkを作成する方法です。

ビルド

cordova build --release

<プロジェクト名>\platforms\android\ant-build\<プロジェクト名>-release-unsigned.apk が作成されます。

鍵の作成

keytool -genkey -v -keystore .keystore -alias <エイリアス名> -keyalg RSA -validity 10000

上記では、10000日間有効な.keystoreという鍵ファイルを作成しています。
エイリアス名は、プロジェクト名でよいと思います。

鍵の確認

keytool -list -v -keystore .keystore -storepass <パスワード>

署名

jarsigner -verbose -keystore .keystore <apkファイル> <エイリアス名>

署名の確認

jarsigner -verify -verbose -certs <apkファイル>

最適化

zipalign -v 4 <元のapkファイル> <最適化後のapkファイル>

※参考
Yamanobori_oldのMemo
Android 作成したアプリに署名を行う

Cordova(Phonegap)で AdMobを表示する (Android)

2014-04-07T13:38:00.002+09:00

いくつか参考となるサイトがあったのですが、どれを試しても動かず・・・最終的には以下のサイトの方法でうまくいきました。
GitHub / PhoneGap-Android-Native-AdMob

AdMobへの登録

AdMobとは、Google AdSenseのアプリ版のようなものです。（アプリ内にAdSenseを貼ることは禁止されているようです）
まずAdMobに登録して、広告IDを取得します。

AdMob

※リリース前のアプリの広告を作成する際には、「アプリを手動で追加」を選択します。

AdMob SDKのインストール

AdMobを使うためには、SDKをダウンロードしてプロジェクト内にインストールする必要があります。
AdMob SDK(Android)

解凍後、Eclipseを起動して、"GoogleAdMobAdsSdk-*.*.*.jar" ファイルをプロジェクトのlibフォルダに入れます。
追加したjarファイルを右クリックすると、「ビルド・パス ‐ ビルド・パスに追加」というメニューがあるので、追加しておきます。

ソースの修正

"src/プロジェクト名/プロジェクト名.java" ファイルを開き、以下のように修正します。

package パッケージ名;

import android.os.Bundle;
import org.apache.cordova.*;


import com.google.ads.*;
import android.widget.LinearLayout;


public class パッケージ名 extends CordovaActivity 
{

    private AdView adView;

 @Override
    public void onCreate(Bundle savedInstanceState)
    {
        super.onCreate(savedInstanceState);
        super.init();
        // Set by  in config.xml
        super.loadUrl(Config.getStartUrl());
        //super.loadUrl("file:///android_asset/www/index.html");

        // Create the adView
        adView = new AdView(this, AdSize.BANNER, "広告ユニットID"); 
        LinearLayout layout = super.root;
        layout.addView(adView); 
        AdRequest request = new AdRequest();
        request.setTesting(true);  // 本番ではfalseにする
        adView.loadAd(request); 

    }

}

設定の修正

"www/AndroidManifest.xml" ファイルを開き、manifestタグの中に以下を追加します。（最初から登録されている場合もあります）

<uses-permission android:name="android.permission.INTERNET" />
<uses-permission android:name="android.permission.ACCESS_NETWORK_STATE" />

また、applicationタグの中に以下を追加します。

<activity android:configChanges="keyboard|keyboardHidden|orientation|screenLayout|uiMode|screenSize|smallestScreenSize" android:name="com.google.ads.AdActivity"></activity>

※android:targetSdkVersion="13"以上になっているか確認しておきます。
APIレベル13(Android 3.2)未満の場合、ターゲットを13以上にしておきます。

以上で、広告が表示されるようになると思います。

SFTPで管理画面からWordPressを更新

2013-09-03T23:06:00.001+09:00

CentOS 6.4に入れたWordPressを、SFTPでアップデートさせるための設定です。


# yum install ssh2

# yum install libssh2

# yum install ssh2-devel

# pecl install -f ssh2

うちの環境ではssh2, libssh2は入ってたので、最後の２つのみ実行しました。
その後、 /etc/php.ini に以下を追加してhttpdを再起動します。


extension=ssh2.so

さくらのVPSでSSL（https）

2013-08-02T13:57:00.000+09:00

さくらのVPS (CentOS 6.4)にSSLを設定しました。証明書は、低価格のRapid-SSL.jpで。

mod_sslのインストール

ApacheがSSLに対応していない場合、mod_sslを入れておきます。

# yum install -y mod_ssl

秘密鍵の作成

Rapid SSLでは2048bit以上とのことなので、2048bitで作成します。
途中でパスフレーズの入力を（2回）求められるので、適当に入力しておきます。

# cd /etc/pki/tls/certs
#openssl genrsa -des3 -out server.key 2048

CSRの作成

続いて、秘密鍵からCSR（認証局への署名リクエスト）を作成します。
会社名や市区町村名などを入力しますが、これらはドメインのwhois情報と合わせておいたほうがいいかもしれません。

# openssl req -new -key server.key -out server.csr
Enter pass phrase for server.key: （先ほどのパスフレーズ）
You are about to be asked to enter information that will be incorporated
into your certificate request.
What you are about to enter is what is called a Distinguished Name or a DN.
There are quite a few fields but you can leave some blank
For some fields there will be a default value,
If you enter '.', the field will be left blank.
-----
Country Name (2 letter code) [GB]:JP
State or Province Name (full name) [Berkshire]:Oita
Locality Name (eg, city) [Newbury]:Oita
Organization Name (eg, company) [My Company Ltd]:XXX Co. Ltd.
Organizational Unit Name (eg, section) []: （未入力）
Common Name (eg, your name or your server's hostname) []:www.example.com （←FQDN）
Email Address []:admin@example.com

Please enter the following 'extra' attributes
to be sent with your certificate request
A challenge password []: （未入力）
An optional company name []: （未入力）

申込み（CSR送信）

server.csrの内容をコピーして、Rapid-SSL.jpから申し込みます。
審査が通るとサーバ証明書が送られてくるので、サーバに設置します。

# vi server.crt
（サーバ証明書をコピペ）

同時に、中間証明書も送られてくるので、こちらもサーバに設置します。

# vi server-chain.crt
（中間証明書をコピペ）

サーバ証明書からパスフレーズを削除

このままだと、Apache（サーバ）の再起動のたびにパスフレーズを入力しなければいけないので、パスフレーズを削除しておきます。

# openssl rsa -in server.key -out server.key
Enter pass phrase for server.key: （先ほどのパスフレーズ）
writing RSA key

Apacheの設定

最後に、ApacheにSSLの設定をして再起動します。

# vi /etc/httpd/conf.d/ssl.conf
SSLCertificateFile /etc/pki/tls/certs/server.crt
SSLCertificateKeyFile /etc/pki/tls/certs/server.key
SSLCertificateChainFile /etc/pki/tls/certs/server-chain.crt
DocumentRoot "/var/www/html"
ServerName www.example.com:443

# /etc/rc.d/init.d/httpd restart

■参考
さくらのVPS（CentOS 5.5）に RapidSSL をインストールするまでのメモ

textareaでmaxlengthチェック

2013-03-29T13:44:00.001+09:00

textareaはmaxlengthの設定ができません。（HTML5からは可能みたいですが）
maxlength pluginなんていうのもありますが、日本語だとちょっと動きがヘンみたい。
そこで、jQuery inline Form Validation Engineを使って、submitボタンが押されたときに文字数チェックするようにしてみます。

このpluginは、class="validate[length[0,10]]"と書くと文字数チェックをしてくれるはずなんですが、textareaの場合うまく機能しません。そこで、関数を定義して呼び出すようにします。


<head>
<script language="JavaScript">
$(function(){
  $("#form1").validationEngine();
});

function checklength(field, rules, i, options){
  var maxlength = field.attr('maxlength');
  var val = field.val();

  if (val.length > maxlength) {
    return "文字が多すぎます。（" + maxlength + "文字まで）";
  }else{
    return;
  }
}
</script>
</head>
<body>
<form id="form1">
<textarea  name="comment" id="comment" maxlength="4000" class="validate[funcCall[checklength]]"></textarea>
<input type="submit" />
</form>
</body>

PHP 5.5.0からMySQL関数が非推奨になりました

2013-03-08T14:12:00.000+09:00

PHPには、MySQLに接続する関数が３種類あります。
http://www.php.net/manual/ja/mysqlinfo.api.choosing.php

このうち、MySQL関数がPHP5.5.0から非推奨になりました。

修正する場合のサンプルです。（エラー処理はしていません）

修正前


<?php
$con = mysql_connect("hostname", "user", "pass");
mysql_select_db("dbname");

$rec = mysql_query("SELECT 'Hello, World.' AS msg FROM DUAL", $con);
$row = mysql_fetch_array($rec);
echo htmlentities($row["msg"]);
mysql_free_result($rec);

mysql_close($con);
?>

修正後


<?php
$con = new mysqli("hostname", "user", "pass", "dbname");

$rec = $con->query("SELECT 'Hello, World.' AS msg FROM DUAL");
$row = $rec->fetch_array(MYSQLI_ASSOC);
echo htmlentities($row["msg"]);
$rec->free();

$con->close();
?>

WordPress : timthumb脆弱性への対応

2012-10-24T13:34:00.001+09:00

WordPressで、画像を縮小してサムネール表示するようなテーマ／プラグインで使われているライブラリのひとつ "TimThumb" に脆弱性が見つかっています。

[JPCERT] WordPress の TimThumb スクリプトに脆弱性

対策としては以下のどれか。

timthumb.phpを使っていなければ削除
テーマ自体の新バージョンがあればバージョンアップ
timthumb.phpのみ最新版にバージョンアップ（http://code.google.com/p/timthumb/）

で、肝心の"timthumb.phpを使っているか"の調査方法です。

プラグインを使う

WordPressプラグインで、timthumbを検出してくれるものがあります。
http://wordpress.org/extend/plugins/timthumb-vulnerability-scanner/
これをインストールしていろいろすればOK・・・ですが、WordPressを複数インストールしている場合は面倒ですね。

サーバにログインしてファイル検索

コマンドラインでは、以下で検索できます。

# find / -name "timthumb*"

その他

サーバにログインできない場合、以下のPHPスクリプトで検出できます。（たぶん）

<?php

$base = "./";  // 適当に書き換えて。
getTimthumbList($base);

function getTimthumbList($path){
 $searchfile = "timthumb*";

 if($handle = opendir($path)){
  while (($file = readdir($handle)) !== FALSE){
   // ディレクトリの場合
   if(is_dir($path . "/" . $file)){
    // "." と ".." は除く
    if($file != "." && $file != ".."){
     getTimthumbList($path . "/" . $file);
    }
   // ファイルの場合
   }else{
    if(fnmatch($searchfile, $file)){
     echo $path . "/" . $file . "\r\n";
    }
   }
  }
  closedir($path);
 }
}
?>

今日のおすすめ

2012-10-18T09:55:00.000+09:00

商用・無料で利用できる国内フリー写真素材24サイト 2012年10月版 56docブログ

PHPで日本語入力チェック

2012-10-17T16:43:00.001+09:00

掲示板のように投稿できるサイトを作ると、海外からのSPAM書き込みが増えてきます。
その対策として「入力された文章にひらがなまたはカタカナが使われているか」をチェックするようにしました。

<?php
$in_hiragana = false;
$in_katakana = false;

if (mb_ereg('[ぁ-ん]', $_POST["comment"])){
 $in_hiragana = true;

if (mb_ereg('[ァ-ヶ]', $_POST["comment"])){
 $in_katakana = true;
}

if (!$in_hiragana && !$in_katakana){
 print "日本語のみ受け付けています。";
}else{
 // 登録処理
}
?>

ガラケー(SJIS)の場合、mb_eregを使う前にencodingを変更しておきます。

mb_regex_encoding("Shift_jis");

iGoogleのように要素をドラッグできるようにする（jQuery UI Sortable）

2012-10-11T17:08:00.005+09:00

要素をドラッグ＆ドロップして並べ替えられるようにするには、jQuery UIのSortableが便利です。

Sortable - jQuery UI API 1.8.4 日本語リファレンス - StackTrace

Sortable jQuery UI（本家）

ですが、並べ替えた状態を保存しておかないと意味がありません。
こちらを参考に・・・

jQuery UI Sortable は並び順を保存しなければ意味がない hijiriworld Web

上記URLのcookie保存バージョンを２列仕様にしたサンプルです。
http://demo.svps.blab7.net/ui/sortable.html

今日のおすすめ

2012-10-03T19:42:00.001+09:00

WordPress のDB上のサイトURLを一気に変換
今まで１つずつ修正してました・・・

アフィリエイトで稼ぐなら絶対に読んでおくべき４つの記事

Linux標準教科書（Ver2.0.0）

今日のおすすめ

2012-09-22T21:32:00.000+09:00

sketch.js
HTML3 canvasのお絵かきプラグイン

WordPressを高速化する9つのステップ

CSS3を使った実用的なスタイルシートのテクニックのまとめ

ネイティブアプリのようなWebアプリを作るために

ECサイトの動作テストに使える、クレジットカードのテスト番号一覧

商用利用可でクレジット表記不要な国内無料写真素材サイトまとめ14個

25 Beautiful Examples of Pricing Tables
きれいな「料金表」25個

bookblock
ページめくりプラグイン。

CSS UIキット（タブレット・スマホ用）

2012-09-13T13:16:00.003+09:00

10 Free Pure CSS UI Kits

CSS3で書かれた、iOSやAndroidのようなフリーのUIキット。
さまざまな理由でjQuery Mobileなどを採用できない場合がありますが、そういう時に便利かも。

AndroidタブレットでSSH接続してみる

2012-09-04T18:58:00.001+09:00

AndroidタブレットにSSHクライアントを入れて、サーバーに接続してみました。

SSHクライアント

ConnectBotがメジャーかつSSH2にも対応しているようなので、これを入れてみました。
Google Play未対応の場合、開発版を入れるか、野良アプリを探してください。

開発版：http://code.google.com/p/connectbot/
（左下からダウンロード）

キーボード

Android標準キーボードなどでは不便なので、Hacker's Keyboardに変更しました。
Ctrl、Alt、Tabなどが入力しやすくなります。
野良アプリはこちら。
http://www.iapktop.com/hackers-keyboard-1-29.html

接続

SSH/Telnet/Localを選択し、サーバを指定します。
"username@hostname:port" の書式で接続。その後パスワードを入力してログインします。
認証鍵を設定している場合や詳細な設定方法は、参考サイトを見てみてください。

※うちのタブレットの場合、Android標準キーボードではパスワード入力後の確定ができませんでした。

Android携帯でも大丈夫みたいなので、緊急のときには使えそうですね。
（実際に使う機会が少ないことを祈ります・・・）

参考：
ConnectBot ～公開鍵認証にも対応した Android の SSH クライアントアプリあるＳＥのつぶやき

jQuery Mobileでファイルアップロード

2012-09-01T14:49:00.000+09:00

jQuery Mobile（というよりJavaScript）では、セキュリティ上の観点からajaxでmultipart/form-dataを使えません。
そこで、ifameを使って対応しました。

通常の方法を試してみる

以下のようなページ構造を考えてみます。

index.php

ページ1（データ一覧）
ページ2（データ登録）　⇒データ登録.php（data-ajax="false"）

この場合、データ登録.phpから data-rel="back" 指定して戻ってもページ1が表示されてしまいます。
戻ってきたときにmobileinitあたりで「引数があればページ2に飛ばす」処理を入れれば対応できそうですが、速度が気になりました。

iframeを使った処理

formのターゲットにiframeを使ってみます。登録後にページ1に戻ります。

ページ2の概要

<script>
function upload() {
  $('#form1').submit();
  alert('登録しました');
  location.hash = 'ページ1";
}
</script>
<form id="form1" method="post" action="データ登録.php" target="upload">
<input name="dataname" id="dataname" type="text" />
<input name="photo" id="photo" type="file" />
<input type="button" value="登録" onclick="upload();" />
<iframe name="upload" style="width:0;height:0;border:0;"></iframe>
</form>

iframeのCSSでは「display:none;にすればよい」という記述も見かけますが、対応していないブラウザもあるようなのでサイズをゼロにしています。
データ登録.phpでは、通常の処理をすればOKです。

iframeを見えるようにして、データ登録.phpの最後に「登録しました」と出力するようにしてもいいかもしれません。

都道府県が選択されたとき、市区町村一覧を表示する（プルダウンの連動）

2012-08-27T02:27:00.000+09:00

selectで都道府県が選択されると、別のselectに市区町村一覧を表示するサンプルです。

HTML

都道府県のプルダウン"pref"と市区町村のプルダウン"city"を用意。
"pref"のほうには都道府県を書いておきます。
"city"のほうは空で。

<div data-role="fieldcontain">
<label for="pref">都道府県</label>
<select name="pref" id="pref">
<option value="">選択してください</option>
<option value="01">北海道</option>
<option value="02">青森県</option>
・・・
</select>
</div>

<div data-role="fieldcontain">
<label for="city">市区町村</label>
<select name="city" id="city">
<option value="">選択してください</option>
</select>
</div>

JavaScript

都道府県プルダウンの値が変わったとき、ajaxで市区町村一覧を読み込みます。
それを市区町村プルダウンにセット。
$('#city').selectmenu('refresh');は、jQuery Mobileでのおまじないです。

$('#pref').change(function() {
 $.get('citylist.php?pref_code='+$(this).val(), function(data) {
  $('#city').html(data);
 });

 $('#city').val('');
 $('#city').selectmenu('refresh'); 
});

PHP

m_cityテーブルには、pref_code, city_code, city_nameという項目があります。
都道府県コードが渡されたらpref_codeで絞込み、市区町村一覧を返します。
<option value="01101">札幌市中央区</option>
<option value="01102">札幌市北区</option>
という一覧を返すので、そのまま"city"のプルダウンに入れます。

<?php
$pref_code = mysql_real_escape_string($_GET["pref_code"]);

$sql  = "SELECT * FROM m_city ";
$sql .= " WHERE pref_code = '" . $pref_code . "'";
$sql .= " ORDER BY city_code";
$rec = mysql_query($sql, $g_db);

$ret = '<option value="">選択してください</option>' . "\r\n";
if($data = mysql_fetch_array($rec)){
 do{
  $ret .= '<option value="' . $data["city_code"] . '">' . $data["city_name"] . '</option>' . "\r\n";
 }while($data = mysql_fetch_array($rec));
}
mysql_free_result($rec);

echo $ret;
?>

select（プルダウン）に値を設定する

2012-08-25T02:21:00.000+09:00

selectタグ（プルダウン・セレクトボックス）に値を設定したい場合、jQuery Mobileでは一工夫必要でした。


$('#select').val('');
$('#select').selectmenu('refresh');

どうやらselectの上にspanをかぶせて、見た目をスマホのネイティブアプリっぽくしているみたい。
そのspanの部分に値を設定するために 'refresh' が必要のようです。

今日のおすすめ

2012-08-25T02:13:00.002+09:00

数行のコードで、動画をウェブページの背景いっぱいに配置するスクリプト -BigVideo.js

CSS3 Code Snippets & Resources for Web Developers WebInterfaceLab
CSS3コードサンプル集。

10+ jQuery Flip effect plugin with examples
フリップエフェクトのjQueryプラグインとサンプル。

TwitterのAPI変更でユーザーが受ける5つの影響

1クリックでWordPressのテーマファイルの制作に必要なファイルが全部揃う -Underscores

GoogleカレンダーやiCalなどにも取り込み可能な、WordPressのカレンダープラグイン「All-in-One Event Calendar」

Canvasベースのお絵かきが実装できるjQueryプラグイン「Sketch.js」