A Day In The Boy's Life -92ページ目

A Day In The Boy's Life

とあるエンジニアのとある1日のつぶやき。

昨日は、ワールドカップ日本代表惜しかったですね。

最後の最後まで一生懸命に走る選手の姿をテレビで見ていて、こちらも胸が熱くなりました。

4年に一度しかチャンスが巡ってこないという舞台において、自分の選手生命やそれまでに取り組んできた練習の日々を思えば、そこにかける思いというのは並大抵のものではないと感じます。


サッカーの選評は語る資格が無いのでこの辺にしておいて、そういう熱い戦いの舞台と言うのは、一サラリーマンとしてはほとんど巡り合えるものではありません。

だからこそ、夢を諦めず自分を鍛え、また生まれ持った才能でそういう舞台に立てる人を羨ましく思えます。



単純な目的、わかりやすい達成感


スポーツというのは、やっている選手だけでなく応援している人々も、不思議とその試合の中に引き込まれるものです。

その一つは、目的が極めて単純だからではないでしょうか。

スポーツは試合に勝つと言う単純な目的があり、その目的のために選手は汗を流し、応援する人はその駆け引きに固唾を呑んで見守ることになります。


もちろん目的は単純でも、その勝利を得るためには相当なパワーが必要です。

言葉で勝った、負けたという言葉で片付けられるほどそのプロセスは単純ではありません。

しかし、その最後にはどちらかが勝利を掴み取り、もう一方は敗者となります。

結果は、冷酷なほどシンプルです。

しかし、そのシンプルな勝者になるために選手は頑張り、応援する人は熱くなっていきます。


そして勝者となったときに得られる達成感と言うものもきわめてわかりやすいものであったりします。

勝利の美酒に酔いしれる、今までの苦労が報われる、惜しみない拍手が贈られる、その後に訪れるものは人それぞれでしょうが、勝者には喜びとともに達成感が味わえ、敗者は涙とともに悔しさがこみ上げてきます。


結果が全てというわけではありません。

そのプロセスの中にも感動が生まれ、例え負けたとしても自分の実力を出し切った満足感や感謝の拍手を送る人も大勢いるでしょう。

しかし、試合の中で熱くなれる理由は単純な目的とわかりやすい達成感にあるのではないかなと思うわけです。



仕事における目的と達成感


自分が置かれている環境に目をやれば、スポーツのようなわかりやすい目的や達成感と言うものはなかなか存在しなかったりします。

営業が受注を勝ち取るためと言うのがあるかもしれません。

エンジニアが長い期間構築してきたシステムがリリースされると言うのがあるかもしれません。

しかし、何れもスポーツにおける試合のような、この何時間何十分かで決まる、この人との勝負で勝者の側に立てるという大舞台というのを感じ取る機会は少ないでしょう。


結果として、仕事を勝ち取った、評価してもらえた、売上げが上がったというものが付いてくるかもしれませんが、それは少し後になって「今思えばあの時の日々が、あの時の行動が」という結果論でしかなかったりします。

スポーツとて、その試合の勝者になったからそこで終ると言うわけではありません。

また次の舞台が待っているのでしょう。

しかし、スポーツにおいては一つのはっきりとした区切りと言うものはわかりやすい形で存在しますが、仕事においてはそういうわかりやすい区切りもなかなかな見つかりません。

一つの仕事が終ると、また次の仕事がすぐに始まりますし、場合によっては複数の案件を掛け持ちして、人繰りの余韻さえ味わう暇も無いという人もいると思います。


営業が受注を勝ち取ったとしても、そこがゴールではなくむしろスタートだったりしますし、エンジニアがシステムをリリースさせたと言っても、むしろ構築フェーズより長い運用が待ち受けています。

日々の中でなかなかそのわかりやすい目的と達成感を得られる機会が少ないのではないかなと。



わかりやすい目的達成が生むモチベーション


初めから負けると思って試合に臨む選手はいないでしょうから、ただひたすらシンプルな勝利と言うものを得ようと頑張ります。

その向こうにある達成感もまたわかりやすく、それが試合の中でのモチベーションにもつながるでしょう。

みんなが共通のわかりやすい目的を共感することで一体感も生まれ、達成の暁には誰もがその余韻に浸ることができます。


人間って単純なものですから、その旨みをかみ締めることが出来れば、次もまたそれを味わいたいと思うでしょうし、わかりやすければわかりやすいほどそこに向かって邁進することもできます。

わかりやすさは、目的達成のマイルストンをはっきりさせるでしょうし、なすべき事も考えやすくなります

日々の仕事だけに追われるだけで、その目的を達成できたことさえかみ締められずに走っていくだけでなく、その中で得られたものを十分にかみ締めることができることが、仕事の中でのモチベーションにつながり、次へのステップの良い循環を生むのではないかなと感じます。


そうすることで仕事をする人もそれをサポートする人もスポーツのように熱くなれる場所として生まれるのではないでしょうか。





経済は感情で動く―― はじめての行動経済学/マッテオ モッテルリーニ
¥1,680
Amazon.co.jp

 

あまり読んだことが無い経済学の本ですが、そんなに構えることなく読むことが出来ました。

よく言えば、数字に強くなり日常にあふれる(この本で言うところの思考のバイアス)トリックにだまされないための本であり、悪く言えば詐欺師になるための教本なのかもしれません。

本の中ではたびたび問題が与えられ、私たち人間が良く考えればわかることを如何に間違った判断をするのかと言うことを実際の実験で使われた統計データをもとに解説しています。

それは、頭ではわかっていても感情がそうさせない、と言わんとばかりにその正しい答えを妨げる要因を挙げていっています。

 

表現を変えただけでガラっと変わって見えてしまう数字、自分が所有してしまうことで生まれてしまう感情、得られるものより失うことを大きく感じてしまう感覚、先入観から抜け出せない思考、損をしていることがわかっているのに手放さない(止めない)決断などなど、私たちの脳の中で起こる矛盾と言うのは、きっと自分たちの日常にあるものを参照しても当てはまるものがあると思います。

最後のパート3は、実際の脳の役割とその感情が起こる理由と言うものを科学的に解説していますが、少々そこは眠くなるかもしれません・・・。

 

しかし、それ以外のところに関しては身近な問題から、私たちの脳の中に起こる錯覚と作り出してしまう思考の壁についてわかりやすく解説されています。

自分の中にある先入観や過信が導き出すその錯覚と言うものを見直すには良い本かもしれません。

 

 

目次

 

 

パート1 日常の中の非合理

1 頭はこう計算する
1000円がいつもの1000円とはかぎらない
選択肢が多いほど混乱する
プラス面に注意を向けるか、マイナス面に目を光らすか

2 矛盾した結論を出す
客の気持ちを惑わす
三つあると真ん中を選ぶ
何が迷いを生じさせるか

3 錯覚、罠、呪い
優先順位がひっくり返る
非合理は高くつく
自分のものになると値が上がる
現状は維持したい
払ったからには参加しなきゃ損
競りに勝っても喜べない - 「勝者の呪い」
数値の暗示に引っかかる - 「アンカリング効果」

4 「先入観」という魔物
私たちの頭は当てにならない
だれもが持つ錯覚
非合理だからこそ人間なのだ

5 見方によっては得
問題の提示の仕方が判断を決める
イメージに左右される
死亡率より生存率で

6 どうして損ばかりしているのか
雨の日のタクシーはどうして早々と引きあげるのか
得している株を売り、損している株は手放さない
してしまったことを後悔するか、しなかったことを後悔するか

7 お金についての錯覚
実収入か額面か
自分の給料より同僚の給料のほうが気になる
100万円得した喜びより、100万円損したショックのほうがはるかに大きい


パート2 自分自身を知れ

8 リスクの感じ方はこんなに違う
つじつまの合わない答えを出す
数字を情緒で判断する
「1%」と「100人に1人」の違い
中身を多く見せたいとき、カップは小さい方がいい?

9 リスクとの駆け引き
相対的リスクと絶対的リスク
統計に表れた数字が読めない

10 知ってるつもり
プロになるほど過信する
自信過剰がはめる罠
成功すると自分のため、失敗すると他人のせい
自分に都合のいい面だけを見せたがる

11 経験が邪魔をする
「そうなるはず」という思いこみ
結果よりプロセスに目を向ける

12 投資の心理学
リスクを加味してリスクを減らす
近過去から近未来を占う
なじみの企業に投資したがる悪い癖
事情に明るいほどうまい投資ができるという錯覚
売買がはげしいと損をする

13 将来を読む
読みを誤る
前と後で判断が異なる


パート3 判断をするのは感情か理性か

14 人が相手の損得ゲーム
対立作戦ゲーム
協同作戦ゲーム
理論と実践の違い

15 怒れるニューロン
脳が苦渋を飲むとき
相手の頭の中を読む
復讐は何よりも快楽のため

16 心を読むミラーゲーム
神経生物学から見たお金のゲーム
共感の生みの親はミラー・ニューロン
倫理的判断とニューロンの役割

17 理性より感情がものを言う
理性には限界がある
感情は不可欠なサポーター
セミとアリとハトの教訓

18 人間的な、あまりに人間的なわれわれの脳
のさばるのは感情
神経経済学から見た日ごろの常識
ニューロンが生むプラシーボ効果とフレーミング効果

 

 

 

 

 

 

 

 

2010.08.26 追記

Twitter公式ツイートボタンを設置することでも、リツイート数を表示することはできます。詳細は、「Amebloに設置していたツイートボタンをTwitter公式のものに変えました 」を参照してください。



Amebaブログに「Twitterへ投稿ボタン」を設置してみたよ 」の続き。

珍しく評判が良かったこのエントリですが、単にTwitterへの投稿ボタンを設置するだけでなく、自分の記事がどれくらいTwitterへ投稿されたか、その数を確認できるTopsy のブログパーツを貼り付けてみました。

前回のエントリで投稿ボタンを貼り付けた方、すいません・・・。

シンプルな構成にしたい場合は、前回の方法のほうが組み込みも楽でよいかと思います。


で、Topsyの方ですが特にTwitter専門サービスと言うよりは、検索エンジンを提供するサービスになっています。

ただ、検索結果がTwitter検索と連動しており、集計されたTwitterへの投稿数を閲覧したり、ブログパーツとしてエントリ内に貼り付けられたりします。


こんな感じ。






※ 表示スタイルを「big」に指定した場合で、今回タイトル下に設置している形式とは異なる表示方法です。(後述)


タイトルの下に表示した場合は、こんな感じに。


A Day In The Boy's Life-Topsy-1


前回同様に、記事一覧画面でも表示されるようになっています。


A Day In The Boy's Life-Topsy-2



TopsyをAmebaブログに設置する方法


と言うことで本題。

詳細な設置方法に関しては、TopsyのReTweetボタンをWebサイトへを貼り付けるための解説ページ も参照。


前回同様に、jQueryを利用してタイトル下にTopsyで作られるDIV要素を埋め込む形式をとってます。

が、前回と違ってテーマすぐ脇にはうまく組み込めなかったため(後述)、右寄せしてはてブボタンと合わせて表示しています。


<script>
$(document).ready(function(){
    var page_url = location.href;
    if (page_url.match(/^.+\/entrylist[\-0-9]*\.html$/g )) {
        var entries = $(".newentrytitle a");
        var classname = ".updatetime";
        var flg = 0;
    } else {
        var entries = $(".foot a:contains('記事URL')");
        var classname = "div.entry .theme";
        var flg = 1;
    }
    for (i = 0; i < entries.length; i++) {
        var url = entries[i];
        if (flg == 0) {
            title = entries.eq(i).text();
        } else {
            title = $("div.entry h3.title").eq(i).text();
        }
        var hatena_btn = '<a href="http://b.hatena.ne.jp/append?' + url + '" target="_blank"><img height="12" width="16" border="0" alt="はてなブックマークに追加" src="http://b.hatena.ne.jp/images/append.gif " /></a> <a href="http://b.hatena.ne.jp/entry/' + url + '" target="_blank"><img border="0" src="http://b.hatena.ne.jp/entry/image/' + url + '" /></a>';

        var topsy_btn = '<div class="topsy_widget_data"><!--{"url": "' + url + '", "theme": "blue"}--></div>';

        $(classname).eq(i).after('&nbsp;&nbsp;<div class="my_toolbar">&nbsp;' + topsy_btn + '&nbsp;<div class="hatena_btn">' + hatena_btn + '&nbsp;</div></div>');
    }

    $.getScript("http://cdn.topsy.com/topsy.js?init=topsyWidgetCreator", function(){
        topsy_core_init();
    });
})
</script>


※ はてブボタンはイラネって人はhatena_btnの箇所を削り取ってください。


Topsyの動作原理は、クラスtopsy_widget_dataとして埋め込んだDIV要素内のJSON形式のデータを読み取って、TopsyのJavaScriptがReTweetボタンやReTweet数の画像を表示するようです。

urlの箇所には、エントリごとのパーマネントリンクが自動で挿入されます。

themeは、ReTweetボタンのテーマで、今回はデフォルトのblueを設定していますが、その他のカラーも設定可能です。(指定できるテーマは、TopsyのReTweetボタンをWebサイトへを貼り付けるための解説ページ を参照)


また、style要素でbigを指定すれば、先ほどこのエントリ内で表示しているような大きいサイズのReTweetボタンを表示することも出来ます。(デフォルトは小さいサイズ)


var topsy_btn = '<div class="topsy_widget_data"><!--{"url": "' + url + '", "theme": "blue", "style": "big"}--></div>';

これで、めでたくTopsyのReTweetボタンがエントリごとに貼り付けられるようになるのですが、このままだとTopsyが作り出すDIV要素が邪魔をして、テーマ下に縦に並んだ形で表示されてしまいます。

ということで、今度はCSSを編集(ブログを書く > デザインの変更 > スキンCSSの編集)します。


.entry .theme{
display:block;
/* padding:0 0 5px 0; */
/* border-bottom:1px dotted #7E8984; */
font-size: 12px;
}

#recent_entries_list li{
margin:0;
/* padding:8px 0; */
/* border-bottom: 1px dotted #7E8984; */
border:none;
}


上記では、コメントアウトしている箇所(/* この部分 */)で初期設定を無効にしています。

最初のentry及びthemeのクラスは、エントリタイトル下のテーマの箇所に該当します。

paddingで余計なスペースが生まれる部分を削除し、border-bottomでテーマすぐしたの点線を出さないようにしています。

次のrecent_entries_listのIDの箇所では、同じく余分なスペースと点線を出さないようにした上で、追加でborderを無しに設定しています。(別CSSで実践を出すように書かれているため、設定を上書きしている)


そして、最後に先ほどjQueryで埋め込んだDIV要素とTopsyによって作られるDIV要素用のCSSを追加します。

同じく、CSSの編集画面から下記を追加しておきます。


div.my_toolbar {
display:block;
border-bottom:1px dotted #7E8984;
height:15px;
padding-bottom:20px;
vertical-align:top;
}
div.hatena_btn {
float:right;
}
div.topsy_widget_data {
float:right;
}


これで、ようやくReTweet数とボタンがテーマ下の右下に表示されるようになりました。



設置にあたって四苦八苦したこと


以下、余談。(読み飛ばし可)


まず、最初にTopsyのスクリプトを組み込むにあたって、組み込みページに書いているような、SCRIPTタグを挿入するやり方ではIEで上手く動作しませんでした。

よくよく見るとHEADタグ内に書けって書いているんですけど、AmebaにJavaScriptを組み込む際には、そのようなフリーダムなことが出来ないため、jQueryの$.getScript()を利用することに。

そうすると、今度はFireFoxで上手く表示されません・・・。

ってことで、TopsyのJavaScriptのソースを眺めてみると、最初に呼び出される無名関数内でtopsy_core_init関数を呼び出していたので、$.getScript()内で強制的に呼び出してみるとIEとFireFox両方で上手く表示できました。


これでめでたしめでたしと思っていると、今度はIEでReTweetボタンが自動で改行されるようなデザイン上の不具合が出てしまい(FireFoxは素直に表示される)、試行錯誤を重ねましたが今までのようなテーマ横に一直線に並べると言う形式を諦め、テーマ下にDIV要素を一つ作りfloatで強制的に右寄せして設置すると言う方法をとることにしました。

ということで、前回のTwitterボタンのときは、テーマのSPAN要素内にappendしていたものを今回はafterでSPAN要素の後に追加するという手段に変更しています。


もし、もっと綺麗に表示する方法があればご報告ください・・・。全力で真似します。