ホームページをリニューアルしました。旧HPはこちら
wordpress 歳時記 ソフト・ハードウェア

ホームページリニューアル　備忘録その２（1/30）

トップページのデザイン変更、ドメイン・SSL設定

追記：クロスドメインによるエラー対処　（2021/02/03）

SSL設定後、山行記録を見ると、GPX-Viewerが動作していない。Chromeの開発デバッグコンソールで確認をしてみると、2つのエラーが発生している。

エラー①：Google Map APIの許可がない
エラー②：CORS policy違反（下記警告文）

from origin "https://miyasan.sakura.ne.jp/**** " has been blocked by cors policy: no 'access-control-allow-origin' header is present on the requested resource.

①については、GoogleのDeveloperサイトで、すでにGPX-Viewerで登録してあるAPIKeyに新サイト＝https://home-atmo.com/*を認証登録してFixした。

②については全く見当がつかない。そこで「cors policyエラー」についてネット検索してみると、ありがたいことにいろいろな方が説明をしてくれている。その中で、
「なんとなく CORS がわかる…はもう終わりにする。」の説明によると、
「CORSは”Cross-Origin Resource Sharing” の略でオリジン間リソース共有のこと。つまり、あるオリジンで動いている Web アプリケーションに対して、別のオリジンのサーバーへのアクセスをオリジン間 HTTP リクエストによって許可できる仕組みのことを言う」
とのこと。（下図）

不正アクセスの脆弱性を防ぐために、CORSには「Same-Origin Policy」というものがあり、それは「JavaScript で自由にやりとりできるところは、その JavaScript をとってきたところと同一の場所だけに制限する」 ということだそうだ。すなわち、同一生成元かどうか判断する時には、ホスト名、スキーム、ポート番号がチェックされ、これらが同じ場合、同一生成元へのアクセスとみなされとのこと。この制限があるために、あるサーバーから JavaScript をダウンロードし、そのスクリプトから全く別のサーバーにアクセスしてそこから情報を取得する、ということができなくなり、セキュリティが高まるようだ。（参考：CORSとは）

今回エラーになったGPX-Viewerでは、新ドメイン（home-atmo.com)にあるスクリプトが、同じサーバー内の別ドメイン（miyasan.sakura.ne.jp/)にあるgpxファイルを読みこもうとしている。これがCORS規約にひっかったのではないのだろうか？

そこで、miyasan.sakura.ne.jp/のuploads下にあるgpxファイルを、home-atmo.com/のuploads下にコピーし、SearchRegexを使って投稿本文中のgpxファイルの読み込み先URLをすべて書き換えたところ、エラーがなくなった。やれやれ・・・。

尚、この過程でSSL設定によるMixedContentsエラーも散見されたので、「SAKURAのSSL」プラグインから、「Really Simple SSL」プラグインに変更。このため、.htaccessには、下記のスクリプトが記述されている。

# BEGIN rlrssslReallySimpleSSL rsssl_version[4.0.7]
<IfModule mod_rewrite.c>
RewriteEngine on
RewriteCond %{HTTPS} !=on [NC]
RewriteRule ^(.*)$ https://%{HTTP_HOST}/$1 [R=301,L]
</IfModule>
# END rlrssslReallySimpleSSL

 

フロントページのデザイン変更

気象情報の文字を大きくし、過去24時間の最高・最低気温が見られるようにした。

１、24時間内の最高・最低気温とその時刻の抽出
48時間集計データ（飯田：opendb/data/thp_iida2d.txt、　富士見：opendb/data/thp.txt）から、過去24時間内の最高・最低気温とその時刻を抽出し、現在の気象データと一緒に表示する。

最低・最高気温の抽出プログラム（飯田の例）

# max-min-iida24.py
# 2021-01-28 rev 1.0 release
# 過去24時間の最高/最低気温を求めて、max-min-iida24.csvに書き込む
# 使用データ：thp_iida2d.csv

import pandas as pd
import csv
import sys

#出力ファイルにフィールド名を追加して読み込
title = ['date', 'T(degC)', 'T_max', 'T_min', 'H(%RH)', 'H_max', 'H_min', 'P(hPa)', 'P_max', 'P_min']
thp_iida2d = pd.read_csv("thp_iida2d.csv",skiprows=1,header=None, names=title)
data24 = thp_iida2d.tail(24)
t_max24 = data24['T_max'].max()
t_min24 = data24['T_min'].min()
###########################################
# date, T_max 形式
max24=thp_iida2d[['date','T_max']]
max24=max24.tail(24)
maxdata = max24[max24.T_max==t_max24].max()   // max()でObject化
maxdata =['max',maxdata[0],maxdata[1]]

min24=thp_iida2d[['date','T_min']]
min24=min24.tail(24)
mindata = min24[min24.T_min==t_min24].min()   // min()でObject化
mindata =['min',mindata[0],mindata[1]]

###################################
#csv書き込み
f = open('max-min-iida24.csv','w')
w = csv.writer(f)
w.writerow(maxdata)
w.writerow(mindata)
f.close()
”max-min-iida24.csv”への書き込み内容：

max,2021-01-30 15:00,7.5
min,2021-01-30 06:00,-3.6

２、ホームページで表示するPHPプログラム作成
上記csvデータを読み込んで、ホームページに表示するPHPプログラムを、cocoon-master-childのフォルダーに入れ、固定ページ（HOME）からプログラムを呼び込む。

<?php
$csv_file = file_get_contents('*****/opendb/data/max-min-iida24.csv');
//変数を改行毎の配列に変換
$csv = explode("\n", $csv_file);
$ary = [];
foreach($csv as $key => $value){
//if($key == 0) continue; 1行目が見出しなど、取得したくない場合
if(!$value) continue; //空白行が含まれていたら除外
$ary[] = explode(",", $value);
}

// print_r($ary);
$tmaxdate = $ary[0][1];
$tmax = $ary[0][2];
$tmindate = $ary[1][1];
$tmin = $ary[1][2];

//html
echo ('<span class="tmax">最高</span>　'.$tmaxdate. '　　' . '<span class="tmax">' . $tmax . '</span> ℃<br>');
echo ('<span class="tmin">最低</span>　'.$tmindate. '　　' . '<span class="tmin">' . $tmin . '</span> ℃<br>');
?>

ドメイン設定、SSL設定

1、ドメイン設定
これまでは、さくらインターネットの「ユーザー名.sakura.ne.jp/フォルダ名」をサイトのアドレスにしていたが、SSL化も必要なことから、独自ドメインで表示するようにした。

手順：さくらインターネットからドメイン申し込む
ドメイン名：home-atmo.com
お名前.comなどでは1000円／年弱で申し込み可能だが、今後のサポートやホームページ設定の容易さを考えて、さくらインターネットで取得した（1886円／年）。申し込み後、数時間で取得利用可能となった。

２、Wordpress のサイトアドレスの変更
① http://miyasan.sakura.ne.jp/well　のバックアップ作成
万が一失敗してもサイトが復帰できるようにサイトデータをバックアップ
・well-backupフォルダ作成

②サイトURL変更
Wordpressのダッシュボード設定－一般画面に入り、サイトアドレスを下記のように変更

WordPress アドレス (URL) http://miyasan.sakura.ne.jp/well
サイトアドレス (URL) http://miyasan.sakura.ne.jp/well
↓
https://home-atmo.com

URL変更で再度ログイン画面のページに遷移するので、変更前と同じユーザパスワードで再ログインする。

③サイト内の旧ドメインアドレスを新しいドメインに置換する
プラグイン『Search Regex』を使って、サイト内の旧ドメインを新ドメインへに一括置換する

３、SSL設定
①SSL証明の取得
有料SSL証明もあるが、今回はさくらの旧コントロールパネルから無料SSL「Let’sencrypt」を選択し、上記のhome-atmo.comドメインにSSL設定をした。設定後、数時間で設定終了の通知とSSL証明内容が届いた。

②さくらのSSL化プラグインをインストール

ダッシュボードー設定－SAKURA SSLを選択。
このプラグインを有効化・設定すると「.htaccess」に下記のソースが書き込まれ、301リダイレクトの設定がされる。

# BEGIN Force SSL for SAKURA
# 常時HTTPS化(HTTPSが無効な場合リダイレクト)
<IfModule mod_rewrite.c>
RewriteEngine on
RewriteCond %{HTTPS} !on
RewriteRule .* https://%{HTTP_HOST}%{REQUEST_URI}[R=301,L]
</IfModule>
# END Force SSL for SAKURA

③微調整
SSLは難なく設定できたが、Firefoxで警告表示が出る。（ChromeはOK）
警告詳細を確認すると、タイトル画像に使っているレンゲツツジの写真の呼び込みが「http://」になっている。
https://miyasan.sakura.ne.jp/well/wp-content/uploads/2021/01/rengetutuji_wp.jpg
そこで、これを「https://」に替えたところ問題がなくなった。

以上、1月18日から取り組んだホームページのRenewalはひと段落。今後は昨年取り組む予定だった「カメラ画像の取り込み」の工作を進めたいが、腰痛がなかなか改善しないのでぼちぼち取り組むことにする。

コメント

タイトルとURLをコピーしました