javascriptで北京の標準時間

<b>北京の標準時間</b>
<div id="time"></div>
<script type="text/javascript">
var diff = 1;
var value = diff + 15;
time();
function time(){
  var now = new Date(Date.now() - (value*60 - new Date().getTimezoneOffset())*60000);
  document.getElementById("time").innerHTML = now.toLocaleTimeString();
}
setInterval('time()', 1000);
</script>

気温が0°C以下の場合は、tickを0以下にする

php側

$temp_max = max($temp) + 0.5;
  if(min($temp) > 0 ){
   $temp_min = 0;
  } else {
   $temp_min = min($temp) - 0.5;
  }

JS側

ticks: {
            max: <?php echo $temp_max; ?>,
            min: <?php echo $temp_min; ?>,
            stepSize: 2.0
          }

最高気温の方も必要でした(モスクワ笑)

if(max($temp) < 0 ){
	 $temp_max = 0;
	} else {
	 $temp_max = max($temp) + 0.5;
	}
	if(min($temp) > 0 ){
	 $temp_min = 0;
	} else {
	 $temp_min = min($temp) - 0.5;
	}

chart.jsの複合チャートで気温と雲の量を表示する

<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.5.0/Chart.bundle.min.js"></script>
<b>札幌の天気</b>
<canvas id="graph-area" height="250px" width=""></canvas>
<script type="text/javascript">
    var ctx = document.getElementById('graph-area').getContext('2d');
    var complexChartOption = {
      responsive: true,
      scales: {
        yAxes: [{
          id: "y-axis-1",
          type: "linear", 
          position: "left",
          ticks: {
            max: 10.0,
            min: 1.0,
            stepSize: 2.0
          },
        }, {
          id: "y-axis-2",
          type: "linear", 
          position: "right",
          ticks: {
              max: 100,
              min: 0,
              stepSize: 20
          },
        }],
      }
    };
    var myChart = new Chart(ctx, {
      type: 'bar',
      options: complexChartOption,
      data: {
        labels: ['12:00 PM', '3:00 PM', '6:00 PM', '9:00 PM', '12:00 AM', '3:00 AM', '6:00 AM'],
        datasets: [{
          type: 'line',
          label: '気温',
          data: [5.3, 5, 3, 2.1, 1.8, 1.6, 1.6, 2.3],
          borderColor : "rgba(254,97,132,0.8)",
          yAxisID: "y-axis-1",
          fill: false
        }, {
          type: 'line',
          label: '雲の量',
          data: [20, 24, 92, 68, 80, 92, 92, 92],
          borderColor : "rgba(54,164,235,0.8)",
          yAxisID: "y-axis-2",
          fill: false
        }]
      }
    });
</script>

問題ありません。

後は配列からjsにデータを渡すところですね。
気温のtickは max(気温の配列)+0.5°Cにしてみます。

$forecast = array('12:00 PM', '3:00 PM', '6:00 PM', '9:00 PM', '12:00 AM', '3:00 AM', '6:00 AM');
$temp = array(5.3, 5, 3, 2.1, 1.8, 1.6, 1.6, 2.3);
$cloud = array(20, 24, 92, 68, 80, 92, 92, 92);

$temp_max = max($temp) + 0.5;
$forecast_list = json_encode($forecast); 
$cloud_list = json_encode($cloud); 
$temp_list = json_encode($temp);

cakeに入れます。

あれ、UIがGoogle Analyticsっぽくなってきた。

各都市のviewをつくっていく

index.ctp

<?php
	$this->assign('title', 'サンパウロの天気予報');
?>
<?= $this->element('module'); ?>

<h1>サンパウロの天気予報(サンパウロ時間)</h1>

<table class="table1">
	<tr>
	<?php 
	$i = 1;
	foreach ($saopaulos as $saopaulo){
	echo "<td width=\"150px\">";
	echo h($saopaulo->forecast)."<br>";
	$date = h($saopaulo->forecast);
	$result = substr($date, -8);
	if($result == ' 9:00 PM' or $result == '12:00 AM' or $result == ' 3:00 AM'){
	echo convert3(($saopaulo->main))."<br>";
	} else {
	echo convert(($saopaulo->main))."<br>";
	}
	echo convert2(($saopaulo->description))."<br>";
	echo "気温".h($saopaulo->temp)."°C<br>";
	echo "湿度". h($saopaulo->humidity)."%<br>";
	echo "雲の量".h($saopaulo->cloud)."<br>";
	echo "風速".h($saopaulo->speed)."m<br>";
	echo "<td>";
	if($i % 8 == 0){
	echo "</tr><tr>";
	}
	$i++;
	}
	?>
	</tr>
</table>

サンパウロ暑いですね！

controller、indexctp、lon・latを整える

DBの用意が出来たので、controllerから作っていきます。mysqlからselectする際に時差を計算してあげます。
WorldwidesController.php

<?php

namespace App\Controller;

use Cake\ORM\TableRegistry;  

class WorldwidesController extends AppController
{	
	public function initialize()
    {
         parent::initialize();
         $this->Londons = TableRegistry::get('londons');
         $this->Moscows = TableRegistry::get('moscows');
         $this->Cairos = TableRegistry::get('cairos');
         $this->Capetowns = TableRegistry::get('capetowns');
         $this->Beijings = TableRegistry::get('beijings');
         $this->Jakartas = TableRegistry::get('jakartas');
         $this->Marunouchis = TableRegistry::get('marunouchis');
         $this->Sydneys = TableRegistry::get('sydneys');
         $this->Losangeles = TableRegistry::get('losangeles');
         $this->Newyorks = TableRegistry::get('newyorks');
         $this->Limas = TableRegistry::get('limas');
         $this->Saopaulos = TableRegistry::get('saopaulos');
    }

	public function index()
	{
		$this->viewBuilder()->layout('my_layout');
		$now1 = date("Y-m-d H:i:s", strtotime(date(DATE_RFC2822) . '-9hour'));
		$param1 = array(
		    'conditions' => array(
		        'forecast >' => $now1, 
		    ),
		);
		$londons = $this->Londons->find('all', $param1)->limit(8);
		$now2 = date("Y-m-d H:i:s", strtotime(date(DATE_RFC2822) . '-6hour'));
		$param2 = array(
		    'conditions' => array(
		        'forecast >' => $now2, 
		    ),
		);
		$moscows = $this->Moscows->find('all', $param2)->limit(8);
		$now3 = date("Y-m-d H:i:s", strtotime(date(DATE_RFC2822) . '-8hour'));
		$param3 = array(
		    'conditions' => array(
		        'forecast >' => $now3, 
		    ),
		);
		$cairos = $this->Cairos->find('all', $param3)->limit(8);
		$capetowns = $this->Capetowns->find('all', $param3)->limit(8);
		$now4 = date("Y-m-d H:i:s", strtotime(date(DATE_RFC2822) . '-1hour'));
		$param4 = array(
		    'conditions' => array(
		        'forecast >' => $now4, 
		    ),
		);
		$beijings = $this->Beijings->find('all', $param4)->limit(8);
		$now5 = date("Y-m-d H:i:s");
		$param5 = array(
		    'conditions' => array(
		        'forecast >' => $now5, 
		    ),
		);
		$marunouchis = $this->Marunouchis->find('all', $param5)->limit(8);
		$now6 = date("Y-m-d H:i:s", strtotime(date(DATE_RFC2822) . '-2hour'));
		$param6 = array(
		    'conditions' => array(
		        'forecast >' => $now6, 
		    ),
		);
		$jakartas = $this->Jakartas->find('all', $param6)->limit(8);
		$now7 = date("Y-m-d H:i:s", strtotime(date(DATE_RFC2822) . '+3hour'));
		$param7 = array(
		    'conditions' => array(
		        'forecast >' => $now7, 
		    ),
		);
		$sydneys = $this->Sydneys->find('all', $param7)->limit(8);
		$now8 = date("Y-m-d H:i:s", strtotime(date(DATE_RFC2822) . '-16hour'));
		$param8 = array(
		    'conditions' => array(
		        'forecast >' => $now8, 
		    ),
		);
		$losangeles = $this->Losangeles->find('all', $param8)->limit(8);
		$now9 = date("Y-m-d H:i:s", strtotime(date(DATE_RFC2822) . '-13hour'));
		$param9 = array(
		    'conditions' => array(
		        'forecast >' => $now9, 
		    ),
		);
		$newyorks = $this->Newyorks->find('all', $param9)->limit(8);
		$now10 = date("Y-m-d H:i:s", strtotime(date(DATE_RFC2822) . '-14hour'));
		$param10 = array(
		    'conditions' => array(
		        'forecast >' => $now10, 
		    ),
		);
		$limas = $this->Limas->find('all', $param10)->limit(8);
		$now11 = date("Y-m-d H:i:s", strtotime(date(DATE_RFC2822) . '-12hour'));
		$param11 = array(
		    'conditions' => array(
		        'forecast >' => $now11, 
		    ),
		);
		$saopaulos = $this->Saopaulos->find('all', $param11)->limit(8);
		$this->set(compact('londons'));
		$this->set(compact('moscows'));
		$this->set(compact('cairos'));
		$this->set(compact('capetowns'));
		$this->set(compact('beijings'));	
		$this->set(compact('marunouchis'));
		$this->set(compact('jakartas'));
		$this->set(compact('sydneys'));
		$this->set(compact('losangeles'));
		$this->set(compact('newyorks'));
		$this->set(compact('limas'));
		$this->set(compact('saopaulos'));
	}
}
?>

緯度経度を追記します。

var markerData = [ 
  {
       name: 'ロンドン',
       lat: 51.507351,
        lng: -0.127758,
        icon: icon[0]
 }, {
 	name: 'モスクワ',
       lat: 55.755826,
        lng: 37.6173,
        icon: icon[1]
 }, {
 	name: 'カイロ',
       lat: 30.0444196,
        lng: 31.2357116,
        icon: icon[2]
 }, {
 	name: 'ケープタウン',
       lat:  -33.924869,
        lng: 18.424055,
        icon: icon[3]
 }, {
 	name: '北京',
       lat: 39.9042,
        lng: 116.407396,
        icon: icon[4]
 }, {
 	name: '東京',
       lat: 35.681167,
        lng: 139.767052,
        icon: icon[5]
 }, {
        name: 'ジャカルタ',
     	lat:  -6.17511,
        lng: 106.86504,
        icon: icon[6]
 }, {
 	name: 'シドニー',
       lat:　-33.86882,
        lng: 151.209296,
        icon: icon[7]
 }, {
 	name: 'ロサンゼルス',
       lat: 34.052234,
        lng: -118.243685,
        icon: icon[8]
 }, {
 	name: 'ニューヨーク',
       lat: 40.712775,
        lng: -74.005973,
        icon: icon[9]
 }, {
 	name: 'リマ',
       lat: -12.046373,
        lng: -77.042754,
        icon: icon[10]
 }, {
 	name: 'サンパウロ',
       lat: -23.55052,
        lng: -46.633309,
        icon: icon[11]
 }
];

思ってたより簡単にできましたね。

この際、海外の天気予報も作ってしまおう

ということで、幾つか都市をcity.list.jsonからピックアップして、グリニッジ標準時刻との時差をそれぞれ調べます。

City of London GB UTC,
Moscow RU UTC+3,
Cairo EG UTC+2,
Cape Town ZA UTC+2,
Beijing Shi CN UTC+8,
Daerah Khusus Ibukota Jakarta ID UTC+7,
City of Sydney AU UTC+11,
Los Angeles US UTC-7,
New York US UTC-4,
Lima PE UTC-5,
Sao Paulo BR UTC-3

DBのテーブルをくって、データを流し込んでいきます。

london 12時で10°Cくらいなので、あってそうですね。

moscow 12時　-3.9°C 笑

Weather系のAPIはMeteomatics APIがいいらしい

Weather系のAPIはMeteomatics API(https://api.meteomatics.com)がいいらしい、とのことで、gmailでsign upしたところ、

Thanks a lot for your interest in our Weather API. Since the Meteomatics Weather API is a premium product primarily targeted at corporate customers, we would kindly ask you to re-send your request from your employer’s mail account.
We will be happy to provide you with a trial account.

しょうがないので、法人のメールアドレスでsign upしたら、一か月の有効期限とのこと。
Thank you very much for your interest in our weather API!
We have just created a trial account for you:
User: hoge
PW: hogehoge
Valid until 2018-04-14

見えるようになりましたが、1カ月はきついですね。
スイスの会社です。言語がEnglishとGerman。そういえばゼミの教授もスイス人でした。

ひまわりのリアルタイム画像を取得する

現在時刻をイギリスロンドンのグリニッジ標準時刻(-9時間)にします。

$target = date("Y/m/d Hi", strtotime(date() . '-9hour'));
echo $target. "<br>";

反映に少し時間がかかっているようなので、9時間20分前にします。

$target = date("Y/m/d Hi", strtotime(date() . '-9hour -20 min'));
echo $target. "<br>";

日付と時間をそれぞれ別々に切り出します。

$date = substr($target, 0, 10);
echo $date. "<br>";

$hour = substr($target, -4, 3);
echo $hour."<br>";

時間は、下一桁は0にしたいため、substr($target, -4, 3);　で、下一桁以外を切り出します。

切り出した日時をひまわりのURLに代入します。

$target = date("Y/m/d Hi", strtotime(date() . '-9hour -20 min'));
echo $target. "<br>";

$date = substr($target, 0, 10);
echo $date. "<br>";

$hour = substr($target, -4, 3);
echo $hour."<br>";


$base_url = "http://himawari8-dl.nict.go.jp/himawari8/img/D531106/thumbnail/550/".$date."/".$hour."000_0_0.png";
echo $base_url. "<br>";
?>

画像と時刻を表示します。

$target = date("Y/m/d Hi", strtotime(date() . '-9hour -20 min'));
// echo $target. "<br>";

$date = substr($target, 0, 10);
// echo $date. "<br>";

$hour = substr($target, -4, 3);
// echo $hour."<br>";


$base_url = "http://himawari8-dl.nict.go.jp/himawari8/img/D531106/thumbnail/550/".$date."/".$hour."000_0_0.png";
// echo $base_url. "<br>";

echo "<img src=\"".$base_url."\" width=\"200\" >";

$new = substr(date("Y年m月d月 H時i", strtotime(date() . '-20 min')), 0, -1);
echo "ひまわり　". $new ."0分";

20分前だと安定しないので、30分前か40分前の方がいいかもしれません。
cakeのelementに落とし込みます。

CentOSにLinuxBrewを入れる

himawari.jsを使うため、brewをインストールします。

sudo yum install -y gcc gcc-c++ git
sh -c "$(curl -fsSL https://raw.githubusercontent.com/Linuxbrew/install/master/install.sh)"
test -d ~/.linuxbrew && PATH="$HOME/.linuxbrew/bin:$HOME/.linuxbrew/sbin:$PATH"
test -d /home/linuxbrew/.linuxbrew && PATH="/home/linuxbrew/.linuxbrew/bin:/home/linuxbrew/.linuxbrew/sbin:$PATH"
test -r ~/.bash_profile && echo "export PATH='$(brew --prefix)/bin:$(brew --prefix)/sbin'":'"$PATH"' >>~/.bash_profile
echo "export PATH='$(brew --prefix)/bin:$(brew --prefix)/sbin'":'"$PATH"' >>~/.profile

getting started

brew install imagemagick
brew install graphicsmagick
npm i himawari

というか、himawari.jsってhttp://himawari8.nict.go.jp/ja/himawari8-image.htm　から画像化してるだけっぽいですね。

nasaで遊んでみよう　昨日の昼頃の衛星写真

$date = "2018-03-11";
$date_url = str_replace("-", "/", $date);

$BASE_URL = "https://api.nasa.gov/EPIC/api/natural/date/".$date."?api_key=".$API_KEY."";

$obj = json_decode(file_get_contents($BASE_URL), true);

if($obj != null){
$img = $obj[2]["image"];
$img_URL = "https://epic.gsfc.nasa.gov/archive/natural/".$date_url."/jpg/".$img.".jpg";
echo "<img src=\"".$img_URL."\" width=\"350\" ><br>";
$target = $obj[2]["date"];
echo "※". date("Y-m-d H:i:s", strtotime($target . '+9hour'));
}

あれ、よく考えたら、天気予報作ろうとしてるのに、昨日の昼の雲の写真載せても全く意味がないのでは。。。しまった。

というか、衛星写真系のサービスって大量にあるんですね。。。
https://api.meteomatics.com/Overview.html