2015-12-21(Mon)

WorldWeatherOnlineを使用してみる

商用利用も可能らしいWorldWeatherOnlineを使用してみる。
コレも登録してAPPKeyを取得する必要がある。
日本語にも対応しているが、なんか怪しい日本語・・・
アイコンも提供されているが、無料で使えるアイコンはダサい・・・


<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta name="viewport" content="width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=2.0,user-scalable=yes">
<meta http-equiv="Content-Language" content="ja" />
<meta http-equiv="Pragma" content="no-cache">
<meta http-equiv="Cache-Control" content="no-cache">
<script type="text/javascript">

var xhr = new XMLHttpRequest();
var api_key = '*******************************';

window.onload=function() {
doRequest();
};

function doRequest() {

xhr.open("GET" , "http://api.worldweatheronline.com/free/v2/weather.ashx?key="+api_key+"&q=shinagawa,japan&num_of_days=1&lang=ja&format=json", true);
// xhr.withCredentials = true;
xhr.onreadystatechange = xhrOnReadyStateChange;
xhr.send();
}

function onRecive() {

var test = JSON.parse(xhr.response);

if(test.data.current_condition.length == 0) return;

document.getElementById("tenki_img").src = test.data.current_condition[0].weatherIconUrl[0].value;
document.getElementById("text_area").innerHTML = test.data.current_condition[0].lang_ja[0].value;
}

function xhrOnReadyStateChange() {
switch(xhr.readyState){
case 4:
if(xhr.status == 200) onRecive();
break;
default:
break;
}
}


</script>

<title>WorldWeatherOnlineを使用するテスト</title>
</head>
<body>
<img src="" id="tenki_img" class="tenki_img" />
<span id="text_area"></span>

</body>
</html>




2015-12-21(Mon)

OpenWeatherMapを使ってみる

OpenWeatherMap(http://openweathermap.org/)を使用してJavascriptで天気情報を取得してみる。

上記のサイトから都市名等で天気情報を表示することができる。
これをAPIで取得する方法はヘルプのCall current weather data for one location に書いてあるとおり
http://api.openweathermap.org/data/2.5/weather?q=Shinagawa-ku,JP

となる。コレをWebブラウザのアドレスに入れてアクセスすればレスポンスがあるはずであるが、実はこれだけではできない。
APIで天気情報を取得するためには上記のサイトで登録をしてAPIキーを取得する必要がある。

取得したAPIキーはヘルプのHow to use API key in API call に書かれているように
api.openweathermap.org/data/2.5/forecast/city?id=524901&APPID=1111111111

という感じで使用する。
以上を踏まえると
http://api.openweathermap.org/data/2.5/weather?q=Shinagawa-ku,JP&APPID=hogehogehoge

というリクエストをブラウザから行えば、以下のようなレスポンスがあることがわかる。
{"coord":{"lon":139.73,"lat":35.61},"weather":[{"id":801,"main":"Clouds","description":"few clouds","icon":"02n"}],"base":"stations","main":{"temp":277.43,"pressure":1022,"humidity":35,"temp_min":273.15,"temp_max":279.82},"visibility":10000,"wind":{"speed":7.2,"deg":340},"clouds":{"all":20},"dt":1451259768,"sys":{"type":1,"id":7619,"message":0.0182,"country":"JP","sunrise":1451166563,"sunset":1451201714},"id":1852140,"name":"Shinagawa-ku","cod":200}

天気の情報は
weather[0].main と weather[0].descriptionにテキストで格納されているが、日本語表記ではないため日本語で表示したい場合は変換する必要がありそう。そのときはweather[0].id を見てテキストを割り振るしか無いでしょう。
天気種類(テーブル)は、ヘルプのWeather condition codes にすべて記載がある。
また、weather[0].icon に使用できるアイコン画像のファイル名が格納されている為、ヘルプのHow to get icon URL に記載があるURLで使用することができる。

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta name="viewport" content="width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=2.0,user-scalable=yes">
<meta http-equiv="Content-Language" content="ja" />
<meta http-equiv="Pragma" content="no-cache">
<meta http-equiv="Cache-Control" content="no-cache">
<script type="text/javascript">

var xhr = new XMLHttpRequest();
var api_key = '*********************************';

window.onload=function() {
doRequest();
};

function doRequest() {
xhr.open("GET" , "http://api.openweathermap.org/data/2.5/weather?q=Shinagawa-ku,JP&units=metric&appid="+api_key, true);
// xhr.withCredentials = true;
xhr.onreadystatechange = xhrOnReadyStateChange;
xhr.send();

}

function onRecive() {

var test = JSON.parse(xhr.response);

if(test.weather.length == 0) return;

document.getElementById("tenki_img").src = "http://openweathermap.org/img/w/" + test.weather[0].icon + ".png";

}

function xhrOnReadyStateChange() {
switch(xhr.readyState){
case 4: // XHR 通信が完了した
if(xhr.status == 200) onRecive();
break;
default:
break;
}
}
</script>

<title>OpenWeatherMapを使用するテスト</title>
</head>
<body>
<img src="http://openweathermap.org/img/w/01d.png" id="tenki_img" class="tenki_img" />
</body>
</html>

しかし・・・APIKeyが見えてしまうのでJavascriptでアクセスするのはちょっと使いづらいなぁ・・・

2015-11-13(Fri)

JavascriptでLINEのようなメッセージの表示を行う

JavascriptでDIV要素を動的に追加していけば、LINEのようなメッセージの表示ができるのではないかと考えてみた。

■ test.html
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta http-equiv="Content-Language" content="ja" />
<meta http-equiv="Pragma" content="no-cache">
<meta http-equiv="Cache-Control" content="no-cache">
<script type="text/javascript" src="test.js"></script>
<style type="text/css">

div#main {
border:solid 1px #000000;
background-color: #6f92c0;
padding:5pt;
width: 400px;
height: 700px;
overflow: auto;
}

div.message {
margin-left:auto;
margin-right:auto;
border:solid 1px #000000;
background-color: #85e249;
border-radius: 8px 8px 8px 8px / 8px 8px 8px 8px;
padding:3pt;
width: 300px;
}

</style>
<title>DIV要素を追加するテスト</title>
</head>
<body>
DIV要素を動的に追加していくテスト
<form name="input_form">
追加テキスト:<input type="text" name="text_data" value="">
<input type="button" value="追加" onClick="onAddData()">
<input type="button" value="全削除" onClick="onRemoveAllData()">
<input type="button" value="削除" onClick="onRemoveData()">
</form>

<div id="main">
<!--
<div class = "message">最初の行。この後(つまりid=mainのDIVタグの最後)にデータが追加されていくようにできないか?</div>
-->
</div>
</body>
</html>


■test.js

var message_max = 20; // 追加できるメッセージの最大数
var message_cnt = 0;

window.onload=function() {
console.log('onload.');

removeAllMessage(); // 最初に全削除。
}

function onAddData() {
console.log('onAddData()');

var txt = document.input_form.text_data.value;

addMessage(txt);

autoScroll(); // スムーススクロールする。
}

// すべてのメッセージを削除
function onRemoveAllData() {
console.log('onRemoveAllData()');

removeAllMessage();

}

function onRemoveData() {
console.log('onRemoveData()');

removeLastMessage();
}


function addMessage(txt) {
console.log('addMessage(txt='+txt+')');

if(message_cnt >= message_max) {
var main_ele = document.getElementById("main");
console.log('before scrollTop="+main_ele.scrollTop+", scrollHeight= ' + main_ele.scrollHeight);
removeFirstMessage();
console.log('after scrollTop="+main_ele.scrollTop+", scrollHeight= ' + main_ele.scrollHeight);
scr_pos = main_ele.scrollTop = main_ele.scrollHeight - main_ele.clientHeight - 1;
} else {
message_cnt++;
}

var ele = document.createElement("div"); // 新規に要素(タグ)を生成
ele.className = 'message';

ele.innerHTML = txt + "<B R>が追加されました。"; // こうすればタグも追加できる。

var main_ele = document.getElementById("main");
main_ele.appendChild(ele);

// <B R>を追加する。
ele = document.createElement("br");
main_ele.appendChild(ele);

}

// すべてのメッセージを削除
function removeAllMessage() {
console.log('removeAllMessage()');

var element = document.getElementById("main");

while (element.firstChild) {
element.removeChild(element.firstChild);
}
message_cnt = 0;
}

// 最後のメッセージを削除
function removeLastMessage() {
console.log('removeLastMessage()');

var element = document.getElementById("main");

if(element.lastChild) {
element.removeChild(element.lastChild);
element.removeChild(element.lastChild);
}
}

// 最初のメッセージを削除
function removeFirstMessage() {
console.log('removeFirstMessage()');

var element = document.getElementById("main");

if(element.firstChild) {
element.removeChild(element.firstChild);
element.removeChild(element.firstChild);
}
}

var scr_pos = 0;

// スムーススクロール
function autoScroll() {
console.log('autoScroll()');
var element = document.getElementById("main");

console.log('scrollTop= ' + element.scrollTop + ', scrollHeight= ' + element.scrollHeight + ', clientHeight= ' + element.clientHeight);

element.scrollTop = ++scr_pos;
if(scr_pos < element.scrollHeight - element.clientHeight) {
setTimeout( "autoScroll()", 1);
} else {
}
}


こんな感じ・・・
20151113_1.png

2014-12-04(Thu)

OpenLayersを使ってGoogleMapを表示する

test.html
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html lang="ja">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8">
<title>OpenLayers Test (Google Maps V3)</title>
</head>
<script src="http://openlayers.org/api/OpenLayers.js"></script>
<script src="http://maps.google.co.jp/maps/api/js?v=3.5&sensor=false&language=ja"></script>
<script>
function init() {

var mapCenterLatLng = new OpenLayers.LonLat(139.553146, 35.336063); // Kamukura

var map = new OpenLayers.Map('map_google');

map.addControl( new OpenLayers.Control.LayerSwitcher() );

var gmap_terrain = new OpenLayers.Layer.Google(
"Google TERRAIN",
{type: google.maps.MapTypeId.TERRAIN}
);
var gmap = new OpenLayers.Layer.Google(
"Google ROADMAP", // the default
{numZoomLevels: 20}
);
var gmap_hybrid = new OpenLayers.Layer.Google(
"Google HYBRID",
{type: google.maps.MapTypeId.HYBRID, numZoomLevels: 20}
);
var gmap_satellite = new OpenLayers.Layer.Google(
"Google SATELLITE",
{type: google.maps.MapTypeId.SATELLITE, numZoomLevels: 22}
);

map.addLayers( [ gmap, gmap_terrain, gmap_hybrid, gmap_satellite] );

// Google.v3 uses EPSG:900913 as projection, so we have to
// transform our coordinates

var projection = new OpenLayers.Projection("EPSG:4326");
var mapCenterGoogle = mapCenterLatLng.transform( projection, map.getProjectionObject() );

map.setCenter( mapCenterGoogle, 15 );
}

</script>
<style type="text/css">
#map_google {
width: 100%;
height: 480px;
border: solid 1px #999;
}

</style>

</head>

<body onload="init()">

<div id="map_google" ></div>
</body>
</html>
</body>
</html>

2014-12-04(Thu)

Google Maps JavaScript API V3でGoogleMapを表示する

test.html
<!DOCTYPE html "-//W3C//DTD XHTML 1.0 Strict//EN" 
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<meta name="robots" content="noindex,nofollow,noarchive" />
<title>Google Maps サンプル</title>

<script src="http://maps.google.co.jp/maps/api/js?v=3.5&sensor=false&language=ja"></script>

<script type="text/javascript">
function initialize() {
var latlng = new google.maps.LatLng(35.709984,139.810703);
var opts = {
zoom: 15,
center: latlng,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
var map = new google.maps.Map(document.getElementById("map_canvas"), opts);
}
</script>

</head>
<body onload="initialize()">
<p>地図です。</p>

<div id="map_canvas" style="width:500px; height:300px"></div>

</body>
</html>
2014-12-02(Tue)

OpenLayersを使ってOSM(OpenStreetMap)を表示する

test.heml
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta http-equiv="Content-Language" content="ja" />
<meta http-equiv="Pragma" content="no-cache">
<meta http-equiv="Cache-Control" content="no-cache">
<!--
<link rel="stylesheet" href="test.css" type="text/css" >
<script type="text/javascript" src="test.js"></script>
-->
<script type="text/javascript" src="http://www.openlayers.org/api/OpenLayers.js"></script>
<script type="text/javascript">
function init() {
var map = new OpenLayers.Map("canvas");
var mapnik = new OpenLayers.Layer.OSM();
map.addLayer(mapnik);

var lonLat = new OpenLayers.LonLat(139.76, 35.68)
.transform(
new OpenLayers.Projection("EPSG:4326"),
new OpenLayers.Projection("EPSG:900913")
);
map.setCenter(lonLat, 15);
}
</script>
<title>OSMで地図を表示</title>
</head>
<body onload="init();">
<div id="canvas" style="width:500px; height:400px"></div>
</body>
</html>

test.css
#canvas .olControlAttribution {
font-size:13px;
bottom:3px;
}

こんな感じに表示されます。
osm20141202.png

プロフィール

yaman

Author:yaman

カレンダー
07 | 2017/08 | 09
- - 1 2 3 4 5
6 7 8 9 10 11 12
13 14 15 16 17 18 19
20 21 22 23 24 25 26
27 28 29 30 31 - -
ブログ内検索
カテゴリー
タグリスト

バイク 買い物 アキバ 秋葉原 写真 ゲーム アフィリエイト パソコン バトルフィールド カメラ 漫画 チャレンジツーリング 株式投資 DTV  ダーツ ロト7 バトルフィールド2142 Linux 大戸屋 Ubuntu PT2 プログラミング 温泉 Git 飲み食い 書籍 アニメ SSTR Windows Ingress ラジオ会館 道の駅スタンプブック 機械工作 日本酒 Javascript VMware TortoiseGit バトルフィールド4 LightWave ホビー  バトルフィールド3 仕事 WHS 日曜大工 Windows7 電子工作 ビリヤード YSP CentOS GoogleMap Subversion PC ドネルケバブ PSP 晩飯 チャンダン 歯医者 Windows8 動画エンコード 料理 Windows10 THETA ロト6 酒造 コミケ ラーメン Chrome CD バトルフィールド2 宝くじ Android OSM バトルフィールド・バッドカンパニー2 

最近の記事
最近のコメント
最近のトラックバック
月別アーカイブ
FC2カウンター
現在の閲覧者数
現在の閲覧者数:
Twitter
リンク
RSSフィード
コミックダッシュ