2012-09-24

Geo Location APIで、現在位置を取得する

スマホを持って、Googleマップで現在位置を取得できるのは、かなり一般的になりました。Androidだと、Javaでandroid.locationパッケージを利用してもできますが、今回は、PCでwebブラウザから取得できるように、JavaScript書いてみたいと思います。

以下がソースです。

・geolocation.html

・geolocation.js

・geolocation.css

※今回の実機確認は、Androidのwebviewで行っていますが、そのActivityのソースは、今回は掲載を見送ります。

次は、JQueryを使用した画像タッチスクロールについて

書いてみたいと思います。

その前に、自PCに、SVN構築しないとな。どんどんソースが書きかわってしまう…。

// geolocation.html

<!DOCTYPE html>

<html>

<head>

<title>geolocation API</title>

</head>

</body>

</html>

// geolocation.js

var map;

var infowindow = new google.maps.InfoWindow();

// 初期化。bodyのonloadでinit()を指定することで呼び出してます

function init() {

// Google Mapで利用する初期設定用の変数

var latlng = new google.maps.LatLng(39, 138);

var opts = {

// 起動時のズーム設定。これぐらいが、一般的なアプリでよく見る。

zoom : 18,

mapTypeId : google.maps.MapTypeId.ROADMAP,

center : latlng

};

// getElementById("map")の"map"は、body内の<div id="map">より

map = new google.maps.Map(document.getElementById("map"), opts);

// W3C Geolocationを使う

if (navigator.geolocation) {

navigator.geolocation.getCurrentPosition(handleGeolocation, handleNoGeolocation);

} else {

alert("W3C Geolocationがありません");

}

// getCurrentPositionで行われる処理を記述

function handleGeolocation(position) {

// 位置情報を取得

var latlng = new google.maps.LatLng(position.coords.latitude, position.coords.longitude);

showInfoWindow(latlng);

var marker = new google.maps.Marker({

position: latlng,

map: map

});

}

// ふきだしの位置と中身を設定

function showInfoWindow(latlng) {

// 地図の中心位置を設定

map.setCenter(latlng);

}

// geolocation.css

@CHARSET "UTF-8";

html {

height: 100%;

}

body {

height: 100%;

margin: 0px;

padding: 0px;

}

div#map {

position: fixed;

z-index: 0;

width: 100%;

height: 100%;

top:0px;

left:0px;

}

2012-09-07

【Android・java】Jsonオブジェクトを使用して、youtubeの動画feedを取得する。

youtubeの動画一覧を取得して、スマートフォンで再生するアプリなんて、勉強する上で、とても励みになるかと思います。私もその一人。

早速いきます。

Youtube動画の一覧や、詳細を取得するには、youtubeAPI又は、JSONオブジェクトで、動画情報を記載したJSON形式ファイルを読み取ります。

今回は、JSONオブジェクトを使用します。

動画情報を記載したJSON形式ファイルを取得するには、以下のサイトが解説しています。

http://phpjavascriptroom.com/?t=strm&p=youtubeapi_feedtype

実際、JSON形式ファイルを取得してみると、結構読みづらいです。

詳しくは調べてないですが、ニコニコ動画の方がわかりやすいそうです。xml形式のようですし。

javaのjsonオブジェクト文法については、他のサイトを参考にしてください。

以下、ソースです。

なお、ソースにでてくる変数にobjとobjsがあります。

objは、一件毎の動画情報を格納するdtoクラスになっており、(動画IDだったり、サムネイル画像だったり)

objsは、そのdtoクラスを全件格納するArraylistになっています。

なお、私は、初めてブログを書きますが、こんな投げやりなブログになってしまいました。ブロガーはすごいですね。以上です。

/**

* おすすめ、人気、新着、話題、評価の高い、再生回数の多い、お気に入り登録の多い、コメントの多い動画を取得する。

* @param url

* @throws ClientProtocolException

* @throws IOException

* @throws ParseException

private void getterMovieInfo(String url) throws ClientProtocolException,

IOException, ParseException {

HttpResponse httpResponse = httpConnection.jsonConnection(url);

if (httpResponse.getStatusLine().getStatusCode() == HttpStatus.SC_OK) {

JSONObject json = null;

try {

json = new JSONObject(EntityUtils.toString(httpResponse

.getEntity()));

} catch (JSONException e) {

}

JSONArray items = null;

try {

items = json.getJSONObject("feed").getJSONArray("entry");

} catch (JSONException e) {

}

for (int i = 0; i < items.length(); ++i) {

YoutubeStatus obj = new YoutubeStatus();

// movie一件毎のデータを格納

objs.add(obj);

// movieIDの取得

String movieId;

try {

movieId = items.getJSONObject(i)

.getJSONObject("media$group")

.getJSONObject("yt$videoid").getString("$t");

// 文字列処理(VideoId抜き出し、URL加工)

obj.setMovieId(Regex.getMovieUrl(movieId));

} catch (JSONException e) {

}

// サムネイル画像データ

URL thumbnailUrl = null;

try {

thumbnailUrl = new URL(items.getJSONObject(i)

.getJSONObject("media$group")

.getJSONArray("media$thumbnail").getJSONObject(0)

.getString("url"));

} catch (JSONException e) {

}

// 画像データ作成

InputStream stream = thumbnailUrl.openStream();

Drawable thumbnail = Drawable

.createFromStream(stream, "hogege");

stream.close();

obj.setThumbnail(thumbnail);

// タイトル取得

String title;

try {

title = items.getJSONObject(i).getJSONObject("media$group")

.getJSONObject("media$title").getString("$t");

obj.setTitle(title);

} catch (JSONException e) {

}

// ライクカウント

String likeCount;

try {

likeCount = items.getJSONObject(i)

.getJSONObject("yt$rating").getString("numLikes");

obj.setLikeCount(likeCount);

} catch (JSONException e) {

}

// 再生回数

String repeatCount;

try {

repeatCount = items.getJSONObject(i)

.getJSONObject("yt$statistics")

.getString("viewCount");

obj.setRepeatCount(repeatCount);

} catch (JSONException e) {

}

// 再生時間

String playTime;

try {

playTime = items.getJSONObject(i)

.getJSONObject("media$group")

.getJSONObject("yt$duration").getString("seconds");

obj.setPlayTime(playTime);

} catch (JSONException e) {

}

// アカウント名

String accountName;

try {

accountName = items.getJSONObject(i).getJSONArray("author")

.getJSONObject(0).getJSONObject("name")

.getString("$t");

obj.setAccountName(accountName);

} catch (JSONException e) {

}

} else {

Log.v("test", "接続NG");

}

右から左へ流してしまおう

日々刻々と進化する技術を定着させるには、技術レコーディングだ！と思い立ったが吉日ブログ

Geo Location APIで、現在位置を取得する

【Android・java】Jsonオブジェクトを使用して、youtubeの動画feedを取得する。