環境

Mac OSX Lion 10.7.2
node.js 0.6.4

※バージョンによって、方法が異なるようなので注意してください。

*nodejs.org/dist*

http://nodejs.org/dist/

手順

wgetで、node-latest.tar.gz(最新版)をダウンロード

sudo wget http://nodejs.org/dist/node-latest.tar.gz

tarファイルを展開

$ sudo tar zxvf node-latest.tar.gz

展開ディレクトリに移動

$ cd node-v0.6.7

$ sudo ./configure
$ sudo make
$ sudo make install

これで、node.jsのインストールは完了です！

確認

$ node -v
$ > 0.6.7

nodeのバージョンが確認できれば、インストールに成功しています。

Hello, World!

適当なディレクトリに、以下のコードを書きます。

hellonodejs.js

var sys = require('sys');
var http = require('http');

var server = http.createServer (
        function (request, response) {
                response.writeHead(200, {'Content-type': 'text/plain'});
                response.write('Hello World!\n');
                response.end();
        }
).listen(8124);

sys.log('Server running at http://127.0.0.1:8124/');

以下のコマンドを入力し、nodeを起動します。

node hellonodejs.js

ブラウザから、「http://127.0.0.1:8124/」にアクセスすると、

「Hello, World!」が表示されました。

Sassとは？

Sass は CSS を生成するためのメタ言語。CSS の記述力ではメンテナンス性が損なわれますが、Sass を使うと構造化して記述することができる。

Sassのメリット

• CSSよりもシンプルな記法で、CSSを構造化して表現できる
• CSSとは異なり、書き手による構文のゆれが発生しない
• CSSには存在しない強力な機能（「定数」や「Mixins」など）をうまく使うことで、CSSのメンテナンス性が大幅に向上する
• Ruby on RailsやMerbといったRuby製のフレームワークとの連携が容易
• CSSの出力形式を柔軟に選択できる

Sassをインストールする

Sass – Syntactically Awesome Stylesheet

http://sass-lang.com/download.html

こちらのサイトを参考に、OSXにインストールしてみました。

環境: Max OSX 10.7.2
※環境ごとに挙動が違うようなので、別環境の場合は公式サイトを参考ください。

ターミナルを起動し、以下のコマンドを入力します。

sudo gem install haml

hamlをインストールし、

sudo gem install sass

sassをインストールします

cd sasshoge
vim hoge.scss

sass用ディレクリ（例:hogesass）に移動し、.scssファイルを作成します。

hoge.scss

link
  :color #0080DD
.link:hover
  :color blue

例だと、半角スペース2文字でインデントを表現し、
コロンを属性の前に記述します。

sass --watch hogesass

このディレクトリにある、.sassファイルが更新されると、
自動的に、.cssがジェネレートされます。

hoge.css

link { color: #0080DD; }
.link:hover { color: blue; }

以下の環境に、wgetをインストールした時の備忘録です。

環境

OS: Lion 10.7.2
wget: 1.13.4

※バージョンによってやり方が違うようなので、要注意。

手順

ターミナルを起動します。

1. wget格納用のディレクトリを作成

$ sudo mkdir /usr/local/src

2. 作成したディレクトリに移動

$ cd /usr/local/src

3. wgetソースを取得

$ sudo curl -O http://ftp.gnu.org/pub/gnu/wget/wget-1.13.4.tar.gz

4. tarを展開、ディレクトリを移動

$ sudo tar zxvf wget-1.13.4.tar.gz
$ cd wget-1.13

ファイル取得に成功すると、tarファイルがダウンロードされるため、
tarコマンドで展開して、ディレクトリを移動します。

5. インストール

$sudo ./configure --with-ssl=openssl

※新しいwgetバージョンから、opensslで接続しないといけないため、
　（ –with-ssl=openssl）をオプション指定しないと、
　”configure: error: –with-ssl was given, but GNUTLS is not available.”
　エラーが出るので注意。

$ sudo make
$ sudo make install

これで、wgetのインストールが完了しました。

1. evalとは?

eval: 文字列を式として評価する関数、または複数の文をプログラム中のあるコンテキストで実行するサブルーチン

JavaScriptパターン
のevalを使わない手法を学習中です。

2. JavaScriptパターン

静的プロパティにアクセスするパターン

// Anti Patern
var property = "test";
alert(eval("obj." + property));

// Good Patern
var property = "test";
alert(obj[property]);

3. evalの危険性

eval()のセキュリティ問題。
不正な、コードが実行される危険。
Bad) AjaxリクエストからJSONレスポンスをevalで処理
Good) ブラウザの組み込みメソッドを使用して、JSONのレスポンスを構文解析

• JSON.parse (新JavaScript例文辞典)
• JQuery.parseJSON・・・JSON.parseがサポートされていないブラウザを使用する場合

setInterval(), setTimeOut(), Function()コンストラクタ

文字列を、setInterval(), setTimeOut(), Function()コンストラクタに渡すのは、eval()にほぼ等しいので危険。

// Anti Patern
setTimeOut("myFunc()", 1000);
setTimeOut("myFunc(1, 2, 3)", 1000);

// Good Patren
setTimeOut(myFunc, 1000);
setTimeOut(function() {
     myFunc(1, 2, 3);
}, 1000);

どうしてもeval()を使用する必要がある時、new Functionコンストラクタを検討。
その関数のローカルなスコープで実行されるため、自動的にグローバルになることがない。

最近、JSLintなど、
ストリクトなJavaScriptコードが求められてきたので、
JavaScriptのデザインパターンを２冊ほど。

JavaScriptパターン

JavaScriptパターン ―優れたアプリケーションのための作法
Stoyan Stefanov：著　豊福　剛：訳

目次

1. はじめに
2. 必須パターン
3. リテラルとコンストラクタ
4. 関数
5. オブジェクト作成のパターン
6. コード再利用パターン
7. デザインパターン
8. DOMとブラウザのパターン

他の言語とは違う、JavaScript独特の癖が理解できる書籍でした。

JavaScript The Good Parts

JavaScript: The Good Parts のDouglas Crockford氏の動画
さらに極めたい、JSLintのGood Partsオプションをクリアしたい時。

JavaScript: The Good Parts ―「良いパーツ」によるベストプラクティス

目次

1章 良いパーツ
2章 文法
3章 オブジェクト
4章 関数
5章 継承
6章 配列
7章 正規表現
8章 メソッド
9章 スタイル
10章 美しい機能たち
付録A ひどいパーツ
付録B 悪いパーツ
付録C JSLint
付録D 鉄道ダイアグラム
付録E JSON
索引

顧客が熱狂するネット靴店　ザッポス伝説―アマゾンを震撼させたサービスはいかに生まれたか

- スティーブ・ジョブズと比肩される新世代のカリスマ経営者の成功物語。最速8時間のスピード配送、長時間の電話対応…マニュアルなしのサービスの数々。圧倒的クチコミを生む秘密。まず、社員を幸せにする―類い稀な商才を持つ若者が、一度は巨万の富を手に入れながら、再び私財と情熱を注ぎ込み、苦難の末にビジネスと人生の目的を発見するまでの軌跡を描く。

会社と個との関係を考えさせられる一冊。
洋題の”Delivering Happiness”の方が伝わりますね。日本で”ハピネス”という響きだと、気恥ずかしくなるのでプローモション戦略だと思いますが、しかし、映画の邦題など、随分と安直なタイトルを付けるものですね。

大別すると、泥臭い起業の試行錯誤のヒストリーと、成長過程、会社のフレームワークの３部構成(Profits / Passion /Purpose)。ビジネスの教本として、かなり良い一冊に巡り合ったと思います。

個人的には「ポーカー経営学」の項目が興味深く、自分も、アカウンティングの勉強のために、ポートフォリオ投資などしてますが、皆、何かに経営モデルをシミュレーションしているものだと感じました。
不確定要素に対して、自己体験をベースに解を求め、ブレないルールを確定する事、それが確立した時、信念に成り得るのだなと改めて納得しました。

通常の起業本が、フレームワーク、ノウハウに重きを置いているのに比べ、価値観の共有や企業文化の重要性にフォーカスしているのも、本書の特徴です。まずサイトを立ち上げ、顧客のオーダーから、リアル店舗に買い付けにいって発送し、これは行ける、という確信を持ってから突き進む、大企業からの買収劇など、起業の泥臭い真髄が描かれています。

ハピネス・ムーブメントが、会社という仕組みの箱からどう価値を生み出すか、その可能性について考えさせられる一冊です。私が愛読している経営書籍の著者、本田直之さんも、お薦め図書になります。

DELIVERING Happiness

http://www.deliveringhappiness.com/

Zappos.com CEO – Tony Hshei氏のTwitter @zappos

http://twitter.com/#!/ZAPPOS

サンプルURL

Apple資料

Safari Web Content Guide – Handling Events

• onTouchStart
• onTouchMove
• onTouchEnd
• onTouchCancel

※onClickのようなイベントの使い方。iPhoneでは、onClickよりレスポンスが良いらしい。

タッチ数の取得

• event.touches.length

タッチ座標（x, y）の取得

• event.touches[i].pageX
• event.touches[i].pageY

※iで、各タッチの座標を格納。

2006.04.12のIEの更新プログラムをインストールすると、
Flashを1回クリックしないと操作できなくなる問題について、Adobeの解決策。

1. Adobe資料

アクティブコンテンツデベロッパーセンター – ADOBE DEVELOPER CONNECTION

http://www.adobe.com/jp/devnet/activecontent

ブラウザの更新に備えたアクティブコンテンツ使用Webサイトの準備

http://www.adobe.com/jp/devnet/activecontent/articles/devletter.html

2.Adobe Active Contents Developer Centerより引用

HTMLファイル内部に記述された<object>、<embed>、または<apple>tタグを使用してコーディングされたアクティブコンテンツを表示する前に、ユーザにクリックを促すメッセージが表示されます。ただし、複雑なFlash検出スクリプトを使用したサイトなど、外部スクリプトファイル（JavaScriptなど）によって生成されたタグを使用するHTMLページは、変化なく正常な動作を続けます。

• 外部JavaScriptソリューション1：埋め込みコンテンツが1つまたは数個の場合
• 外部JavaScriptソリューション2：複数の埋め込みコンテンツがある場合

AC_RunActiveContent.js：

AC_RunActiveContent.jsのダウンロード
外部JavaScriptソリューション2：複数の埋め込みコンテンツがある場合で、FlashおよびShockwaveコンテンツの回避策に使用するファイル。

利用方法

• 1. AC_FL_RunContent.jsをアップして、読み込む。
• 2. AC_FL_RunContent()にパラメーターを記述して呼び出す。
• 3. noscript部分に、JavaScript OFF時の代替手段を記述する。代替Gifでも可能。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Untitled Document</title>
<script src="Scripts/AC_RunActiveContent.js" type="text/javascript"></script>
</head>

<body>
<script type="text/javascript">
AC_FL_RunContent( 'codebase','http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=7,0,19,0','width','100','height','22','src','button1','quality','high','pluginspage','http://www.macromedia.com/go/getflashplayer','movie','button1' ); //end AC code
</script><noscript><object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=7,0,19,0" width="100" height="22">
  <param name="movie" value="button1.swf" />
  <param name="quality" value="high" />
  <embed src="button1.swf" quality="high" pluginspage="http://www.macromedia.com/go/getflashplayer" type="application/x-shockwave-flash" width="100" height="22"></embed>
</object></noscript>
</body>
</html>

【更新】東北地方太平洋沖地震の義捐金等受付先まとめ – LifeHacker
http://www.lifehacker.jp/2011/03/post_1701.html

LiveWallpaperSample) Super Mario Android Live Wallpaper

「ライブウォールペーパー(LiveWallpaper)」
ホームスクリーンの背景に設定するアニメーションする壁紙。
Android SDK 2.1以降の機能。
ライブウォールペーパーを設定方法は、画面を長押ししてメニューから、「壁紙」「ライブ壁紙」を選択し、ライブウォールペーパー名を選択。

LiveWallpaperで使用するクラス

WallpaperService Serviceを継承。LiveWallpaperはサービスとして実行。
WallpaperService.Engine 壁紙の描画を行うエンジン。
PreferenceActivity 壁紙設定画面（オプション）

WallpaperServiceのコールバックメソッド

onCreateEngine() エンジンを作成して返す必要がある

WallpaperService.Engineのコールバックメソッド

onCreate() エンジンが生成された際に呼び出される
onDestroy() エンジンが破棄される際に呼び出される
onSurfaceCreated() Surfaceが生成された際に呼び出される
onSurfaceChanged() Surfaceが変更された際に呼び出される
onSurfaceDestroyed() Surfaceが破棄された際に呼び出される
onDesiredSizeChanged() 壁紙サイズ変更時に呼び出される
onOffsetChanged() 壁紙位置変更時に呼び出される
onVisibilityChanged() 可視・不可視変更時に呼び出される
onTouchEvent() タッチイベントを受け取れる

試してみたサンプル

Splitchinロゴ が、ホームスクリーンで動くようになりました。