部下主導でミッション達成してもらい、ついでに成長してもらう

ボトムアップ組織のマネジメントとは何なのか」 https://medium.com/@koichirohonda/%E3%83%9C%E3%83%88%E3%83%A0%E3%82%A2%E3%83%83%E3%83%97-%E3%83%9E%E3%83%8D%E3%82%B8%E3%83%A1%E3%83%B3%E3%83%88-df61048cda68

この記事を読んで、自分のコンテキストに沿ってまとめなおしました。結構言葉を足したりしています。意訳です。

  • 解決する価値のあるミッションを見つけるのは上司の仕事
  • ミッションを解決するのが部下の仕事

上司は、部下に良い解決方法を見つけて成果物を出してもらうのが目的。

上司の行動アンチパターン

  1. 認識伝達に失敗している。
    目的、やる意義、最終的な成果物のイメージ、これらは間違いなく認識してもらう必要がある。
  2. 誰がどの範囲をやるのかはっきりさせない。
    役割分担は俯瞰できる上司がやる。はっきりさせないと部下は混乱して衝突して萎縮する。
  3. 自分で時間を管理させない。
    指示待ちになりがち。
  4. 介入しすぎる
    レビュー以外しない、自分で考える機会を奪わない、必要な情報を制限しない。 プロセスに致命的なところがなければ文句はつけない。失敗させるときはさせる。

失敗条件

  1. 部下が目的や成果物の完成形を理解できていない。
  2. 部下が、アタマは上司だと認識し、自分で考えなくなる。

まとめ

ミッションと責任を与えて質の高い成果物を出させましょう。失敗の経験も価値があります。
自分の頭で考える部下に成長したら大成功です。

補足

冒頭の

解決する価値のある問題を見つけるのは上司の仕事
ミッションを解決するのが部下の仕事

ってのは使えそうな視点だと思いました。
解決する価値のある問題を見つけることができる"上司"を育てましょう、
ミッションを解決できる"部下"を育てましょう。
育成段階を考える手助けになりそう。

最近読んだ本 社会編

短期間で社員が育つ「行動の教科書」3

短期間で社員が育つ「行動の教科書」――現場で使える行動科学マネジメントの実践テキスト

石田淳
MORSの法則

  • Measurable 計測できる
  • Observable 観察できる
  • Reliable 信頼できる
  • Specific 明確化されている

これを満たしたとるべき行動について、誰でも実行できるようにまとめた薄い教科書、それが「行動の教科書」。

知ってるつもり 無知の科学 4

知ってるつもり――無知の科学

スティーブ・スローマン フィリップ・ファーンバック
人間は物事の因果を考えるのが得意だ。なぜならそれが生存競争を生き抜く要因だったからだ。個人は知識のコミュニティに依存し、全体の知識を個人の知識と誤認しがちで、自分の理解の浅さに気付きにくい。結果、理解の曖昧な箇所を別の因果モデルで埋め、間違った結論を導き出す。理解度を上げるためには、情報量を増やしても無意味で、単純な因果モデルを与えることが有効そうだ。無知は人類がうまく付き合っていくべきものである。

エンジニアリング組織論への招待 3

エンジニアリング組織論への招待 ~不確実性に向き合う思考と組織のリファクタリング

広木大地
方法論、心理学的なモデルの詰め合わせ。「問題解決大全」のエンジニア用みたいな感じで、まとまりが薄い。
組織内での仕事の仕方、マネジメントでの悩みについて何かヒントが欲しい時、読んでみては。

Team Geek -Googleギークたちはいかにしてチームを作るのか 5

Team Geek ―Googleのギークたちはいかにしてチームを作るのか

Brian W. Fitzpatrick

確実にコントロールできる変数は君自身。ソフトウェア開発はチームスポーツである。
謙虚(Humility)
  世界の中心は君ではない。常に自分を改善していこう。
尊敬(Respect)
  一緒に働く人のことを心から思いやろう。その能力や功績を高く評価しよう。
信頼(Trust)
  自分以外の人は有能であり、正しいことをすると信じよう。そうすれば仕事を任せることができる。

仕事論のうち他の何を忘れてもこの3つは忘れないようにしたい。

スモール・リーダーシップ チームを育てながらゴールに導く「協調型」リーダー 4

スモール・リーダーシップ チームを育てながらゴールに導く「協調型」リーダー

和智 右桂

リーダー像
目標を示し、それを達成するための作戦を立て、そこに向かってメンバーを動かしていく人
一日の中に考える時間を作る
一人で動かない

Rebuildで学ぶ英語学習法

19: Accents, Git Workflow, Logging (sekimura)

  • 読み書きだけでなくリスニングとスピーキングやらないと

Aftershow 86: The Japanese Protocol (N)

  • 英語が読めない人はこれから死んでいくだけだから、読めるようになったほうがいいね
  • ビデオ撮ったりなんなりでフィードバックもらうの大事
  • インプットはいくらでもあるけど、アウトプットでフィードバックループがないと上達するパスがない

Aftershow 90: Milestones in Zombie Evolution (hak)

125: Toothbrush Can Be Exciting (N, naan)

  • http://hotchemi.hateblo.jp/entry/2015/12/31/091301
  • 間違っていることを気にしない、とにかく出す
  • DMM英会話
  • 自分が興味があることで学習する
  • 何も分からなくても100回聞くと分かるようになってくる
    • セリフ覚えるまで
  • 英語喋れないとか、21世紀だからあり得ないよね
  • 海外の会社の面接を受ける

Aftershow 126: Everything Except Mayonnaise (higepon)

  • シャドウイングやディクテーションで使う題材について
  • こっちに来たら絶対使うであろうフレーズとか単語
  • 頻度順に並んだフレーズ集
  • 自己紹介の練習
    • 丸暗記
  • 一切脳への負荷無く口から出るフレーズをいかに増やすか
  • 同じPodcastを1日10回聴く
    • フレーズで丸ごと覚えちゃう
    • ドラマや映画も
  • Friends
  • 会話の中によく出てくるものから
  • 自分で自分のことを話せるようになる
  • 単語で答える
  • 1人で通勤中英語でブツブツ喋る
    • 仕事の話
    • ブログの内容
  • アプリのフレーズ集
  • 毎日喋る
  • 発音とか文法を気にしすぎ 気にしないで話す

まとめ

Nさんがめっちゃ煽ってくる。

Slack

目的があってツールを導入するもんだという前提はあるとして、弊社では上司の一存でSlackが導入された。上司には目的があるんだけどそれを広く共有している感じではない。結果、皆は言われたからインストールしてみた程度の認識に見える。積極的にSlackを使ってみて在り方を模索したほうが良いと思ってる。Slackは情報共有を加速させるもので、そもそも情報共有するという文化/意識がないと意味がない。

Natural sort order for PostgreSQL

Natural sort orderPHPではnatsort関数で実現できるソート方法です。
例えばsort関数でソートすると

<?php
$a = ['file1', 'file2,' 'file10'];
sort($a); // => ['file1', 'file10', 'file2']

となるところ、natsort関数では、

<?php
$a = ['file1', 'file2,' 'file10'];
natsort($a); // => ['file1', 'file2', 'file10']

となる。通常文字列ソートすると辞書式順序に従うのだが、ユーザが任意のコンテンツ名に連番付けて整頓するようなサービスでは、Natural orderは有用だ。

PostgreSQLでNatural order

PostgreSQLではどうすんのかなと調べてみたら、標準関数などでは用意がないが、関数を書いた人を見つけた。

gist.github.com

SELECT * FROM files FROM filename;
-- -> filename: file1, file10, file2

SELECT * FROM files FROM naturalsort(filename);
-- -> filename: file1, file2, file10

PHPのnatsort関数と全く同じ結果になるわけではないようだけど、ほとんどこれで十分なのでは。

naturalsort関数の動作する仕組み

まずFROM句を取り出して動きを確認してみる。

SELECT regexp_matches('2file', '0*([0-9]+)|([^0-9]+)', 'g');
regexp_matches
{2,null}
{null,file}

数字とそれ以外に分解して行を作っている。0*で0パティング(01,02,…10,11とか)を無視する。

 SELECT string_agg(convert_to(coalesce(r[2],length(length(r[1])::text)::text || length(r[1])::text || r[1]),'SQL_ASCII'),'\x00')
 FROM regexp_matches('2file', '0*([0-9]+)|([^0-9]+)', 'g') r;
string_agg
112 file

(112,fileの間は\x00
string_aggで、regexp_matchesで出力された複数行を`\x00'で区切った1つの文字列にしている。
集約前に、convert_toの引数で各行に何をしているか、以下のようになる。

regexp_matches convert_to(…)
{2,null} 112
{null,file} file

112とは、length(length('2')) || length('2') || '2' の結果出力される数字だ。数字の桁数を連結している。最終的にはstring_aggで集約した文字列"112 file"がORDER句のソートに使われるわけだが、112という数字を作る意味は何か、数字の例で確認すると分かりやすい。

length(length(text)) length(text) text
1 1 1
1 1 2
1 1 3
1 2 10
1 2 20
1 3 100
1 3 200

textの桁数が変わらないうち(1,2,3,…9)は、上位桁が変わらない。辞書式順序では、単純にtextだけで比較されることになる。
textの桁数が上がる(10,100)と、上位桁であるlength(text)の数が上がる。辞書式順序では、まずlength(text)(textの桁数)で比較され、同じであれば次にtextで比較される。
これで辞書式順序でも意図した大小関係で比較できるわけだ。

textの数を大きくしてみよう。

length(length(text)) length(text) text
1 9 999999999
2 10 1000000000
2 11 10000000000
3 100 1e99
4 1000 1e999
5 10000 1e9999
6 1e5 1e99999
9 1e8 1e99999999
10 1e9 1e999999999

length(text)が2桁以上になればlength(length(text))が上がる。text=1e99999999、length(length(text))=9までは問題なく動作する。text=1e999999999、length(length(text))=10となると、辞書式順序ではlength(length(text))=2より小さいとみなされ、正しく動作しない。が、1e999999999なんて大きな数を扱うことはないのではないか。

普通、辞書式順序で数字をソートする時は、対象の数字の最大桁数を調べて0パティングすると思うが、あらかじめ桁数が分かっていない場合は、制限があることを分かった上でこの手法を使うのは便利そう。

元のGistコードではエラーが発生したのでフォークした。Postgres 8.4(string_aggが無い)で動かす例も追記してある。 gist.github.com

FireFoxでdragoverイベントが発生しない

ドラッグアンドドロップできるファイルソートUIを作った の続き。

前回作ったデモサイト、FireFoxで動かないことに気づいた。dragoverイベントが発生していない。dragstartハンドラ内でDataTransferにsetDataしないと、dragstart以降のイベントが発生しないみたい。
また、dragoverでpreventDefaultしないと、dragover以降のイベントが発生しないブラウザがあるようだ。

修正コミット: dragever evet not fired in FireFox · kawausokun/reordering@32f1265 · GitHub
参考にした: 意外と知らないHTML5 API - Drag & Drop APIとは | CodeGrid

さらに、この変更以降、ドラッグ中のマウス横に「+」アイコンが表示されるようになってしまった。DataTransferに値を設定することで、dropEfectが変わってしまったのかもしれない。dropEfectをちゃんと設定してやる必要がある。

修正コミット: drop effect move · kawausokun/reordering@52ce123 · GitHub

ドラッグアンドドロップできるファイルソートUIを作った

f:id:kawauso7c:20170816192849g:plain

検証サイト: https://kawausokun.github.io/reordering/
ソース: GitHub - kawausokun/reordering: Reordering UI (experimental)

ファイル・フォルダをソートできるようなUIが必要になった。
単一のリストでのソートなら特に面倒なことはないが、フォルダを考慮する必要があると難易度が上がる。操作者が並び替えたいのかフォルダに突っ込みたいのかを判定しないといけない。
Fancytree - Example Browser のUIを参考にした。

基本的な考え方

一般的なドラッグアンドドロップによるソートUIは、ドラッグ中に即時ソートするものも多い。(例: Vue.jsのリストレンダリングとhtml5のドラッグ&ドロップの実装 - Qiita)
しかしファイルをフォルダに入れる時などは、ドロップ先が移動したり変化したりすると、狙ったところに移動させにくくなる。なので、Fancytreeのように, ドラッグ中は挿入先を示すマークを表示し、ドラッグ終了時にファイルを移動させる方が良い。

f:id:kawauso7c:20170816194847p:plain

挿入場所は以下のように分類できる。

  • ドロップ先ファイル・フォルダの直前に挿入
  • ドロップ先ファイル・フォルダの直後に挿入
  • ドロップ先フォルダに挿入

ドロップ先がフォルダの時、前後に挿入したいのかフォルダに入れたいのかを判定する必要がある。ドロップ先の要素内での、カーソルの座標で決定することにする。

f:id:kawauso7c:20170816201608p:plain

ドロップ先要素の上部にカーソルがある場合は「直前に挿入」、下部なら「直後に挿入」、真ん中なら「フォルダに挿入」とみなす。
ドロップ先がファイルなら「直前に挿入」と「直後に挿入」だけ。

検証サイトでドラッグ中に表示される"y"はドロップ先要素内でのカーソルのY座標、"mode"は挿入場所を示している。

実装

Vue.jsで実装している。
Y座標さえ計算できれば、挿入場所を判定し、ドロップ先要素にクラスを付与することで、挿入先を示すマークをCSSで表現できる。

注意

  • 現状フォルダの中にフォルダは挿入しない想定。やるとしたらファイル・フォルダをコンポーネント化し再帰する実装とするだろう。
  • 製品とするならもう一歩使い勝手向上を狙いたい。例えばファイルが入ったフォルダがリストの最後にある場合に、そのフォルダの下に挿入できない。