2012/02/02

[jQuery mobile]listを作成する

jquery mobileのQuick start guideを読みながら、きわめて基本的なリストを作成しました。

コードは、下のようになりました。

<!DOCTYPE html>
<html>
<head>
<title>My Page</title>
<meta name="viewport"
content="width=device-width, initial-scale=1,user-scalable=no,minimum-scale=1,maximum-scale=1"
>
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.0.1/jquery.mobile-1.0.1.min.css" />
<script src="http://code.jquery.com/jquery-1.6.4.min.js"></script>
<script src="http://code.jquery.com/mobile/1.0.1/jquery.mobile-1.0.1.min.js"></script>
</head>
<body>
<div data-role="page">
<div data-role="content">
<ul data-role="listview" data-inset="true" data-filter="true">
<li><a href="#">Acura</a></li>
<li><a href="#">Audi</a></li>
<li><a href="#">BMW</a></li>
<li><a href="#">Cadillac</a></li>
<li><a href="#">Ferrari</a></li>
</ul>
</div>
</div>
</body>
</html>

2012/02/01

[本]苦しいときは自分にやさしく―転落ビジネス書作家の幸福論

読了

Prologue 本当の幸せはどこにある?

Chapter 1 自称成功者たちのリアル

Chapter 2 過去の自分にさようなら!----あるビジネス書作家の痛みと回復

Chapter 3 本来の自分を取り戻す知恵

Chapter 4 自分が活きる人間関係の作法

Chapter 5 再スタートの心得

Epilogue 未来の自分へ

via:目次
販促・集客・儲けのネタ帖」以来、実に7年ぶりに原崎さんの著書を読みましたが、この7年間、原崎さんはどうなったのだろうか?と気になっていたのですが、本書でその後をたどることができてよかった以上に、驚愕しました。

すさまじい人生を歩んでおられたことに。
同じ人生を歩む事はできないだろう。確実に精神崩壊するなと。

大学時代にマーケティング、仕事でのスタンス、取り組みなど数々のことを教えていただいて、とてもお世話になった方なので、微力ながらも協力できたらなーっと思いました。

そのために、もっと、もっと実力をつけなければと。


2012/01/31

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

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

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

なぜかなーっと思って調査したところ、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
というわけで、
最終的に、下記のように落ち着きました。
<meta name="viewport" content="width=device-width, initial-scale=1,user-scalable=no,minimum-scale=1,maximum-scale=1">

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がまたまたぜい肉落とし…6製品を整理
本家を見てみると、↓のようになっています。

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の実装方法について。

<style type="text/css">
button{
margin: 0;
padding: 0;
border: 0;
font-weight: normal;
font-style: normal;
font-size: 100%;
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
vertical-align: baseline;
*vertical-align: middle;
line-height: normal;
*overflow: visible;
cursor: pointer;
-webkit-appearance: button;
}

.btn {
cursor: pointer;
display: inline-block;
background-color: #e6e6e6;
background-repeat: no-repeat;
background-image:
-webkit-gradient(
linear, 0 0, 0 100%, from(#ffffff), color-stop(25%, #ffffff), to(#e6e6e6)
);
background-image: -webkit-linear-gradient(#ffffff, #ffffff 25%, #e6e6e6);
background-image: -moz-linear-gradient(top, #ffffff, #ffffff 25%, #e6e6e6);
background-image: -ms-linear-gradient(#ffffff, #ffffff 25%, #e6e6e6);
background-image: -o-linear-gradient(#ffffff, #ffffff 25%, #e6e6e6);
background-image: linear-gradient(#ffffff, #ffffff 25%, #e6e6e6);
filter: progid:
DXImageTransform.Microsoft.gradient(
startColorstr='#ffffff', endColorstr='#e6e6e6', GradientType=0
);
padding: 5px 14px 6px;
text-shadow: 0 1px 1px rgba(255, 255, 255, 0.75);
color: #333;
font-size: 13px;
line-height: normal;
border: 1px solid #ccc;
border-bottom-color: #bbb;
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
border-radius: 4px;
-webkit-box-shadow:
inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 1px 2px rgba(0, 0, 0, 0.05);
-moz-box-shadow:
inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 1px 2px rgba(0, 0, 0, 0.05);
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 1px 2px rgba(0, 0, 0, 0.05);
-webkit-transition: 0.1s linear all;
-moz-transition: 0.1s linear all;
-ms-transition: 0.1s linear all;
-o-transition: 0.1s linear all;
transition: 0.1s linear all;
}

.btn:hover {
background-position: 0 -15px;
color: #333;
text-decoration: none;
}

.btn:focus {
outline: 1px dotted #666;
}
.btn.primary {
color: #ffffff;
background-color: #0064cd;
background-repeat: repeat-x;
background-image:
-khtml-gradient(linear, left top, left bottom, from(#049cdb), to(#0064cd));
background-image:
-moz-linear-gradient(top, #049cdb, #0064cd);
background-image:
-ms-linear-gradient(top, #049cdb, #0064cd);
background-image:
-webkit-gradient(linear, left top, left bottom, color-stop(0%, #049cdb), color-stop(100%, #0064cd));
background-image:
-webkit-linear-gradient(top, #049cdb, #0064cd);
background-image:
-o-linear-gradient(top, #049cdb, #0064cd);
background-image: linear-gradient(top, #049cdb, #0064cd);
filter: progid:
DXImageTransform.Microsoft.gradient(
startColorstr='#049cdb', endColorstr='#0064cd', GradientType=0
);
text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25);
border-color: #0064cd #0064cd #003f81;
border-color: rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25);
}
.btn.active, .btn:active {
-webkit-box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.25), 0 1px 2px rgba(0, 0, 0, 0.05);
-moz-box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.25), 0 1px 2px rgba(0, 0, 0, 0.05);
box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.25), 0 1px 2px rgba(0, 0, 0, 0.05);
}
.btn.disabled {
cursor: default;
background-image: none;
filter: progid:DXImageTransform.Microsoft.gradient(enabled = false);
filter: alpha(opacity=65);
-khtml-opacity: 0.65;
-moz-opacity: 0.65;
opacity: 0.65;
-webkit-box-shadow: none;
-moz-box-shadow: none;
box-shadow: none;
}
.btn[disabled] {
cursor: default;
background-image: none;
filter: progid:DXImageTransform.Microsoft.gradient(enabled = false);
filter: alpha(opacity=65);
-khtml-opacity: 0.65;
-moz-opacity: 0.65;
opacity: 0.65;
-webkit-box-shadow: none;
-moz-box-shadow: none;
box-shadow: none;
}
.btn.large {
font-size: 15px;
line-height: normal;
padding: 9px 14px 9px;
-webkit-border-radius: 6px;
-moz-border-radius: 6px;
border-radius: 6px;
}
.btn.small {
padding: 7px 9px 7px;
font-size: 11px;
}

:root .btn {
border-radius: 0 \0;
}
button.btn::-moz-focus-inner, input[type=submit].btn::-moz-focus-inner {
padding: 0;
border: 0;
}

.btn.danger,
.btn.danger:hover,
.btn.error,
.btn.error:hover,
.btn.success,
.btn.success:hover,
.btn.info,
.btn.info:hover{
color: #ffffff;
}
.btn.danger,.btn.error{
background-color: #c43c35;
background-repeat: repeat-x;
background-image: -khtml-gradient(linear, left top, left bottom, from(#ee5f5b), to(#c43c35));
background-image: -moz-linear-gradient(top, #ee5f5b, #c43c35);
background-image: -ms-linear-gradient(top, #ee5f5b, #c43c35);
background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #ee5f5b), color-stop(100%, #c43c35));
background-image: -webkit-linear-gradient(top, #ee5f5b, #c43c35);
background-image: -o-linear-gradient(top, #ee5f5b, #c43c35);
background-image: linear-gradient(top, #ee5f5b, #c43c35);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ee5f5b', endColorstr='#c43c35', GradientType=0);
text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25);
border-color: #c43c35 #c43c35 #882a25;
border-color: rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25);
}
</style>
<button class="btn primary">Primary</button>
<button class="btn">Default</button>
<button class="btn danger">Danger</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>
これだけで、すっげーかっけー、プログレスバーを作ることができました。

ちなみに、上記の実装だと、プログレスバーが画面いっぱいに広がってしまいます。
横幅をカスタマイズするためには、
<style type="text/css">
.ui-progressbar{
width:200px;
}
</style>
で縦幅の場合は、
<style type="text/css">
.ui-progressbar{
height:10px;
}
</style>
バーの色を変更したい場合は、
<style type="text/css">
.ui-progressbar-value{
background:red;
}
</style>
でカスタマイズすることができます。

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

2012/01/25

[Google Libraries API]jQueryUIをロード

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

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

<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.16/jquery-ui.min.js" ></script>
ただし、これだけだとまだ不十分で、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から読み込む方法
というわけで、最終的に以下のようにして、使うことができました。
<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">
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させたい要素はその都度変更する必要があります。

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