先日投稿した記事LimeJS Helloworldその2に引き続きLimeJSのHelloworld3です。次のような画像を読み込ませてアニメーションさせるDEMOを作ります。
※スマートフォンでも動きます。

実装方法はActionScript3で言えば、GraphicsクラスのbeginBitmapFillメソッドと似ています。

//Imageクラスをインポートします
goog.require('lime.fill.Image');
 
var imgURL = "hoge.jpg";
//画像のURLをImageクラスのコンストラクタに渡すだけ
var imgfill = new lime.fill.Image(imgURL);
 
//今回はSpriteインスタンスに画像を表示させます。
var sp = new lime.Sprite();
//ActionScript3のbeginBitmapFillメソッド的な所
sp.setFill(imgfill);

全体のソースはこちら

goog.provide('helloworld3');

goog.require('lime.Director');
goog.require('lime.Scene');
goog.require('lime.Layer');
goog.require('lime.fill.Image');
goog.require('lime.Sprite');
goog.require('lime.animation.Sequence');
goog.require('lime.animation.Spawn');
goog.require('lime.animation.FadeTo');
goog.require('lime.animation.MoveTo');
goog.require('lime.animation.ScaleTo');
goog.require('lime.animation.Easing');

helloworld3.start = function() {

	var director = new lime.Director(document.body, 1024, 768);
	var scene = new lime.Scene();

	//画像読み込み
	var imgfill = new lime.fill.Image('http://www.google.co.jp/logos/2012/steno12-hp.jpg');

	var animation = function()
	{
		//レイヤーを作成
		var layer = new lime.Layer().setPosition(512, 384);

		//Spriteを作成
		var sp = new lime.Sprite().setSize(280, 53).setFill(imgfill);

		//AS3で言うaddChild
		scene.appendChild(layer);
		layer.appendChild(sp);

		//各アニメーションを作成
		var setScale = new lime.animation.ScaleTo(Math.random()+0.3).addTarget(sp).setDuration(0);
		var alpha0 = new lime.animation.FadeTo(0).addTarget(sp).setDuration(0);
		var setAlpha = new lime.animation.FadeTo(Math.random()+0.3).addTarget(sp).setDuration(0.3);
		var alpha1 = new lime.animation.FadeTo(1).addTarget(sp).setDuration(0.6);
		var afterAnim = new lime.animation.FadeTo(0).addTarget(sp).setDuration(0.6);

		var xx = Math.random()*1024;
		var yy = Math.random()*384 + 384;

		//レイヤーの座標を設定する
		layer.setPosition(xx,yy);

		//座標計算
		var dX = 100;
		var tarX = xx + Math.random()*dX - dX*0.5;
		var tarY = -100;

		//移動するアニメーションを作成
		var moveAnim = new lime.animation.MoveTo(tarX,tarY).addTarget(sp).setDuration(1.2).setEasing(lime.animation.Easing.EASEIN);

		//シーケンス実行するアニメーションのインスタンスを作成
		var alphaAnimAnim = new lime.animation.Sequence(
			alpha0,
			setAlpha
      	);

      	//アニメーションをパラレル実行させる
      	layer.runAction(new lime.animation.Spawn(
	       alphaAnimAnim,
	       setScale,
	       moveAnim
      	));

      	//アニメーションが終了したら生成したインスタンスを削除（コレしないとめちゃ動作が重くなる)
      	setTimeout(function(){
			layer.removeAllChildren();
			scene.removeChild(layer);
		},1200);
	}
	//アニメーション開始
	var id = setInterval(animation,100);

	//シーンの更新
	director.replaceScene(scene);
}
goog.exportSymbol('helloworld3.start', helloworld3.start);

実際に動かす場合は、ビルド作業が必要です。以下の記事内の「5.ビルドする」が参考になると思います。
[訂正]LimeJS Hello World

イマイチ分からない部分

• 画像が読み込み完了の通知
• AS3で言う、StageAlign的なこと・・TOP_LEFTにしたい
• AS3で言う、StageScaleMode的なこと・・NO_SCALEに設定したい

ある程度わかってきたら、

LimeJSは、ActionScriptと書き方が似ていて、とっつきやすいです。
僕はFlashDeveloperなので、ASとの書き方と比べながらHelloworld2をやっていきます。
※ソース内のコメントに僕の今理解している範囲の解説を記述しています。

0.プロジェクト作成

ターミナル(Windowsの場合コマンドプロンプト)を起動して、以下のPythonコマンドを叩きます。

python bin/lime.py create helloworld2

プロジェクトの作成については、以下の記事を参考に。
LimeJS Hello World | reinit_creative log

1.クラスのインポート

//ネームスペース→自動的に生成されるので多分必要
goog.provide('helloworld2');
 
//使用するクラスをインポートする
goog.require('lime.Director');
goog.require('lime.Scene');
goog.require('lime.Layer');
goog.require('lime.Circle');
goog.require('lime.Label');
goog.require('lime.animation.Sequence');
goog.require('lime.animation.Spawn');
goog.require('lime.animation.FadeTo');
goog.require('lime.animation.ScaleTo');
goog.require('lime.animation.MoveTo');
goog.require('lime.animation.RotateTo');

ちなみに、クラスを追加、削除した場合は、updateする必要があります。
以下のPythonコードを叩きます。

python bin/lime.py update

2.HTMLへのアタッチ

以下の例だとbodyタグにアタッチさせます。

var director = new lime.Director(document.body,1024,512)

3.表示オブジェクトを作成

//AS3の多分ステージ的なものを作成(LimeJSには別途Spriteというクラスが存在する)
scene = new lime.Scene(),
//AS3でいう多分Sprite的なものを作成
var layer = new lime.Layer()
	.setPosition(512,256)
//円を作成 ※AS3でいうGraphics的なものを作成
var circle = new lime.Circle()
	.setSize(150,150)
	.setFill(255,150,0);
//AS3でいう、多分TextFieldを作成
var tf = new lime.Label()
	.setSize(160,50)
	.setFontSize(36)
	.setText('CLICK!');

4.AS3で言うところのaddChildする

layer.appendChild(circle);
circle.appendChild(tf);
scene.appendChild(layer);

5.インタラクションを追加する

AS3的な所のaddEventListenerを追加します。

goog.events.listen(circle,['click','touchstart'],function(e){
	//クリックされたときの処理を記述する
});

6.アニメーションをさせる

layerに対して、アニメーションを実行します。
lime.animation.Spawnクラスを使うと、引数のアニメーションをパラレル実行します。

layer.runAction(new lime.animation.Spawn(
    new lime.animation.FadeTo(.5).setDuration(1.2),
    new lime.animation.ScaleTo(4.5).setDuration(1.2),
    new lime.animation.RotateTo(720).setDuration(1.2)
));

lime.animation.Sequenceクラスを使うと、引数のアニメーションを順番に実行します。

layer.runAction(new lime.animation.Sequence(
    new lime.animation.FadeTo(.5).setDuration(1.2),
    new lime.animation.ScaleTo(4.5).setDuration(1.2),
    new lime.animation.RotateTo(720).setDuration(1.2)
));

7.最後に全体ソース

【helloworld2.js】(コンパイル前のJavaScript)

//ネームスペース
goog.provide('helloworld2');

//使用するクラスをインポートする
goog.require('lime.Director');
goog.require('lime.Scene');
goog.require('lime.Layer');
goog.require('lime.Circle');
goog.require('lime.Label');
goog.require('lime.animation.Sequence');
goog.require('lime.animation.Spawn');
goog.require('lime.animation.FadeTo');
goog.require('lime.animation.ScaleTo');
goog.require('lime.animation.MoveTo');
goog.require('lime.animation.RotateTo');

//ここから実装内容
helloworld2.start = function(){
	//htmlへのアタッチ部分
	var director = new lime.Director(document.body,1024,512),
		//AS3のステージ的なものを作成
		scene = new lime.Scene(),
		//AS3でいうコンテナ的なものを作成
		layer = new lime.Layer()
			.setPosition(512,256),
		//円を作成
		circle = new lime.Circle()
			.setSize(150,150)
			.setFill(255,150,0),
		//AS3でいう、TextField
		tf = new lime.Label()
			.setSize(160,50)
			.setFontSize(30).setText('TOUCH ME!');

    //コンテナに円をAS3でいうaddChildをする
    layer.appendChild(circle);
	circle.appendChild(tf);
    scene.appendChild(layer);

	//マウスインタラクションを追加する
	goog.events.listen(circle,['click','clickStart'],function(e){
	    layer.runAction(new lime.animation.Spawn(
	        new lime.animation.FadeTo(.5).setDuration(1.2),
	        new lime.animation.ScaleTo(4.5).setDuration(1.2),
	        new lime.animation.RotateTo(720).setDuration(1.2)
	    ));
	});
	//シーンを有効化する
	director.replaceScene(scene);
}
//このソースが何を意味するか、今の僕にはよくわかんないよ。(とりあえず自動生成されているので、残す)
goog.exportSymbol('helloworld2.start', helloworld2.start);

8.次にしたいこと

・画像を表示したりしたい、そして、いろいろしたい
・インタラクションの種類をもっと知る
・ページ遷移の機能とかあるのか？
・リサイズした時の処理とかあるのか？
・ローディング処理
・アニメーションにイージング処理はあるのか
・一旦サイトを作ってみよう
・プロセッシング的な表現ができるか？
・パフォーマンスはどこまでいけるのか？
などなど

1.ダウンロード

↓↓こちらからダウンロード。
LimeJS HTML5 Game Framework
ダウンロード先が二種類あるけど「Download as ZIP package」ではなく、「Download from GitHub」を選択します。

ターミナルを起動して、limejsファイルをダウンロードする場所に移動します。
※以下のコマンドを叩くと、デスクトップに移動します。

cd /Users/各Macのユーザーネーム/Desktop

以下のコマンドを叩くと、LimeJSがダウンロードされます。
※gitがインストールされている必要があります。

git clone git://github.com/digitalfruit/limejs.git

2.インストール

ターミナルで、ダウンロードしたLimeJSのディレクトリに移動します。
※デスクトップにダウンロードした場合は、以下のコマンドでlimejsに移動します。

cd /Users/各Macのユーザーネーム/Desktop/limejs

以下のPythonのコマンドを叩きます。
※Pythonのインストールは省きます。(Macは、最初からインストールされています)

python bin/lime.py init

するとこんな感じでインストールが始まります。

3.プロジェクト作成

helloworldというプロジェクトを作成します。
この作業もターミナルで行います。以下のコマンドを叩くと、limejs/helloworld内に自動的に必要最低限使用するファイルが生成されます。

python bin/lime.py create helloworld

4.HelloWorldする

以下のファイルをブラウザで実行するとサンプルが実行されます。
※ローカルサーバーは起動させる必要はありません。

limejs/helloworld/helloworld.html

5.ビルドする

以下のコマンドを叩くと、プロジェクト内で使用しているJSを一つのファイル(下記の例だとcompile.js)にまとめてくれます。

python bin/lime.py build helloworld -o helloworld/bin/compile.js 

下記のように任意のhtmlにcompile.jsのパスを通したら終了です。

<!DOCTYPE HTML>
<html>
<head>
	<title>helloworld</title>
	<script type="text/javascript" src="compile.js"></script>
</head>
<body onload="helloworld.start()"></body>
</html>

DEMO

最後に各ソフトのバージョン

・Mac OS X 10.6.8
・Python 2.6.1
・git 1.7.7.3

余談

Windows環境でも試しました。
WindowsもMacのやり方とほぼ同じやり方で行けました。
※コマンドラインからgitコマンドでLimeJSをダウンロードするとうまく行けました。

セットアップまでにターミナルとPythonを使用しないといけなくて、jQueryとかアニメーション系ライブラリに比べるとちょっと壁が高い。

1.ダウンロード

↓↓こちらからダウンロード。
LimeJS HTML5 Game Framework
ダウンロード先が二種類あるけど「Download as ZIP package」を選択。

2.インストール

ターミナル(winの場合はコマンドプロント)を立ち上げて、
cdコマンドで、先程ダウンロードしたLimeJSのディレクトリに移動します。

以下のPythonのコマンドを叩きます。
※Pythonのインストールは省きます。(Macは、最初からインストールされています)

python bin/lime.py init

するとこんな感じでインストールが始まります。

3.プロジェクト作成

helloworldというプロジェクトを作成します。
この作業もターミナルで行います。以下のコマンドを叩くと、自動的に必要最低限使用するファイルが生成されます。

python bin/lime.py create helloworld

4.HelloWorldする

ローカルサーバーを起動します。
helloworld/helloworld.htmlをブラウザで開くと以下のようなサンプルが表示されます。
※これはただの画像です。サンプルでは、オレンジのボールをドラッグできます。

5.リリースビルドする

LimeJSは、Googleのclosureライブラリを使用しており、closureライブラリの機能で、複数のJSを1つのJSファイルに圧縮してくれます。
現在、僕がそのやり方が分からないので、このブログではここまで。

※ブログを書いている今現在(0:10頃)、落ちてます。
Twitterのクジラ君を久々に拝見しました。

facebookは安定

Twitterのダウンに加え、mixiも不安定でmixiではつぶやけません。
それに引き換え、facebookは僕の環境では全く落ちずに、安定稼動しています。
僕は、『あけおめコミュニケーション』を友達、知り合いと交わすことが出来ました。

このような状況なので、Twitterと、facebookの同接数がとても気になります。

来年は？

これはインターネット上の情報や憶測でしかないが、日付が変わった瞬間に日本人の多くが「あけましておめでとう！」や「あけおめ」、「ことよろ」など、新年のあいさつを書き込みしたため、Twitterサーバーに負荷がかかったのではないかといわれている。

ケータイで「あけましておめでとう」をする人が多いとケータイ回線がパンクする可能性があるため、ケータイメールで「あけましておめでとう」をするのはやめようという声が広まっている。もしかすると、Twitterでも自粛したほうがいいかもしれない？

引用：年明けすぐにTwitterが落ちる / 多くの人たちが「あけましておめでとう」をつぶやきすぎた？ – ロケットニュース24（β）

ケータイメール、Twitterで年始の挨拶を元旦0時に発信するユーザーは、ほぼ若者なので、↑↑このように声をかけあっても、効果は薄いと思います。

そうなると、分散させる何かを作るか、インフラを強化するかになるかなと。2013年は、今年より、確実にケータイユーザーとソーシャル人口が増えていると思うので、その辺の対応には注目していきたいです。
これは、元旦の「あけおめ」に限らず、バルスのようなイベントにも出てくる問題かと思います。

Webサービスは使いやすさが一番ではありますが、「落ちない」という要素もユーザーの心を掴み続けるファクターのように思いました。

2012年も無事明けました

何はともあれ、無事2012年を迎えることが出来ました。
本年も本ブログをよろしくお願いいたします。

※僕の環境では、0:55頃Twitterは復活していました。

2011年も、もう数日で終わります。2011年はいかがでしたでしょうか。
僕のこの1年を振り返って見ます。

1月

前職FORMES Inc. 退社

2月

嫁が全Flasherを敵に回す↓↓詳しくはコチラ↓↓
ActionScriptを知らない嫁が世のFlasherにドン引きした件について

3月

サイバーエージェント入社↓↓詳しくはコチラ↓↓
[社会復帰]初出社してきました。
東北地方太平洋沖地震

4月

PiggFighterプロジェクト始動

嫁が被災地のために動いていた。↓↓詳しくはコチラ↓↓
嫁が知らぬ間に日本のために節電シールとポスターを作って成果を出していた。

5月

29歳になりました。(昭和57年生まれです。)
29歳になりました。

6月

PiggFighterのセミナーをさせて頂きました。↓↓詳しくはコチラ↓↓
Web Designingセミナー「Kinect Hack with Flash」ありがとうございました。ピグファイターのロンチしてきました。

7月

結婚式を地元広島で挙げ、ギリシャ、イタリアに新婚旅行へ行きました。
結婚式DONE＋新婚旅行

アメーバ締め会で課金部門MVPを頂きました。↓その時に頂いたトロフィー

8月

おばかアプリ選手権出場 WindowsAzure賞受賞

9月

人生初執筆した本(共著)
フィジカルコンピューティングを「仕事」にする

10月

dotFes2011京都出展
dotFes2011京都にピグファイターを出展してきました

11月

ちょい遅めの夏休みにマレーシア旅行に嫁と行って来ました。

12月

サイバーエージェント2013年度新卒採用サイトロンチ↓↓詳しくはコチラ↓↓
CyberAgentでWebサイトを作った感想

総括

転職、結婚、旅行とバタバタした一年でしたが、とても充実していた気がします。
前職で働いていた頃に比べると、公私ともに健康的に過ごせました。
来年の目標は、また別記事で書いていく予定(絶賛書き途中)です。
このブログの来年の目標はざっくりとは決まってて、「もっと、ユーザーのためになることを書く」です。
現状、完全に日記化していて、僕も含め、身近な人達は楽しいかもしれませんが、もっといろんな人に求められるようなことをメインに書いていきたいという思いはずっとあります。

このブログも3年目に入っています。読み返してみると、今では当たり前にわかっていることを技術的なこと書いていたなーっと。でも、探究心を持って、楽しんでいたことが伺えます。そういう、好奇心が最近薄れているのをすこしばかり感じているので、その辺は改善していくべきポイントだと思っています。

以上を踏まえた今年の目標設定をセットアップして、気持よく来年を迎えたいです。

→Pia-no-jaC←とは

2005年4月結成。
HAYATO(Piano)、HIRO(Cajon)の二人で構成されるインストゥルメンタルユニット。名前の由来は左から読むとピアノ、右から読むとカホンとなる。「ピアノとカホンの二つの楽器でライブ空間をジャックする」という意味が込められている。
鍵盤と打楽器だけという非常にシンプルな構成ながらも、力強くて激しいピアノの旋律、独特な存在感をもつカホンの音色。一見全く異なった二つの楽器が見事にマッチした演奏は、エネルギッシュかつシャープでありながらオリエンタルな匂い、「和」のテイストが散りばめられている。 まさに「ハイブリッド・インストゥルメンタル」と表現されるにふさわしい。

とピアノジャックの公式サイトで紹介されています。
ちなみにカホンというのは、以下のような楽器です。

数年前にヴィレッジヴァンガードのCDコーナーで見かけて視聴して気になって、Youtubeで聞いてハマりました。
今まで何回かライブに行くチャンスはあったんですが、タイミングが悪く行けませんでした。ちゃんとしたライブは初めてでした。

彼らの特徴は、主にクラシック音楽をアレンジした、激しいピアノとカホンの演奏スタイルです。

↓↓こんな感じの演奏↓↓(ベートーベン 交響曲 第9番 ニ短調 作品125 「合唱」 第4楽章のアレンジ)

一番熱かった所

今回のライブで一番熱かった部分は、風の憧憬から始まり、ビッグブリッヂの死闘〜妖星乱舞〜片翼の天使のコンボが半端無く格好良かった。

静かにクロノ・トリガー世界に入って、ビッグブリッヂでのギルガメッシュとの攻防で源氏の盾を盗みつつ、三闘神後のケフカに、皆伝の証と源氏の小手とドリルを装備して、アルテマウェポン二刀流乱れ打ちを心の中でしていました。

生で聞かないと分からない部分ですが、HAYATOのピアノ音洪水と、カホンの響きが織り成すハーモニーは、ただこの空間に浸っていたいという気にさせてくれます。

クロノ・トリガー 風の憧憬

FINAL FANTASY「ビッグブリッヂの死闘〜妖星乱舞〜片翼の天使」

まとめ

ピアノのHAYATOは、本当にすごい。
鍵盤まったく見ずに指がすごいスピードで動いているのが、単純な感想で申し訳ないけど、すごい。
世の中に発信していく身として、こういう自分にしかできないものがあるっていうのは、本当にうらやましいな、と思うとともに、こういう自分らしさがわかる技を探していかないといけないなと思いました。

余談

ピアノジャックを聞いてて、クライスラーカンパニーを思い出しました。

葉加瀬太郎が若い。

前職でFlashを使ったキャンペーンサイトをいろいろ作ってきたので、CyberAgentで2013年新卒向けのサイトを作る人を戊種していたので手を挙げてやってみました。

ちなみに、このサイトは、企画、デザイン、HTMLコーディング、Flashオーサリング、バックエンドのシステムは、弊社の中で全て完結しています。
※音楽と写真は、外部の方にお願いさせて頂きました。

今まで2~5人くらいの小さな会社でしかサイトを作ったことがなかった僕が、総勢2000人を超える大きな会社で制作した感想について書いていこうと思います。

スムーズな情報のやり取りと意思の団結

CyberAgentには先にも書きましたが、デザイナー・Flashデベロッパー・コーダー・サーバーエンジニアが揃っているので、一つのサイトを、外部に頼まずに進められることができます。
また、社内だけで進められるため、以下のメリットがあります。

• スムーズな打ち合わせ(皆社内にいるため、タイミングの融通も効く)
  →これが一番大きい。
• 上司へも確認がしやすい、また相談もし易い
• プロジェクトメンバーとのコミュニケーションが取りやすい
  →皆の意識を統一しやすい
• 社風から、皆意見を言いやすい環境。(特に上下関係を気にすることなく、一つの目的に対して自分の意見を言う環境)

とても開発しやすい環境だったと思います。

以前は、デザイナーとFlashデベロッパーしかいない事務所だったので、特に密なコミュニケーションが必要なサーバーエンジニアは、外注でした。電話のやり取りや、メールのやり取り、打ち合わせするのも、無駄に時間を労することもあったように思えます。
エンジニアが近くにいたら、こんなに楽なのか！！っていうことを実感しました。F田くんお疲れ様！

素直なイイヤツが多い

いつもはアメーバピグの制作に関わっているのですが、このプロジェクトは違って今まで関わったことがない人たちと一緒に制作しました。

ピグのメンバーは、皆優秀で良い環境にいるということを一緒に働いていて感じていましたが、今回のプロジェクトを通して、皆素直でイイヤツばかりだなっと思いました。よくこんなに、イイヤツラがいるなとレベルの高い人事力を感じました。

制作する上で相談がしやすい

このプロジェクトに関わらずですが、Flashでスクリプトを書いている中、技術的に行き詰ってしまうことがあります。Google検索したり、本を読んで解決していきますが、どうしても分からなかったときに、同じFlashデベロッパーが身近にいるっていうのが、とても安心できます。しかも、同僚のFlashデベロッパーは、ほぼ皆広告系のプロダクションで精神と時の部屋を過ごした民なので頼もしいです。

以前は、一人でなんとかしないとイカン！！っていう状況なので、根性がつく分には良いのですが、長く続かず体壊してました。

僕が参加した理由

社内で完結するとはいえ、通常業務がある上でのプロジェクトなので、人員の調整はやはり苦労しています。しかし、それでも、良い人材を採用したいので、良いものをアウトプットしたいから、社内で協力、調整してメンバーが集まったのかなと思います。

僕がなぜ参加したかというと、CyberAgentのクリエイティブをもっとレベルアップさせたいからです。
そのためには、クリエイティブに関わる人間が、クリエイティブな活動うぃ盛り上げる必要があります。

まずは、社内を巻き込むクリエイティブの活動を増やしたいと思っています。
今、1pixelというフロントクリエイティブに関わる人間が、交代でブログを書いています。

こういうクリエイティブを盛り上げる活動は増やしていくべきだと思っています。(運営の方々お疲れ様です)

こういう活動を増やしていくためには、デザインプロダクションや、広告系に流れていくデザイン系の若き人材をもっと増やす必要があります。(もちろんその人材を育てる、中途デザイナーの採用もしっかりやらねばならないのですが)

まとめ

CyberAgentは、平均年齢が30歳弱ですと若い人ばかりです。
僕はCyberAgentに入って半年くらい経ちますが、その中で思ったことがあります。
若さの力はすごいということです。僕が新卒で入社した前々職の40代後半だらけの環境とは打って変わって勢いもモチベーションも違います。グイグイです。

とても元気があふれています。

「元気があれば何でもできる」

という猪木さんの言葉にもありますが、僕はそのとおりだと思っています。優秀な若い奴らがたくさん入ってきてくれることを願っています。

CyberAgent Recruit 2013
http://www.cyberagent.co.jp/recruit/canvas/
※PC、スマホどちらも見れます。

11月4,7,8日と遅めの夏休みを頂いて、マレーシアに旅行に行きました。
僕にとっては、アジア海外旅行は初めてです。
マレーシアの理由としては、現地に3年ほど住む嫁の友人に会う為です(観光も含め)。

11/4 0:30に羽田国際空港からシンガポールのチャンギ空港へ発ちました。
夜便の良いところは、寝て起きたら到着しているからです。

2時間シンガポール観光

シンガポールからマレーシアのペナン国際空港への便は6時間ほど乗継に時間が余っていたので、シンガポールの無料観光バスツアーに参加しました。
シンガポールは、鋭意開拓中で、高いビルがバンバン立ち中でした。

シンガポールの印象は、唐突に違うテイストの建物が立ち並んでいるというイメージです。
また、建物の色味が日本では見たことがない、ビビットなものが多い印象が強いです。
チャンギ空港は、無料で使えるインターネットサービスがあるので、現地ツイート使用と思ったのはよいのですが、日本語が打てないので要注意です。

着ペナン島

大きな地図で見る

バスツアーを終え、2時間のフライトでマレーシアのペナン島へ。
着くといきなりのスコール。

雷がゴロゴロゴロとなっていました。

嫁の友人と合流し、QueensBayのジャスコでに行き、買い物をしました。
そこで、デザイン的にありえない光景を目にしました。

デザイン的な配色が新鮮過ぎる

もし、マレーシアに限らず海外でWebサービス展開する時は、現地でウケるデザインを熟知しないといけないのだなということを学びました。

また、QueensBayで友人夫婦オススメの中華料理を食べました。
担々麺と小籠包がとても美味しかったです。食事に対する壁は無いことを認識しました。

家でかい

友人家で4日間お世話になったのですが、家に上がらせてもらってまず、家の広さにびっくりしました。
30階弱のマンションの13階で、20畳位あるリビング＋6~8畳くらいの部屋が6部屋くらいあって、東京1Kレベルの値段らしいという・・・。
※写真はありません。

そんな感じのカルチャーショックで初日を終えました。

※以下、引用させて頂いております。

【『ピグファイター』メイキングセミナー　開催概要】

http://school.dhw.co.jp/e/pig/

日時：2011年10月26日（水）19：30～21：00　※開場　19：00～
会場：デジタルハリウッド東京本校 1Fセミナールーム
　　　　JR/御茶ノ水駅 御茶ノ水橋口・丸ノ内線/御茶ノ水駅・
　　　　千代田線/新御茶ノ水駅から徒歩2分。
　　　　地図はこちら→ http://school.dhw.co.jp/about/access.html
定員：50名
参加費：無料

【申込方法】
下記ページよりお申込ください。

http://school.dhw.co.jp/e/pig/

【講師】
・サイバーエージェント　PiggFighter制作チーム
　社内のデザイナー・プログラマー・サウンドエンジニア達によるユニット。
　新しいデバイスやＵＩを使った実験的な作品を制作している。
　共著書：「フィジカルコンピューティングを「仕事」にする」

・茶谷 亮裕氏
　本科デジタルコミュニケーションアーティスト専攻（全日1年制）在学中

【PiggFighter（ピグファイター）とは】
KinectとFlashを活用して、アメーバピグと連動させた体験型対戦格闘ゲーム。
プレイヤー自身のジェスチャーでピグアバターを操作することで、全身で格闘ゲームを楽しむことができます。

必殺技ピグファイヤーや超必殺技ピグゲイザーを駆使して戦おう！

http://www.facebook.com/piggfighter