Bugle Diary: 1月 2012

2012/01/31

[html]コンテンツの最適化

以前、webのコンテンツをiOSのデバイスに合わせるというエントリーを書きました。

で、その知識を使ってjQuery Mobileを使ってみたものの、いざ、端末を使って確認するとコンテンツが調整されないではないですか！！

ちなみに、編集前は、こちら
Uploaded from the Photobucket iPhone App
なぜかなーっと思って調査したところ、metaタグの属性が抜けていることがわかりました。

The minimum-scale and maximum-scale properties also affect the behavior when changing orientations. The range of these property values is from >0 to 10.0. The default value for minimum-scale is 0.25 and maximum-scale is 5.0.
via:How Safari Infers the Width, Height, and Initial Scale

というわけで、
最終的に、下記のように落ち着きました。

で、調整後のUIは下の形になりました。
Uploaded from the Photobucket iPhone App

2012/01/30

栗城史多さんにお会いしました

生きていると色々な人に一度は会ってみたいという願いがでてきます。

子供の時だったら、野球を見ているとあのプロ野球選手に一回あってみたいとか。

中学生や高校生になると、あのドラマに出演していたかっこいい(カワイイ)俳優さんにあってみたいとか。

大人になると新聞(雑誌)にでている有名社長にお会いしたいなど。

きっかけは、色々ありますが、その願いが一つ叶いました。

なんと、あの、あの、登山家の栗城史多さんにお会いすることができたのです。

お会いしたのは、先週の金曜日に開催された社内の講演会。

実際にお話を伺って、ものすごく感動しました。本にサインしてもらったのはもちろんのこと、一緒に写真もとっていただきました。

普通だったら死ぬことも果敢にチャンレンジし、たくさんの人に勇気を与える姿はかっこいいと思います。

同じ年として負けられないなーっと気合を入れて仕事、育児に万進していきたいと思いました。

2012/01/29

[google]Social Graph APIが終了

最近は、googleサービスの終了が目立ちますが、またいくつかのサービスも終了するようです。

Social Graph API – TwitterやFlickrの上での、人びとのつながりをグラフで表すためのAPIは、4月20日をもって廃止される。このAPIを使うとデベロッパは、ユーザに関する情報を取り込んで自分の製品をより便利にできるが、Googleによれば、”期待したほど利用されていない”。GoogleとしてはGoogle+上のソーシャルグラフの開発に力を注いで、Facebookに追いつきたいのだ。
via:Googleがまたまたぜい肉落とし…６製品を整理

本家を見てみると、↓のようになっています。

Warning:The Social Graph API has been officially deprecated as of January 20, 2012 and will be fully retired on April 20, 2012. For more information, please see the announcement.
via:Social Graph API

正直にいうと、このAPIを使おうか、非常に悩みました。

色々なサービスの情報を取得できるので、とても魅力的だったのですが、いざ使おうとすると、どう使っていいのかわからず、サービスとしてどう反映させていいのか思いつきませんでした。

で、迷い続けているうちに、今回終了になりました。

最近、googleのAPIサービスがすごく多く把握するだけでも大変なので、こうして整理されるのも悪くないのかなーっと思いました。

2012/01/28

[本]「残業ゼロ」の仕事力

はじめに
現在ソフトランディング中
第1章御社の残業がなくならない理由
残業ニッポンの現実
なぜ残業はなくならないのか
残業が「問題解決」を送らせる
ルール違反で戦うニッポン
残業ゼロでも増収増益
「デッドライン」がスピードと密度を上げる
最後はトップの「覚悟」
第2章問題はとにかく「分けて」考える
「問題がない」会社は危険ゾーン
「緊急対策」「再発防止」「横展開」が基本
骨はロジック、身は「GNN」
問題は姿が見えれば八割解決
天才以外は問題を小分けせよ
「デッドライン」ですべてが決まる
やることの「優先順位」は必要ない
「これくらいならできる」は禁物
ファイルもスケジュールもデッドラインで整理
第3章次に「会議」を変えていこう
会議を大切にしてきた本当の理由
「空気を読む」なんてもってのほか
会議こそ最良の「鍛錬の場」
なぜ二分で結論を出せるのか
一番早いのは「立ち止まらない」こと
「コミュニケーション」さえあればいい
会議が社員のキャパシティを広げる
「長くて多い」のがよい会議
会議をうまく続ける「秘訣」
第4章「残業ゼロ」の達成まで
残業と仕事内容は関係ない
きっかけは他社の取り込み
二千時間働いて売上増は「あたりまえ」
悲鳴のなか、電気を消し続ける日々
「二度と残業したくない」と思わせるには
それでも残業したら「連帯責任」
仕事は会社のなかで完結させよ
「終わり」の時間でタイムスケジュール
第5章「速くて強い」チームの作り方
「勝てる会社にする」思いはそれだけ
仕事は「ゲーム」、勝つチャンスを与える
「成功するまであきらめない」から成功する
「豹変」「朝令暮改」はあたりまえ
「社訓」が会社をさびつかせる
組織は「右向け右」で動くもの
まずは自分の△から始める
リーダーシップより「フォロワーシップ」
組織にいる間にやっておくべきこと
活気がないのが「いいオフィス」
「仕事の範囲」は明確になっているか
社員は個室、役員は大部屋
「強いリーダー」とワンマンの違い
第6章「仕事の常識」はこれだけ変わった
日本人は「野性味」を取り戻せ
「TTP」をできる人と会社が伸びる
「人事を尽くし」切っているか
ビンが倒れるまで放っておくな
仕事は「お金のため」にする
組織のストレスから自由になる方法
小さな現場経験を大切にする
最初の一歩は小さな工夫から
第7章本当のワークライフバランス
もっと楽しい働き方がある
少子化対策だって簡単だ
パートナーはどっちを向いているか
ワークライフバランスの「理想図」
残業ゼロで人生が決まる
「本生（ほんなま）で生きよう
via:目次

前回、「残業ゼロ」の人生力を読んで、前著が気になったので手に取ったのだが、これは、難しいなー。

確かに1時間当たりの労働生産性をアップし残業を0にするというのはオール賛成なのだが、トップが決断しないと実行できないことばかりな気が。。。

個人でも残業を減らしているケースが紹介されていたが、それでもある程度の決断力がないのと厳しいと思いました。

ただ、出来ないできないと言っても何も始まらないし、変わらないので、オリジナルの「頑張るタイム」や「デッドライン」を設けて、残業を減らしていきたい。

もちろん、批判しようと思えばいくらでも批判はできる。たとえば著者は従業員を増やしていないが、派遣労働者はかなり使っている。「単に仕事を派遣に押し付けたのではないか」というツッコミをかわし切れるだけの材料が本書には足りないとは思う。しかしそれを考慮しても、残業ゼロで売り上げ5倍というのは誇張ではないし、他もやって出来ないようにはとても思えない。
via:残業は会社にも優しくない - 書評 - 「残業ゼロ」の仕事力

まじっすか！！確かにそこの部分に関しては、本書では読み取る事ができない。

補足
新装版もあったのかー。こちらを購入した方がよかったのかも。

2012/01/27

[BootStrap]buttonの実装

久しぶりに今日は、buttonの実装方法について。

実行結果は、こんな感じ
Photobucket

ちょっとかっこいいボタンの出来上がり。

2012/01/26

[jQueryUI]progressbarを実装

自前で、プログレスバーの実装はめんどいのです。
なので、jQueryUIを使って手っ取り早く実装できないものかと。

昨日、QueryUIをCDNを使ってロードする方法を書いたので、それを使いつつも、jQueryUIのProgressbarを読みながら試しに実装しました。

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-type" content="text/html; charset=utf-8">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js" ></script>
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.16/jquery-ui.min.js" ></script>
<link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.12/themes/base/jquery-ui.css">
<script>
$(function() {
var jObj = $( "#progressbar" );
jObj.progressbar({
value: 37
});

});

</script>
</head>
<body>
<div id="progressbar"></div>
</body>
</html>

これだけで、すっげーかっけー、プログレスバーを作ることができました。

ちなみに、上記の実装だと、プログレスバーが画面いっぱいに広がってしまいます。
横幅をカスタマイズするためには、

で縦幅の場合は、

バーの色を変更したい場合は、

でカスタマイズすることができます。

こうしてまとめておけば、後で、実装するときに便利ですね。

2012/01/25

[Google Libraries API]jQueryUIをロード

googel CDNを使ったjQueryのロードに引き続き、今度は、jQueryUIのインクルードの方法について。

下のように一発かませばおｋ

ただし、これだけだとまだ不十分で、jQueryUIでは、CSSが必要。

jQueryUIのサイトのdownloadページにいけば、CSSのダウンロードをすることができるのですが、それは、めんどい。
だって、jsは、CDNをつかっているのに、CSSは違うサーバーなんて！！

どうせならCSSもCDN経由で使いたい。
何か方法ないかなーっと思っていたら、ありました。

jQueryUIを利用してUI widgets(用意されているスタイル)を使用する場合には専用のcssも読み込まないと正しく表示されないので注意して下さい。

jqueryUIのcss直リンURL

https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.12/themes/[テーマ名]/jquery-ui.css

テーマ名は後述
via:jQueryやUI、PrototypeなどのライブラリーをGoogleライブラリAPIから読み込む方法

というわけで、最終的に以下のようにして、使うことができました。

CSSに関しては、BootStarpと共存させたいので、衝突した場合、ちょっと怖いですが、とりあえずは、このままで。

2012/01/24

[jQuery]inView Plugin

ある要素がスクリーン内にあるかどうか判断できるプラグインを発見しました。

きっかけは、Nikebetterworld Parallax Effect Demoで紹介されていたプログラムにそのプラグインが使われていたからなんですけど。

プラグイン自体は、Element 'in view' Event Pluginというエントリーにあって、
導入も非常に簡単。
jquery.inview.jsを読み込んで、下記コードを記述するのみ

$('div').bind('inview', function (event, visible) {
  if (visible == true) {
    // element is now visible in the viewport
  } else {
    // element has gone out of viewport
  }
});

bindさせたい要素はその都度変更する必要があります。

サイトが閉鎖されたときのことを考えて今のうちからプラグインダウンロードしておこうかなー。

2012/01/23

[iOS]iPod touch第四世代を購入

じつにすばらしい！！

ケースも購入

げースだけだと、パネルが手の脂でベトベトになってしまうので、シールも購入

シールも買ったものの、ケースにシールが同封されており、実質、必要なかった。

iPhone3Gから一気にバージョンアップしたので、iOSは5だし、カメラもバージョンアップしたし、Retinaディスプレイもすばらしい。

まさに通話機能「だけ」がないiPhoneですなー。

2012/01/22

[blogger]Navbarを隠しました。

え、うそ！！、まじで！！

（はい、Navbar を無効にするための詳細はこちらです。しかし Navbar の無効化は、読者が新しいブログを見つけるためのキーツール「次のブログ」から、あなたのブログを隠してしまうことを覚えておいてください。私たちはまた、Navbar のいくつかの新機能を、数ヶ月以内に用意します。それが Blogger の使用を損ねず、一助となるように願っています。）
via:Blogger の Navbar は隠してもいいらしい

というわけで、chromeでデバッグをしつつ削除しました。

方法は、下記のCSSを追加

#navbar-iframe {
height:0px;
visibility:hidden;
display:none
}

これ、今、思ったのですが、CSSで要素の削除をしていますが、HTML自体はレンダリングを行い、ダウンロードしちゃっているので、いっそのこと要素ごとごっそり抜いちゃった方が早いんじゃーないのかなーっと思えてくる。

そこら辺はどうなのだろうか？

2012/01/21

[思い出]長男の1歳の誕生日

今日は、長男聡斗の誕生日おめでとう！！

誕生日ディナーをしました。
Uploaded from the Photobucket iPhone App
写真を送って似顔絵ケーキを注文しました！！とてもよく似ています。
ちなみに、味は、豆乳だったので、食べても、あっさりしていました！！

食べ物もごちそうです。もちろん聡斗もです。
Uploaded from the Photobucket iPhone App
はじめて靴をはきました。とても似合ってます。

食事後は、一生餅をかつぎました。

本人は、大変喜んでおります。

いつまでも、この平和が続きますように！！

2012/01/20

[本]NO LIMIT ノーリミット　自分を超える方法

そっこーで読了

電車の中で読んでいたのですが、思わず泣きそうになりました。

とても同じ年の方とは思えません。すごく勇気をもらいました。

すごく不安になったときに、読み返すぞと。

本書にも書かれていたが、不安をなくすことはできない。
だから、前に進み続けないといけない。
ものすごく怖いけど。

小さな一歩でもいいから！！

もっと見習わないとな。

2012/01/19

[本]図解はこれ一冊でおｋ！！マッキンゼー流図解の技術

読了

Introduction チャートで語る
Section 1 チャートを選ぶ
Section 2 チャートを使う
Section 3 コンセプトとメタファーを使う
Section 4 チャートをスクリーンで見せる
via:目次

以前、読んだ勝間和代のビジネス頭を創る7つのフレームワーク力ビジネス思考法の基本と実践の推薦図書で紹介されていたので、今回手に取ったのですが、これ最高！！

何が最高かって、本当に図解「だけ」にフォーカスを当てているところ。
大学時代に惰性で図解を使ってたくさんのパワポ資料を作ってきたが、本当に相手にとって伝わっているのか疑問に思ったまま今に至るのだが、本書に出会っていたら、少しはましなプレゼンができたのかなーっと思うと残念でならない。

時間がない場合は、「Section 1」だけ読むのでも十分だと思う。
なぜ、チャートを使うのか、使って結局、何を主張したいのか？

本書ではフレームワークを使ってチャートの使い方が懇切丁寧に書かれているので、非常にわかりやすい。
なのでデスクに一冊常設しています。

今度から、これをベースにプレゼン資料を作ろうと思う。

ただ一点残念なのが、パソコンを使ったチャートの使い方がSection4で紹介されていたのだが、ちょっと動作が掴みにくかったのでネットで紹介してほしかった。
本書のリリース日が、2004年なので、それは可能だと思うのだが。

最後に、本書で紹介されていたJan V. Whiteが執筆した書籍にちょっと興味がわいたので、リンクを貼り付ける。

ほとんど絶版？？

2012/01/18

[jQuery]mapメソッド

昨日のinArrayメソッドに引き続き今日は、jQuery.ScrollToのソースコードを読んでいるのですが、その中にmapメソッドというものがありました。

jQuery日本語リファレンスのmapメソッドを読んでもいまいち納得がいかない。eachメソッドとどう違うの？

というわけで、今回は、少しソースコードを書くことに。

<form>
<input type="text" name="name" value="John"/>
<input type="text" name="password" value="password"/>
<input type="text" name="url" value="http://ejohn.org/"/>
</form>
<script type="text/javascript">
console.log($("input").map(function(){return;}))
</script>

この場合、結果は、どうなるのか？

正解は、こちら

[]

なるほど、空の配列ができました。では、次、これは？？

今度は、どうなるのか？

["John", "password", "http://ejohn.org/"]

なるほど、value属性の値を配列で返却してきました。では、最後に、これは、

結果、こうなりました。

[
<input type="text" name="name" value="John">
,
<input type="text" name="password" value="password">
,
<input type="text" name="url" value="http://ejohn.org/">
]

オブジェクトを配列で返しました。

つまり、mapメソッドは、各要素ごとに処理を行いその結果を配列で返してくれるありがたいメソッドなんですね。

使い方によっては、超強力なメソッドかなと思いました。

2012/01/17

[jQuery]inArrayメソッド

今、jQuery.ScrollToのソースコードを読んでいるのですが、その中で、inArrayというメソッドの記述がありました。

これって何？？

jQuery日本語リファレンスのjQuery.inArray(value, array)を読むと、どうやら、第一引数に渡された文字列ないし数字が、第二引数で設定された配列にある場合は、そのインデックスを返し、ない場合は、-1を戻すようだ。

Pythonとかschemeなどの関数系言語(Pythonは、正確にいうと違うのだが。)によくこの手の処理がありますね。

それを考えるとjQueryにこのメソッドを導入するのも必然なのかなーっと思いました。

2012/01/16

[Chrome Extensions]social buttonsリリース

昨日、chrome web storeで、google chromeの「social buttons」というExtensionsをリリースしました。

普段、ウェブブラウズをしていて、URLをtwitterにブクマしたいなーっとか、facebookでlikeふみたいなど、思ったりするのですが、ボタンがないときがあります。
で、毎回、毎回、都度各々のサイトに訪れて情報のポストを行なうのですが、いい加減めどくさくなってきたので、なければ作るというノリのもと、今回、このエクステンションをリリースしました。

インストールは、chrome web storeの紹介ページにあります。

是非、是非、ご活用ください。

2012/01/15

[YouTube][jQuery]動画を途中で変更しかつ再生

昨日のエントリーでは、YouTubeの動画をイベントによって途中で切り替える方法を書きましたが、切り替えたタイミングで、再生もしたい場合は、どうすればいいのか？
そんな場合は、player.cueVideoByIdメソッドではなく、player.loadVideoByIdメソッドを使うことによって実現することができます。

なので、ソースとしては、こんな感じ

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-type" content="text/html; charset=utf-8">
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/swfobject/2.2/swfobject.js" ></script>
</head>
<body>
<script>
function onYouTubePlayerReady(playerId) {
}

jQuery.extend({
loadYoutube:function(args){
prms = $.extend({
width:"420",
height:"345",
version:"9"
},args);
var params = { allowScriptAccess: "always" };
var atts = {id: prms.embedId};
swfobject.embedSWF("http://www.youtube.com/e/" + prms.movieData + "?version=3&enablejsapi=1&hl=ja_JP&playerapiid="+prms.playerId, prms.id , prms.width, prms.height, prms.version, null, null, params, atts );
},
seekTo:function(n){
document.getElementById('ytPlayer').seekTo(n,true);
}
});

$(function(){
jQuery.loadYoutube({
id:"js_movie",
playerId:"ytplayer",
embedId:"ytPlayer",
movieData:"nYHt8SdUj-U"
});
});

function altMovie(){
document.loadVideoById('ytPlayer').cueVideoById('A7m2TGv6SwY');
}

</script>
<div id="js_movie"></div>
<div>
<input type="button" value="動画を変更" onclick="altMovie();">
</div>
</body>
</html>

2012/01/14

[YouTube][jQuery]動画を途中で変更する

YouTubeの動画をなんらかのイベントにより途中で変更したい場合があります。
で、そのときに、どうするか？
YouTube JavaScript Player API Referenceを読むと、player.cueVideoByIdメソッドを使えばいけるようだ。

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-type" content="text/html; charset=utf-8">
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/swfobject/2.2/swfobject.js" ></script>
</head>
<body>
<script>
function onYouTubePlayerReady(playerId) {
}

jQuery.extend({
loadYoutube:function(args){
prms = $.extend({
width:"420",
height:"345",
version:"9"
},args);
var params = { allowScriptAccess: "always" };
var atts = {id: prms.embedId};
swfobject.embedSWF("http://www.youtube.com/e/" + prms.movieData + "?version=3&enablejsapi=1&hl=ja_JP&playerapiid="+prms.playerId, prms.id , prms.width, prms.height, prms.version, null, null, params, atts );
},
seekTo:function(n){
document.getElementById('ytPlayer').seekTo(n,true);
}
});

$(function(){
jQuery.loadYoutube({
id:"js_movie",
playerId:"ytplayer",
embedId:"ytPlayer",
movieData:"nYHt8SdUj-U"
});
});

function altMovie(){
document.getElementById('ytPlayer').cueVideoById('A7m2TGv6SwY');
}

</script>
<div id="js_movie"></div>
<div>
<input type="button" value="動画を変更" onclick="altMovie();">
</div>
</body>
</html>

ボタンをクリックするとグローバルファンクションのaltMovieがコールされるのですが、第一引数にvideoIdを設定することによって変更することが可能です。

また第二引数では、秒数を指定することもできます。

かなり便利なメソッドです。

2012/01/13

[本]600万人の女性に支持されるクックパッドというビジネス

これいい！！

序章女性なら知っている。料理サイト「クックパッド」
第1章就職を選ばなかった男が、辿りついた目標
第2章クックパッドは、なぜ「女心」をつかんだのか
第3章細やかなサービスを実現するのは、テクノロジー
第4章広告を見た人から「ありがとう」といわれるサイト
第5章六〇〇万人を呼び込む「経営」と「マネジメント」
via:目次

実は、クックパッドがRuby on Railsで構築されていることは、ここで知っていたのである。

そして、安定性に関しては同じく Ruby on Rails で開発された twitter よりは、ずっと安定感がある。そう。Ruby on Rails。
via:モノヅクリスト必読! - 書評 - 600万人の女性に支持されるクックパッドというビジネス

さらに、大規模サイトで採用されているのは、twitterが有名なのだが、最近Javaに切り替えてしまったようだ。
これを知ったとき、かるーくショックを受けたが、それはまた別の機会に。

本書に出会うまで、クックパッドというサイトは、最近できたサイトだと思っていたのが、どうやらそれは勘違いで90年代後半に誕生したそうなのである。
それだけでも驚きなのだが、ユーザー数600万かつ支持層が女性なので、サイトの構成も感性勝負なのかなと思いきやそれも違い、統計データを駆使して、サイトの最適化を図っているとのこと。
しかもその統計データの取得ツールも内製とのこと。
この姿勢は、見習うべきものが多いと考えています。
今、仕事でデザイナーからあがってきたデザインに基づいてプログラムを組んでいるのですが、そもそも何故その構成になっているのか、数値的根拠を元に設計されている声をあまり聞かない。
かつリリースした後も、分析がないので、次回に繋げることができない。
最初、他の多くのサイトもそうだと思っていたのだが、今回、この事実を知ったので、会社で提案しようと思った。

そう言った意味で、本書では、デザイナーとアーティストを下記のように分けていた。

ロジックがあるのがデザイナー
ロジックがないのがアーティスト

実際に、クックパッドでは「アート」ではなく「デザイン」を実践している。

無駄なものを一切排除して、必要なものを、goodではなく、bestで提供するという形で。
この姿勢どこかで聞いたことがある。真っ先に思い浮かんだのは、appleである。
お客様の心を掴むための方針、哲学は、どこか同じものがあるだなんと再確認できた。

そう、「アート」ではなく「デザイン」なんだと。

かつ、それを実現するには、テクノロジーが必要なんだと、社長自身が理解しているところにも感銘を受けた。

ちょっとしたこぼれ話として、ノー残業手当やシェフが料理を振舞うなどの社内規則もおもしろかった。

2012/01/12

[ゲーム]ファイルファンタジーのソーシャルゲーム

これ、やりたい

累計1億本以上を出荷しているスクウェア・エニックスの人気ゲーム「ファイナルファンタジー（FF）」シリーズの最新作「FINAL FANTASY BRIGADE（ファイナルファンタジー　ブリゲイド）」が6日、DeNA（ディー・エヌ・エー）のSNS「Mobage（モバゲー）」でソーシャルゲームとして配信をスタートした。
via:シリーズ初のモバイル向けソーシャルゲームがモバゲーで配信開始

まだガラケーしか対応していないようだが、早くスマホにも対応してほしい。

登録: 投稿 (Atom)