ビープ音が4回連続で鳴ったときの解決法

はじめに

昨日、デスクトップのWindows7をシャットダウンをして寝かせた。

そして、先ほど起動させたらビープ音が4回鳴った（ピーピーピーピー・ピーピーピーピー）。

上記の警告音で検索したところ下記がヒットした。

高低音の繰り返しではないものの、「ピー 、ピー、ピー、ピー」と同様であるためCPUの異常ではないかと考えられる。。

---

1. メモリを外し起動

ピー ピー ・ ピー ピー

今度は2回。警告音の優先度的にCPUが最上位だと思っていたが、メモリを外したところ警告音が変わった。

2. とりあえずメモリを1つ挿す

普通に起動した

無事、デスクトップPCが復活しました。

さいごに

警告音一覧表は少し手がかりになるでしょう。だから、これを見てCPUのエラーが当てはまってもめげずに、壊さない程度にいろいろ試しましょう。

もしものときのために、HDDの中身を取り出すために必要なモノを買っておきましょう。

サンワサプライ IDE/SATA-USB変換ケーブル 0.72m USB-CVIDE2

SEOに良いレスポンシブデザインをまとめる。

スマートフォンに最適化されたサイト構築の推奨方法

Google ウェブマスター向け公式ブログ: Google がお勧めするスマートフォンに最適化されたウェブサイトの構築方法によると、レスポンシブ・デザインはSEOに良いことがわかる。

レスポンシブ・ウェブデザインを使用すると、次のような利点があります。
* PC 用のページとモバイル用のページを単一の（同一の） URL とすることができるため、ユーザーにとってはシェアやリンクが容易であり、Google のアルゴリズムにとってはコンテンツを適切にインデックスできるようになります。
* ユーザーエージェントの異なる Googlebot ごとにページをクロールする必要がないため Google がより効率的にコンテンツを発見することができます。

レスポンシブ自体はSEOに良い、レスポンシブルを実現するためにいくつかの方法がある。Googleの文章から引用する。

1. レスポンシブ・ウェブデザインを使用しているサイト、すなわち、すべてのデバイスに単一の URL で同じ HTML を提供し、CSSを使用してデバイスごとにデザインを変更するサイトです。こちらが Google の推奨する設定方法となります。
2. すべてのデバイスに対し単一の URL で、ユーザーエージェントに応じてデスクトップ用かモバイル用かなどを判断して動的に異なる HTML と CSS を提供するサイト。
3. モバイル用のサイトとデスクトップ用のサイトを別々に構築しているサイト。

その中でもGoogleが推奨する設定を今回は取り上げる。

CSSでデバイスごとにデザインを変更する

動画学習サイト、dotinstallから重要だと思ったことをまとめる。

http://dotinstall.com/lessons/responsive_html

基本的な考え方

以下の文章をcssに書くことで、読み込ませることができる。 小さい順に読み込ませることで、無駄をなくす。

例：タブレットの場合

1. common style を読み込む
2. smartphone style を読み込む
3. tablet style を読み込む

smartphone, commonstyle を上書きしていくことで、適用される。

/*
 SmartPhone: 320px - 480px;
 Tablet: 480px - 768px;
 PC: 768px -;
*/

/* common style */
body {


}
...
...

/* SmartPhone Setting */
/* writing smartphone's style */

/* Tablet Setting*/
@media all and (min-width: 480px) {
  /* writing tablet's style. */
}

/* PC Setting*/
@media all and (min-width: 768px){
  /* writing pc's style. */
}

また、HTML上に以下の文章を書くこと。CSSreset と 横幅をデバイスに合わせる。

<meta name="viewport" content="width=device-width, initial=1.0">
    <link rel="stylesheet" type="text/css" href="http://yui.yahooapis.com/3.18.1/build/cssreset/cssreset-min.css">

後は単純に3種類のコードを書くだけ。

以上。

レスポンシブ・デザイン難しそうだなぁと思ったけど、予想より簡単だった。 新しい技術を学ぶのって少し億劫だけど、やってみるとたのしい。

怖がらずにいろいろやってみよう。

レスポンシブWebデザイン マルチデバイス時代のコンセプトとテクニック (WEB PROFESSIONAL)

レスポンシブWebデザイン入門 ~マルチデバイス時代のWebデザイン手法~

『マネジメント』のドラッカーが書いた『経営の哲学』を読んだ

はじめに

この『経営の哲学』は、あっさり読めて、寝る前の60分ですべて読むことができた（内容が少し分かりづらい部分があったけど、それは理解していない）。

本書は、1ページに名言が一つ書かれており、量が少なくすごく読みやすく、テンポ良く読み進めることができる。

少し分かりづらい言い回しがあるが、これは僕の理解度が低いだけだ。実際にビジネスをやっている社会人だと理解できるでしょう。

本書の構成（目次）は以下の通りだ。

1. マネジメントの役割
2. 事業の定義　　　　　　　
3. 戦略計画　　　　　　　　
4. コア・コンピタンス
5. 顧客　　　　　　　　　　
6. マーケティング　　　　　
7. イノベーション
8. 生産性
9. 利益
10. コスト
11. 意思決定
12. 目標管理
13. 人のマネジメント
14. 組織構造
15. 社会的責任

経営の哲学 (ドラッカー名言集)

さて、この中で私が気に入った名言を載せる。

マネジメントの役割：強みを発揮させ、弱みを無意味にする

この言葉は、マネジメントを少し知っている方はだれでも知っているでしょう。成長させるべきは、強みということが。

私は「強みを強くすることで弱みを無意味にするくらい頑張れ！」という解釈をしている。

この言葉を知っていたから、私はプログラミングのスキルを伸ばすことに専念できた。デザインセンスは一切ないけど、それは他の人に頼むことにしている。

目標管理：支配から自己管理への転換

◯◯をしろという「支配」ではなく、◯◯を達成させようという「目標」へと転換させることが重要である。すなわち、その役割を自己管理させるのだ。

これはなるほど、と思った。「◯◯しなければいけない...」より「△△実現させるために◯◯しよう！」のほうがモチベーションが高くなるのは分かる。

これはすべてにおいて用いることができる。素晴らしい...！

目標管理の重要性を改めて知ることができた。私が所属している学生会にもこれを使えるだろう。

意思決定：対立なければ決定なし

これは、意見の対立がなければ（満場一致では）決定を行ってはならないということだ。学生の会議なんかは、意見の対立が少ない気がする...。ファシリテーターとして、もう少しスキルを上げなければけいけないな、と思った。

意思決定：複数の解決案を作成せよ

どのような状況に置かれても対応できるように複数の解決案を作成することが大切だ。

さいごに

知識が浅い私にはこれらの言葉しか「ずしん」とこなかった。ビジネスパーソンや経営者にとっては「ずしん」とくるものがたくさんあるのではないだろうか。

様々なことに挑戦し、この本を読んで振り返ってみたいと思う。「ずしん」と来る回数によって自分の成長がわかるのでは無いかと思っている。本書はあっさり読めてしまうので、何度も読み返しが効く。手軽に読めるので、片手間に読んでみてはどうだろうか？

経営の哲学 (ドラッカー名言集)

『スターバックス再生物語』レビュー

はじめに

過去にハワード・シュルツ『スターバックス成功物語』 - 器用貧乏の果てにという記事を書いた。本記事は、スターバックスが成功した次の話である『スターバックス再生物語』について述べる。

スターバックス成功物語

スターバックスにピンチが！

ハワード・シュルツがCEOを辞め、利潤を追求することに囚われたスターバックスは、危機に直面した。その危機とは、リーマンショック・店舗でのサービスの低下によるものだ。（かなり端折っている。）

これを脱するために愛するスターバックスに戻ってきたハワード・シュルツ。この物語は、題の通りスターバックスを再生する様が描かれている。

変革に向けたアジェンダ

シュルツがピンチを脱するために、従業員へ「変革に向けたアジェンダ」を提示した。

七つの大きな取り組み

１．コーヒーの権威としての地位を揺るぎないものにする ２．パートナーとの絆を確立し、彼らに刺激を与える ３．お客様との心の絆を取り戻す ４．海外市場でのシェアを拡大する。各店舗はそれぞれの地域社会の中心になる ５．コーヒー豆の倫理的調達や環境保全活動に率先して取り組む ６．スターバックスのコーヒーにふさわしい創造性に富んだ成長を達成するための基盤をつくる ７．持続可能な経済モデルを提供する

これを元に行動をし、スターバックスを再生した。ただ保守的に行動を起こすのではなく、挑戦する軸にこれを当てはめていた。

大きな企業は、挑戦せず、保守を優先してしまうが、スターバックスは違った。

挑戦

挑戦した中で自分が印象に残ったものは、インスタントコーヒーへの挑戦だ。 インスタントコーヒーというと、一般の人はドリップコーヒーに劣ると考えるでしょう。また、既にスターバックスは「価値あるコーヒー」としてブランドを構築していた。そこに、インスタントコーヒーに参画することは、ブランドを低下させるのではないかと思う。当時、多くのパートナー・メディアがこのことを批判していたが、これを販売すると... 大成功をした。

スターバックスのインスタントコーヒー？と言われると日本ではすぐ浮かばないと思う。以下の様な商品だ。よく店舗にあるカップ状のケースに入ったスティックのことだ。（VIA）

スターバックス VIA インスタントコーヒー　コロンビア　2.1ｇ×24本

スターバックスヴィアスティックギフト ＳＶ?２２Ｃ

スターバックスのように、挑戦し続ける（イノベーションを起こし続ける）会社であることはとても重要で、多くのビジネス書に書かれている。スターバックスはそれを証明したのではないか。

最後に

本書は、先程述べた挑戦のほかにも、様々な挑戦について書かれている。一つ一つが大きなもので、今でもスターバックスの中核となっているものもある。

当時のメディアの意見やシュルツが書いた手紙、壇上に立って話したことがしっかりと書かれており、リアルにその状況を浮かべることが出来る。とても楽しく、ビジネスの難しさやノウハウも掴むことが出来ると思う。 甘い考えで「起業したい」なんて考えていた自分もこれを読み、考えを改めることが出来た。

スターバックスの危機脱出は、様々な本に取り上げられている。昔書いた記事、『1日30分 達人と読むビジネス名著』を読んで - 器用貧乏の果てににもスターバックスの事が書かれており、元CEOシュルツがスターバックスに戻り、全店舗を1日休店させ、研修を行った。と大体的に書かれており、本記事で述べた「変革に向けたアジェンダ」についてはあまり述べられていない。 （『1日30分 達人と読むビジネス名著』は触りとして読むのはすごく楽しく、おすすめする。）

このように他のビジネス書には一部しか書かれていないことが多々あり、是非手にとってスターバックスの再生物語を読んでみてはどうだろうか。

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

『スターバックスはなぜ値下げもテレビCMもしないのに強いブランドでいられるのか？』

はじめに

タイトルにある『スターバックスはなぜ値下げもテレビCMもしないのに強いブランドでいられるのか？』という本を読了した。

スターバックスはなぜ値下げもテレビCMもしないのに強いブランドでいられるのか?

本書を読んで、「ブランドを築き上げられるか。」と問われたらそれはムリである。スターバックスならでは方法が書かれているからである。 しかし、共感できる部分は多々有り、これを利用すれば生産性の向上につながり、人生を豊かにするのではないかと思う。

私が共感したモノを幾つか紹介する。

旅行者は土産を持ち帰り、探検者は土産話を持ち帰る

要約：スターバックスが目指している顧客像は、探検者である。この土産話こそが口コミである。このような客を増やすために「スターバックスエクスペリエンス」が求められている。

自分は常に旅行者タイプの客である。ただ接客を受けて、ちょっとお話して帰っていた。 これは大学生活でも言えることで、講義をうけてすぐバイトや帰宅していたらつまらない。

大学で開かれているイベントや実行委員会やサークルに所属したりして、たくさんの経験をして、探検すると人生が楽しくなるのでないかな！！！と思いました！！

ベテランと新人をつなぐ方法：①解決策を与え、障害を与えない

ミーティングで、新人がアイディアを出したとき、

「わかった、でもそれは何年前かにやって失敗したから絶対無理だ。」

こういう上司は嫌だろう。だから勇気を出して

「わかった、では... その案についてはもっと検討しなければいけない。以前似たことをやったが失敗したからね」

と言おう。自分は今でもこれが出来ないことがある。意識しているがちょっと否定的な発言をしてしまう。反省。自分を見なおす機会となった部分だ。

「わかった、でも」より「わかった、では」を言おう。

会議を有意義にする7つの法則

ミーティングをより良くする方法は様々な本で取り上げられている。本書もスターバックスの会議のルールが掲載されて、自分の頭のなかにひとつの案としてストックされた。

この方法をこの方法を使えばより良くなると思う会議で使いたいと思う。

昨年度の自分と今年の自分を見直す

ビジネス書によくフィードバックをすることの重要性が説かれているが、本書もフィードバックの重要性が説かれている。自分をフィードバックするための指標が載せてあり、これも参考になる。

後日、自分を見つめなおす指標を載せたいと思う。振り返りは重要だ！

最後に

マーケティング（またはブランド）と自分（または人生）はほとんど似たようなものだ。

自分のブランドを築きあげるにはスターバックスのように妥協を許さない。

スターバックスが成長したように、失敗を恐れず挑戦していく。

本書は、スターバックスにかぎらず様々な用途で使える。自分が所属している委員会や会社、大学、はたまた自分であったり。

一度手にとって読んでみてはどうだろうか？

スターバックスはなぜ値下げもテレビCMもしないのに強いブランドでいられるのか?

同様にスターバックスの成り立ちも参考になる。自分のブランドを築きあげると就活にも使える。早いうちに「妥協を許さない」精神を手に入れたかった。分厚い本だがテンポ良く読むことが出来る。

スターバックスを世界一にするために守り続けてきた大切な原則

スターバックス成功物語

MOSの模擬問題をネットカフェで勉強する。

MOSの勉強をネットカフェでする。

はじめに

先日、ネットカフェでMOSの勉強をしたいという人がいた。しかし、ネットカフェはCDからのインストール等を許さない店舗が多々ある。

インターネットカフェのパソコンについて -インターネットカフェのパソ- システム | 教えて!goo

ネットカフェのパソコンにフリーソフトを -家のパソコンが壊れてしまっ- デスクトップパソコン | 教えて!goo

こういう都市伝説があるぐらいだ。

今回は、こういう危険な橋を渡らないために最適な方法を提供する。

Microsoft Office Specialist Microsoft Excel 2010 Expert 対策テキスト& 問題集(CD-ROM付き)

手順（ Word2010-Expertを例に述べる ）

事前準備

1. インストール済みのPCから、「C:\FOM Syuppan Program」と「C:\Users\ユーザ名\Documents\MOS-Word2010-Expert(2)・MOS-Word2010-Expert(1)」をUSBにコピー

※ フォルダの保存場所は、設定によって変わります。デフォルトでは、以上のPathで出来ます。

1. MOS (Microsoft Office Specialist) : FOM出版 を購入しておくこと

（CDがなければ、模擬問題は動きません。）

※ あくまでも本を購入済みのことを前提で話しています。ハードディスクに保存されているデータだけでは模擬問題は出来ません。

店舗にて

1. C:\ に 「FOM Shuppan Program」 を入れる

2. C:\Users\ユーザ名\Documents\に 「MOS-Word2010-Expert(2)」「MOS-Word2010-Expert(1)」を入れる

3. CDを入れる

4. C:\FOM Shuppan Program\MOS-Word2010-Expert\WD2010E.exeを起動

# 注意

• 最初、CD入れてインストールできるか試してみること

これができれば、以上の面倒な操作も不必要になる

• C:\にアクセス権限がなかったら、C:\Users\ユーザ名\Documents\ に「FOM Shuppan Program」を入れ、「WD2010E.exe」を起動

• 快活CLUBは CD からのインストールを許可

さいごに

MOSは簡単だ。ネットカフェで、のんびり模擬問題をするだけで良い。つまらない問題を快適に過ごしながらやってみてはどうだろうか？

Microsoft Office Specialist Microsoft Excel 2010 対策テキスト& 問題集　(よくわかるマスター)

Microsoft Office Specialist Microsoft Word 2010 対策テキスト& 問題集 (よくわかるマスター)

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

はじめに

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

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

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

下準備

はじめのコード

<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>

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

ヘルプボタンの追加（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;
  }

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

吹き出しを作成（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');

メッセージを消す

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

参考