読者です 読者をやめる 読者になる 読者になる

phpredisのインストール

ここからとってくる。zipで圧縮されてるのをとってきてので解凍して、その後はディレクトリに移動して以下を実行。phpは5.3を使用。

phpize
./configure
make
sudo make install

エラーが出ずに終了したらphp.iniを編集する。

/etc/php5/apache2/php.ini

extensionの項目をさがして以下を書き込む。

extension=redis.so

apacheを再起動してphpinfo()で確認する。redisの項目が追加されていればOK。

追記:
phpを5.3から5.5にしたらphpredisが動かなくなった。phpinfo()を見たらredisの項目が消えてる。apacheのログを見たら

PHP Warning:  PHP Startup: redis: Unable to initialize module\nModule compiled with module API=20090626\nPHP    compiled with module API=20121212\nThese options need to match\n in Unknown on line 0

と出てて、/usr/lib/php5/20090626/の中に前のredis.soが残ったままになっていた。なのでそれを消した。これで直るかと思ったけど直らない。php5.3以上ではphp拡張は/etc/php5/mods-availableの中にファイルを置いて使うみたいだけど、どうやらそれが抜けてるっぽい。5.3のときはなかったよね?mods-availableの中に

extension=redis.so

と書いたredis.iniというのを作成。その後に

sudo php5enmod redis

とすると/etc/php5/conf.d/からmods-available内のファイルにシンボリックリンク貼ってくれるらしいapacheを再起動してphpinfo()を見ると/etc/php5/apache2/conf.d/20-redis.iniが追加されてる。これで直ったかと思ったけどまだダメ。phpredisのインストールの所に.

You can generate a debian package for PHP5, accessible from Apache 2 by running ./mkdeb-apache2.sh

と書いてあるのを見て、もしかしてこれ?と思ってやってみた(php5.3のときはこれをしなくても使えたのでスルーしてた)。いろいろチェックしてくれたみたいで、最後にmake installとするとインストール完了。apacheを再起動するとphpredisが使えるようになった。

カラムにAUTO_INCREMENT属性を追加する

mysql> DESC type;
+-------+--------------+------+-----+---------+-------+
| Field | Type         | Null | Key | Default | Extra |
+-------+--------------+------+-----+---------+-------+
| id    | int(11)      | NO   | PRI | NULL    |       |
| type  | varchar(255) | YES  |     | NULL    |       |
+-------+--------------+------+-----+---------+-------+

auto incrementが設定されていないので追加する。

ALTER TABLE type CHANGE id id int(11) AUTO_INCREMENT;

確認してみる。

mysql> DESC type;
+-------+--------------+------+-----+---------+----------------+
| Field | Type         | Null | Key | Default | Extra          |
+-------+--------------+------+-----+---------+----------------+
| id    | int(11)      | NO   | PRI | NULL    | auto_increment |
| type  | varchar(255) | YES  |     | NULL    |                |
+-------+--------------+------+-----+---------+----------------+

設定できてる。

MySQLの文字コードを指定する

Server charactersetとDb charactersetの文字コードを変更する

Server charactersetとDb charactersetがlatin1になってるのを変更したいときは、
/etc/mysql/my.cnfを編集する。ubuntu12.04でMySQL5.5。

[mysqld]
-中略-
character-set-server=utf8

そのあとにmysqlを再起動する。

sudo /etc/init.d/mysql restart

カラムを指定して文字コードを変更する

ALTER TABLE tablename MODIFY columnname text CHARACTER SET utf8 COLLATE utf8_general_ci;

テーブルとカラムの文字コードを変更する

ALTER TABLE tablename CONVERT TO CHARACTER SET utf8;

VirtualBoxでマウススクロールが動かない

VirtualBoxubuntu 12.04を動かしていて、マウススクロールが動かなくて不便だなーと思ってたんだけど、調べたら解決法があった。

sudo apt-get install dkms

としたあとにGuestAddtionsをインストールし直す。/media/内のCD-ROM名は環境によって違うかも。

cd /media/VBOXADDITIONS_4.2.16_86992/
sudo sh VBoxLinuxAdditions.run

シェルスクリプトの実行が終わったあとに、VirtualBoxを再起動するとマウススクロールが動くようになる。
でもまだゲストとホスト間でのクリップボードが動かないので不便だなー。

VirtualBox環境の12.04でマウススクロールが出来ない
Linux Salad: VirtualBoxでクリーンかつ安全に別のOSを導入する

Virtual Boxでubuntuを動かす

前までwindowsとのデュアルブートで使ってたけどPCを新しくして、windows8になったのにいきなりブートローダが動かなくなってwindowsが使えないとか悲しすぎるので仮想環境で動かしてみることにした。

BIOSの設定変更

VirtualBoxでゲストOSを動かす時にBIOS設定を変えておかないとちゃんと起動しない。設定方法はPCごとに違うけど、電源を入れた後にF2とかF10とかを押していれば開けると思うのであらかじめ変更しておく。BIOSをアップデートした後にゲストOSが動かなくなったときはここの設定が初期状態に戻っている可能性があるよ。

VirtualBoxをインストール

windowsVirtualBoxをインストールする。ここから自分の環境にあわせてダウンロードしてインストールする。買うまで知らなかったけど最近のPCは64bitが普通なんだね。

ubuntuを用意する

というわけでubuntuも64bit版をダウンロードする。ロングサポートの12.04 LTSを入れることにする。ダウンロードに時間がかかるけど終わるまで待ちましょう。

VirtualBoxの初期設定

ここを見ながら進めればそんなに難しくなかった。仮想環境って快適!

マウスオーバーでアイコンを表示する

最近はUIのことを仕事でやってるので、
どんなものがいいのかをいろいろ試している。
マウスオーバーでアイコンが表示されるようにしてみた。

(function($){
    $('.post').mouseover(function(e){	
	$($(e.target).find('img')).css('visibility','visible');
    });

    $('.post').mouseout(function(e){
	if($(e.target).attr('class') == 'post'){	   
            $('.poke').css('visibility','hidden');
          //$($(e.target).find('img')).css('visibility','hidden');
	}
    });

    $('.poke').mouseover(function(e){
	var $target = $(e.target);
	if($target.is('img')){
  	  $($(e.target).find('img')).css('visibility','visible');	
	}
    });

    $('#tw').click(function(e){
	$('.twitter').parent().parent().fadeToggle('slow','linear');
    });

    $('#fa').click(function(e){
	$('.facebook').parent().parent().fadeToggle('slow','linear');
    });

})($);
<!DOCTYPE html>
<html>
<head>
<title>mock</title>
<meta charset="utf-8">

<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>

<style>
body{
background-color:#2C4762;
}

.post{
background-color:#ffffff;
border:solid 1px #ffffff;
border-radius:0.5em;
margin-bottom:10px;
padding:0 0 0 10px;
}

ul{
list-style:none;
}
</style>

</head>
<body>

<ul>
<li><img src="./twitter.png" id="tw" width="26" height="26"></li>
<li><img src="./facebook.png" id="fa"  width="26" height="26"></li>
</ul>


<div class="post">
<div class="content">
<p>こんばんは</p>
<p class="date"><img src="https://si0.twimg.com/profile_images/1864394913/seikatsu2_normal.jpg" class="poke" style="visibility:hidden" />May 11, 2013 - 02:00 AM</p>
<img src="./twitter.png" width="26" class="twitter" height="26">
</div>
</div>

<div class="post">
<div class="content">
<p>雨ですね</p>
<p class="date"><img src="https://si0.twimg.com/profile_images/1864394913/seikatsu2_normal.jpg" class="poke" style="visibility:hidden" />May 11, 2013 - 02:00 AM</p>
<img src="./facebook.png" class="facebook" width="26" height="26">
</div>
</div>

<div class="post">
<div class="content">
<p>フェレット好き!</p>
<p class="date"><img src="https://si0.twimg.com/profile_images/1864394913/seikatsu2_normal.jpg" class="poke" style="visibility:hidden" />May 11, 2013 - 02:00 AM</p>
</div>
</div>

<div class="post">
<div class="content">
<p>こんばんは</p>
<p class="date"><img src="https://si0.twimg.com/profile_images/1864394913/seikatsu2_normal.jpg" class="poke" style="visibility:hidden" />May 11, 2013 - 02:00 AM</p>
<img src="./twitter.png" width="26" class="twitter" height="26">
</div>
</div>

<script src="./p.js"></script>
</body>
</html>

ユーザビリティのメモ

必要になりそうだから調べてみた。箇条書きだけど調べたことと思ったことを載せておく。
UI/UXだけと言うわけでもなく、サービス企画にも言えることだと思う。

文字サイズ

・見出し、コンテンツの文字サイズは同じにしない。優先順位をつける
・文字は読みやすいサイズにする。デバイスごとに最適なサイズで設定

お約束

・電源ボタンのようなアイコンでログイン、ログアウトの機能を表す。インターフェイスを現実世界とリンクさせる
・サービスのロゴをクリックするとindexに戻る
・虫眼鏡のアイコンで検索

目的までの最短距離

・何ができればユーザーの目的は達成されるのか。その最短距離を考える
・クリック数や画面遷移数を減らす
・目的の補足、詳細項目はなくす
・入力、選択数が多いと判断に時間がかかる

写真やイラストを使う

・文章だけでは伝わりにくい、見つけにくい、覚えにくい

導線

・次に何をすればいいかを教えてくれる(次の画面に移るボタンが動く、クリックしたら次にクリックする部分が点滅する)
・リンクは少なく、クリックできる箇所を限定する

誰向けのサービスか

・ユーザーがネットに詳しくないならサービス内でネット用語(SNSクラウド、オンライン、アップグレード、ソリューション、フィードバック、ポリシー等)は使用しない
・複雑(多機能)なサービスなら目的別に使い方を2〜3に絞りそこから選んでもらう。入り口を狭くして複雑さを感じさせない配慮
・電話、メール、ヘルプページ。ユーザーのネット利用、理解度に応じて最適なコンタクト方法を用意する

一言で説明できる簡潔さ

・それは何か。なぜそうなっているのかを誰もが理解できる言葉にする
・人に説明できるか

優れたユーザビリティを実現する25の基本概念

この本は前から欲しかったので買おうと思う!

Design Rule Index[第2版]― デザイン、新・25+100の法則

Design Rule Index[第2版]― デザイン、新・25+100の法則