2016-09-20

jquery エレメントのデバッグを分かりやすくする方法

javascript

How do I console.log a jQuery DOM Element in Chrome? - Stack Overflow
デバッグに関する面白い回答があった。

例えば↓のようなhtmlがあったとして、

<div>
  <label>
    <input type="radio" class="flat" name="radio1" value="0" />チェック1
  </label>
  <label>
    <input type="radio" class="flat" name="radio2" value="1" />チェック2
  </label>
</div>

findの結果を見たい場合、

$(function(){
 console.log($("div").find('input'));
});

とやるとchromeだと↓の結果が表示される

[input.flat, input.flat, prevObject: n.fn.init[1], context: document, selector: "div input"]

これ前々から思っていたけどスゲー分かりにくい。
そこで↓のlog()を定義する

$(function(){
  $.fn.log = function() {
    console.log.apply(console, this);
    return this;
  };
  // コンソールに出力
  $("div").find('input').log();
});

分かりやすい結果となる↓

<input type="radio" class="flat" name="radio1" value="0">
<input type="radio" class="flat" name="radio2" value="1">

低予算で始められるおすすめのFX口座はこちら。
http://s2fx.com/ranking/856.html

2016-09-20

jquery bootstrapのiCheckでflat指定したradioボタンを選択する方法

bootstrap javascript

はまったのでメモ。

html

<div>
  <label>
    <input type="radio" class="flat" name="radio" value="0" />チェック1
  </label>
  <label>
    <input type="radio" class="flat" name="radio" value="1" />チェック2
  </label>
</div>

jquery

$(function(){
  // ↓flat指定ありの場合
  $("div").find('input').eq(0).iCheck('check');
  // ↓flatを使わない通常の選択方法
  //$("div").find('input').eq(0).prop('checked',true);
});

ポイントはiCheck()を使うこと。
Checkboxes and radio buttons customization (jQuery and Zepto) plugin

2016-09-14

bootstrap3 グリッドシステム col-sm やら col-xsの意味について

bootstrap

bootstrapのグリッドシステムを利用する際にcol-smやらcol-xsを指定する。

詳細はこちら
CSS · Bootstrap

グリッドって分かりにくいんだけど、ポイントは12分割がベースってこと。
例えば

<div class="col-sm-6 col-xs-12">hoge<div>
<div class="col-sm-6 col-xs-12">hoge<div>

みたいな指定をした場合、col-sm即ちタブレット以上サイズ(pc含む)の場合は、6/12即ちdivを一行の半分のサイズで表示するって意味。col-xs即ちスマホ以下の場合は、12/12即ちdivを横一行全部使って表示しますよ、という意味。

<div class="col-sm-3 col-xs-6">hoge<div>
<div class="col-sm-3 col-xs-6">hoge<div>
<div class="col-sm-3 col-xs-6">hoge<div>
<div class="col-sm-3 col-xs-6">hoge<div>

この場合、PCの場合はdivを一行の1/4(3/12)で表示し、スマホの場合はdivを一行の半分(6/12)で表示することになる。

16/9/22追記
「タブレット以上は一行の半分、スマホは一行全部」としたい場合の指定

class="col-xs-6" /* 間違い */
class="col-sm-6" /* 正解 */

16/9/23さらに追記

col-sm-6 col-md-3

と指定したのに、スマホサイズ(col-xs)で一行全部にならなかった。

col-xs-12 col-sm-6 col-md-3

と指定したところ正しく動いたので、やはり明示的にcol-xs-12を付けないといけないかも。

低予算で始められるおすすめのFX口座はこちら。
http://s2fx.com/ranking/856.html

2016-09-14

mysql5.6が突然起動しなくなった件の原因と対策

php mysql

昨日まで動いてたmysqlが突然起動できなくなった。以下、ログ周りのオプションを変更してみた時のエラーログまとめ

# error1
/usr/sbin/mysqld: File './mysql-bin.000023' not found (Errcode: 28 - No space left on device)
2016-09-14 08:52:37 23762 [ERROR] Could not open mysql-bin for logging (error 28). Turning logging off for the whole duration of the MySQL server process. To turn it on again: fix the cause, shutdown the MySQL server and restart it.
2016-09-14 08:52:37 23762 [ERROR] Aborting

# error2
/usr/sbin/mysqld: File './mysql-bin.~rec~' not found (Errcode: 28 - No space left on device)
2016-09-14 08:56:13 24546 [ERROR] MYSQL_BIN_LOG::open_purge_index_file failed to open register  file.
2016-09-14 08:56:13 24546 [ERROR] MYSQL_BIN_LOG::open failed to sync the index file.
2016-09-14 08:56:13 24546 [ERROR] Aborting

# error3
2016-09-14 09:09:32 25665 [ERROR] Can't start server : Bind on unix socket: No space left on device
2016-09-14 09:09:32 25665 [ERROR] Do you already have another mysqld server running on socket: /var/lib/mysql/mysql.sock ?
2016-09-14 09:09:32 25665 [ERROR] Aborting

# error4
2016-09-14 09:17:20 2022 [ERROR] /usr/sbin/mysqld: Sort aborted: Can't create/write to file '/tmp/MYCUjmDB' (Errcode: 28 - No space left on device)

ディスク容量は問題無い。

# df -h
Filesystem      Size  Used Avail Use% Mounted on
/dev/vda3        28G   17G  9.1G  66% /
tmpfs           499M     0  499M   0% /dev/shm
/dev/vda1       239M   58M  168M  26% /boot

原因はi-node数だった。

# df -i
Filesystem      Inodes   IUsed  IFree IUse% Mounted on
/dev/vda3      1819680 1819680      0  100% /
tmpfs           127509       1 127508    1% /dev/shm
/dev/vda1        64000      44  63956    1% /boot

よくよく調べてみるとphpのセッションファイルが大量に作成されていた。

# ll /var/lib/php/session/ | wc -l
1736291

普通に削除しようとしたところエラー

# rm -fr /var/lib/php/session/*
-bash: /bin/rm: 引数リストが長すぎます

ファイル数が多すぎる場合はxargsを使わないといけないらしい。

cd /var/lib/php/session/
echo * | xargs rm -rf

セッションファイル削除までの時間を調べたところ30日になっていた。以前よりもアクセス数が増えた(ほとんどbotだが・・)のでこれだと長すぎたようだ。
php.ini

#session.gc_maxlifetime = 2592000 //変更前30日
session.gc_maxlifetime = 1440 //変更後(デフォルトの24分に戻す)

削除後のi-node数

# df -i
Filesystem      Inodes IUsed   IFree IUse% Mounted on
/dev/vda3      1819680 84090 1735590    5% /
tmpfs           127509     1  127508    1% /dev/shm
/dev/vda1        64000    44   63956    1% /boot

低予算で始められるおすすめのFX口座はこちら。
http://s2fx.com/ranking/856.html

2016-09-09

メールの符号化について

linux php

受信したメールをprocmail経由でphpに渡してゴニョゴニョする時に失敗した件のまとめ。

まずメール送信の仕組みから分かっていなかった。

初期のメールではASCIIの7bitデータのみが想定されていたため、現在でも添付のバイナリやマルチバイトである日本語は7bitに変換(MIME エンコード)してやる必要があるわけ。MIME エンコードには主にBase64とQuoted-printableの変換方法がある(Base64とQuoted-printableはともに可逆)。

で、今回失敗したのは、通常procmail経由でphpに渡ってくるメールは7bit(今回はQuoted-printable)で符号化されたデータなのに、日本語であることを前提としていたためメールの解析に失敗したというわけ。

ちなみにメールがどの方法でエンコードされているかはメールのソースを見れば分かる。日本語のメールは最初から日本語で送られてくるわけでは決してない！gmail等のメーラーがメールヘッダーの以下の部分を見てよしなに変換してくれていたってわけ！

Content-Transfer-Encoding: quoted-printable

ここには通常「7bit」が指定されることが多い。7bitだと一概にこれでエンコードされている！とは言えないぽい(少し調べてみたけどよく分からんかった)。

またphpのmb_send_mailとか使うと「7bit」で送信されてその際にmb_languageの結果に基づいてエンコードされるんだけど、languageがJapaneseの場合は、「ISO-2022-JP/Base64」の組み合わせでエンコードされるぽい。

で、今回の件をよくよく調べたところ、メールの本文はMail_mimeDecode::decodeで取得しており、このクラスはContent-Transfer-Encodingを考慮するため、問題が無いはずであることが分かった。

なのでMail_mimeDecodeを要調査。

調査結果
結果的に問題はなかった。phpの解析部分に問題があっただけでMail_mimeDecodeは正しくquoted-printableの本文をデコードしていた。
以降メモ。
Mail_mimeDecodeはヘッダのContent-Transfer-Encodingを元にbodyをデコードする(オプションのdecode_bodies=>trueとすること)。今までbashのmailコマンドでテストしていたんだけどmailだとContent-Transfer-Encodingが指定できない？ぽいのでphpのmail関数を使うこと。以下のような感じ。

<?php
$subject = "サブジェクト";
$body = <<<EOF
本文
EOF;

$to = "to";
$from = "from";

mb_language('japanese');
mb_internal_encoding('utf-8');

$subject = mb_encode_mimeheader($subject);
$body = mb_convert_encoding($body,"Quoted-Printable","UTF-8");

$header = "From: ".$from."\n".
          "Mime-Version: 1.0\n".
          "Content-Type: text/plain; charset=utf-8\n".
          "Content-Transfer-Encoding: quoted-printable";

mail($to, $subject, $body, $header, "-f".$from);

参考サイト
エンコード・コレクション (メール、テキスト関連)
quoted-printable文字列の変換 - [サンプルコード/PHP] ぺんたん info
PHPでメールを送る – ぱんぴーまっしぐら

2016-09-04

centos パスワード無しでscpする手順

linux

サーバー1からサーバー2にパスワード無しでscpするための手順

■サーバー1の作業
サーバー1鍵作成

ssh-keygen -t rsa

保存場所やpassphrase聞かれるけど全部エンターでok
デフォルトだと以下の場所に秘密鍵と公開鍵が作成される
.ssh/id_rsa
.ssh/id_rsa.pub

公開鍵をサーバー2にコピー

scp id_rsa.pub user@host:.ssh/id_rsa.pub
rm id_rsa.pub

■サーバー2の作業
コピーした公開鍵をauthorized_keysに追加

cat id_rsa.pub >> authorized_keys
rm id_rsa.pub

以上でパスワード無しのscpが出来る

参考サイト
SSHで鍵認証を用いて、パスワードなしでログインする方法 – 或る阿呆の記

低予算で始められるおすすめのFX口座はこちら。
http://s2fx.com/ranking/856.html

2016-08-22

jquery qtip2をレスポンシブ対応する方法

javascript

javascript - qTip viewport adjustment not working - Stack Overflow
これを見れば分かる。

要はpositionにviewportを追加しないといけなかった。

低予算で始められるおすすめのFX口座はこちら。
http://s2fx.com/ranking/856.html