気象情報によるコンテンツ切り替え｜どこどこJP ラーニング

気象情報によるコンテンツ切り替え

～天気・気温によってコンテンツが変わるWebサイト～

寒くなってきたら店頭の品ぞろえを変える、雨の日だけ「雨の日キャンペーン」を実施するといった施策は、実店舗においては珍しくありません。どこどこJPで取得できる気象データを使ってコンテンツを最適化することで、Webサイト上でも同様の施策を実現することができます。このページでは、気象情報を活用したコンテンツ切り替え施策について、具体的なサンプルスクリプトと共にご紹介します。
※気象データは、どこどこJPをご利用のお客様向けに有料オプション（月額5万円より）として提供しています。ご利用の際は、お問い合わせフォームより、ご連絡ください。天気コードと天気の対応の詳細については、オプションをご利用いただいく際にご案内いたします。

デモ

まずはこちらのデモページをご覧ください。左上の大きなバナーが気温によって、右上の横長のバナーが天気によって切り替わります。

準備するもの

・切り替え用の画像

天気による切り替え用の画像と、気温による切り替え用の画像を用意します。今回は、下記の表の通りに画像を用意しました。

気温条件	商材	バナー
雨・雪	雨の日セール
晴れ・曇り	お茶

気温条件	商材	バナー
気温15℃以下	日本酒
気温16℃以下	シチュー
気温18℃以下	おでん
気温20℃以上	アイスコーヒー
気温22℃以上	ざるそば
気温24℃以上	すいか
気温25℃以上	ビール
気温32℃以上	かき氷
上記に当てはまらない場合	米

・気象情報による切り替え用のJavaScripファイル

以下のサンプルスクリプトをコピーして、任意の場所にアップロードしてください。ここでは、ファイル名を「for_weather.js」としました。
【JavaScripファイル(for_weather.js)】

if ( window.SURFPOINT ) {
	var __SURFPOINT = SURFPOINT;
}

$(document).ready(function() {
	SURFPOINT = __SURFPOINT;
	if ( window.SURFPOINT ) {
		CAR_weather.weatherTargeting();
		CAR_weather.temperatureTargeting();
	}
});

//「今日の天気 テロップ番号」判定によるコンテンツの出し分け.
// テロップ番号が100以上300未満の場合は晴れ、300以上500未満の場合は雨
// それ以外はデフォルトのファイル名に変換
var CAR_weather = {
	weatherTargeting : function() {
		var path = "./images/";
		var wc = SURFPOINT.getTodayWeatherCode();
		var file = "";
		
		if ( 100 < = wc && wc <  300 ) {
			file = "sunny_520x100.png";
		} else if ( 300 < = wc && wc <  500 ) {
			file = "rain_520x100.png";
		} else {
			file = "sunny_520x100.png";
		}
        
// id属性で指定したhtmlタグの画像URLを,どこどこJPの値を用いて変更しています.        
		$("#weather_targeting").attr( "src", path + file );
	},

//「予報最高気温」判定によるコンテンツの出し分け.
// 最高気温に応じたファイル名に変換し
// それ以外はデフォルトのファイル名に変換
	temperatureTargeting : function() {
		var path = "./images/";
		var tc = SURFPOINT.getForecastHighTemperature();
		var file = "";
		
		if ( tc == -999 ) {
			file = "df_kome_400x330.png";
		} else if ( tc < = 15 ) {
			file = "u_15_osake_400x330.png";
		} else if ( 15 <  tc && tc < = 16 ) {
			file = "u_16_stew_400x330.png";
		} else if ( 16 <  tc && tc < = 18 ) {
			file = "u_18_oden_400x330.png";
		} else if ( 20 < = tc && tc <  22 ) {
			file = "o_20_icecoffee_400x330.png";
		} else if ( 22 < = tc && tc <  24 ) {
			file = "o_22_zarusoba_400x330.png";
		} else if ( 24 < = tc && tc <  25 ) {
			file = "o_24_suika_400x330.png";
		} else if ( 25 < = tc && tc <  32 ) {
			file = "o_25_beer_400x330.png";
		} else if ( 32 < = tc ) {
			file = "o_32_kakigoori_400x330.png";
		} else {
			file = "df_kome_400x330.png";
		}
        
// id属性で指定したhtmlタグの画像URLを,どこどこJPの値を用いて変更しています.
		$("#temperature_targeting").attr( "src", path + file );
	}
};

コンテンツの書き換え

・どこどこJPのAPIタグと外部ファイル

どこどこJPとjQueryと機種情報によるコンテンツ切り替え用のJavaScripファイル(for_weather.js)をhtmlファイルのhead内に記述します。
※APIキーの発行がお済みでない方は、ご利用登録を行ってください。ご利用登録がお済みの方は、管理画面にログインしAPIキータグを確認してください。
【htmlファイル】

<head>
<script type="text/javascript" src="http://api.docodoco.jp/v5/docodoco?key=xxx" charset="utf-8"></script>
// どこどこJPのAPIタグは実際にお客様が発行されたものと入れ替えてください.
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script type="text/javascript" src="js/for_weather.js"></script>
</head>

・気象情報によるコンテンツの出しわけ

htmlファイルの画像を配置するimg要素のうち、天気で切り替えるものにはid="weather_targeting" を、気温で切り替えるものにはid="temperature_targeting"を加えます。
【htmlファイル】

<img id="weather_targeting" src="img/area/default_weather.png" width="520" height="100" alt="">
<img id="temperature_targeting" src="img/area/default_temperature.png" width="400" height="330" alt="">

< 前の記事を読む

次の記事を読む >