Articles for 3月 2013

TizenでGoogleMap、ルート検索

Date: 3月 27, 2013 Author: 千原 寛之 Comments: 4 Replies

晴れ時々Tizen調査チームの千原です。こんにちは。
Tizenパッケージビルドはなかなかうまく行かないので、Tizen2.0SDKで何か出来ないかと模索した結果、WebアプリケーションとNativeアプリケーションを作成してみることにしました。
TizenのWebアプリケーションはHTML5+JavaScriptです。NativeアプリケーションはC++になります。

HTML5であれば、Google Maps JavaScript API v3が簡単に利用できるみたいです。
また、Tizenのエミュレーターにはまだ地図アプリが入っていないので、地図アプリを作成してみました！

まず一番シンプルなProjectを作成します。
Tizen Web ProjectのBasicのBlank Applicationを選択します。
Screenshot from 2013-03-27 16:30:09

index.html、style.css、main.jsを書き換えていきます。

style.css

html { height: 100% }
body { height: 100%; margin: 0; padding: 0 }

#map_canvas { height: 100% }

index.html

<!DOCTYPE html>
<html>

<head>
<meta charset="utf-8"/>
<meta name="description" content="A Tizen Web UI FW single-page template generated by Tizen Web IDE"/>

<title>MapViewer Test</title>

<link rel="stylesheet" type="text/css" href="./css/style.css"/>

<script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?key=GOOGLE_API_KEY&sensor=true&language=ja"></script>
<script type="text/javascript" src="./js/main.js"></script>
</head>

<body onload="initialize()">
<div id="map_canvas" style="width:100%; height:100%"></div>
</body>
</html>

※GOOGLE_API_KEYは個別に取得して設定する必要があります。

main.js

var map;
var markerA;
var markerB;
var imageA;
var imageB;

var directionRenderer;
var directionService;

function route() {
	// マーカーが2つあるときにルート検索
	if (markerA && markerB) {
		var request = {
				origin: markerA.getPosition(),
				destination: markerB.getPosition(),
				travelMode: google.maps.DirectionsTravelMode.DRIVING,
				unitSystem: google.maps.DirectionsUnitSystem.METRIC,
				optimizeWaypoints: true,
				avoidHighways: false,
				avoidTolls: false
		};
		directionsService.route(request, function(response, status) {
			if (google.maps.DirectionsStatus.OK == status) {
				directionsDisplay.setMap(map);
				directionsDisplay.setDirections(response);
			}
		});
	}
}

function dragAction(event) {
	route();
}

function clickAction(event) {
	// 両方のマーカーがあるときは、マーカーとルートを初期化する
	if (markerA && markerB) {
		markerA.setMap(null);
		markerA = null;
		markerB.setMap(null);
		markerB = null;
		directionsDisplay.setMap(null);
	}

	// マーカーAがあるときはマーカーBの設定
	if (markerA && !markerB) {
		var option = {
				position: event.latLng,
				draggable: true,
				map: map,
				icon: imageB
		};
		markerB = new google.maps.Marker(option);
		//マーカードラッグイベントの登録
		google.maps.event.addListener(markerB, 'dragend', dragAction);
	}
	// マーカーAの設定
	else {
		var option = {
				position: event.latLng,
				draggable: true,
				map: map,
				icon: imageA
		};
		markerA = new google.maps.Marker(option);
		//マーカードラッグイベントの登録
		google.maps.event.addListener(markerA, 'dragend', dragAction);
	}

	// ルート検索を実施
	route();
}

function initialize() {
	// 地図の生成
	var styles = [{stylers: [{hue: "#003388"}, {saturation: -40}]},
	              {
				featureType: "road", 
				elementType: "labels",
				stylers: [{visibility: "off"}]
	              },
	              {
				featureType: "road.highway",
				elementType: "geometry",
				stylers: [{saturation: -40}]
	              }];
	var styledMap = new google.maps.StyledMapType(styles, {name: "Styled Map"});
	// 初期位置は東京駅を中心に設定
	var option = {
			center: new google.maps.LatLng(35.681111, 139.766667),
			zoom: 13,
			mapTypeId: google.maps.MapTypeId.ROADMAP,
			mapTypeControl: false,
			panControl: false,
			streetViewControl: false,
			scaleControl: true
	};
	map = new google.maps.Map(document.getElementById("map_canvas"), option);
	map.mapTypes.set('map_style', styledMap);
	map.setMapTypeId('map_style');

	// マーカーのアイコンを読み込む
	imageA = {
			url: 'WebContent/icon1.png',
			size: new google.maps.Size(32, 32),
			origin: new google.maps.Point(0, 0),
			anchor: new google.maps.Point(16, 32)
	};
	imageB = {
			url: 'WebContent/icon2.png',
			size: new google.maps.Size(32, 32),
			origin: new google.maps.Point(0, 0),
			anchor: new google.maps.Point(16, 32)
	};

	// ルート検索サービスの設定
	var polylineOption = {
			strokeColor: "#ff4422",
			strokeWeight: 5,
			strokeOpacity: 0.6
	}
	var renderOption = {
			draggable: true,
			preserveViewport: false,
			suppressMarkers: true,
			polylineOptions: polylineOption
	};
	directionsDisplay = new google.maps.DirectionsRenderer(renderOption);
	directionsService = new google.maps.DirectionsService();

	// イベントリスナー登録
	google.maps.event.addListener(map, 'click', clickAction);
}

Googleのサンプルコードを参考にして作りました。
不要なコードでエラーになっていて、ルートが表示できないところで少しハマりましたが、結構簡単に作成できました。
ルート結果から距離とか時間も取れるようなので、カスタマイズすれば実用レベルのものになりそうです！
地図のスタイルはデフォルトから変更して、青系に変えてあります。（Tizenのイメージカラーが青なので）
マーカーのアイコンも変更してあります。（猫が好きなので・・・）

Screenshot from 2013-03-27 16:13:53

ルートが蛇行しているのは、寄り道ポイントを設定しているからで、ルート検索がバグっている訳ではありません(・ω・)

Share

Firefox OS ビルド

Date: 3月 22, 2013 Author: 石原 繁彦 Comments: Leave a reply

こんにちは。アスカ・クリエイション　石原繁彦です。

今回は最近、巷を賑わせているFirefox OSのビルドに挑戦したいと思います。

オフィシャルな開発者向けのドキュメントはMDN(Mozilla Developer Network)のページにまとまっていますので、これを参考にやってみようと思います。

https://developer.mozilla.org/ja/docs/Mozilla/Boot_to_Gecko/B2G_build_prerequisites

まずは、開発環境を確認します。

サポートされているターゲットデバイスは以下の物のようです。

  • Unagi（開発用スマホ）      - Firefox OSの開発者の多くが使用
  • Otoro（開発者用スマホ）   - Firefox OSの開発者の多くが使用
  • Panda Board
  • エミュレータ(x86/ARM)
  • デスクトップ(PC上でのアプリ実行環境)
  • Samsung Nexus S          - 大抵の機能が動作
  • Samsung Nexus S 4G    - 大抵の機能が動作
  • Samsung Galaxy S2       – あまり活発に開発されてない
  • Samsung Galaxy Nexus – あまり活発に開発されてない

まずは第一段階としてARMエミュレータをビルドしてみようと思います。

ビルド環境はLinuxの場合、以下が推奨されています。また、Mac OS Xでもビルドできる様です。Windowsはサポートされていません。

  • Ubuntu 12.04 64bit版
  • 4GB RAM
  • 20GB以上のHDD空き容量

今回はUbuntu 12.04 64bitで作業します。

必要なツール群をインストールします。

$ sudo apt-get install autoconf2.13 bison bzip2 ccache curl flex gawk gcc g++ g++-multilib git ia32-libs lib32ncurses5-dev lib32z1-dev libgl1-mesa-dev libx11-dev make

 

オフィシャルなドキュメントによれば場合によって以下のシンボリックリンクを作成するとなっていますが、私の環境では以前にAndroidをビルドできる環境にしたためか、すでにシンボリックリンクがありましたので、今回はこの手順を省いて進んでみました。

$ sudo ln -s /usr/lib/i386-linux-gnu/libX11.so.6 /usr/lib/i386-linux-gnu/libX11.so
$ sudo ln -s /usr/lib/i386-linux-gnu/mesa/libGL.so.1 /usr/lib/i386-linux-gnu/libGL.so

 

ソースを取得します。

$ git clone git://github.com/mozilla-b2g/B2G.git
$ cd B2G

 

ビルド構成を設定します。今回はARMのエミュレータをビルドするのでemulatorを指定します。なお、引数を指定しなければサポートされるデバイスの一覧が表示されます。

$ ./config.sh 
Usage: ./config.sh (device name)

Valid devices to configure are:
- galaxy-s2
- galaxy-nexus
- nexus-s
- nexus-s-4g
- otoro
- unagi
- inari
- keon
- pandaboard
- emulator
- emulator-x86
$ ./config.sh emulator

 

オフィシャルのドキュメントには書いてありませんでしたが、inariやkeonといったデバイスもサポートしているようです。

ここでソースが取得されます。かなり時間がかかりますので、しばらく待ちます。

ソースの取得が完了したら、ビルドします。なお、-jオプションで並列ビルド可能です。

$ ./build.sh -j4

 

無事ビルドが終わったらエミュレータを起動してみます。

$ ./run-emulator.sh

Screenshot_from_2013-03-22 19:13:03

Screenshot_from_2013-03-22 19:15:25

思ったよりすんなりいきました。数ヶ月前に行ったときはビルドが通りませんでしたが、開発が進んでいるようです。

今回はここまでにします。次回はPanda Boardで動かすことに挑戦しようと思います。

Share

「Android Bazaar and Conference 2013 Spring」へ出展してきました!

Date: 3月 18, 2013 Author: 大関 敦 Comments: Leave a reply

こんにちは。アスカ・クリエイション　大関敦です。

先日の3/15,16に開催された「Android Bazaar and Conference 2013 Spring」へ出展してきました!

場所は明星大学の日野キャンパスです。

たくさんの方々にブースへ来て頂き、おかげさまで大盛況(?)となりました。

ご来場頂いた皆様、大変有り難う御座いました!!

当日のブース風景をご紹介します。

DSC_0115

2013-03-15_11-26-30_156

ブースの全体風景です。

2013-03-15_11-26-57_757

2013-03-15_11-27-10_205

3台のカメラをAndroidへ繋いだ多眼カメラ on Android。

SAMSUNG

取材もあり、後日放映されるみたいです!!

他にも

・画像認識によるコンテンツ表示アプリ(AR)

・6軸センサー(角速度x,y,zと重力加速度x,y,z)によるヘッドスピード計測アプリ

など展示しました!!

ただ、いい写真が無く今回はご紹介はできていませんが。。。

 

次回は「スマートフォンアプリEXPO2013」への出展を予定しています。

今回展示したものをブラッシュアップして展示予定です!!

6軸センサー?多眼カメラ?って何だろうと思った方は是非ご来場ください。

Share