2015-08-15

HRTの原則

Team Geek ―Googleのギークたちはいかにしてチームを作るのかで紹介されている言葉であり、本書ではほぼ一冊すべてをかけてこのHRTの原則とその実践方法とを様々な角度から紹介している。

HRTの原則とは、優れた開発チームでは

1. 謙虚(Humility)
2. 尊敬(Respect)
3. 信頼(Trust)

の3つの価値が大切にされており、エンジニアとしてもチームや組織、顧客との対話においてこれらの価値を重んじていくことが成功につながる、というものである。

あらゆる人間関係の衝突は、謙虚・尊敬・信頼の欠如によるものだ
Team Geek p.15

とりわけペアプログラミングやコードレビューが浸透しているチームであればあるほど、HRTの原則の重要度は高い。他人の書いたコードについてコメントする機会が多く、その指摘が常に相手のコードを全面肯定するわけではないからだ。この意味においてレビュー文化が浸透している組織では、エンジニアは常に知的ボクシングをしている、と言うこともできる。レビューで角のある発言をすることは、ボクシングのグローブに釘を仕込むようなものなのだ。

HRTを軽視する人に対して、周囲はなかなか注意しづらい。

例えば、コードレビューでキツいコメントをした人がいるとしよう。本書で「アンチパターンに満ちあふれている」例として紹介されている次のようなコメントだ。

「このメソッドの制御フローは完全に間違ってますよ。みんなが使ってる標準的なxyzzyコードパターンを使うべきですよ」
Team Geek p.21

こういうコメントをしてしまう人は、周囲や上司の「もう少しソフトな言い方できないの？」という指摘に対して、しばしば「何か間違ったこと言ってますか？内容については反論の余地はないですよね」というような角が立つ返答をし、チームの人間関係をさらに悪化させる。

反論が来るかもしれないから指摘しづらい、というだけではなく、精神論だと言われればそれまでだし、君のポリシーを僕に押し付けるなと言われてもおかしくないし、プロなんだから傷つくコメントをされるようなアウトプットをする側に問題があるだろ、と言われるかもしれない。または相手がHRTの価値観を受け入れてくれたとしても、「小学校の学級会かよ」というレベルの内容だとも言える。このような各種配慮から、カチンときたり、その言い方はないだろ、と感じながらも、それを相手に指摘することが憚られるケースが多々ある。

そんな場面に出くわすことがあったら、次からはグッとこらえて我慢するのではなく、「うちの開発チームでは、HRTの原則を大切にしていきたいと思っているんだ」という言葉を添えてそのエンジニアに本書に書かれている理念を説明すると良いかもしれない。

ちなみに以前からの私の個人的なポリシーは、「ソフトウェア開発はバーでしっとり語り合うように」。お互い尊敬・尊重しあう中で、気持よく高め合っていきたいものである。

2015-08-15

Javascriptのカスタムエラーの作り方

Javascript

function foo() { bar(); }
function bar() { baz(); }
function baz() { throw new Error('X'); }

(function main() {
    try {
        foo();
    } catch (error) {
        console.log(error.stack);
    }
})();

Error: X
    at baz (http://localhost/CustomError.html:8:24)
    at bar (http://localhost/CustomError.html:7:18)
    at foo (http://localhost/CustomError.html:6:18)
    at main (http://localhost/CustomError.html:12:9)
    at http://localhost/CustomError.html:16:3

var createError = (function () {
    var hasOwnProperty = Object.prototype.hasOwnProperty;
    return function createError(name, message, properties) {
        var e = new Error(message);
        e.name = name;
        if (properties)
            for (var key in properties)
                if (hasOwnProperty.call(properties, key))
                    e[key] = properties[key];
        try {
            throw e; // for IE
        } catch (e) {
            return e;
        }
    };
})();

var timeoutError = createError('TimeoutError', 'session timeout');
var fetchError = createError('FetchError', '404 Not Found', { statusCode: 404 });

2015-08-14

3 × 3 の表示

HTML CSS

<style type="text/css">
    html, body {
        padding: 0;
        margin: 0;
    }
    .grid3x3 {
        display:table;
        height:100%;
        width:100%;
    }
    .grid3x3 > div {
        display:table-row;
        width:100%;
    }
    .grid3x3 > div:first-child,
    .grid3x3 > div:last-child {
        height: 100px;
    }
    .grid3x3 > div > div {
        display:table-cell;
    }
    .grid3x3 > div > div:first-child,
    .grid3x3 > div > div:last-child {
        width:100px;
    }

    div {
        outline: 1px solid orange;
    }

</style>
<div class="grid3x3">
    <div>
        <div>1</div>
        <div>2</div>
        <div>3</div>
    </div>
    <div>
        <div>4</div>
        <div>5</div>
        <div>6</div>
    </div>
    <div>
        <div>7</div>
        <div>8</div>
        <div>9</div>
    </div>
</div>

HTML

<div class="table">
    <div class="row">
        <div class="cell1">row 1</div>
        <div class="cell2"></div>
        <div class="cell3"></div>
    </div>
    <div class="row">
        <div class="cell1">row 2</div>
        <div class="cell2">
            <img src="http://upload.wikimedia.org/wikipedia/commons/1/1b/Square_200x200.png" />
        </div>
        <div class="cell3"></div>
    </div>
    <div class="row">
        <div class="cell1">row 3</div>
        <div class="cell2"></div>
        <div class="cell3"></div>
    </div>
</div>

CSS

html, body {
    width:100%;
    height:100%;
    margin:0;
    padding:0;
}
.table {
    display:table;
    width:100%;
    height:100%;
    border:1px solid #000;
}
.row {
    display:table-row;
    height:100%;
}
.cell1, .cell2, .cell3 {
    display:table-cell;
    width:33%;
    height:100%;
    border:1px solid #CCC;
}
.cell2 > img {
    width:100%;
    height:auto;
}

2015-08-14

3 × 3 の表示

HTML CSS

<style type="text/css">
    html, body {
        padding: 0;
        margin: 0;
    }
    .grid3x3 {
        display:table;
        height:100%;
        width:100%;
    }
    .grid3x3 > div {
        display:table-row;
        width:100%;
    }
    .grid3x3 > div:first-child,
    .grid3x3 > div:last-child {
        height: 100px;
    }
    .grid3x3 > div > div {
        display:table-cell;
    }
    .grid3x3 > div > div:first-child,
    .grid3x3 > div > div:last-child {
        width:100px;
    }

    div {
        outline: 1px solid orange;
    }

</style>
<div class="grid3x3">
    <div>
        <div>1</div>
        <div>2</div>
        <div>3</div>
    </div>
    <div>
        <div>4</div>
        <div>5</div>
        <div>6</div>
    </div>
    <div>
        <div>7</div>
        <div>8</div>
        <div>9</div>
    </div>
</div>

2015-08-14

背景画像の繰り返し方を定義

１．ｘ軸方向にのみ繰り返す（background-repeat: repeat-x）
２．ｙ軸方向にのみ繰り返す（background-repeat: repeat-y）
３．背景画像を繰り返さない（background-repeat: no-repeat）

css

box1{
　　　width: 150px;
　　　height: 80px;
　　　padding: 10px 0px 0px 10px;
　　　border: solid #FF9999 1px;
　　　background:url(img/haikei2.gif);
　　　background-repeat:repeat-x;
}

.box2{
　　　width: 150px;
　　　height: 80px;
　　　padding: 10px 0px 0px 10px;
　　　border: solid #FF9999 1px;
　　　background:url(img/haikei2.gif);
　　　background-repeat:repeat-y;
}

.box3{
　　　width: 150px;
　　　height: 80px;
　　　padding: 10px 0px 0px 10px;
　　　border: solid #FF9999 1px;
　　　background:url(img/haikei2.gif);
　　　background-repeat:no-repeat;
}

2015-08-10

プロダクトマネージャーって・・・

プロダクトマネージャープロダクト

うちの会社では、プロジェクトマネージャーって、いるけど、

人、サービスではなく、プロジェクトしか見てないから、

それってどうなの？って思ってる。

なので、意識してどうゆうことをやればいいのか・・・って考えてみた。

そうしたら、プロダクトマネージャーって言われる人を作ればいいんじゃないか、って思った。

具体的にどんな仕事をすればいいのか？ってことをつらつらと書いていこうと思います。

プロダクトマネージャーの仕事は、

価値があって、使いやすくて、実現可能という目的を満たす上で

必要最小限(よけいなものがいっさい削ぎ落とされて洗練された)製品を特定することである。

これにより、製品化までの時間と製品の複雑さを最小限にするのである。

サービススペシャリストとも言うのかもしれないですが、

本当にユーザーが必要としているもの

この機能に価値があるのか？っていうことを検証する人

なんとなく、ディレクターさんから言われた仕様どおりに作って、

なんとなく、イベントなり、機能をリリースして、

なんとなく、売り上げが上がった。

こんなことを続けていると、

意味のないものが出来上がったことに気づかない・気づけない。

全然、分析・計測できていない。

こんなことを続けているようでは、事業の成功は５年・１０年やっていても、

見えてこない。

どの会社でも、あるのかもしれないですが、

そうならないように、願うばかりです。

2015-07-28

zero to one読んだ

マーケティングマネジメント本

【世界に関する命題のうち、多くの人が真でないとしているが、

真だと考えているものは何か？】

これは、本書の最初の方で、語られるものなんですが、

ずっと考えながら読んでた・・・

自分なりにたどり着いた答えは、後ほど・・・

大きい組織の中で、新しいものを開発する(すでにあるものをコピーするわけではないもの)って、開発しづらい。一人ではさらに難しい。

これ、今、自分がおかれている状況と似ていて、

共感してた。それだけのことをやりたいと思うなら、投資する必要があるよねって、

感じます。それが、本気かどうかを示すものなんじゃないかな・・・

・少しずつ段階的に前進すること

・ムダなく柔軟であること

・ライバルのものを改良すること

・販売ではなくプロダクトに集中すること

時間を投資して、未来を創っていけるようになりたいなーって、

思うようになった。

これって、お金は凄く魅力あるけど、それだけでは、未来は創れないからって

意味も含まれている。

業務上、自分はWebエンジニアなんですけど、

プロダクトを考える時に、マネタイズの観点は必要なんだけど、

有名じゃなくても、広く使われるものを作りたいと思ってます。

その中で、一つだけ、やってみたいと思えるものが見つかって、

それは、教育サービスでした。

教育サービスって、人の成長・変化に関わるものなので、

それだけ責任も伴うんですよね。

自分の会社がダメになったので、サービス終了します。では、

使っていた人の未来がなくなってしまう。

それだけ、中途半端なことできないし、生半可なことできない。

責任も重みを感じながら、これって何のため？っていうのを

意識しながら、開発をしていきたいって強く思った。