ABLOG

untitled

ケウ — Mon, 30 Aug 2010 10:37:59 +0000

ちくちく。

白楽ベーグル

ケウ — Wed, 04 Aug 2010 03:35:15 +0000

eimekuでオススメしてもらった白楽ベーグル。

ベーグルもしっとりもっちりしてて美味しいし、お店の雰囲気も素敵でした。

eimeku

ケウ — Mon, 02 Aug 2010 04:46:47 +0000

東横線白楽駅西口をおりてすぐの雑貨屋eimeku。

オリジナルの革小物やヨーロッパで買い付けてきたアンティークな腕時計やカレンダーが魅力的です。

四月に新しく二階もオープンして、さらに素敵なお店になりました。

Google Maps V3

ケウ — Wed, 23 Jun 2010 04:38:06 +0000

今さらかもしれないけど新しくなったGoogle Mapsをちょっといじってみました。

と言っても前のバージョンも深く触ったことがないので比べることもできません。

APIキーが不要になった

以前までドメイン毎に必要だったAPIキーが不要になりました。上記のjsを読むだけの簡単な仕様。引数のsensorはデバイスのロケーションサービスを使う場合にはtrueを、使わない場合はfalseに設定。

スタイルを変える

地図上のアイテムそれぞれに異なったスタイルを設定することが出来るようになりました。単純に見た目を変えられるってことですね。上の地図がそうです。今まではどのサイトのどのページでも同じカラーリングの地図でしたが、サイトのテイストに併せて変更することが可能になりました。

var stylez = [
	{
		featureType: "all",
		elementType: "all",
		stylers: [
			{ visibility: "on" },
			{ hue: "#003366" },
			{ lightness: -10 },
			{ saturation: -30 },
			{ gamma: 0.8 }
		]
	}
];

var mapStyleType =  new google.maps.StyledMapType( stylez, {map:ID名, name:""});
map.mapTypes.set('なまえ', mapStyleType);
map.setMapTypeId('なまえ');

各プロパティの内容はこんな感じです。

featureType
地図上のアイテム。道路とかランドマークとか公園とか。
MapTypeStyleFeatureType
elementType
地図全体か地形かラベルか。
MapTypeStyleElementType
visibility
そもそも表示するかしないか。onかoff。
hue
色相。#つきの16進数指定。
lightness
明度。デフォルトは0。-100〜100。
saturation
彩度。デフォルトは0。-100〜100。
gamma
コントラスト。デフォルトは1。0〜10。0に近づくほどきつく、10に近づくほどゆるくコントラストが効きます。

パラメータをいじりながら見た目を確認できるこのデモが便利です。
色々いじった後にShow JSONボタンをクリックすると生成されたコードが表示されます。

マーカーのアイコンを変える

あまり前のバージョンと変わってないような気がします。

var image = new google.maps.MarkerImage(
	'http://blog.abakane.com/wp-content/themes/ab/images/marker_01.png',
	new google.maps.Size(65, 87),
	new google.maps.Point(0,0),
	new google.maps.Point(33, 82)
);

var shadow = new google.maps.MarkerImage(
	'http://blog.abakane.com/wp-content/themes/ab/images/marker_02.png',
	new google.maps.Size(74, 56),
	new google.maps.Point(0,0),
	new google.maps.Point(12, 45)
);

var shape = {
	coord: [0, 0, 65, 0, 65, 65, 0 ,65],
	type: 'poly'
};

var marker = new google.maps.Marker({
	position : ロケーション,
	map : map,
	shadow : shadow,
	icon : image,
	shape : shape,
	title : "ロールオーバー時に表示されるチップス",
	zIndex : 0
});

imageがマーカーアイコン、shadowがマーカーの影、shapeがマーカーをクリックする時のヒットエリアです。shapeのcoordの指定は[x0, y0, x1, y1, x2, y2, ... ]みたいな感じです。htmlで画像内にリンクを貼る時と同じ要領ですね。

png画像を指定すれば透過されますが、対応してないブラウザでは当然表示されないものと思われます。

new google.maps.MarkerImage()

引数1
画像のURL。
引数2
表示するアイコンのサイズ。
引数3
使用画像の左上座標。通常(0, 0)。
引数4
使用画像のアンカー座標（マーカーの先っぽ）。

実際のコード

//html側




//js側
var image = new google.maps.MarkerImage(
	'http://blog.abakane.com/wp-content/themes/ab/images/marker_01.png',
	new google.maps.Size(65, 87),
	new google.maps.Point(0,0),
	new google.maps.Point(33, 82)
);
var shadow = new google.maps.MarkerImage(
	'http://blog.abakane.com/wp-content/themes/ab/images/marker_02.png',
	new google.maps.Size(74, 56),
	new google.maps.Point(0,0),
	new google.maps.Point(12, 45)
);

var shape = {
	coord: [0, 0, 65, 0, 65, 65, 0 ,65],
	type: 'poly'
};
var stylez = [
	{
		featureType: "all",
		elementType: "all",
		stylers: [
			{ visibility: "on" },
			{ hue: "#003366" },
			{ lightness: -10 },
			{ saturation: -30 },
			{ gamma: 0.8 }
		]
	}
];

function testMap( _lat, _lng){
	var initialLocation = new google.maps.LatLng( _lat, _lng);
	var infoWindow = new google.maps.InfoWindow();
	var myOptions = {
		zoom : 14,
		center : initialLocation,
		disableDefaultUI: true,
		mapTypeId: google.maps.MapTypeId.ROADMAP
	};
	var map = new google.maps.Map(document.getElementById("mapTest"), myOptions);
	google.maps.event.addListener( map, 'click', function(){
		infoWindow.close();
	});

	var marker = new google.maps.Marker({
		position : initialLocation,
		map : map,
		shadow : shadow,
		icon : image,
		shape : shape,
		title : "",
		zIndex : 0
	});

	google.maps.event.addListener( marker, 'click', function(){
		infoWindow.setContent( '内容がないよう' );
		infoWindow.open( map, marker);
	});

  var mapStyleType =  new google.maps.StyledMapType( stylez, {map: map, name:""});

  map.mapTypes.set('ablog', mapStyleType);
  map.setMapTypeId('ablog');
}

表示するナビゲーションの種類や位置なんかも細かく指定出来るみたいです。共通の認識として形成されたスタイルを安易に変更することでユーザに負担を強いることがないように気をつけて使いたいです。

Google Maps JavaScript API V3
リファレンス
 デモギャラリー

World Cup Icon Generator for Twitter

ケウ — Mon, 14 Jun 2010 04:55:18 +0000

開幕戦を観ててテンション上がっちゃったので勢いだけで作っちゃいました。

シャツとかパンツとか髪形とか肌色とか選んでSAVEボタンを押すとプレビューの画像が保存されます。国名クリックでユニフォーム一式をセット出来たりもします。Twitterのプロフィール画像に設定した時にアンチエイリアスが出ない48*48pxの大きさのpng画像です。

アイコンの変更はTwitterの設定画面からどうぞ。

青と赤のユニフォームが多いのが常なのですが、今回は思ったよりも青色が少ないです。代わりに緑が多い。一応ホームのユニフォームを選んだつもりですが、パンツとかソックスとか本番とは仕様が違うかもしれないのでご了承下さい。

ほんとはカラーピッカーとか付けて自由に色を変えられたりしたかったんですけど、テンションの持続具合が気になったので軽い感じで仕上げてみました。
アイコンの大きさが微妙で1px基準だと小さいし、2px基準にすると高さが足りなくなるんですよねぇ。なのでちょっとずんぐりしたドット絵になってしまいましたが、ワールドカップ期間中だけでもアイコンを変えてみてはいかがでしょうか。

フィギュア

ケウ — Sat, 15 May 2010 09:11:18 +0000

集めてる時は楽しいんだけど、その後どうしたらいいか困るんですよねぇ…

DIGAWEL annex

ケウ — Tue, 04 May 2010 09:06:40 +0000

二号店なのか別館なのかDIGAWELの新しいお店が出来てました。

毎日通勤で通ってる道にいつの間にかオープンしていたのですが、全く気付かなかった。。開いてる時間に通ってないのと目立たない外観のせいです。きっと。

店内は以前のより広くて、置いてある服のラインも若干違っているようです。

場所は住宅街のこの辺です。

キツツキ

ケウ — Mon, 03 May 2010 08:49:20 +0000

エントリーの仕方を忘れるくらい更新をサボっていた。。

桜吹雪

ケウ — Mon, 12 Apr 2010 10:31:36 +0000

散ってしまいました。

桜

ケウ — Thu, 01 Apr 2010 04:03:05 +0000

毎年この時期思うことですが、桜を撮るのって難しいですね。

今週末までもつのかなぁ。

スペイン-オランダ

ケウ — Tue, 30 Mar 2010 07:32:26 +0000

帰ってきてもう一週間経ってしまいましたが、写真をFlickrにアップしました。

行程はざっと、
成田空港 – シャルル・ド・ゴール空港(パリ) – エル・プラット空港(バルセロナ) – カサ・バトリョ – カサ・ミラ – サグラダ・ファミリア – グエル公園 – カテドラル – ピカソ美術館 – グエル邸 – エル・プラット空港 – スキポール空港(アムステルダム) – 国立美術館 – ゴッホ美術館 – ディック・ブルーナ・ハウス – セントラール美術館 – ノールデルマルクト – スキポール空港 – 成田空港、
って感じです。

いろんなところに行きました。飛行機が疲れました。

Flickr

初海外

ケウ — Wed, 24 Mar 2010 11:59:54 +0000

新婚旅行で一週間ほどバルセロナとアムステルダムに行ってました。

色々あり過ぎて楽しかったです。日常生活に戻るためリハビリ中。

まんまるこの日

ケウ — Tue, 09 Mar 2010 13:01:06 +0000

abarayamさんのまんまるこ達に再び会ってきました。

高円寺のca*n*ow Roomで3/22まで（火・水・木はお休み）やってます。

大槻香奈 – すべてになるそのまえに

ケウ — Sat, 06 Mar 2010 10:00:28 +0000

外苑前から歩いてちょっとのところにあるneutron tokyoで展示中。

少女の表情の下にはどんな感情が隠れているのか。そんな事を思って眺めてたらあっという間に時間が流れてました。少女以外の絵もいくつかあって、世界観の広がりを感じます。「仙人掌」に吸い込まれました。

3/14(日)までやってます。ギャラリーも素敵な雰囲気でおすすめです。

わが家に犬が

ケウ — Tue, 02 Mar 2010 05:01:48 +0000

わりとおとなしめで手がかからなそうです。

男前かつ愛嬌のある顔立ちとむっちむちした身体がたまりません。

FlashでiPhoneアプリ作りました

ケウ — Fri, 26 Feb 2010 07:47:39 +0000

拙作iPhoneアプリ「KulerClock」がApp Storeに並んでます。

「Kuler」というWebサービスから色を引っ張ってきてグラフィカルに表示するだけの習作レベルのものでごめんなさい。

KulerClock for iPhone

さらに本当は今申請してるマイナーアップデートが通ってからと思ったのですが、時間がかかってしまっているのでもういいやと…。
このアプリはAdobe Flash CS5の新機能であるPackager for iPhone®で作られています。3Gでもそれほどストレスなく動くと思います。3GSならさくさく動いてるはず。

アプリでは二本指タップでテーマが変更されますが、右のはダブルクリックで変更されるようになってます。あとメールボタンは該当テーマへのリンクに変更してあります。iPhoneデバイス固有の機能部分をCS4で変更しただけで基本的にはアプリと同じものです。
クリックしたりダブルクリックしたり上下に引っ張ったりしてみてください。

本来ならXcodeを使ってObjective-Cでしか作れなかったiPhone向けアプリですが、幅広いユーザを抱えるFlashというプラットフォームでの開発が出来るようになります。Macのみだった開発環境がWindowsでも行えるというメリットもありますね。今回作ったアプリをちょこっと手直ししたものが普通にWebで動きます。その逆もまた然り、と考えるとすごい。

と、この革命的なPackager for iPhone®機能ですが

とにかく処理が重い
ファイルサイズがでかい
UIKitのパーツが使えない
使える機能に制限がある

など、、不満な点も多々あるのですが、まだベータ段階ですし！
何よりもFlashで作ったものがiPhoneで動くというメリットの方が大きいに決まってます。また多少無理なことがあっても、Flasherは文字通り変態的な人たちが多いのでたくましく自力でなんとかしてくだろう、なんてことも思ったりします。

以下、思ったこと

ライブラリは重い(多分)

普段はアニメーションにTweenerを使ってますが、重くて使えないだろうと思った（試してない）ので自前の簡易ライブラリを使いました。とにかく処理を軽くすることを念頭において余計な機能を省きました。汎用的ではないですし、改善の余地がまだまだあります。

SharedObjectは普通に使える

読み込んだカラーテーマのデータや時計の表示/非表示をアプリ終了時にSharedObjectに保存しています。

import flash.desktop.NativeApplication;
private var so:SharedObject;

//起動時
public function KulerClock(){
  NativeApplication.nativeApplication.addEventListener( Event.EXITING, onExit);//
  so = SharedObject.getLocal("com.abakane.KulerClock");
}

//終了時
private function onExit( e:Event ):void{
	NativeApplication.nativeApplication.removeEventListener( Event.EXITING, onExit);//
	so.data['colorAry'] = colorAry;
	so.data['clockVisible'] = clockVisible;
	so.data['version'] = VERSION;
	so.flush();
}

終了時にちゃんとremoveEventListenerしないとonExitが複数回実行されてしまう可能性があるみたいです。環境次第かもしれませんが、自分はこれでハマりました。

メールとかブラウザとか

これもnavigateToURLとURLRequestの組み合わせが普通に使えます。

import flash.net.URLRequest;
var str:String = "mailto:?subject=Adobe%20Kuler&body="
navigateToURL( new URLRequest(str) );

TouchEventとMouseEvent

MouseEventが普通に使えるのでTouchEventは使いませんでしたが、違いを把握してません。。

マルチタッチ

カラーテーマの変更に二本指タッチを採用してみました。（目新しさで）
すでに一本タッチしてる状態で二本目をタップするとトリガーされるみたいです。ゆっくりやっても動作します。

import flash.ui.MultitouchInputMode;
import flash.events.GestureEvent;

Multitouch.inputMode = MultitouchInputMode.GESTURE;
addEventListener( GestureEvent.GESTURE_TWO_FINGER_TAP, onTwoFingerTap);

キャッシュ機能

挙動とか効果とかまだ計りきれてません。使い方次第で軽くなることは間違いないんですが、エッジがジャギってしまうので画像を用意したほうがいい場合もあるかも。
今回のアプリではアンチエイリアスがかかるデザインをしてないので、キャッシュしまくって問題がないのはラッキーでした。

cacheAsBitmapMatrix = new Matrix();
cacheAsBitmap = true;

ほとんど普段使っているAS3をそのまま使えたのが感動でした。Event、MouseEvent、URLLoader、Date、XML、意識しなくてもどれも同じように扱えるなんて…夢のようです。iPhone上でボール転がしてるだけで感動してる自分がいました。

そして作ってみて思ったのはSimple Metronomeすごい！って事。すでにFlash製のiPhoneアプリは30個弱出てるらしいですが3Gで見てスムーズに動くもの自体があまりないです。それを一つのアプリとしてちゃんと機能させていながら、しかも日本第一号で実現してるのはやっぱりすごいなぁと。

Flasherでまだの人は急いでiPhone Developer Programに登録したほうがいいですよ！
ちなみにipaを吐き出したらその先は従来のアプリと同じ流れです。正直めんどくさい！

たい焼き

ケウ — Thu, 25 Feb 2010 10:15:06 +0000

麻布十番は浪花家総本店のたい焼き。

一匹ずつ焼く天然もの。皮が薄くてしっぽの先まであんこがたっぷり。

クリストとジャンヌ=クロード展

ケウ — Mon, 22 Feb 2010 11:23:45 +0000

21_21 DESIGN SIGHTで行われているジャンヌとクリストのクロード夫妻の展示。

パリのポン・ヌフやベルリンのライヒスタークを包んだり、ニューヨークのセントラルパークに7500基もの色鮮やかなゲートを設置したりするアートプロジェクトで有名なクロード夫妻。

プロジェクトに必要な莫大なお金を公的機関や企業に頼ることなく、全て自費でまかなっているという事に尊敬と共感を覚えます。実際の展示は今まで行ってきたプロジェクトの説明や写真パネルの他に、クリストが構想を練る際に生み出した作品など。美しいものを観たいとか人々をびっくりさせたいとかシンプルで強いベクトルを持った思いでつくられたものだからこそこんなに惹きつけられるんだと思います。人として突き抜けてるなぁと。

21_21 DESIGN SIGHTのディレクター三宅一生さんとの長年の友情関係から実現した展覧会だそうですが、緻密な計算で作られた巨大な布のひだを見ていたらPLEATS PLEASEが頭に浮かびました

Flash Lite 1.1で気をつける事

ケウ — Fri, 19 Feb 2010 05:52:25 +0000

モバイル向けのプラットフォームであるFlash Lite。その中でも初期のバージョンで、わりと古めの機種にも対応しているFlash Lite 1.1での制作で気をつけることのメモ。

以前待ち受け画面を作った時に試したバージョンなんだけど、いろいろ忘れている事が多かったので最初は身体が慣れるのに苦労した。

基本的にはActionScript1.0、Flash Player4と同等で、それプラス携帯電話固有の情報をfscommandで扱えたりする。
以下に列挙。

Functionの概念がない

代替として、フレームスクリプトを書いてラベルを貼り

call("FrameLabel");

でスクリプトを呼び出す。引数は渡せない。

Arrayの概念がない

代替として、文字列とeval()を使って

a0 = "ichi";
a1 = "ni";
a2 = "san";
for(i=0; i<3; i++){
	trace( eval("a" add i) );
}
// 出力 ichi, ni, san

保持・呼び出しする。

MovieClipの生成。

for(i=0; i<9; i++){
	newName = "mc" add i*9;
	duplicateMovieClip( "tempMC", newName, i);
	eval(newname)._x = i*10;
}

thisとかreturnとかvarとかない

_rootと_parentはある。それぞれ/:と../:でも代替できる。

tellTarget(){}内での_parentの扱い

a = 0;
tellTarget("mc"){
	_x  = _parent.a;
}

みたいな場合、mcから見た階層になるので同タイムラインに記述しても_parentが必要になる。

変数名の大文字と小文字は区別しない

a = 0;
A = 1;
trace(a);

AS2、AS3なら当然のように0が出力されるけど、AS1だと、aとAを同じ変数とみなすので値が上書きされて1が出力されます。普段あまり意識しないで使ってると意外とハマる。

文字列の連結は+じゃなくてadd

比較は==じゃなくてeq、!=じゃなくてne。

Numberのキャストはint()で

a = "02";
trace( Number(a))
// 出力 = 02

trace( int(a))
// 出力 = 2

(a | 0) は使えない

Math.floor()を代わりに使う。

substring( str, 0, i) と substring( str, 1, i) の返る値が同じ

これしばらく悩み続けました。

str = "abcdefg";
trace( substring( str, 0, 3) );
// 出力 = abc

trace( substring( str, 1, 3) );
// 出力 = abc

trace( substring( str, 2, 3) );
// 出力 = bcd

どう考えてもおかしいんですがそういうことみたい。

仕事と私事

ケウ — Fri, 05 Feb 2010 03:48:51 +0000

携帯用のFlashゲームを作ることになったので、確認用の実機を引っ張り出してきた。

PC用のFlashよりもかなり低いバージョンでつくらなければいけないので、かなり勝手が違う。以前プライベートでInfobar2用の待ち受け画面をつくった経験がこんな時に役に立ってる。自分の場合そういうことがすごく多い。