‘作ってみた’ カテゴリーのアーカイブ

ジオポ – 位置情報の短縮URLサービス

2009/02/20 作ってみた 4 件のコメント »

20090219_geopo

昨日の夜、全然眠れなくていろんなことがアイデアとして浮かんできたんだけど、とりあえず、そのうちの一つを今日がんばって作ってみた。

ジオポ

http://geopo.at
Geolocation Pointer略してジオポ。

Twitterで「ココにいるよ！」などといった位置情報が送りたいときに、ジオポを使えばtwitterの140文字制限を気にすることなく、少ない文字数で位置情報を添付できて、地図を確認してもらえるよ。

使い方は簡単（今はメンドクサイ）、ジオポのトップページから緯度と経度を入力してジオポURLを作るだけ！（そんなのメンドクサイから、Twitterクライアント作ってる方に実装してもらえるように努力しますヨ。）
上部に作成されたジオポURLをTwitterなどにコピペすればokだよ。

で、これ使って何か利点あるの？

(続きを読む…)

WordPressのテーマをBlueprint CSSで作る

2009/02/18 作ってみた コメントはまだありません »

WordPressのテーマをいじるのなんて３年ぶりぐらいなので、当時購入したリファレンス本と今のデフォルトテーマにあるテーマ実装を見比べながらテーマ作りをしてました。

昔は条件分け、繰り返しの記述ばかりで、テンプレートがカオスになりがちだったけど、テンプレート関数が充実してきてかなり楽になってる印象。

例えば、スレッド形式にできたり複雑化していたコメントも、

<?php wp_list_comments();?>

だけで表示され、後はスタイルシートで味付けするだけでお手軽ですね。

(続きを読む…)

名刺作ってみた 2回目

2009/01/26 作ってみた コメントはまだありません »

20090126

以前に作った名刺が150枚くらい余ってるんですけど、住所と電話番号もろもろが変わったので新しく作りました。

名刺デザインをいろいろブラウズしてて、定規のついた名刺があったのでそいつをインスパイアしてみました（25000分の1縮尺での実距離がでるようにアレンジ）。

今回は作りすぎないように100枚分発注。すぐになくなるようにアグレッシブな活動をしていきたい。ぜひ、もらってください！

（さっきの記事につけたし）
BBコミュニケーターは有料で電話番号も選べるので 905（クレコ）の下四桁を選んでみました。

crecoのロゴをつくってみた

2009/01/09 作ってみた 3 件のコメント »

20090109  

そろそろ自宅から名古屋へ拠点が移るので、crecoのサイトを本格的につくろうと思ったのです。

そこで、ビジュアル的にコーポレートロゴもあったほうがよいと思い、ロゴつくりに勤しんでいたのですが、シンプルに伝えなきゃいけないロゴだけに、考えなきゃいけないことが沢山ありますね。正直なめてました。

20090109_2

上のアイデア変遷を見てもらえればわかるんですが、最初はコーポレートカラーでcrecoの『c』を形象化してたんだけど、いまいちパッとしないねー。

そのうち、地図とかで使うPOI（Point of Interest）を表すのに使われるマーカーが浮かんできて、自然な形のロゴっぽくみせていくために、形状の大きさを試行錯誤して、数時間後に最終案の完成に至りました。

ロゴひとつでも大変＞＜

イーモバイルのサービスエリアをGoogle Earthに重ねてみる

2008/08/11 作ってみた コメントはまだありません »

20080811  

携帯電話のサービスエリアって繋がるのが当然になってあまり気にしなくなっていたんだけど、イーモバイルはサービスエリアが都市部に限定されてるから、否が応でも気にしないと大変なことになる。

それで、イーモバイルのサイトにはEM モバイルブロードバンドサービスエリアとしてサービス提供地域が確認できるようになってるんだけど、Googleマップみたいにドラッグでスクロールできるわけでもなく、いまいちな使い勝手。
他にはPDFでもダウンロードできるようになってて、印刷するには丁度いいんだけど、サイト上で見られる提供地域よりも古い情報（２００８年５月）となってるし、解像度がいまいち。

上の画像はサイトのPNG画像とPDFを比較してみた図。

そこで、サイトのPNG画像を取得してGoogle Earthにオーバーレイできればよくない？いいんじゃね！

ということで作ってみる。

イーモバイルの画像ファイルについての考察１

まず、重ね合わせる元となるPNG画像を取ってこないといけないんだけど、ファイル名の命名規則を調べて、効率的に取ってこないと駄目だよね。

イーモバイルサイトで表示サービスエリアの移動操作はJavaScriptを使ってるので、そのソースを見て、なんとなく動作を理解する。

どうやら、緯度・経度がファイル名に対応しているらしい。第一段階はこんな具合。

http://emobile.jp/area/area/map1/5236/5236.png
map1：ズーム（横幅）。map1は横幅160km。
5236：前の２桁が緯度の軸、後ろの２桁が経度の軸。んで、後から色々試してわかったんだけど、前の２桁は2/3でかけると緯度となり、後ろの２桁は100を足すと経度となる。
加えて画像ファイルの表示範囲は上下左右位置の画像ファイルと半分重なるようになっている。

画像が提供されないエリアについては、下のソースみたくJavaScriptでフラグが管理されてあるのでそれを読み取ってエクセルにマッピングしてみた。

    var inflag;
    inflag = 1;
    if (Mesh_1_XX <= 21) {
        inflag = 1;
    }
    else if (Mesh_1_XX <= 25) {
        if (Mesh_1_YY >= 36 && Mesh_1_YY <= 38) {
            inflag = 0;
        };
    }
    else if (Mesh_1_XX <= 27) {
        if (Mesh_1_YY >= 36 && Mesh_1_YY <= 40) {
            inflag = 0;
（以下省略）

20080811_2

これで、第一段階のKMLはPHPで生成して完成。

<?php

print '<?xml version="1.0" encoding="UTF-8"?>'."n";
print '<kml xmlns="http://earth.google.com/kml/2.2">'."n";
print '<Document>'."n";
print '	<name>emobile</name>'."n";

for($i=36;$i<=68;$i++){
	for($j=22;$j<=45;$j++){

		$inflag = 1;

		if ($j <= 21) {
			$inflag = 1;
		}elseif ($j <= 25) {
			if ($i >= 36 && $i <= 38) {
				$inflag = 0;
			};
		}elseif ($j <= 27) {
			if ($i >= 36 && $i <= 40) {
				$inflag = 0;
			};
		}elseif ($j <= 29) {
			if ($i >= 39 && $i <= 52) {
				$inflag = 0;
			};
		}elseif ($j <= 30) {
			if ($i >= 42 && $i <= 52) {
				$inflag = 0;
			};
		}elseif ($j <= 31) {
			if ($i >= 45 && $i <= 52) {
				$inflag = 0;
			};
		}elseif ($j <= 35) {
			if ($i >= 49 && $i <= 54) {
				$inflag = 0;
			};
		}elseif ($j <= 38) {
			if ($i >= 49 && $i <= 57) {
				$inflag = 0;
			};
		}elseif ($j <= 39) {
			if ($i >= 49 && $i <= 64) {
				$inflag = 0;
			};
		}elseif ($j <= 41) {
			if ($i >= 52 && $i <= 68) {
				$inflag = 0;
			};
		}elseif ($j <= 42) {
			if ($i >= 58 && $i <= 68) {
				$inflag = 0;
			};
		}elseif ($j <= 43) {
			if ($i >= 62 && $i <= 67) {
				$inflag = 0;
			};
		}elseif ($j <= 45) {
			if ($i >= 64 && $i <= 66) {
				$inflag = 0;
			};
		};

		if($inflag){
			continue;
		}

		print '	<GroundOverlay>'."n";
		print '		<name>emobile</name>'."n";
		print '		<Icon>'."n";
		print '			<href>http://emobile.jp/area/area/map1/'.$i.$j.'/'.$i.$j.'.png</href>'."n";
		print '		</Icon>'."n";
		print '		<LatLonBox>'."n";
		print '			<north>'.(($i+2)/3*2).'</north>'."n";
		print '			<south>'.($i/3*2).'</south>'."n";
		print '			<east>'.($j+2+100).'</east>'."n";
		print '			<west>'.($j+100).'</west>'."n";
		print '		</LatLonBox>'."n";
		print '	</GroundOverlay>'."n";
	}
}

print '</Document>'."n";
print '</kml>'."n";

?>

イーモバイルの画像ファイルについての考察２

第一段階では解像度になっとくできないので、第二段階（横幅40km）を取ってくることにする。

http://emobile.jp/area/area/map2/5236/52364D.png

52364D：前の４桁については第一段階と同じ、後ろの２文字は第一段階のエリアを１６分割した場所を示す。

上を北にした地図表現だと次のような場所。

3C 3D 4C 4D
3A 3B 4A 4B
1C 1D 2C 2D
1A 1B 2A 2B

これさえわかれば、あとは同じなので、KMLにしてGoogle Earthで表示してみる。

死亡。

オーバーレイの画像をインターネットから取得して読み込んでいき、沖縄から九州まで時間をかけながら徐々に埋まっていくんだけど、福岡が見えないうちに動作が重たくなって、しまいにはGoogle Earthが落ちた。

よく考えれば、4000枚ものPNG画像をダウンロードしながら表示させるなんて無理ありすぎです。ごめんなさい。

それならば画像を合成してやればok

何度も画像をダウンロードしてるようだとイーモバイルに怒られるので、一旦ローカルに保存してから、それをPHPで１６枚を１枚の画像に合成。

あとは第一段階のKMLを修正（重ね合わせの範囲が違うので）して、ようやくやりたいことができた！

20080811_3

発展としては、サービス提供エリアを画像認識でトレース→ベクトルデータに変換→SWFに。

イーモバイルだけじゃなく他の３キャリアのサービス提供エリアも同じことをする（調べたところ、全キャリアで画像によるサービスエリア表示をしていたので可能）。

全キャリアの重ね合わせをトグルできるようにして、キャリアごとにサービスエリアを比較できるようになっちゃう！！！

需要あるのかわかんないけど、勉強がてら近いうちにやってみたい。

« 前ページへ
次ページへ »