« 2006年6月 | メイン | 2006年8月 »

2006年7月31日

ウノウサーチ(β版)をリリースしました
このエントリーをはてなブックマークに追加 このエントリーをlivedoorクリップに追加

デモサービスの一つとして、ウノウサーチ(β版)をリリースしました。

「ウノウサーチ」はあなたが訪れたサイトの中から、キーワード検索できる、Internet Explorer 用のツールバーソフトです。

たとえば「Mixi」のようにパスワードを入力しないと閲覧できないサイトは、サーチエンジンからは検索できません。でも「ウノウサーチ」なら、あなたのパソコンに保存している履歴から検索するので、訪れたサイトならばどんなサイトからも検索できます。

「その情報、確か昨日見たサイトに書かかれてあったなあ」といったときに、目的の情報を探し出すにはピッタリ。

「ウノウサーチ」はダウンロードのページより無償で提供しております。

PHPで可変個の参照渡し
このエントリーをはてなブックマークに追加 このエントリーをlivedoorクリップに追加

こんにちは,ttsuruoka です.

PHP では func_get_args() を使って可変個引数の関数を作ることができます.

function execute()
{
    $args = func_get_args()
    ....
}
execute($foo);
execute($foo, $bar);

しかしこれには問題があって,参照渡しができません.

function execute()
{
    $args = func_get_args();
    $args[0] = 20;
}
$foo = 10;
execute(&$foo);
echo $foo; // 10


func_get_args() が機能しないので,
可変個引数で参照渡しをすることはあきらめて,
array を使って実装します.

function execute($a)
{
    // foreach 文では参照が渡せないため for 文
    for ($i = 0; $i < count($a); $i++) {
        $a[$i] = ....
    }
}
execute(array(&$foo, &$bar));


これで可変個を渡すことができますが,
ひとつしか渡さない場合に

execute(array(&$foo));

と書くのは面倒なので下のようにします.

function execute($a)
{
    $t = !is_array($a) ? array(&$a) : $a;

for ($i = 0; $i < count($t); $i++) {
$t[$i] = ....
}
}
execute(&$foo);
execute(array(&$foo, &$bar));

ここで可変個の参照を渡せる関数にこだわるのをやめて,
引数登録用の register メソッドを用意します.

class MyClass
{
    var $objs = array();
    
    function register(&$obj)
    {
        $this->objs[] = &$obj;
    }
    
    function execute()
    {
        $n = count($this->objs);
        for ($i = 0; $i < $n; $i++) {
            $this->objs[$i] = ....
        }
    }
}
$c = new MyClass;
$c->register($foo);
$c->register($bar);
$c->execute();

めでたしめでたし.

(注:環境は PHP4)

2006年7月24日

マウスだこ
このエントリーをはてなブックマークに追加 このエントリーをlivedoorクリップに追加

こんにちは、ケンジです。

前回までマウスっ子を強調したエントリーを書いてきましたが、
皆さんの中からマウスっ子は生まれたんでしょうか?

ウノウの社員の何人かには話した事があるんですが、「そんなんなったことない!」っていわれてきたあるモノが、昔できた事があるんです、僕。

それが、「マウスだこ」(勝手に命名)
手首の、小指の延長辺りに骨が出っ張っている所ありますよね?
マウス操作で机と摩擦して、ここ、ホントに皮膚がとても分厚くなった事があるんです。鉄棒のマメみたいに。

これはいけない、と思って、低反発の手首置きが付いているマウスパッドを購入し使い始めたところ、数ヶ月で症状はほぼ無くなりました。

けれど今でも左手より右手の該当部分は突起が大きいです。

マウスっ子障害、皆さん気をつけましょう。

2006年7月21日

ActionScript2.0で文字列処理
このエントリーをはてなブックマークに追加 このエントリーをlivedoorクリップに追加

さかとくです。こんにちは。

ActionScript2.0でプログラムを作っていると、もっと手軽に文字列処理を片付けたいと思うはずです。
Flashではそれほど文字列処理をしないのですが、やっぱり、外部から引数で渡されたデータを加工する必要に迫られてしまいます。

そんなとき、汎用文字列処理クラスを作っておくと手軽にトークンの切り出しや置換を行うことができます。以下は、KStringクラスの使い方です。KStringクラスの内容は後述します。以下のように手軽に使えます。

// 置換
var s:String = KString.replaceAll("abc","a",-"); // 結果 : -bc
// トークンの切り出し
var k:KString = new KString("012-345-678");
trace(k.getToken("-")); // 結果 : 012 
trace(k.getToken("-")); // 結果 : 345 
trace(k.getToken("-")); // 結果 : 678 
そして、以下がKStringクラスのないようです。Flashドキュメントと同じフォルダにコピーしておきます。
// 必ず、"KString.as" という名前で保存。 
class KString
{
    var _str:String;
    
    function KString(s:String)
    {
        _str = s;
    }
    // splitter までの文字列を切り出す。
    function getToken(splitter:String):String
    {
        var i:Number;
        var ret:String;
        var len:Number;
        
        i   = _str.indexOf(splitter, 0);
        len = splitter.length;
        
        if (i == 0) {
            ret = _str;
            _str = "";
            return ret;
        } else {
            // 0123456
            // abcdefg
            // indexOf("de")=> 3 len = 2
            ret  = _str.substr(0, i);
            _str = _str.substr(i + len);
            return ret;
        }
    }
    // findStr を replaceStr に置換する(自身を非破壊)
    function replace(findStr:String, replaceStr:String):String
    {
        var i:Number;
        var len:Number;
        var ret:String;
        var tmp:String;
        len = findStr.length;
        ret = _str;
        for (;;) {
            i   = ret.indexOf(findStr);
            if (i >= 0) {
                tmp = ret.substr(0, i);
                tmp = tmp + replaceStr + ret.substr(i + len);
                ret = tmp;
            } else {
                break;
            }
        }
        return ret;
    }
    // findStr を replaceStr に置換する(自身を破壊的に置換)
    function replaceSelf(findStr:String, replaceStr:String):Void
    {
        _str = this.replace(findStr, replaceStr);
    }
    // 静的に使える汎用関数
    static function replaceAll(s:String, findStr:String, replaceStr:String):String
    {
        var k:KString = new KString(s);
        return k.replace(findStr, replaceStr);
    }
}

2006年7月20日

ユーザビリティ・ガイドライン
このエントリーをはてなブックマークに追加 このエントリーをlivedoorクリップに追加

sashaです。 naoya君が前回のエントリーで振ってくれたように、ジョエルテストの話から、ユーザビリティ・テストをどこまで行うかという話になりました。

私が今まで見たユーザビリティ系の記事の中には、追求したら悟りが開けそうな、限りなく奥深いものもありましたが、適度に深く、満遍なくカバーしているユーザビリティ・ガイドライン(原文)を見つけ、以降これを参考にしています。少し前に翻訳しましたので、今日はそれをご紹介いたします。

一般ユーザー向けのWebサービスでは、全部のチェック項目が該当するわけではありません。個人的には、各項目のスコアより、「スコアの説明」という欄を重視しています。現状では何が問題であり、どう解決するべきなのか、そういった思考のプロセスが、「ユーザーのことを思うこと」だと思うのです。

いま、ウノウではフォト蔵のデザイン見直しを行っております。私たちのデザインを省み、ユーザーのことを思うプロセスを、大事にしたいと思います。

(この下に原文を翻訳した表が見えない場合は、「続きを読む」からご覧ください。)
ナビゲーション スコア スコアの説明
サイト内のどこにいるのかが一目でわかる    
メインページへのリンクが一目でわかる    
サイト内の重要なセクションにメインページから直行できる    
大規模サイトにおいてのサイトマップ完備    
(必要に応じて)使いやすいサーチ機能完備    
機能性 スコア スコアの説明
初心者ユーザーもエキスパートユーザーも同等に対応    
機能が明確にラベル付けされている    
サイトを出ることなく基本的な機能を使用できる    
サイトに価値を付加する場合のみプラグインを使用    
ユーザーコントロール スコア スコアの説明
ユーザーのワークフローを反映している    
ユーザーはどのような操作でも途中でキャンセルできる    
全てのページに明確な出口がある    
低速コネクションに対応すべく、各ページのサイズは50K以下である    
全ての適切なブラウザに対応    
言語とコンテンツ スコア スコアの説明
最重要の情報やタスクが最も目立つ    
関連性の低い、あるいは重要性の低い情報は含まれていない    
関連した情報がグループ化されている
- 同ページや同メニューにて
- 同ページ内の同セクションにおいて
   
専門用語を極力回避した、シンプルな言語を使用している    
段落は簡潔である    
リンクは簡潔で、直感的に想像しやすく、テキストの中に埋まれることなく視覚的に明確である    
用語が定義されている    
オンラインヘルプ と ユーザーガイド スコア スコアの説明
ヘルプやインストラクションの必要性は最小限    
ヘルプやインストラクションが必要な場合は、容易に参照可能    
システム/ユーザー・フィードバック スコア スコアの説明
何が起こっているかが常に明確(視覚的なヒントがある)    
ユーザーは必要に応じて、メールでフィードバックを与えられる    
ユーザーはメールやフォームを使用して、サイトのフィードバックを送信できる    
フォームの送信の際には、確認画面が用意されている    
システムのフィードバックは瞬時に返される    
特定のプラグインやブラウザバージョンが要求される場合には、ユーザーは通知を受ける    
最後にアップデートされた日時を、各ページに明記されている    
ウェブ・アクセシビリティ
W3C ツール、チェックリスト、ガイドライン
スコア スコアの説明
ウェブ標準を準処: HTML 4.0, Cascading Style Sheets (CSS1)
レイアウトやスタイルにCSSが使用されている
   
イメージとアニメーション:
ALT属性がイメージ、アニメーションその他のオブジェクトに使用されている
   
イメージマップ
イメージマップのホットスポットにはクライアントサイトのマップとテキスト表示を完備
   
マルチメディア
オーディオにはキャプションや歌詞等、ビデオには描写表現が用意されている
   
PDFは、ウェブ用のフォーマットを用意する    
リンクのラベルは文脈の中において意味のあるものである    
ページの体系
ヘッドタイトル、リスト、そして一貫した構成によって体系付けられている
   
グラフとチャート
グラフとチャートには要約やLONGDESC属性が用いられている
   
スクリプト、アプレット&プラグイン
スクリプト、アプレット、プラグインには、代替コンテンツが用意されている
   
フレーム
NOFRAMEオプションと、意味の通じるタイトルが用意されている
   
テーブル
テーブルの要約が用意されており、テーブル構造の一行一行が理にかなったものである
   
バリデーション(有効性)
Site has been validated using the W3Cの HTML Validation ServiceBobby Accessibility Checkerを利用し有効性が保障されている
   
様々なプラットフォーム (UNIX, Windows, Mac)、様々なブラウザ(Netscape 3, 4, 6, 7; IE 5, 6; lynx)でテストされている    
一貫性 スコア スコアの説明
一つのアイテムを表現するのに、一貫した語彙や文章が使用されている    
リンクがリンク先のページタイトルを反映している    
ブラウザのページタイトルは、意味あるもので、そのページの最重要セクションのヘッダーを反映している    
エラーの回避と修正 スコア スコアの説明
サイトの使用が記憶に頼らずとも、認識に頼って達成できる    
様々なユーザーの行動に対応している    
ユーザーのアクション(例えばフォームの記入例等)について、簡潔な説明が用意されている    
エラーメッセージが視覚的に明確である    
エラーメッセージが解りやすい文章である    
エラーメッセージは、問題の解決に役立つものである    
エラーメッセージには明確な出口が用意されている    
エラーメッセージにはアシスタンスのためのコンタクトが用意されている    
構築的・視覚的明確さ スコア スコアの説明
ユーザーの視点に立ったサイトの体系付けである    
体系付けや、意味づけのために、飛ばし読みしやすいデザインである    
サイトデザインやレイアウトは直感的にわかりやすく簡潔である    
サイトデザインやレイアウトは、ユーザーの生産性を高める場合においてのみ豊富である    
十分な余白があり、ページがきつすぎない    
不必要なアニメーションは回避されている    
リンク(訪問済み、未訪問)は明確でわかりやすい    
太字や斜体は選択的に用いられている    

The Joel Test
このエントリーをはてなブックマークに追加 このエントリーをlivedoorクリップに追加

こんばんは、naoya です。
今年の初めに Joel on Software 日本語版が出版されました。その本の中でソフトウェアチームの良さを計測するためのシステムとして、Joel 氏はジョエルテスト (The Joel Test) を書かれています。
今日は、まだ入社して2週間しかたっていない新人の naoya がウノウでの取り組みをジョエルテストにかけてみたいと思います。

1. ソースコード管理してる?

もちろんです!ウノウでは、svn を使ってソースコード管理しています。

2. ワンステップでビルドできる?

ウノウで開発しているウェブサービスは、すべて php ですのでビルドするという概念がありませんが、クイック POPFile のようなパッケージ製品はインストーラまでを含めてワンステップでビルドできるようになっています。クイック POPFile では、バッチファイルを使って簡単にワンステップでビルドできるようになっています。

3. デイリービルドしている?

ウノウで開発しているウェブサービスは、デイリーというか常に更新されていますので、サービス内部でエラーが発生した場合は、すぐに社内の関係者にメールが送られてすぐに修正するとい う体制をとっています。

4. バグデータベースはある?

もちろん、あります。ウノウでは、いまのところ影舞 を使っていますが、今は Trac に移行中です。

5. 新しいコードを書く前にバグを直している?

はい、ウノウではバグを優先して直しています。新しいコードの案件と不具合の案件は、すべてバグトラッキングシステムに集約されて、バグを優先的に担当者に割り当てて修正しています。

6. アップデートされているスケジュールはある?

もちろん、あります。アップデートされたスケジュールは、すべて wiki にまとまっています。

7. 仕様書はある?

もちろん、あります。仕様書もすべて wiki にまとまっているのですが、ウェブサービスの仕様書は詳細な仕様書ではなく、基本的な機能、コンセプトがまとまっています。

8. プログラマは静かな環境で作業している?

はい、とても静かな環境で作業しています。僕がウノウへ入社して、一番驚いたのは作業環境の静かさでした。

9. 手に入る最高のツールを使っている?

はい、最高のツールを使っていると思います。ウノウは、社員13名という小さな会社のためすぐに新しいツールがあったら、みんなに紹介してさっそく導入しようという姿勢が強いです。

10. テスタはいる?

はい、います。ウノウには、やまもと@テスト番長さんがいます。 ウノウで開発しているウェブサービスやアプリケーションは、すべてやまもと@テスト番長さんの確認をもって、アップデートされます。

11. 採用試験のときにコードを書かせている?

はい、僕が面接をうけたときもコードを書く試験がありました。
今は、コードを書く面接とあわせてエンジニアリングの基礎知識のテストもしているようです。

12. ユーザビリティテストはしてる?

これは難しい質問ですが、ウノウではウェブサービスの開発のとき、みんなで使いにくいところを徹底的に話しあってユーザビリティをよくしようと努力しています。また、それぞれのサービスには専用のブログを設けて、日頃から要望を取り入れています。


今日は簡単でしたが、ジョエルテストからウノウの取り組みを書いてみました。
実は、ジョエルテストは社内で盛り上がり別な話題に発展していったのですが、それは次回のエントリで書く予定ですので、お楽しみに!

2006年7月19日

5分でわかる PHP で書かれた Web サービスの国際化(その4)
このエントリーをはてなブックマークに追加 このエントリーをlivedoorクリップに追加

ジュンヤです。

5分でわかる PHP で書かれた Web サービスの国際化(その3)に引き続き、今回が4回目。このシリーズは今回でラストにしたいと思います。

最後は、つい先日βリリースしましたフォト蔵の英語版を例に、メッセージファイルを作成する際や日本語のテキストを英訳する際に気をつけた点をいくつか書きたいと思います。

複数形と単数形の両方が使われる場合は、メッセージファイルに別々に定義する

たとえば写真が複数並んでいる箇所の「写真」と写真がひとつしか表示されない部分の「写真」とでは、日本語では同じ「写真」ですが、英語版では、前者は Photos で後者は Photo と表示しなければなりません。メッセージファイルでは以下のように別々に定義しておく必要があります。

#
# 日本語メッセージファイル
#
msgid "Photos"
msgstr "写真"
msgid "Photo"
msgstr "写真"

msgid には、そのまま表示されてしまっても大丈夫なように、意味の通る英語を使う

#
# 日本語メッセージファイル
#
msgid "menu1"
msgstr "ファイル"
msgid "menu2"
msgstr "編集"

のように定義したとします。「ファイル」と表示するブログラム部分では、gettext('menu1') を表示させるわけですが、万一対応する msgstr がメッセージファイルにみつからない場合、msgid である、意味がまったく不明な「menu1」が表示されてしまいます。そのようなことにならないよう、

#
# 日本語メッセージファイル
#
msgid "File"
msgstr "ファイル"
msgid "Edit"
msgstr "編集"

のように、意味の通る英語で msgid を定義しておきます。英語メッセージファイルが

#
# 英語メッセージファイル
#
msgid "File"
msgstr "File"
msgid "Edit"
msgstr "Edit"

のように msgid と msgstr がまったく同じになるのが理想です。

イニシャルを大文字で

基本的なことですが、文章のイニシャルは大文字です。また、 all videos といった文章ではないメニューの名前などは、フォト蔵では All Videos と各単語の頭を大文字にしています。

言い回しを統一する

「人気のある」はフォト蔵では Popular ではなく Fave を使うようにしています。たとえば Fave Pictures といったようにです。複数人で開発しても、常に決まった言い回しで統一できるよう、リストにしておくと良いと思います。

余談:regist という英語はない

余談ですが、regist という英語はありません。登録する = register です。

秋元@サイボウズ研究所プログラマーBlog: regist という英語は無い」より

2006年7月14日

ベンチャー流サーバ構築のススメ(ソフトウェア編)
このエントリーをはてなブックマークに追加 このエントリーをlivedoorクリップに追加

尾藤正人です

ラボブログではウノウのエンジニアで1日1人1エントリ(早く書くのはあり)で書いてます。おかげさまでウノウも順調にエンジニアの数が増えて、僕の順番に回ってくるのが少しずつ遅くなってきました。でもまだまだウノウではエンジニアを大募集中です!!我こそはと思う方はぜひご連絡ください。

前回のベンチャー流サーバ構築のススメ(ネットワーク編)ではネットワーク周りについて書きました。前回のエントリで言ったように、今回はソフトウェア周りのことについて書きたいと思います。

ソフトウェア周りで重要なのは、同じ構成にする、これにつきます。web サーバにだけ apache をインストールしたりとか、DB サーバにだけ MySQL をインストールしたりだとかいうことはしません。全てのサーバに同じパッケージ、同じプログラムをインストールします。それによる管理コストの軽減ははかりしれないものがあります。役割の違いによって、設定ファイルまで全く同じにはできませんが、極力同じにします。理想は全てのサーバがマスターサーバです。

・Linux はインストールしない、コピーする

Linux のインストールは最初の1台だけです。後は全てコピーします。

コピーに使用するのは dump, restore というコマンドを使います。ウノウのサーバの場合、ファイルシステムが xfs ですので、xfs 用の xfsdump, xfsrestore を使用します。

* xfs にしている理由についてはPHPで書かれたwebサービスを高速化するをご覧ください

コピー元のサーバはどれでも構いません。なぜなら全てのサーバが同じファイル構成、マスターサーバだからです。少しぐらい止めても大丈夫なサーバ、webサーバとか DB のスレーブサーバを選びましょう。

コピー元のサーバにコピー先のサーバの HDD を接続します。後は次のシェルスクリプト1発でコピー完了です。

#!/bin/sh
mkfs.ext3 /dev/sdb1 -L /boot
mkfs.xfs -f /dev/sdb2 -L /
mount /dev/sdb1 /w
cp -a /boot/* /w
umount /w
mount /dev/sdb2 /w
xfsdump -a - /| xfsrestore -r - /w
umount /w

ものの10分でコピーできます。これでファイルシステムはコピーできたのですが、重要な MBR が書き換わってないので、このままでは起動することができません。そこで、GRUB の入った CD で起動して MBR を書き換えます。

正確なコマンドは忘れましたが、GRUB が起動して次のようにタイプすると MBR が書き換えられて起動できるようになります。

root (hd0,0)
setup (hd0)

実はこれをもうちょっと発展させてネットワーク越しで dump, restore できないかなと考えています。

・サーバを設置
・knoppix のように CD で Linux を起動
・ネットワーク越しで dump, restore
・GRUB で MBR 書き換え

こういう風にすると既存のサーバを止めて物理的に HDD を繋げる手間もなくなりますし、作業をほぼ半自動化できます。

・設定ファイルは極力同期する

サーバ間での設定の差異は極力なくしまします。例えば apache が動いていないサーバでも httpd.conf は更新します。サーバごとの違いを管理するコストよりも、同期をとるコストの方が圧倒的に低いからです。proxy サーバの設定は若干違いますが。

サーバの同期を取るために簡単なシェルスクリプトを使っています。シェルスクリプトについては、また次回にでも書きたいと思います。

・パッケージのアップデートもコピー

アップデートパッケージがあった場合に1台1台のマシンでアップデート作業をやるのは大変です。パッケージをアップデートする場合は、1台のサーバでアップデートを行って、残りのマシンには rsync でコピーします。

新規パッケージインストールの場合は /etc, /var とかにファイルが追加されたりするので、各マシンでインストールするのですが、パッケージアップデートの場合は /usr のファイルが更新されると相場は決まってます。

ライブラリ系のパッケージの場合は ldconfig を忘れないように注意します。これ忘れるとライブラリの情報が更新されませんので。

・ソースからインストールするパッケージは /opt へ

普通に ./configure; make; make install すると /usr/local にインストールされます。/usr/local にインストールされると別々のパッケージに所属するファイルが /usr/local に入ってしまって、どのファイルがどのパッケージに所属するか分からなくなって管理できなくなってしまいます。なのでソースコードからインストールするソフトウェアは全て /opt/package という風にパッケージごとに分けてインストールします。

このときに気をつけないといけないのが、環境変数 PATH の設定と /etc/ld.so.conf の設定です。
/opt/package/bin を PATH に追加して、 /opt/package/lib を /etc/ld.so.conf に追加(実際は /etc/ld.so.conf.d にファイルを追加するだけでよい) します。

この辺の話は以前に自分のブログで書いたのでよかったら参照してください。
tarballからインストールしたソフトウェアを簡単に管理する

もちろん /opt にインストールする場合も1台のサーバにインストールして、残りは全部コピーです。

・アプリケーションのインストールは極力パッケージに任せる

コアなソフトウェア、パッケージが用意されてないソフトウェア以外は極力パッケージで管理するようにします。ソフトウェアに脆弱性があった場合など、全てのソフトウェアの更新をウォッチすることはできませんから、パッケージで管理できるソフトウェアは全てパッケージで管理するようにします。

今回はサーバ構築のソフトウェア(OS周り)について書きました。次回は今回紹介しきれなかったサーバ管理に使ってるシェルスクリプトのことについて書きたいと思います。

2006年7月13日

フロントエンドお役立ちツール
このエントリーをはてなブックマークに追加 このエントリーをlivedoorクリップに追加

今月入社のsashaです。
フォト蔵のデザイン周りのことを主に担当しています。

今日は、私が今まで愛用してきたWebデザイン、フロントエンド・コーディングに役立つツールをご紹介します。

(1)フロントエンド・コーダーの必需品 FireFox 拡張機能のWeb Developer
今調べたら日本語版も出ているんですね。最初、ためしにインストールしたときはブラウザの上部が幅とってしまって、なんとなく気に入らなかったんですが、フロントエンドのデザインやコーディングにはこれが本当に便利。

  • クッキー、Java、JavaScript、CSSなどを無効にする
  • CSSをその場で編集する
  • フォームの各属性値を表示する
  • 画像を非表示にする
  • alt属性のない、あるいはalt属性値が空の画像を枠で囲む
  • リンクのパスを表示する
  • ブラウザの画面内を拡大あるいは縮小する
  • テーブルのセルを表示する
  • ブラウザのウィンドウおよび表示領域の幅と高さを表示する
  • HTMLおよびCSSの構文をチェックする
  • W3C/WCAG 1.0 あるいは米国リハビリテーション法508条でアクセシビリティをチェックする
  • Webページのソースコードを表示する

などなど、フロントエンド・エンジニアの一連の作業を数倍楽にしてくれます。

(2)Color Schemer ColorPix
デスクトップ上のどのピクセルからも、カラーコードを取得してくれます。RGBだろうとHEXだろうとCMYKだろうと、ワンショットでコードをコピー。そこから、その色がつかわれている部分のコードを検索してもいいですし、フォトショップに直行してもいいですし。この手のツールはいっぱい出ていて、私はこれのほかにNattywareが出しているpixieも使用しましたが、今のところ、ColorPixの方が気に入っています。

(3)Typetester
コーディングやデザインを私が行う上で役に立ったというよりも、クライアントとフォントやフォントカラーを相談するのに役立ちました。特に英語環境で仕事をしていたころは、基本フォントが日本語よりもはるかに多いですし、フリーランスの小規模プロジェクトのクライアントは、フォントには異常なほどのこだわりを持っているのです。Typetesterを使うことで、クライアントが自分でフォントを調整してどのように見えるか確かめることができるので、フォントだけのためにいくつもサンプルを作ったり、ダメだしを食らったりすることから何度も救われました。ウノウでは、多分使わなくて済みそうです。

2006年7月12日

個人的におすすめなFirefoxの拡張を紹介します
このエントリーをはてなブックマークに追加 このエントリーをlivedoorクリップに追加

こんばんは、新人のnaoyaです。

皆さんもネットサーフィンするときには、Firefoxを使っている人が多いと思います。
以前にも、Firefoxの拡張のTab Mix Plusを紹介しましたが、今日は個人的におすすめでないとかなり不便な拡張を紹介したいと思います。

All-in-One Gestures
All-in-One Gesturesは、Mouseボタンの組み合わせでFirefoxを操作できる拡張です。特に便利なのは、ページの中でマウスの右クリックボタンを押しながら左クリックボタンを押すとページを戻る機能です。ちなみに逆の組み合わせ(左クリックボタンを押しながら右クリックボタンを押す)と進みます。)

Autohide
Autohideは、FirefoxでF11キーボタンを押したときにFull Screenモードになりますが、通常のFull Screenモードではナビゲーションバーなどが表示されてしまいますが、ナビゲーションバーなどを非表示にしてくれる拡張です。
この拡張をインストールした後、Full Screenモードでネットサーフィンをするとかなり画面が大きくなるので便利です。

Context Search
Context Searchは、ページの中で選択されているキーワードで検索してくれる拡張です。検索サイトは、右上に表示されている検索ボックスに登録されているサイトから選択することができます。
この拡張があると、わざわざ検索ボックスで入力したり、検索サイトのトップページから検索する必要がなくなります。

Feedview
Feedviewは、RSSを整形して表示してくれるサイトです。例えば、ウノウ株式会社のお知らせRSSを表示すると次のような感じになります。

ウノウ株式会社のお知らせRSSの表示


また、この記事によるとFirefox 2.0に正式に組み込まれるようになったみたいですので、Firefox 2.0からはインストールする必要がなくなります。

Resizeable Textarea
Resizeable Textareaは、テキストボックスのサイズを自由自在に変更できる拡張です。

その他にもおすすめのFirefoxの拡張がありましたら、ぜひ教えてください!

2006年7月11日

バグの状態でプロジェクトの状態を知る
このエントリーをはてなブックマークに追加 このエントリーをlivedoorクリップに追加

こんにちは!やまもと@テスト番長です。

以前バグのステータスというのを書いたのですが、その最後の方で続きがあるようなことを申したら、気になるから教えろという奇特な方がいらっしゃいましたので今回は続きを書いてみましょう。

BTSはバグを管理するだけの道具ではありません。バグを追いながら適切に記録をつけて統計を取ることで、プロジェクトやチームの状態を知ることが出来ます。例えば、以下のような事象です。(なお、WEBアプリが前提)


・バグの報告数が増えず、結果がVERIFIEDになることが多い。
→まだデバッグが始まったばかりのプロダクトか、慎重過ぎるテスターがアサインされています。

・バグの報告数が少なくなり、VERIFIED以外の結果が目立つ。
→デバッグは最終段階を迎えています。もしもまだ納期前ならば、それなりに上手く行ったプロジェクトでしょう。

・NEWが発生してからRESOLVEDになるまでの平均時間が長い。
→バグに対してプログラマのパワーが不足しているかもしれません。過酷な労働を強いないようにしましょう。

・REOPENDになる割合が増加している。
→初期デバッグであったり、新人プログラマをアサインした後などはこの割合が増加します。プロダクトに慣れて理解が深まれば減っていくはずのものですが、理由無く増えているならばプログラマのモチベーションや労働環境が悪化していないか気をつけた方が良いです。

・結果ステータスの中で、INVALID、DUPLICATEの割合が多い
→未熟なプロジェクトマネージャが犯しやすいミスの一つに、プロジェクトの最終段階で素人テスター(報告者)を大量投入してデバッグしようとする行為があります。そんなときにはINVALID、DUPLICATEの割合がどっと増えます。無駄な報告を裁く為にパワーを使ってしまっていませんか?
レアケースですが、発注者が複数の重層構造になっている場合もこうなることがあります。

・FEEDBACKになるNEWが多い
プログラマとテスターのコミュニケーションは取れているでしょうか?FEEDBACKは不慣れなテスターがいたり、バグ報告を厳密に行うルールにしたりすると多く発生しますが、コミュニケーションさえ円滑に取れていれば多少のことは直接話し合えば済むはずです。それ以外に、プログラマのモチベーションが低いケースもあります。なかなか修正したがらないようなケースです。

・SUSPENDEDが全体の1/4以上ある。
プロマネがミスを犯してプロジェクト進行上のトラブルが発生し回り道しているか、プログラマのモチベーションが低いか、上層部から何が何でもアクティブなバグ数を減らすようにと強引な指示が出て退避されています。

・WONTFIXが目立つ。
もしプロジェクトの完全終了直前でなければ、プロジェクトチームに熱意が不足しているか、開発費が不足しているか、そのプロダクトのバージョン2の計画が既に立ち上がっていませんか?

・NOT FIXABLEが目立つ。
もしプロジェクトの完全終了直前でなければ、プロジェクトチームに技術が不足しているか、開発費が不足しているか、ITリテラシーの低い発注元が無茶な要求をしていませんか?

・ASSIGNEDへのチェンジ回数がバグ数の1.4倍以上ある。
バグ修正がたらいまわしになっていませんか?もしくは、過酷な労働条件に耐えかねたプログラマが夜逃げして、何も知らない哀れな後釜に全てを託したりしませんでしたか?


上記は状況判断に使える系の見方ですが、
役に立たない&有害な「間違った情報の見方」もありますので、そっちも少し書いてみます。

・ASSIGNEDからRESOLVEDへ移行する時間を気にする。
→要は修正にかかったコストだろうと、これを個人や組織の能力の指標にしようという輩がたまにいますが、バラツキが大きい数字なのでちっとも参考になりません。少なくともREOPENDの時間も足さなくては意味が無いことくらい気付いて欲しいものですね。

・NEWの個数が少ないのを気にし過ぎる。
→デバッグが進行していることのある程度の指標にはなりますが、報告を増やすだけなら幾らでもやりようがあるので不毛です。逆に、自然な状態を観測することが有益です。

・RESOLVEDが減らないのを気にする。
→結果が出てバグ処理が終らないと落ち着かない気持ちは分かりますが、検証の難しいバグもあります。そしてここで確認されたものは以後監視されないわけですから、慌てさせてチェックの手を抜くべきではないのです。「バグを3つ直すと1つバグが生まれる」という諺もあるとか。


さて、お楽しみ頂けましたでしょうか?
ウノウくらいの規模のチームですと、こういった判断方法を使わずとも雰囲気で判るのですが
大所帯で色々上手くいかないという職場にお勤めの方はご参考にしてください。
数値で可視化可能なので、直訴の材料なんかにも使えますよ?

2006年7月10日

mod_proxy_balancer 小技集
このエントリーをはてなブックマークに追加 このエントリーをlivedoorクリップに追加

こんにちは sato です。
 ベンチャーでは高価なハードウェアバランサなどを購入することはできないですが、
 apache2.2 から mod_proxy_balancerという apacheモジュールの ソフトウェアバランサが
 追加されたので、フォト蔵でも使用しています。 
 
 今のところ proxy サーバがボトルネックになることはないです。

 想定構成は以下とし、apacheは 2.x を使用しました。
  proxy1
   +------web1
   +------web2 ...
   +------webN
 
・基本設定

httpd.conf

  LoadModule proxy_module modules/mod_proxy.so
  LoadModule proxy_balancer_module modules/mod_proxy_balancer.so
  ProxyPass / balancer://photoweb/ timeout=2
  <Proxy balancer://photoweb>
   BalancerMember http://web1.photozou.jp loadfactor=10 keepalive=On
   BalancerMember http://web2.photozou.jp loadfactor=10 keepalive=On ..
   BalancerMember http://webN.photozou.jp loadfactor=10 keepalive=On
  </Proxy>

 / にアクセスした際に、BalancerMember に proxyされ、応答のないサーバには自動的にバランスしなくなります。
 BalancerMember には IPアドレスや URLがつかえます。一般的には IPアドレス を指定したほうが
 高速ですが、フォト蔵ではIPアドレスは使用せず、すべて名前で指定しています。
 

・etag に関して
 etagの生成アルゴリズムはデフォルトで

 FileETag INode MTime Size 

 となっています。
 つまり web1 に画像を取りに行って ETag 値をもらっても web2にアクセスすると
 i-node値が異なるため、違うETag値が返ってしまうので、 304 になりません。
 
 そこで、web1, web2の httpd.conf に

 FileETag MTime Size

と記述すると
 ファイルの最終修正時刻とファイルサイズを見るようなるので、どちにアクセスしても304が返るようになります。

・アクセスログに関して
 web1,web2 は proxy1 からアクセスされるので ローカルネットの IPAdress が
 アクセスログに残ってしまいます。そこで web1,web2 に mod_rpaf を導入しましょう

 http://stderr.net/apache/rpaf/

 このモジュールをロードするとX-Forwarded-For を Host に上書きしてくれます。
 今回は mod_rpaf-0.5.tar.gz を使用しました。
 
 Makefile の APXS= の部分を適切な場所に書き換えて

 tar zxfv mod_rpaf-0.5.tar.gz
 make rpaf-2.0
 sudo make install-2.0

 httpd.confに

 LoadModule rpaf_module modules/mod_rpaf-2.0.so
 RPAFenable On
 RPAFsethostname Off
 RPAFproxy_ips 127.0.0.1 10.0.0.10

 RPAFproxy_ips に書き換える HOSTのIPアドレスを連続して書けるのですが、10.0.0. や 10.0.0.0/16
 などと書くことはできません。

 これは mod_rpaf-2.0.c の 123行目付近が strcmp(remote_ip, list[i]) == 0
 となっているのが原因なので。これを strstr や strncmp に変更すれば
 解決しそうです。

・SSLに関して
 最初は poundを使用するつもりでしたが、不安定になることがあったので
 proxy1ではmod_sslでSSLデコードしています。よって、ローカルネット内ではhttp でパケットが流れています。
 しかし web1 が http、httpsでどちらでリクエストが来たのかを知りたい場合があります。
 例えばログイン部分でHTTPS と HTTP のリンクを切り替えたりする場合です。

 そのような場合には

 httpd.confに

 RequestHeader set X-SSL-REQUEST %{HTTPS}s

 とつけてあげると、 X-SSL-REQUEST というヘッダが入ります。 %{HTTPS}s の部分は
 apacheがSSLだと on と加えてくれますので、web側ではこのヘッダを見るのが
 良いかと思います。
 X-SSL-REQUEST は自由に変更できるので、推測されにくい文字列の方がよいかもしれないですね

・Proxyする必要のあるものと無いもの
 静的な画像データなどは web にわざわざ取りに行かなくて proxyサーバに乗せておけば
 良いと思います。mod_rewrite で

 RewriteRule ^(css|img|js)/ - [L] 

 などとして、 /img などのファイルは そのまま document_root に飛ばすのが良いかと思います。

 他にも役に立つノウハウ等ありましたら、ぜひ教えてください。

2006年7月 6日

PHPでパスワード文字列を生成
このエントリーをはてなブックマークに追加 このエントリーをlivedoorクリップに追加

こんにちは,ttsuruoka です.

会員制のサイトなどを作るとき,
ユーザー登録時に仮のパスワードを発行したいときがあります.
そういうときに便利なのが PEAR::Text_Password です.

こんな感じで使えます:

$passwd = Text_Password::create();
echo $passwd;
// 出力 :
// praimifrou

デフォルトでは覚えやすい(発音可能な)10 文字のパスワードを生成しますが,
以下のようにすると複雑なパスワードも生成できます:

$passwd = Text_Password::create(16, 'unpronounceable');
echo $passwd;
// 出力(16文字の発音不可能なパスワード): 
// mArR99H3ZN#JsuK%

2006年7月 5日

マウ筋俺設定
このエントリーをはてなブックマークに追加 このエントリーをlivedoorクリップに追加

こんにちは、ケンジです。

前のエントリーで書いた「マウ筋」について。僕の使い方を紹介します。

マウ筋はとてもよくできたソフトで、デフォルト設定、各アプリケーション毎の設定が作成可能で、各設定を継承して新しい設定を作成する事もできます。エクスプローラーや、ブラウザー等の「回覧系」のアプリケーションでは「R←」で戻る(Alt+←)「R→」で進む(Alt+→)。エディタ系のアプリケーションでは「R←」で元に戻す(Ctrl+Z)「R→」でやり直し(Ctrl+Y)「R↓」で新規作成(Ctrl+N)といったように、基本的な設定を作っておいてそれを継承する形でそれぞれのアプリケーションの設定を作成する事ができます。多ボタンマウスを使用されていない方は、Ctrl+CやCtrl+Vのジェスチャーを作っておくのも良いかもしれません。

タブ対応ソフトの場合は「R↓→」でタブ閉じ(大体Ctrl+F4)、それ以外は「R↓→」で終了(Alt+F4)としています。

また、単発のショートカットキーだけではなく、組み合わせたアクションも設定できるので、
Windows標準のExploreでは、「R↑←」で(Alt+V、O、U)という設定にしておいて、上階層へさくっと上がれるようにしています。

その他にも色々な機能が満載ですが、今日はこの辺で。


About 2006年7月

2006年7月にブログ「ウノウラボ by Zynga Japan」に投稿されたすべてのエントリーです。過去のものから新しいものへ順番に並んでいます。

前のアーカイブは2006年6月です。

次のアーカイブは2006年8月です。

他にも多くのエントリーがあります。メインページアーカイブページも見てください。

Zynga Japan