2015-02-01

HTML, CSS, jQueryでフォームに説明を入れるヘルプボタンを追加する

はじめに

いい感じのポップアップヘルパーがなかったので、自作してみました。クオリティは低いですがよろしくお願いします。（いい感じのポップアップヘルパー？がありましたら教えて下さい）

f:id:hagetak:20150201222729p:plain

本タイトルでは分かりにくいが、この画像を見れば分かるでしょ！

フォームによくあるヘルプボタンだ！本記事では、これを実装するコードを書きます。

下準備

はじめのコード

<head>
<script src="http://code.jquery.com/jquery-1.11.1.min.js"></script>
</head>

<style>

  .field {
    text-align: center;
    margin-bottom: 0.1em;
  }

  .field label {
    display:block;
    font-size: 1.4em;
    color: #bababa;
    text-shadow: #ffffff 0 1px 0;
  }
  .field-box {
   background: #ffffff;
   color: #423e3a;
   border: solid 4px #e5e5e5;
   padding:8px;
   margin-bottom:20px;
   width: 60%; 
   }
<style>

<div class="field field-name">
    <label for="message_password">パスワード</label><br> 
    <input class="field-box" id="message_password" placeholder="パスワードを入力" type="text" /> 
</div>

<div class="field field-body">
    <label for="message_password_re">パスワードの確認</label><br>
    <input class="field-box" id="message_password_re" type="text" />
</div>

上のコードを書くと、以下の様になる。これをいじって完成させていく。

f:id:hagetak:20150201223837p:plain

ヘルプボタンの追加（HTML）

<div class="field field-name">
       <label for="message_password">パスワード</label><br> 
       <input class="field-box" id="message_password" placeholder="パスワードを入力" type="text" />
       <input class="hatena_button" type="button" name="" value="？"> 
</div>

input にボタンを追加しているのがわかるだろう

この部分だ。このボタンに class: hatena_button を追加しておく。

次は、CSS を弄るぞ。

ヘルプボタンの追加（CSS）

  .hatena_button {
    background-color: #aaaaaa;
    color: #fff;
    border-radius: 100%;
    margin-left: 20px;
  }

これで、丸いボタンができる。

f:id:hagetak:20150201224624p:plain

吹き出しを作成（HTML）

ヘルプボタンを押したあとのフキダシを作成する。

 <input class="field-box" id="message_password" placeholder="パスワードを
入力" type="text" />
<input type="button" value="？" class="hatena_button">
<span class="help_message"></span>

これを追加。ボタンが押されたときにメッセージを表示させたいから、まずは非表示にする。（display: none）

ヘルプメッセージはあとで追加するからまだ書かないでね！

吹き出しを作成（CSS）

今のままだとダサいから、CSSを追加するよ。

.help_message {
    margin-left: 10px;
    width: 10%;
    display: none;
    position: absolute;
    word-wrap: break-word;
    margin-top: -2.5em;
    border: 1px solid #aaaaaa;
    padding: 4px;
    font-size: 0.5em;
  }

  .help_message:after {
    border:10px solid transparent;
    border-right-color:#aaaaaa;
    border-left-width:0;
    width:0;
    left:-10px;
    content:"";
    display:block;
    top:20px;
    position:absolute;
    margin-top: 1em;
  }

吹き出しを呼び出す

いよいよラスト、ボタンが押されたらメッセージを表示させるよ！

  $('.hatena_button').on('click', function(){
    if($('.help_message').text() === ""){
      $('.help_message').text("管理者(あなた)だけの パスワードです。 コメントや>写真の管理、 背景画像の変更などに 使用します。").fadeIn(500).css('display', 'inline');
    } else {
      $('.help_message').text("").css('display', 'none');
    }
  })

さて、このコードを紐解くと

$('.hatena_button').on('click', function(){})

はてなボタンがクリックされたら以下のスクリプトを動かす

if($('.help_message').text() === ''){ }

ヘルプメッセージがHTMLに描写されてなかったら...

$('.help_message').text('hgoehgoehgoe')

メッセージを追加。フェードインが欲しかったのでfadeInを追加しました。

ヘルプメッセージがHTMLに描写されていたら...

$('.help_message').text("").css('display', 'none');

メッセージを消す

こんなかんじです。少し分かりにくいコードだけど、少しずつ紐解いていくと分かるようになります！これを元に色々作ってみてはどうでしょうか？

参考

2015-01-02

ハワード・シュルツ『スターバックス成功物語』

はじめに

先ほど読了した『スターバックス成功物語』について書評を書く。

スターバックス成功物語

作者: ハワードシュルツ,ドリー・ジョーンズヤング,Howard Schultz,Dori Jones Yang,小幡照雄,大川修二
出版社/メーカー: 日経BP社
発売日: 1998/04/23
メディア: 単行本
購入: 12人クリック: 187回
この商品を含むブログ (57件) を見る

本書は、約450ページも有り、結構分厚い本であるが、意外とするする読める。（手に取るのが難関、一度手に取れば100ページは読める）

f:id:hagetak:20150101153054j:plain

シアトル、そして今あるスターバックス

スターバックスの起源は、シアトル。タリーズコーヒー（ジャパン）のきっかけもシアトル。

このように、シアトルというとコーヒー先進地域のように見えるが、実は当時のアメリカはコーヒーに美味しさ（質）を求めていなかった。

本書を執筆したハワード・シュルツは、イタリアのエスプレッソバーに訪れ、そこでの出来事をアメリカに持ち帰った。当時スターバックスのマーケティング責任者であったシュルツは、上司にそれを持ちかけたが、提案は却下。

シュルツは、情熱と信念を持ち、コーヒー会社（エスプレッソバー）を設立し、スターバックスを買収した。そして、スターバックスはものすごく強いブランドを持つことになる。

すべては一杯のコーヒーから (新潮文庫)

作者: 松田公太
出版社/メーカー: 新潮社
発売日: 2005/03/27
メディア: 文庫
購入: 19人クリック: 146回
この商品を含むブログ (79件) を見る

このように、スターバックス・経営者のハワード・シュルツの歴史が詰まっている本である。読んでいてすごく楽しく、コーヒー好きにはたまらないかもしれない。

また、起業をしたい方にもオススメであり（アメリカと日本の文化は違うが...）、結構衝撃を受けるだろう。これを読むまで、自分も起業家志向であったが、起業家の先である経営者としての立場は、ものすごく難しいものであることがわかった。また、アメリカ企業の特徴であるヘッドハンティングが多く、登場人物が把握できない...ってのも面白さの一つである。

本書を読んでから...

本書を読んでから、スターバックスの店舗の見方が変わった。今まできにしていなかった店舗内のデザインなどを気にするようになり、店員さん（パートナー）の手の動きなどを注意深く見るようになった。例えば、ミルクを泡立たせ、温める作業を見てみると、一回一回ぷしゅーーーーって掃除をしている。すごく徹底していて、しかも笑顔での対応。素晴らしい。。。

このように、見方が少し変わり、一つ一つが感動となる。これぞスターバックスエクスペリエンス。

そして...

本書は2000年までの話であり、ハワード・シュルツは一度引退をしている。しかし、彼はまたCEOとなり、スターバックスの再建をしている。『スターバックス再生物語』は、そのことが書かれており、現在読み進めているところである。

スターバックス再生物語　つながりを育む経営

作者: ハワード・シュルツ,ジョアンヌ・ゴードン,月沢李歌子
出版社/メーカー: 徳間書店
発売日: 2011/04/19
メディア: 単行本（ソフトカバー）
購入: 2人クリック: 79回
この商品を含むブログ (9件) を見る

さいごに

本書は、

アメリカ企業の文化（ヘッドハンティング・経営・投資）
スターバックスの歴史
経営者として

を学ぶことが出来るだろう。読んでいて楽しいので、おすすめする。

スターバックス成功物語

作者: ハワードシュルツ,ドリー・ジョーンズヤング,Howard Schultz,Dori Jones Yang,小幡照雄,大川修二
出版社/メーカー: 日経BP社
発売日: 1998/04/23
メディア: 単行本
購入: 12人クリック: 187回
この商品を含むブログ (57件) を見る

2014-11-13

『狼が語る: ネバー・クライ・ウルフ』を読んで

はじめに

狼が語る: ネバー・クライ・ウルフ

作者: ファーリーモウェット,Farley Mowat,小林正佳
出版社/メーカー: 築地書館
発売日: 2014/01/23
メディア: 単行本
この商品を含むブログ (2件) を見る

日本人は、狼といえば『赤ずきん』を思い浮かべるだろう。自分もそうだ。多くの日本人は、この本の影響により、「狼は人間を食べる、害獣」のような印象が与えられている。

自分は、ネコ科・イヌ科が大好きなので、「飼いたい」の一心だ。本書を読んだきっかけも自分の動物好きが一因である。

なぜ、狼がそのように言われるようになったかは、今回紹介する本『狼が語るネバー・クライ・ウルフ』には書かれていない。（ロシア？の政策に関しては少し書かれているが...）

本書は、狼を観察したときの様子が書かれている。

狼が語るネバー・クライ・ウルフ

カナダの国民的作家が、北極圏で狼の家族と過ごした体験を綴ったベストセラー

政府の仕事で、カリブーを殺す害獣・狼の調査に出かけた生物学者が、現地で眼にしたものは……。
狼たちが見せる社会性、狩り、家族愛、カリブーやほかの動物たちとの関係。
極北の大自然の中で繰り広げられる狼の家族の暮らしを、情感豊かに描く。

本書を読み進めていくと、オオカミに関する知識がつく。

例えば、オオカミはイヌのようにたくさんの妻を迎え入れずに、人間と同じように一夫一妻制の社会であったり、シカ（本書では、カリブーと書かれているが、私達日本人ではカリブーが身近ではないためわかりやすくした）のような動物は、気が済むまで狩るのではなく、1匹狩ったら数日間食料を持たせるようにあまり攻撃的ではない。

このように、正しいオオカミの知識が身につく。また、オオカミの可愛い一面や格好良い一面がよく描かれており、すごく楽しみながら読み進めることが出来るおすすめの本である。

オオカミはとても高貴で、かっこよくて、可愛い。

すごく飼いたい。

終わりに

まずは間違った考え方を正す。世の中にはこのように刷り込みとまでは行かないが、なにか間違ったまま認識しているものがあると思う。本書のようにたくさんの本を読むことで少しずつ正すことが出来るのかな。（本自体、偏っていたり、間違ったモノがある可能性があるが。）

狼が語る: ネバー・クライ・ウルフ

作者: ファーリーモウェット,Farley Mowat,小林正佳
出版社/メーカー: 築地書館
発売日: 2014/01/23
メディア: 単行本
この商品を含むブログ (2件) を見る

日本に関するオオカミの調査、データ等を参考に書かれているのは以下の本だ。

オオカミが日本を救う!: 生態系での役割と復活の必要性

作者: 丸山直樹
出版社/メーカー: 白水社
発売日: 2014/01/24
メディア: 単行本
この商品を含むブログを見る

現在、この本を読み進めているところであり、オオカミに関する様々な背景がデータを元に考察されている。例えば、日本は八百万の神々を祀っている。その中に、オオカミもいる。しかし、オオカミを祀っている神社は狼に関する知識もなく、オオカミの迫害を推進していたり、復活に関して協力的でない等が書かれている。

まずは、オオカミの生態に関して書かれていて、楽しめる『狼が語る　ネバー・クライ・ウルフ』を読むべきではないかな、と思う。その後日本の狼に関する知識を得られれば効率的だと思う。

2014-11-12

『1日30分達人と読むビジネス名著』を読んで

はじめに

1日30分達人と読むビジネス名著─「不確実な時代」を生き抜く

作者: 日本経済新聞社
出版社/メーカー: 日本経済新聞出版社
発売日: 2012/12/15
メディア: 単行本（ソフトカバー）
この商品を含むブログを見る

これからビジネスキャリアを積む皆さんへ
第1章 「実践」と「行動」で学べ
第2章 「成功」を捨てることから始める
第3章 「自分流」のリーダーシップを持つ
第4章 経営モデルの大転換
第5章 「正しい選択」が衰退を招く
第6章 日本軍の失敗から学ぶ戦略論
第7章 組織に依存しないで生きるには

本の概要

不確実な時代を生き抜くヒントを探るために、もう一度あのビジネス書を紐解こう。人気コンサルタントや経営学者が、「明日からのビジネスに活かす」をコンセプトに、今読むべきビジネス書を独自の視点で読み解く。

感想

テーマごとに1冊の本が挙げられ、それについてケーススタディを使いながらわかりやすく說明してくれる比較的優しい本である。1冊の本と限らず、その著者の様々本をうまく紹介しているので、とてもわかり易い。そして、購入意欲が上がる。こんな文章を書けばアフィリエイトもうまくいくんだな。なんて思いながら読んでいました。

経営学の面白さが分かる1冊です。

2014-11-07

『コクヨ式-机まわりの「整え方」』- イノベーションを生む職場とは -

はじめに

本タイトルである、『コクヨ式-机まわりの「整え方」社内で実践している「ひらめきを生む」』を読了した。

コクヨ式机まわりの「整え方」社内で実践している「ひらめきを生む」3つのコツ

作者: 齋藤敦子
出版社/メーカー: KADOKAWA/角川書店
発売日: 2014/05/31
メディア: 単行本
この商品を含むブログを見る

この記事は、この本を読んだ感想を述べる。

コクヨ式-机まわりの「整え方」社内で実践している「ひらめきを生む」

序章：生産性の高い机には「共通点」があった
1章：仕事の成果は「机まわりの環境」で9割決まる
2: 心と体を心地よく。すると、頭の働きがクリアに
3: 会議室に「情報が流れる道」をつくるのです！
4: アイディアは「準備が整った場」から生まれます
5: 「職場を整える」から「成果がきちんと出る」
6: ちょっと高度でカッコいい「机まわりの整え方」

1章まとめ

仕事は「楽しく」やらなくちゃ！

進行中の案件の資料は「透明で色付きのクリヤーフォルダ」にする

軽く見えていることで、常に意識をすることができる。ちょっとした時に、アイディアが出る可能性も。

机の引き出しから「文具を全部取り出す」

引き出しから文具を探す時間を削減できる。また、引き出しがあると必要のないものを入れてしまうことがあるので、文具は机上においておく。

ブレーン・ストーミングのときは「手のひらサイズの付箋」を使う

小さい付箋では、書くスペースを気にしてしまい、書きたくても抑制してしまうことがある。「手のひらサイズの付箋」だと、その心配もない。

また、ホワイトボードも小さくては、書けるスペースを気にしてしまいがちである。模造紙のようなものに書いて、随時付け足していくと良い。

仕事のモードに寄って、机の高さを変える

バーのカウンターのように高い机は、コミュニケーションがしやすい。このように机の高さにより、仕事のし易さ、効率性があがる。

さいごに

1章だけでも学んだことがたくさんある。これでもかなり削ったほうだ。

続いて2章では、「体」について書かれていて、心理的な話や椅子の高さの話など有用な情報が含まれている。

白っぽい明るい光を発する電球であれば、交感神経を刺激して神経を研ぎ澄ましてくれる。論理的思考や計算などをするときに向いていたり、

暖かみがある色のときは、副交感神経を優位にしてリラックスモードにしてくれる。和やかに進めたい商談、自由に意見交換したい会議、ブレーン・ストーミングなどに向いている。

このように電球一つで生産性は変わる。こんなお話がこの本にはたくさんある。

ある日から自分の集中力が上がったが、この本を読んでもっと上がったと思う。学生会室をうろちょろしたり、いつもと違った席に坐ることで、集中力が保てているのかな、なんて思っている。このことも本書に書かれている。

自分は働いていないが、本書を読み変わった。【誰】が読んでも【生産性】があがる本だ。

とてもおすすめする本である。

コクヨ式机まわりの「整え方」社内で実践している「ひらめきを生む」3つのコツ

作者: 齋藤敦子
出版社/メーカー: KADOKAWA/角川書店
発売日: 2014/05/31
メディア: 単行本
この商品を含むブログを見る

2014-11-04

『理系の子』レビュー - ★★★★★ （満点）-

天才は、何を考え、何を思い、生み出すのか。

理系の子高校生科学オリンピックの青春 (文春文庫 S 15-1)

作者: ジュディ・ダットン,横山啓明
出版社/メーカー: 文藝春秋
発売日: 2014/10/10
メディア: 文庫
この商品を含むブログ (4件) を見る

内容（「BOOK」データベースより）

インテル国際学生科学フェア―それは高校生による科学のオリンピック。世界中の予選を勝ち抜いた理科の自由研究が集い、名誉をかけて競う。出場した少年少女たちは、どんなふうに育ち、なぜ科学に魅せられ、どんな研究をやってのけたのだろう?十歳で独力で爆薬を製造、やがて「核融合炉」の製作に挑んだ少年。自閉症を持ついとこのため画期的な教育プログラムを生み出した少女。少年院で非行少年たちの眠れる知の才能を発掘した熱血理科教師。ハンセン病に感染してもへこたれず、らい菌の徹底研究を開始した少女。そして小さな虫を手がかりに太古の地球環境を解明した日本人の少女。ほか研究に青春をかけた理系少年少女たちの感動の実話。科学はこんなにもおもしろい。

“サイエンス・フェア”とはアメリカで盛んに行なわれている科学教育イベントとのこと。中高生が、科学の自由研究をイベント会場に出品し、その評価を競うコンテストのことだ。その頂点にあるのが、インテル国際学生科学フェア（Intel International Science and Engineering Fair, Intel ISEF）である。このイベントは、インテルISEFの400万ドル相当の賞金がある。手にする可能性は、誰にでもあるのだ。（実際にこの本を読んでみると、こいつはいける！と思った人物が意外な賞を取っていたり。これは、ぜひ読んで身て欲しい。）運のいい一握りの者が、数十万ドルを獲得するだろう。大学へ進学して卒業するまでの充分な学費を稼ぐものも出てくるにちがいない。医者、宇宙飛行士、技術者など、ずっと思い描いていた夢の職業に就くことができるか、２,３時間のうちに決まるのだ。そう、【賞金・奨学金で、貧しい子どもたちが大学に進めるようになる】のだ。

この科学のオリンピックにはいくつかの物語がある。この本『理系の子』は、何人の物語についてかかれている。

彼らのエピソード

ここでは、自分のお気に入り（書きやすい）「ミツバチに挑戦した少女」のエピソードを述べる。他の物語については、実際に読んでもらいたい。

その少女、イライザ・マクニットは、モデル活動等を行っていた少女である。彼女は、科学に偏見「科学はオタクのもの」「科学はクールじゃない」を持っていた。しかも、科学が苦手で、モデル活動を行っていて有名でいたため、科学男子にからかわれていた。「こんな実験もできないの？」「これをやるとどうなると思う？」

ある先生と出会い、サイエンスフェアに参加することになった。彼女は、「ミツバチ」で挑戦することにした。この調査には困難があったが、なんとかサイエンスフェアを勝ち進み、ISEFの挑戦権を得た。

今まで科学と芸術は両立できないと考えていた彼女だったが、受賞後のゲストコメント（曖昧）で...

また、電波天体のひとつパルサーの発見につながる研究をしたジョスリン・ベル・バーネルは。椅子に座ったまま屈みこみ、ハンドバックをあさって薄いノートを引っ張り出した。宇宙に関する詩をこのノートに書き写しているのだとベル・バーネルは言った。子供のことからずっと詩を書き留めているけれども、それを口にしたことはほとんどないというのだ。でも、ちょうといい機会なので打ち明けましょう。わたしは科学と芸術が大好きです。それどころか、このふたつは完璧なカップルだと思っています、とベル・バーネルは言った。

「わたしたちは厳格にものごとを実証していかなければなりませんが、創造力、常識にとらわれない、とんでもない発想が必要なんです。そもそもの仮説というのは、そこから生まれます」

この言葉により、彼女は両立をすることを考えた。また、サイエンスフェアを通して、彼女は取られる側から撮る側になったりと色々エピソードがあった。

理系の子高校生科学オリンピックの青春 (文春文庫 S 15-1)

作者: ジュディ・ダットン,横山啓明
出版社/メーカー: 文藝春秋
発売日: 2014/10/10
メディア: 文庫
この商品を含むブログ (4件) を見る

2014-09-19

簡単スクレイピング(ruby)

はじめに

簡単なruby スクレイピングを書いてみる。（真似してみる）といっても、これをスクレイピングというのかわからない。とりあえず抽出できた喜びを伝えたいので、記事にする。

スクレイピング

$ irb

re2.1.1 :001 > require 'nokogiri'
 => true 
2.1.1 :002 > require 'open-uri'
 => true 
2.1.1 :003 > doc = Nokogiri.HTML(open("http://nokogiri.org/"))

2.1.1 :004 > doc.css('a').each do |e|
2.1.1 :005 >     puts e
2.1.1 :006?> end

# この'a'の中身を抽出する

2.1.1 :004 > doc.css('a').each do |e|
2.1.1 :005 >     puts e[:href]
2.1.1 :006?> end

こんな感じ！

参考スライド

Rubyで始めるWebスクレイピング from Takuro Sasaki

はじめに

下準備

ヘルプボタンの追加（HTML）

ヘルプボタンの追加（CSS）

吹き出しを作成（HTML）

吹き出しを作成（CSS）

吹き出しを呼び出す

参考

はじめに

シアトル、そして今あるスターバックス

本書を読んでから...

そして...

さいごに

はじめに

狼が語る ネバー・クライ・ウルフ

終わりに

はじめに

目次

本の概要

感想

はじめに

コクヨ式-机まわりの「整え方」社内で実践している「ひらめきを生む」

目次

1章まとめ

進行中の案件の資料は「透明で色付きのクリヤーフォルダ」にする

机の引き出しから「文具を全部取り出す」

ブレーン・ストーミングのときは「手のひらサイズの付箋」を使う

仕事のモードに寄って、机の高さを変える

さいごに

内容（「BOOK」データベースより）

彼らのエピソード

はじめに

参考スライド

狼が語るネバー・クライ・ウルフ