CSSでチェックボックスをデザインする

タイムマシンの操作をブラウザからできるようにした時にただのチェックボックスだと分かりづらくてヒューマンエラーが発生するかもしれない。人間にも分かりやすいようにちゃんとデザインしてあげよう。

f:id:hoge:20150808141910p:plain

f:id:hoge:20150808141919p:plain

HTMLはこれだけ

<label class="my-checkbox">
<input type="checkbox" name="hoge">
<span class="my-checkbox-buttons">
<span class="my-checkbox-buttons-on"></span>
<span class="my-checkbox-buttons-off">充電中</span>
</span>
</label>

CSSややこしいけどこういう感じ。なるべく整頓してみた。余計な装飾をなるべくなくしているのでこのまま貼り付けていい感じにデザインして使えばいいんだな。

.my-checkbox-buttons {
cursor: pointer;
}
.my-checkbox-buttons > span {
display: block;
float: left;
padding: 5px;
background-color: #ddd;
}
.my-checkbox-buttons .my-checkbox-buttons-on {
background-color: #ddd;
}
.my-checkbox-buttons .my-checkbox-buttons-off {
background-color: #e74c3c;
color: #fff;
}
.my-checkbox input[type="checkbox"] {
display: none;
}
.my-checkbox input[type="checkbox"]:checked + .my-checkbox-buttons .my-checkbox-buttons-on {
background-color: #30cd73;
color: #fff;
}
.my-checkbox input[type="checkbox"]:checked + .my-checkbox-buttons .my-checkbox-buttons-off {
background-color: #ddd;
}

PHPでarray_fill_keys()を使って指定したキーの空配列を生成する

array_fill_keys()は任意のキー配列と値を指定して、任意のキーに指定した値を持った配列を生成できる。指定したキーをキーに持つから配列を生成することも簡単ってこと

<?php
$keys = ['hoge', 'hoge', 'baka'];
$empties = array_fill_keys($keys, '');
print_r($empties);

実行するとこうなる

$ php test.php
Array
(
[hoge] =>
[hoge] =>
[baka] =>
)

JavaScriptのconsole.log()をIE8とかではalert()にする

技術者向けツールを作る時はconsole.log()を使うことがある。IE8とかではデバッグ中はconsole.log()が動いているけど、いざデバッグツールをOFFにするとconsole.log()undefinedとか言いやがって全く動かなくなるので、console.log()undefinedだったらalert()を使うっていう関数を作った

var consoleLog = function(str) {
if (window.console !== undefined) {
console.log(str);
} else {
alert(str);
}
};

書いてから思ったけど技術者向けならなぜ停止してるかも分かるから必要なかったなw

MySQLのテーブルからカラムを削除する

ALTER TABLE テーブル名 DROP カラム名でいける。何事も削除することは簡単なのだ。以下userテーブルのhogeカラムを削除する例。

ALTER TABLE user DROP hoge;

実行してみた

mysql> desc user;
+-------+-------------+------+-----+---------+----------------+
| Field | Type        | Null | Key | Default | Extra          |
+-------+-------------+------+-----+---------+----------------+
| id    | bigint(20)  | NO   | PRI | NULL    | auto_increment |
| hoge  | tinyint(1)  | NO   |     | 1       |                |
| name  | varchar(20) | NO   | MUL | NULL    |                |
+-------+-------------+------+-----+---------+----------------+
3 rows in set (0.00 sec)
mysql> ALTER TABLE user DROP hoge;
Query OK, 0 rows affected (0.05 sec)
Records: 0  Duplicates: 0  Warnings: 0
mysql> desc user;
+-------+-------------+------+-----+---------+----------------+
| Field | Type        | Null | Key | Default | Extra          |
+-------+-------------+------+-----+---------+----------------+
| id    | bigint(20)  | NO   | PRI | NULL    | auto_increment |
| name  | varchar(20) | NO   | MUL | NULL    |                |
+-------+-------------+------+-----+---------+----------------+
2 rows in set (0.02 sec)

MySQLでテーブルにカラムを追加する

MySQLでテーブルをカラムに追加するにはALTER TABLEでいける。ALTER TABLE [変更を加えたいテーブル名] ADD [追加したいカラム名] [型] [他もろもろ]みたいな感じ。以下はuserテーブルにhogeというカラムをidの次に追加する、デフォルト値はTRUEでNULLはダメよ!って意味

ALTER TABLE user ADD hoge BOOLEAN DEFAULT TRUE NOT NULL AFTER id;

以下が実行結果

mysql> desc user;
+-------+-------------+------+-----+---------+----------------+
| Field | Type        | Null | Key | Default | Extra          |
+-------+-------------+------+-----+---------+----------------+
| id    | bigint(20)  | NO   | PRI | NULL    | auto_increment |
| name  | varchar(20) | NO   | MUL | NULL    |                |
+-------+-------------+------+-----+---------+----------------+
2 rows in set (0.01 sec)
mysql> ALTER TABLE user ADD hoge BOOLEAN DEFAULT TRUE NOT NULL AFTER id;
Query OK, 0 rows affected (0.12 sec)
Records: 0  Duplicates: 0  Warnings: 0
mysql> desc user;
+-------+-------------+------+-----+---------+----------------+
| Field | Type        | Null | Key | Default | Extra          |
+-------+-------------+------+-----+---------+----------------+
| id    | bigint(20)  | NO   | PRI | NULL    | auto_increment |
| hoge  | tinyint(1)  | NO   |     | 1       |                |
| name  | varchar(20) | NO   | MUL | NULL    |                |
+-------+-------------+------+-----+---------+----------------+
3 rows in set (0.00 sec)

Pythonのコンストラクタとデストラクタ

Pythonのクラスのコンストラクタとデストラクタはこういう感じ。でもimport周りでなんかおかしな動作してたんだよなあ。importした奴が無いって言われたような気がしたし、厳格な処理をしたいならデストラクタ使うより定義したほうが良いのかな?

class Test:
def __init__(self):
print 'construct'
def hoge(self):
print 'wash'
def __del__(self):
print 'destruct'
hoge = Test()
hoge.hoge()

実行結果

$ python test.py
construct
wash
destruct