DOWNLOAD

デモ

地域を入力してください(ローマ字) 表示タイトルを入力してください
...result...

設定方法

ファイルの読み込み

jQuery と weather_forecast を読み込みます。

<link href="./css/jquery.weather_forecast.css" rel="stylesheet">

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script src="./js/jquery.weather_forecast.js"></script>

HTML

結果を表示する要素を用意します。

<div id="forecast_result"></div>

jQuery

次のように実行します。設定可能なパラメータは、パラメータを御覧ください。

$('#forecast_result').forecast({
  city_name: 'Shari,Japan',
  get_daily: true,
  display_name: '斜里町の天気'
});

パラメータ


$('#forecast_result').forecast({
  city_name: 'Shari, Japan',
  display_name: '斜里町の天気',
  cnt: '3', // daily count
  get_daily: true, // display daily. [true|false]
  icon_url: './img/icons/default/', // icon url from this page
  callback: function(){} // callback
});

地域の指定方法について

天気情報は、 OpenWeatherMap の API を利用しています。

地域はローマ字で入力する必要があります。

目的の地域のローマ字名が不明な場合は、 こちら で探してみてください。
Find 欄にローマ字を入力し、Find ボタンで検索してください。

検索結果の地域名が、登録されているローマ字の地域名になります。

サポートブラウザ

次のブラウザで動作を確認しています。

  • Chrome
  • Safari
  • Firefox
  • IE8+

HTMLの構造

HTML Structure (Today)

<div class='forecast-now'>
  <span class='city-name'></span>
  <div class='forecast-a-day'>
    <span class='weather-day'></span>
    <div class='weather-wrapper'>
      <span class='weather-main'></span>
      <span class='weather-description'></span>
      <span class='weather-icon'></span>
      <span class='main-temp'></span>
    </div>
  </div>
</div>

HTML Structure (Daily)

<div class='forecast-daily'>
  <div class='forecast-a-day'>
    <span class='weather-day'></span>
    <div class='weather-wrapper'>
      <span class='weather-main'></span>
      <span class='weather-description'></span>
      <span class='weather-icon'></span>
      <span class='main-temp-max'></span>
      <span class='main-temp-min'></span>
    </div>
  </div>
</div>

HTML Sample

<div class="forecast">
<div class="forecast-now">
<span class="city-name"><a target="_blank" href="http://openweathermap.org/city/2130741">斜里町の天気</a></span>
<div class="forecast-a-day">
<span class="weather-day">2013年07月09日 (火)</span>
<div class="weather-wrapper">
<span class="weather-main" title="くもり" style="background-image: url(http://openweathermap.org/img/w/02d.png);"></span>
<span class="weather-description">(few clouds)</span>
<span class="weather-icon"></span>
<span class="main-temp">27°C</span>
</div>
</div>
</div>

<div class="forecast-daily">
<div class="forecast-a-day" style="width: 33.333333333333336%;">
<span class="weather-day">9日 (火)</span>
<div class="weather-wrapper" style="background-image: url(http://openweathermap.org/img/w/02d.png);">
<span class="weather-main">くもり</span>
<span class="weather-description">(few clouds)</span>
<span class="weather-icon"></span>
<span class="main-temp-max">27°C</span>
<span class="main-temp-min">20°C</span>
</div>
</div><div class="forecast-a-day" style="width: 33.333333333333336%;">
<span class="weather-day">10日 (水)</span>
<div class="weather-wrapper" style="background-image: url(http://openweathermap.org/img/w/10d.png);">
<span class="weather-main">雨</span>
<span class="weather-description">(moderate rain)</span>
<span class="weather-icon"></span>
<span class="main-temp-max">23°C</span>
<span class="main-temp-min">18°C</span>
</div>
</div><div class="forecast-a-day" style="width: 33.333333333333336%;">
<span class="weather-day">11日 (木)</span>
<div class="weather-wrapper" style="background-image: url(http://openweathermap.org/img/w/10d.png);">
<span class="weather-main">雨</span>
<span class="weather-description">(light rain)</span>
<span class="weather-icon"></span>
<span class="main-temp-max">24°C</span>
<span class="main-temp-min">17°C</span>
</div>
</div>
</div>
</div>

CSS

jquery.weather_forecast.css


.forecast {
  text-align: center;
}

.forecast-now {
  clear: left;
}

.forecast-now .city-name {

}

.forecast-now .forecast-a-day {

}

.forecast-now .forecast-a-day .weather-day {
  
}

.forecast-now .forecast-a-day .weather-wrapper {
  height: 6em;
  position: relative;
  font-size: 1.2em;
}
.forecast-now .forecast-a-day .weather-wrapper span {
  position: absolute;
  bottom: 1em;
  width: 48%;
}
.forecast-now .forecast-a-day .weather-wrapper span.weather-main {
  left: 0px;
  text-align: right;
  background-position: right center;
  background-repeat: no-repeat;
  background-size: cover;
  background-size: auto 100%;
  height: 4em;
}
.forecast-now .forecast-a-day .weather-wrapper span.weather-description {
  display: none;
}
.forecast-now .forecast-a-day .weather-wrapper span.weather-icon {
  display: none;
}
.forecast-now .forecast-a-day .weather-wrapper span.main-temp {
  right: 0px;
  text-align: left;
  font-size: 1.4em;
  bottom: 2em;
}

.forecast-daily {
  clear: left;
}

.forecast-daily .forecast-a-day {
  float: left;
}

.forecast-daily .forecast-a-day .weather-day {

}

.forecast-daily .forecast-a-day .weather-wrapper {
  height: 5em;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  background-size: auto 100%;
  position: relative;
  font-size: .8em;
}
.forecast-daily .forecast-a-day .weather-wrapper span {
  position: absolute;
  bottom: .2em;
  width: 45%;
}
.forecast-daily .forecast-a-day .weather-wrapper span.weather-main {
  display: none;
}
.forecast-daily .forecast-a-day .weather-wrapper span.weather-description {
  display: none;
}
.forecast-daily .forecast-a-day .weather-wrapper span.main-temp-max {
  left: 0px;
  text-align: right;
  color: red;
}
.forecast-daily .forecast-a-day .weather-wrapper span.main-temp-min {
  right: 0px;
  text-align: left;
  color: blue;
}

  • 1.0.3: 複数地域での天気表示に対応.
  • 1.0.2: バグ修正.
  • 1.0.0: initial release.