02062011 javascript HTML5

スマートフォンサイトの入門書

先週末のjavascriptの読書会の懇親会で、スマートフォン用のサイトの話を聞いて、ネイティブアプリもwebアプリも作れるようになっとかなアカンなぁと勉強してみた。

本書はスマートフォンサイトを製作するには3つのアプローチがあって、本書では最初の二つを取り扱ってます。

  • 専用サイトをフルスクラッチで
  • PCサイトをCSS/Javascriptでスマートフォン用に見やすく
  • 携帯向けサイトを流用

全ページカラーで見やすいし、説明も丁寧なので入門書としてはオススメかと思う。小さい画面に対応するためにはというよりは、タッチパネルのような指で触るデバイスのインターフェースをどう設計するか、はまりどころはどこか？PC用のサイトとはどう違ってどういうところに気をつけるべきなのか？というあたりが知りたかったので本書は良かったですね。

ProductName iPhone+Android スマートフォンサイト制作入門 (WEB PROFESSIONAL)
たにぐちまこと
アスキー・メディアワークス / 2499円 ( 2011-02-19 )


個人的には1章は必要なくて、2章のCacooを利用した設計フローと4章の実践テクニックが役に立った。

  • HTML5用のリセットCSS
  • webclipアイコンは57x57px

基本的なところを押さえたらjQuery Mobileを使っていけばいいのかな。

20052011 三島 javascript

第3回JavaScript読書会

第３回JavaScript読書会は5月28日に三島で開催です。

ProductName JavaScript: The Good Parts ―「良いパーツ」によるベストプラクティス
Douglas Crockford
オライリージャパン / 1890円 ( 2008-12-22 )


僕は幼稚園の運動会とぶつかっているので、それが終わってから参加するかなーと。

24042011 javascript

JavaScript: The Good Parts読書会(4章)

昨日は久しぶりのJavascript読書会。みなさんお疲れさまでした。

ProductName JavaScript: The Good Parts ―「良いパーツ」によるベストプラクティス
Douglas Crockford
オライリージャパン / 1890円 ( 2008-12-22 )


一般に未定義と呼ばれる変数には二種類ある(Javascript 第三版 4.3.2)

本から引用

  • 宣言されてない変数から値を読みだそうとすると実行時エラー
  • 宣言されているが値が設定されていない変数 undefined

実行する

var x;

console.log(x); // undefined
console.log(y); // ReferenceError: y is not defined

スコープ

var x = "global";

function f() {
  var x = "local";
  return function () {alert(x);};
}

var g = f();
g(); // local

alert(x); // global

fで新たに作られる関数はlocalを参照しているのでこれを捕まえっぱなしなので実行するとlocalを返す。次のalertは最初に定義したglobalを参照するのでglobalを返す。lispを実装したときはこんな感じだった。

食べもの

おやつはcanaのプリン

1303627550

懇親会は昭和ホルモン ブタチカで。静岡おでんたべたことなかったので初体験です。

1303627557

富士山型のタジン鍋はシャッター切るまで富士山がモチーフだって気付かなかった。妙に派手な色のタジン鍋やなーって思ってた。

1303627552 1303627554

これが静岡おでん。ナルトが縦半分に切断されているのはカルチャーショックをうけた。しかも串にささってるし。

1303627556

  • マネタイズの話を色々聞けて面白かったというか勉強になった
  • モクモク静岡をやらないと集中して何かを作れないヒトがそこそこいたのでやれば楽しそう
  • 結局サービスつくらないとな。勉強のためだけの勉強会ってわけじゃないし、成果物としての目標をおかないと的な
  • @ando_ando_andoに「みんなのPythonセット」を進呈してきた。静岡にパイソニスタを増やす地道な活動ということで
  • 交換してもいい本のリスト

21042011 javascript

Javascriptを最適化したかったら読む本

ハイパフォーマンスJavaScriptはjavascriptの速度を上げてユーザービリティーを改善したい時に役立つ本。

ProductName ハイパフォーマンスJavaScript
Nicholas C. Zakas
オライリージャパン / 2940円 ( 2011-03-20 )


Javascriptで綺麗なコードを書きたいならJavaScriptパターンのほうが良いかも。

  • [[Scope]]というプロパティはEcma-262で定義されている
  • クロージャはそうでない関数と比較してメモリのオーバーヘッドが大きくなる
  • スタイルを変更している間はスタイル情報を取得しないほうがいい
  • for-inループはプロトタイプ上の検索処理が発生するので遅い
  • Duff's Deviceのjavascript実装
  • 3つ以上の不連続な値を条件とする場合はswitch文のほうがif文より速くなる
  • Javascriptの最小化(YUI Compressor)
  • プロファイラをうまく使おう

04042011 三島 静岡 javascript

第2回JavaScript読書会は4/23

延期になってた第二回は静岡で4/23開催

今回は三島駅からすぐのゆうゆうホール。

今回は関数の章なので次の5,6章とあわせてこの本のピークに突入

ProductName JavaScript: The Good Parts ―「良いパーツ」によるベストプラクティス
Douglas Crockford
オライリージャパン / 1890円 ( 2008-12-22 )


07032011 javascript 家庭菜園

作付け状況をcanvasを使って表示

毎度Photoshopをいじるのも面倒なのでcanvasで出来るようにしてみた。

html

<html lang="ja">
<head>
<title>Allotment</title>
<style type="text/css">
canvas { border: 1px solid #999; }
</style>
</head>
<body>
<canvas id="allotment" width="500" height="500"></canvas>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="allotment.js"></script>
</body>
</html>

js

$(document).ready(function() {
var cv, ctx;
var allotment_data = [
    {name:"なにもうえてない",  x:10,  y:10,  width:480, height:120, color:"#CCCCCC"},
    {name:"浅葱",  x:10,  y:140,  width:140, height:120, color:"#66CC66"},
    {name:"ニンニク",  x:160,  y:140,  width:80, height:120, color:"#993300"},
    {name:"春菊",  x:250,  y:140,  width:80, height:120, color:"#339933"},
    {name:"ジャガイモ",  x:340,  y:140,  width:150, height:120, color:"#CC6600"},
    {name:"ソラマメ",  x:10,  y:340,  width:70, height:150, color:"#339933"},
    {name:"エンドウ",  x:10,  y:270,  width:70, height:60, color:"#339933"},
    {name:"ジャガイモ",  x:90,  y:270,  width:400, height:110, color:"#CC6600"},
    {name:"ミョウガ",  x:90,  y:390,  width:400, height:100, color:"#CC9966"}
];

initCanvas();
drawCanvas();

function initCanvas () {
    cv = $("#allotment").get(0);
    if (!cv) { return; }
    ctx = cv.getContext('2d');
    if (!ctx) { return; }
}

function drawCanvas () {
    var alt;
    ctx.save();
    ctx.font = "20px";;
    for(index=0; index<allotment_data.length; index++){
    alt = allotment_data[index];
    ctx.fillStyle = alt.color;
    ctx.fillRect( alt.x, alt.y, alt.width, alt.height);
    ctx.fillStyle = "#000";
    ctx.fillText(alt.name, 12 + alt.x, 32 + alt.y);
    }
    ctx.restore();
}

});

まぁまぁの出力

allotment

区画のデータはSQLiteかなんかで管理してJSONで取り出せるようにしよう。

06032011 javascript

Javascriptで末尾最適化関数

Javascript The Good Partsの4章の最後にメモ化関数があるので、末尾最適化関数を書かねばならんだろうと。

Function.prototype.tail = function () {return [this, arguments];};
Function.prototype.call_with_tco = function () {
  var c = [this, arguments];
  var escape = arguments[arguments.length-1];
  while(c[0] !== escape)
    c = c[0].apply(this, c[1]);
  return escape.apply(this,c[1]);
};

var tcoptimizer = function (f) {
    var s = f.toString();
    var t = s.match(/function\s+\((.+?)\)\s+{\s+(.+)\?\s+(.+?)\((.+?)\)\s+:\s+([a-zA-Z_]+)/);
    var f_str = "var func_ = function (" + t[1] + ", k_) { " + t[2] + " ? func_.tail(" + t[4] + ", k_) : k_.tail(" + t[5] +");};";
    eval (f_str);
    return func_;
};

var id   = function (x) {return x;};
var sum  = function (n,acc) { return n > 0 ? sum(n-1,acc+n) : acc;};
//console.log(sum(10000,0));
console.log(tcoptimizer(sum).call_with_tco(10000,0,id));

firebugでfunctionで始まる文字列をevalしたらSyntaxエラーになったのでvarからevalしてある。これは謎だがとりあえず動くようになった。しかしid関数とcall_with_tcoメソッドがちょっとよろしくないのでラップしてみる。

var tcopt = function (f) {
    var id   = function (x) {return x;};
    var func_ = tcoptimizer(f);
    return function() {
    var slice = Array.prototype.slice;
    var args = slice.apply(arguments);
    args.push(id);
    return func_.call_with_tco(args);
    };
};

var sum  = function (n,acc) { return n > 0 ? sum(n-1,acc+n) : acc;};
//console.log(sum(10000,0));
var tco_sum = tcopt(sum);

console.log(tco_sum(100,0));

すると

TypeError: k_ is undefined

ってエラーが出るのだが理由がよくわからん。

k_ define error

静岡ではJava Script The Good Patsの読書会をしています。興味があれば気軽に参加を。

ProductName JavaScript: The Good Parts ―「良いパーツ」によるベストプラクティス
Douglas Crockford
オライリージャパン / 1890円 ( 2008-12-22 )


22022011 javascript

恋するプログラムをJavascriptで(3-4)

3-4は継承を扱う。

ProductName 恋するプログラム―Rubyでつくる人工無脳
秋山 智俊
毎日コミュニケーションズ / ?円 ( 2005-04 )


クラスっぽく書く必要もないだろうとobject関数を作って継承させるようにした。

function object(o) {
    function F() {}
    F.prototype = o;
    return new F();
}

function Responder(name) {
  this.name = name;
  this.response = function (input) {
    return "";
  };
}

function WhatResponder(name) {
    var that = object(new Responder(name));
    that.response = function (input) {
    return input + 'ってなに？';
    };
    return that;
}

function RandomResponder(name) {
    var that = object(new Responder(name));
    that.responses = ['今日は寒いね','チョコ食べたい','昨日10円拾った'];
    that.response = function (input) {  
        return this.responses[Math.floor(Math.random() * 3)];
    };
    return that;
}
function Unmo(name) {
  this.name = name;
  this.responder = RandomResponder('Random');
  this.dialogue = function (input) {
    return this.responder.response(input);
  };
  this.responder_name = function () {
    return this.responder.name;
  };
}

var u = new Unmo('proto');
var input = "あれ";

console.log(u.dialogue(input));

クラスっぽく書きたい場合にはJavascriptパターンが参考になる。モダンな書き方ももちろん載っている。

ProductName JavaScriptパターン ―優れたアプリケーションのための作法
Stoyan Stefanov
オライリージャパン / 2940円 ( 2011-02-16 )


21022011 Ruby javascript

恋するプログラムをJavascriptで書いていくことにした

そういえば去年の最終Haskell読書会で、だれかと恋するプログラムの本の話になってYahooの日本語形態素解析API使えば出来んじゃないか？という思考に至ったので、気の向いたときにやっていくことにした。

ProductName 恋するプログラム―Rubyでつくる人工無脳
秋山 智俊
毎日コミュニケーションズ / ?円 ( 2005-04 )


3-3

function Responder(name) {
  this.name = name;
  this.response = function (input) {
    return input + "ってなに？"
  };
}

function Unmo(name) {
  this.name = name;
  this.responder = new Responder('What');
  this.dialogue = function (input) {
    return this.responder.response(input);
  };
  this.responder_name = function () {
    return this.responder.name;
  };
}

var u = new Unmo('proto');
var input = "あれ";

console.log(u.dialogue(input));

復刊リクエストも動いているようなので復刊されるといいですね。

19022011 javascript

「Javascriptパターン」を読んだ

Perl Best PracticesのJavascript版という位置づけの本かな(でも薄い)

ProductName JavaScriptパターン ―優れたアプリケーションのための作法
Stoyan Stefanov
オライリージャパン / 2940円 ( 2011-02-16 )


まえがきにもこう書いてある

この本は入門書ではありません。Javascriptの技をもう一段上に引き上げたい、そういう開発者やプログラマを想定しています。

Perl Best PracticesとかエキスパートPythonプログラミングを読んでるようなヒトが「Javascriptのお作法ってどうすればいいのかね？」となったときに役立つことが書いてあると思う。

二章にコーディングの作法が載っているでひと通り目を通すと良い感じ。

ちなみに個人的には最近読書会でJavascriptの名前空間ってどう管理すんだよ？という疑問がわいてそのままだったのだけど5章に丁寧に書いてあったのですっきりして良かった。

6章はコンストラクタと継承の話で、これだけに一章を割いている。クラスっぽく書くやり方をクラシカル、プロトタイプベースの継承をモダンって読んで両方紹介してた。

7章はいわゆるデザパタ。GoFのデザインパターンのうちの9つを紹介しているが、この章はあまり興味が持てなかったので流し読みした。

8章はブラウザでのパターンの紹介。

4,5,6章が特に面白く読めた。

JGPは良いJavascriptの文法を学ぼうという本なのに対して、本書は実用的なJavascriptを書くにはどうしたらよいかに対してヒントを与える本かな。