hagetak's blog

どうも、はげたかです。

Ruby:標準出力(p, puts, print)の違いを考察する

はじめに

先日、paizaの最終問題をクリアした。というのも、フォロワーさんの協力があったからだ。今まで曖昧だったRubyの標準出力を改めて学ぶ。

以下の変数を用い、各コマンド(関数)の出力結果を調べ、特徴を述べる。

2.1.1 :001 > str = "STR"
 => "STR" 
2.1.1 :002 > int = 100
 => 100 
2.1.1 :003 > array = ["a", "b", "c", "d", "e"]
 => ["a", "b", "c", "d", "e"] 
2.1.1 :004 > array2 = [["a","b"], ["c", "d"], ["e", "f"]]
 => [["a", "b"], ["c", "d"], ["e", "f"]] 

2.1.1 :008 > hash = {:john=>{name:"john", age:21}, :michael => {name:"michael", age:20}}
 => {:john=>{:name=>"john", :age=>21}, :michael=>{:name=>"michael", :age=>20}} 

p

pメソッドは、引数のオブジェクトを分かりやすい文字列にして標準出力に出力します。

わかりやすい文字列とはなんだろう。上の変数をすべて出力させる。

2.1.1 :012 > p
 => nil 
2.1.1 :013 > p str
"STR"
 => "STR" 
2.1.1 :014 > p int
100
 => 100 
2.1.1 :015 > p array
["a", "b", "c", "d", "e"]
 => ["a", "b", "c", "d", "e"] 
2.1.1 :016 > p array2
[["a", "b"], ["c", "d"], ["e", "f"]]
 => [["a", "b"], ["c", "d"], ["e", "f"]] 
2.1.1 :017 > p hash
{:john=>{:name=>"john", :age=>21}, :michael=>{:name=>"michael", :age=>20}}
 => {:john=>{:name=>"john", :age=>21}, :michael=>{:name=>"michael", :age=>20}} 
特徴
  • 改行を含まない
  • 戻り値も返す

puts

putsメソッドは、引数のオブジェクトを文字列に変換し、改行を加えて標準出力に出力します。

2.1.1 :019 > puts str
STR
 => nil 
2.1.1 :020 > puts int
100
 => nil 
2.1.1 :021 > puts array
a
b
c
d
e
 => nil 
2.1.1 :023 > puts array2
a
b
c
d
e
f
 => nil 
2.1.1 :024 > puts hash
{:john=>{:name=>"john", :age=>21}, :michael=>{:name=>"michael", :age=>20}}
 => nil 
特徴
  • 戻り値がnil
  • 改行を含む
  • 配列は要素1つ出力して改行を含む
  • str が文字列で出力されない

print

printメソッドは、引数のオブジェクトを文字列にして標準出力に出力します。

2.1.1 :035 > print str
STR => nil 
2.1.1 :036 > print int
100 => nil 
2.1.1 :037 > print array
["a", "b", "c", "d", "e"] => nil 
2.1.1 :038 > print array2
[["a", "b"], ["c", "d"], ["e", "f"]] => nil 
2.1.1 :039 > print hash
{:john=>{:name=>"john", :age=>21}, :michael=>{:name=>"michael", :age=>20}} => nil 
特徴
  • 戻り値はnil

爆弾問題の出力結果について

paizaの爆弾問題は、以下の出力結果が必要になる。

1 2 3
4 5 6
7 8 9

この出力結果になるよう、それぞれの関数で挑戦してみる。

2.1.1 :064 > array.each do |a|
2.1.1 :065 >     p a
2.1.1 :066?>   end
[1, 2, 3]
[4, 5, 6]
[7, 8, 9]
 => [[1, 2, 3], [4, 5, 6], [7, 8, 9]] 
2.1.1 :067 > array.each do |a|
2.1.1 :068 >     puts a
2.1.1 :069?>   end
1
2
3
4
5
6
7
8
9
 => [[1, 2, 3], [4, 5, 6], [7, 8, 9]] 
2.1.1 :070 > array.each do |a|
2.1.1 :071 >     print a
2.1.1 :072?>   end
[1, 2, 3][4, 5, 6][7, 8, 9] => [[1, 2, 3], [4, 5, 6], [7, 8, 9]]

joinが必要とフォロワーさんから教わり...

2.1.1 :052 > array.each do |a|
2.1.1 :053 >     p a.join(' ')
2.1.1 :054?>   end
"1 2 3"
"4 5 6"
"7 8 9"
 => [[1, 2, 3], [4, 5, 6], [7, 8, 9]] 
2.1.1 :055 > array.each do |a|
2.1.1 :056 >     puts a.join(' ')
2.1.1 :057?>   end
1 2 3
4 5 6
7 8 9
 => [[1, 2, 3], [4, 5, 6], [7, 8, 9]] 
2.1.1 :058 > array.each do |a|
2.1.1 :059 >     print a.join(' ')
2.1.1 :060?>   end
1 2 34 5 67 8 9 => [[1, 2, 3], [4, 5, 6], [7, 8, 9]] 

配列 [1, 2, 3]、[4, 5, 6]または、[7, 8, 9]をjoinする(くっつける)と、こういう出力になるのか。今回も学ぶことがすごく多かったな〜

まとめ

今回わかった特徴を簡単に表にまとめてみる。

コマンド 戻り値 出力結果 改行
p わかりやすい文字列
puts nil 文字列
print nil 文字列

※ 汚いテーブルでごめんね。出力結果はせめてコマンドの隣か一番右だよね。

オープンソースを読むことも必要だと思い、rubyソースコードを読んでみた。

今更知ったけど、Cで書かれているのね。元は。わからないけど Ruby -> C -> 出力 みたいな手順なのかな。Rubyオープンソースを読むのはCを結構理解していないとダメなので。ぱっとみ、関数ポインタとかあって分からなかった。Cの知識を増やそう。

同時に、RailsならRubyソースコードでしょう。中身は。まずはRailsオープンソースを読む。

Kernel - Rubyリファレンス

プログラミング言語 Ruby

プログラミング言語 Ruby

JavaScirpt:prototypeの存在意義

はじめに

先日、GCについて調べたところ、JavaScriptのprototypeに関する記事があり、存在意義を知ることができた。今回はそれをまとめてみる。

ちなみにGCとは、ガーベージコレクションのこと。

utage.headwaters.co.jp

1. 具体例

var Human = function(name) {
  this.name = name;
  this.tell = function(){
    console.log("My name is", this.name);
  };
}

var john = new Human("John")
john.tell()
// => "My name is john"

var elizabeth = new Human("Elizabeth")
elizabeth.tell()
// => "My name is Elizabeth"

上記のコードは見れば分かるだろう。さてこれからだ!

2. john君は叫びたい

john君が叫びたいらしい、なら叫ばせよう。単純に上位のHumanにshout()を追加すればいいでしょう。

var Human = function(name) {
  this.name = name;
  this.tell = function(){
    console.log("My name is", this.name);
  };
  this.shout = function(){
    console.log("YEEEEEEEEAAAAAAAAAAAAHHHHHH");
  };
}

var john = new Human("John");
john.tell();
// => "My name is john"
john.shout();
// => "YEEEEEEEEAAAAAAAAAAAAHHHHHH"

よし、これでよいでしょう。じゃないんです!

3. エリザベスちゃんも叫んじゃう

var Human = function(name) {
  this.name = name;
  this.tell = function(){
    console.log("My name is", this.name);
  };
  this.shout = function(){
    console.log("YEEEEEEEEAAAAAAAAAAAAHHHHHH");
  };
}

var elizabeth = new Human("Elizabeth");
elizabeth.tell();
// => "My name is Elizabeth"
elizabeth.shout();
// => "YEEEEEEEEAAAAAAAAAAAAHHHHHH"

叫んじゃった。これだとjohnくんもびっくり。

Elizabethはおしとやかに、johnくんはキチガイ

叫びたいjohnくんはキチガイキチガイは1人でいい。そういうときに、prototypeが使えるんです。

var Human = function(name) {
  this.name = name;
  this.tell = function(){
    console.log("My name is", this.name);
  };
}

var john = new Human("John");
john.tell();
// => "My name is john"

john.prototype = {
   shout: function(){
   console.log("YEEEEEEEEAAAAAAAAAAAAHHHHHH");
  }
}

john.prototype.shout();
// => "YEEEEEEEEAAAAAAAAAAAAHHHHHH"

エリザベスも叫んじゃうんじゃない?

var elizabeth = new Human("Elizabeth");
elizabeth.prototype.shout()
// => "Uncaught TypeError: Cannot read property 'shout' of undefined.

エラーはいたのでエリザベスは叫べなかった。

現段階ではjohnくんだけが叫ぶことが可能である。これがprototypeだ。

5. prototypeの使いドコロ

このようにだれでも叫べるようにしたら、メモリを浪費してしまう。特定の人(オブジェクト)だけ追加したいってときは、prototypeで追加するようにしよう!

JavaScript 第6版

JavaScript 第6版

開眼!  JavaScript ―言語仕様から学ぶJavaScriptの本質

開眼! JavaScript ―言語仕様から学ぶJavaScriptの本質

JavaScriptでセグメントっぽいの作った。

はじめに

お風呂に入ってる時、セグメントってすごいよな!って思った。一度、基本情報技術者の過去問でセグメントの問題が有り、すごく印象に残っていたのを思い出した。

それぞれの場所を7bitでフラグを立てて表現している。自分、何でも感動しやすく吸収しやすいので、これに感動をした、ということで、作ってみた。

f:id:hagetak:20150405170352j:plain

環境

(ブラウザのコンソールでテストをしていたが、後述するエスケープシーケンスを使用するためにnodeにした)

github.com

使い方

mkdir tmp && cd tmp

git clone https://github.com/hagetak/segmentJS

  • nodeで実行

    node

s = require('./segment.js');

for(var i=0; i<10; i++){ s.segment(i);}

感想

意外と簡単にできた。エスケープシーケンスってなんかすごいな。たったあの量で、制御ができるんだもん。こうやってちょこちょこ使ってみたいなあ〜〜〜〜!!!

書いてて成長したなぁって点は少しスマートに書けるようになったこと。オブジェクト(rubyでいうハッシュ)を使って綺麗に書けるようになった。昔、何かで読んだコードにこういう書き方があって、それを真似してみた。継続的にコードを読み、試し、スキルを向上したい。

一つつまずいた点は、node_moduleにした際、中にある変数が競合したこと。スコープ的に大丈夫かと思ったらダメだった。説明ができないので、コードで示す。(書いてて分かった。var を抜かしているから、グローバル変数になっていたんだ。)

/* 
   省略
 */
  for( i in hoge){
   /* */
  }

node

s = require('./segment.js')

for(var i=0; i < 10; i++){s.segmnet(i)}

はい。グローバル変数になってた。こうやって書き出すことにより自分の間違え・気付きが現れるからイイね。

参考

d.hatena.ne.jp

を元にnodeで使えるようにした先生のトラック.

JavaScript 第6版

JavaScript 第6版

開眼!  JavaScript ―言語仕様から学ぶJavaScriptの本質

開眼! JavaScript ―言語仕様から学ぶJavaScriptの本質

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

はじめに

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

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

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

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


1. メモリを外し起動

ピー ピー ・ ピー ピー

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

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

普通に起動した

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

さいごに

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

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

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

サンワサプライ 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デザイン手法~

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

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

はじめに

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

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

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

本書の構成(目次)は以下の通りだ。

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

f:id:hagetak:20150222174102j:plain

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

さいごに

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

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

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

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

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

はじめに

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

スターバックス成功物語

スターバックス成功物語

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

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

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

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

変革に向けたアジェンダ

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

七つの大きな取り組み

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

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

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

挑戦

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

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

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

最後に

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

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

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

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

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

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