JavaScript本格入門を読む・2

本の感想

ようやくはてな記法を使えるようになったぞ！
ということでfor…inループから。

var menber =['鈴木','山田','金子'];
for (var i in menber) {
document.writeln('名前は'+menber[i]);
}

var triangle = {width:30,height:50};
for (var j in triangle) {
document.writeln(j + '=' + triangle[j]);
}

var book = new Object();
book.title = 'ニコニコの歴史';
book.publish = 'ニコニコ出版';
book.price ='500';
for (var k in book) {
document.writeln(k + 'は' + book[k]);
}

ネストされたループを脱出するよ。ラベル構文。

kuku :
	for (var i = 1; i<10; i++){
	for (var j = 1; j<10; j++){
	var k = i *j;
	if (k>30){ break kuku; }
	document.writeln(k + '&nbsp;');
	}
	document.write('<br />');
	}

これで2章おしまい。

3−1.オブジェクトとは

3−2.基本データを扱うためのオブジェクト

Stringオブジェクト
var str1 = 'にわにはにわにわとりがいる';
document.writeln(str1.indexOf('にわ'));
document.writeln(str1.indexOf('にわ',3));
document.writeln(str1.indexOf('庭'));
document.writeln(str1.lastIndexOf('にわ'));
document.writeln(str1.lastIndexOf('わ',5));

var str2='僕と私のニコニコ動画';
document.writeln(str2.charAt(4));
document.writeln(str2.slice(5,8));
document.writeln(str2.substring(5,8));
document.writeln(str2.substr(5,3));
document.writeln(str2.split('私'));
document.writeln(str1.split('わ',3));

document.writeln('ニコニコ'.anchor('niconico'));
document.writeln(str2.link('http://www.nicovideo.jp'));
document.writeln('10'.sub());
document.writeln('10'.sup());
document.writeln(str2.concat('ワロスwwww'));
document.writeln(str2.length);

lastIndexOfに手間取ってしまった。本だと「L」と「ｌ」「1」の区別と「0」「O」「o」の区別がわかりにくい・・・

Numberオブジェクト
var num1 =255;
document.writeln(num1.toString(16));
document.writeln(num1.toString(8));

var num2 =123.45678;
document.writeln(num2.toExponential(2));
document.writeln(num2.toFixed(3));
document.writeln(num2.toPrecision(10));

rad進数とか指数形式とか何に使うんだ。これから出てくるのかな？

Mathオブジェクト

めんどくさくなってきた・・・数字だし・・サインコサインタンジェントやろ。書かなくてもいいだろ

Arrayオブジェクト
var ary1 = ['orange','banana','tomato','lemon','strawberry'];
var ary2 = ['coffe','tea','milk','cocoa','juce'];

document.writeln(ary1.concat(ary2));
document.writeln(ary1.join('／'));
document.writeln(ary1.slice(1));
document.writeln(ary1.slice(1,2));
document.writeln(ary1.splice(1,2,'komeda','tullys'));
document.writeln(ary1);

document.writeln(ary1.pop());
document.writeln(ary1);
document.writeln(ary1.push('doutor'));
document.writeln(ary1);
document.writeln(ary1.shift());
document.writeln(ary1);
document.writeln(ary1.unshift('star','bucks'));
document.writeln(ary1);
document.writeln(ary1.reverse());
document.writeln(ary1.sort());
document.writeln(ary1);

やっぱ数字じゃなくて文字列を色々変えるのは楽しいな。

3−3.Dateオブジェクト

Dateオブジェクトも大丈夫かな

3−4.RegExpオブジェクト

正規表現キター

var p = /http(s)?:\/\/([\w-]+\.)+[\w-]+(\/[\w- .\/?%&=]*)?/gi;
var str = 'はてなダイアリーはhttp://d.hatena.ne.jp/です';
str += 'はてなブログはhttp://hatenablog.com/です';
var result = str.match(p);
for(var i = 0; i < result.length; i++){
	document.writeln(result[i]);
}

めっちゃ苦労した・・・
ついにサンプルコードまでダウンロードして比較してしまった。
正規表現難しすぎる(>_<)

var p = /^[0-9]{1,}/g;
var str = '101匹ワンちゃん。\n7人の小人';
var result = str.match(p);
for (var i = 0; i<result.length; i++){
document.writeln(result[i]);
}

うーん。正規表現のエラーがわかればなー。
これもどこが違うのかわかるまで時間がかかってしまった・・・

var p = /http(s)?:\/\/([\w-]+\.)+[\w-]+(\/[\w- .\/?%&=]*)?/gi;
var str = 'はてなダイアリーはhttp://d.hatena.ne.jp/です';
str += 'はてなブログはhttp://hatenablog.com/です';
var result = p.exec(str);
for(var i = 0; i < result.length; i++){
	document.writeln(result[i]);
}

var p = /http(s)?:\/\/([\w-]+\.)+[\w-]+(\/[\w- .\/?%&=]*)?/gi;
var str = 'はてなダイアリーはhttp://d.hatena.ne.jp/です';
str += 'はてなブログはhttp://hatenablog.com/です';
while((result = p.exec(str)) !=null){
	document.writeln(result[0]);
}

matchメソッドとexecメソッドの違い。
execメソッド難しいな。

var p = /(http(s)?:\/\/([\w-]+\.)+[\w-]+(\/[\w- .\/?%&=]*)?)/gi;
var str = 'はてなダイアリーはhttp://d.hatena.ne.jp/です。';
document.writeln(str.replace(p, '<a href="$1">$1</a>'));

文字の置き換え。これちょっと興奮した。
ようやく、サイトで使えるっぽいやつや！！！

いやー正規表現、もうイヤになってきたなぁ。
今日はここまでにしておくか。今日はめっちゃ捗ったなー

JavaScript本格入門を読む・1

本の感想

積ん読になっていたJavaScript本格入門を読むぞ。

JavaScript本格入門　?モダンスタイルによる基礎からAjax・ｊQueryまで

JavaScript本格入門　?モダンスタイルによる基礎からAjax・ｊQueryまで

 

 前から人に勧められていたので買ってはいたが、全然読んでませんでした。

が、しかしモチベーションがびっくりするほどないのでせめてブログを書くぜ。

開発環境（というほど大それたものではない）

会社ではWindowsなのでTerapadを使っていたが、自宅はMacしかないので適当にググっって以下のエディタを導入。

CotEditor -Text Editor for OS X

実行結果はgoogleChromeのJavaScriptコンソールで確認することにした。

これでバッチリだろ（投げやり）

2−1.JavaScriptの基本的な記法

  <html>
<head>
<meta http-equiv="Content-Type" content="text/html"; charaset="utf-8" />
<title>hello</title>
</head>
<body>
<pre>
<script type="text/javascript">
<!--
document.writeln("Hello,World");
//-->
</script>
<noscript>JavaScriptが利用できないです</noscript>
</pre>
</body>
<html>

 基本中の基本から。

 <a href="JavaScript:window.alert('hello');">ダイアログを表示</a>

2−2.変数

msg = 'こんにちわ、JavaScript! ';
document.writeln(msg);

このへんはまぁ余裕だな。

2−3.データ型

var ary = ['one',['two','second'],'three'];
document.writeln(ary[0]);
document.writeln(ary[1][1]);
var obj = {x:1,y:2,z:3};
document.writeln(obj.x);
document.writeln(obj['x']);

 オブジェクトリテラル、上と下の違い（ドット演算子とブラケット構文）がわからないのだが、ソースが見やすくなるということなのかしら。

2−4.演算子

var x = 1;
var y = x;
x = 2;
document.writeln(y);
var ary1 = [0,1,2]
var ary2 = ary1;
ary1[0] = 5;
document.writeln(ary2);

 これ理解するまでちょっと時間かかってしまった。

サンプルコードなのに何の為にこれやってんのかわからん、と思ってしまったぜ・・・

そう、JavaScriptを理解するためでした。

var ary =['red','yellow','blue'];
document.writeln(delete ary[0]);
document.writeln(ary);

var obj = {x:1,y:2};
document.writeln(delete obj.x);
document.writeln(obj.x);

var obj2 = {x:obj,y:2};
document.writeln(delete obj2.x);
document.writeln(obj);

 これ最後のやつ[object Object]を返すんだけど、これってどういうことなのー

objectエラーってことなのかな。1つめと2つめで微妙に大文字と小文字なのも何故・・

document.writeln(typeof obj);

 次のtypeof演算子でわかるかなと思って書いてみたけど、objectって帰ってきてそりゃそうだな、と。

と、少々モヤりつつ演算子終了。

2−5.制御命令

var x =30;
if(x >= 10){
 if(x >=20){
document.writeln('変数xは20以上です。');
}
} else {
document.writeln('変数xは10未満です');
}

 これ、本の説明（分岐図）があるからわかった！これだけ見てどういうことかわかるのは難しそう・・・

var rank ='B';
switch(rank){
case'A':
    document.writeln('Aランクです');
    break;
case'B':
    document.writeln('Bランクです');
    break;
case'C':
    document.writeln('Cランクです');
    break;
default :
    document.writeln('ランク外です');
}

breakは現在のブロックから処理を脱出するための制御命令（メモ）

 swich文が出てくると、かっこいい感じするなぁ。

var x = 8;
while(x < 10){
document.writeln('xの値は' +x);
x++;
}

var x =8;
do{
document.writeln('xの値は' +x);
x++;
} while(x<10);

 x++ってどうして記述するのかわからないが、これがないと無限ループしてしまうので注意する。

for(var x= 8; x<10; x++){
document.writeln('xの値は' +x);
}

 for構文ですっきり。

中途半端だけど今日はここまでにしよう。明日はfor…inループからです。

 

続きを読む

アミーンズオーブンのパン

お取り寄せ グルメ

パン取り寄せシリーズ

f:id:redcat1113:20140407092057j:plain
f:id:redcat1113:20140407092121j:plain
こんな感じで一つ一つラベルに解説があってわかりやすい！
f:id:redcat1113:20140407092155j:plain
いよかんトースト
いよかんがギッシリ入っていて美味しい！いよかんがほのかに甘くて、スライスしておやつにパクパク食べられます。ヤバイ。これは美味しい！
f:id:redcat1113:20140407092250j:plain
よもぎあんぱん
あんこに胡桃が入ってる！
パン自体も濃厚で良かった！いきなり一個半食べてしまいヤバイ
f:id:redcat1113:20140407092416j:plain
f:id:redcat1113:20140407092430j:plain
奥から
いちくるバンズ
クロワッサン
えんどうよもぎ
 
いちくるバンズ
私、胡桃ギッシリの硬いパンが大好物なのですがこれは胡桃もさることながら、イチジクがすごい！大きいのがガツンと入っていて甘い。美味しい。
 
クロワッサン
これ、意外な味がした。クロワッサンなのにモチモチなのです。わりとパン！って感じがするクロワッサン
 
えんどうよもぎ
お食事パンシリーズ。
えんどうまめがゴロゴロ入っているのだ。美味しい。
 
 
全然関係ないけど、私は自家製酵母パン、大好きなのですが旦那が苦手ということが判明した…
まぁ全粒粉のハード系多いし、独特の酸味があるしね…万人向けではないよね…
 
ネットだと調子のっていっぱいクリックしちゃうので、自分で食べきれる分だけ、というのは厳しい。
次は酵母パン以外を取り寄せるか…
 

パトリックロジェのアソートメント

グルメ お取り寄せ

パトリックロジェのアソートメントを取り寄せした。

 
パトリックロジェは基本的にフランス、ベルギーの店舗でしか販売していない。
日本だとサロンドショコラに出品するくらいだ。（そして長蛇の列）
 
前、フランス旅行に行った時に買えなかったのでずっと悔やんでいた。
↓フランス旅行の時の自分土産。ミーハーセレクト。
f:id:redcat1113:20140327145235j:plain
f:id:redcat1113:20140327145244j:plain
はー美味しそう。
 
最近イライラしてたのでうっかりパトリックロジェのショコラをクリックして取り寄せてみた。初の国際宅急便である。
国際宅急便ってどんな感じかというと、びっくりすることにヤマトだった。
こんな風に進捗がわかる。
f:id:redcat1113:20140327140100j:plain
めっちゃ日本語。
フランスに3日もいたみたい…（このへんは流石フランスってかんじなのかな）
日本に着いてからは即日。しかも午前中に届きました。すげー時代ですな。
ってことで段ボールをあける！
f:id:redcat1113:20140327140301j:plain
緩衝材がパトリックロジェ色なんですけど！！！これ、パトリックロジェだからなのかたまたまなのかが気になる！
しかもこの緩衝材、チョコレートの匂いがして捨てるの勿体無かった（笑）
f:id:redcat1113:20140327140420j:plain
パトリックロジェの箱。メタルっぽいしっかりした作り。箱をあけるといい香り。そりゃあ、緩衝材もいい匂いになるわ！
 
f:id:redcat1113:20140327141423j:plain
きゃーーーー！！！
宝石みたい！！！！
素敵！！！
何の味が入ってるかサッパリわからないです。（アソートメントなので季節のショコラが入ってる）
右から2番目の黄色いのは「ABEILLE」っていうショコラなんだが説明が「ganache bursting with garden honey」ってあって蜂蜜入ってることしかわからんしな。フランス人め！
 f:id:redcat1113:20140327154736j:plain
冊子のショコラのおっさん怖い。
 
いやーしかし、冷蔵便で国際宅急便だと送料がすごい。送料だけで＋3000円くらいかかってます。
このアソートメントは30ユーロ。今ユーロが140円くらいで割と高めなので送料より本体のお値段のが高いけど、送料とどっこいどっこいになりますなぁ。フランスに旅行するお友達とかに頼んだ方が安そうだけどパトリックロジェ、空港とかデパートでも確か売ってなかったので頼むのも厳しいです。ちなみに日本のサロンドショコラでのお値段は【2014】パトリック・ロジェ｜サロン・デュ・ショコラ日本公式サイトこんな感じなので、単にパトリックロジェのチョコレートが食べたいだけだったらお取り寄せしたほうが安いっていうね…16個で10500円って…って思ってしまいますな。サロショコ、並ぶだろーし。
 
フランス旅行ももう2年前か。女の子とキャッキャしながらまたフランス行きたいなー！
 
 
 

zopfのパン

グルメ お取り寄せ

zopfのパンをお取り寄せした！

zopfといえば、通販も日付が、決まっていてなかなか取り寄せ出来ないことでおなじみ。
今回は時間に待機してGETしました。
 
f:id:redcat1113:20140320120424j:plain
こんな感じで箱に入って届く！丁寧な包装にテンションがあがる↑
 
以下パンの感想
f:id:redcat1113:20140320120507j:plain
・お芋のパン
写真で見てわかるように、お芋がぎっしり＆もっちもち。お芋のほのかな甘みがたまらん。
 
・パンコンプレ(くるみとレーズン) 小
すごい私好み！zopf得意のハードパンに、レーズンと胡桃がたっぷり。（レーズンに関してはみっちり入ってる！）本当に生地が固くてすごく好き。
 
f:id:redcat1113:20140322101811j:plain
包まれた状態。わかりやすい！
f:id:redcat1113:20140322101850j:plain
スライス後
 
・フォルコンブロート
上がフォルコンブロート。スライスするのもすごい硬い！ライ麦全粒粉80%なので、生地も固めで酸味があるかんじ。好みがわかれそう。クリームチーズ塗って食べたら美味しかった。
 
・ヨーグルトライ
こちらも硬めのパン。外がカリカリ！
ヨーグルトってかんじはしないけど、まろやか。クリームシチューと合わせたらいいかんじ。
 
f:id:redcat1113:20140325132005j:plain
・クロワッサン
結構大きめで、バターたっぷりのクロワッサン。底が硬めでした。
写真が暗かったな・・・
安定しない写真！
 
f:id:redcat1113:20140324192551j:plain
・ブルーベリー
ブルーベリーがたっぷり入っててもちもちだった！美味しい。
 
パン充できてよかった！今度は違うパンを取り寄せしたいなー。

1月24日牛肉記念日＠今半 2014

グルメ

以前も行ったのですが

今年も行ってきました。今半の牛肉記念日！

 f:id:redcat1113:20140124235424j:plain

今年は、横浜高島屋店の今半です。

というか、前回よりも安かったのね…

今気がついた。

f:id:redcat1113:20140124235504j:plain
牛肉記念日！！！
f:id:redcat1113:20140124235607j:plain
先付！
f:id:redcat1113:20140124235624j:plain
お野菜！今半のお麩って本当に美味しい。
f:id:redcat1113:20140124235706j:plain
そしてお待ちかねの肉！！！！
f:id:redcat1113:20140124235726j:plain
とろける！！！
旦那のカメラの写真からも肉！！！

f:id:redcat1113:20140124181606j:plain

f:id:redcat1113:20140124183111j:plain

 
f:id:redcat1113:20140124235752j:plain
デザートはさっぱりと。イチゴおいしー。シャーベットおいしー。
 
お肉食べるの久々な感じがしたのでかなり満足度が高いですな。
しかし、だんだん食べることが出来る量が減ってきて悲しいぜ。
ごちそうさまでした！

インターフェイスデザインの実践教室を読んだ

本の感想

インタフェースデザインの実践教室 ―優れたユーザビリティを実現するアイデアとテクニック

インタフェースデザインの実践教室 ―優れたユーザビリティを実現するアイデアとテクニック

オライリーの新作！

私はもうユーザビリティの本を読んでいるときが一番幸せだよ・・・

 

この本は、わりと「じゃあ実際どうするか？」が中心となっていて興味深かったです。

 

以下メモ。

  • よい文章はよいデザインである
  • 文章は、人と製品とがコミュニケーションするための大切な手段です。
  • ポップアップウインドウは、クリックして消されるためだけに存在しているかのようだ。（消せば問題は解決すると思われている）

文章が、デザイン！もうちょい本読みたい。

以下の3つのモデルを反映する。

P111　リアリズム

  • 細部がリアルであることは、どのような動作をする可能性があるのか、つまり知覚可能なアフォーダンスを伝える助けになる。
  • P116 従来の実物を模したデザイン

P141　アニメーション

  • 重要でないアニメーションは避ける
  • 「ユーザーの作業を遮って何かを無理やり見せる必要が本当にあり、それに関連する情報をアニメーションが伝える場合」

P159 　集中を妨げない

  • ユーザーの代わりに決定する

このたとえの「メモリーカードの[画像とビデオの読み込み]をクリックする人が何人いるのか？」ってあるあるすぎて笑った。

 

P162　緊急性がなければユーザーの意思決定を促してはならない

  • 通知したい内容が特に重要というわけでないなら表示してはなりません。（略）できるだけ邪魔にならないように表示しましょう。たとえば、モードを変えずにちょっとした警告を表示することができます。

P166 　動作の取り消しを可能にする

  • ユーザーに信頼されるアプリを目指しましょう。そのためには、ここで説明したようにユーザーに信頼してもらえる取り消し機能を実現するのも大切ですが、ユーザーが予期したとおりに安定して動作することも欠かせません。

P180　環境設定の種類

私もプレファンスを避けるべきという主張だし、設定画面が複雑化してストレスが増すと思っているのですごい同意・・・・

プレファンスによりモードが導入されるとアプリの動作に一貫性が欠如するというのも同意

P191　時間

  • データに時間実でアクセスできるようにするとわかりやすいことがある。

確かにDSのデータの画面見やすいし、どこに画像があるかわかりやすい！

P213　機能の削除

  • その機能の役割が、「非常に重要だがまれにしか使われない」という種類のものではないか？
  • その機能があまり使われていないのは、デザインが悪いからではないか？UIがわかりにくいからではないか？奥に隠されてしまっているからではないか？名前が悪いからではないか？使い方がわかればもっと頻繁に利用されるのではないか？
  • その機能が無視される理由は、単にその機能が不要だからだろうか？

 

あとはユーザービリティテストの詳細なやり方とかが載ってて面白かった。

ユーザビリティテストやりたいなぁ。

 

次読む本。文章もデザインや！

小説作法

小説作法