na-blog

〇VR画像表示のしくみ
このブログの仕様に合わせて,下記の方法で表示確認。苦肉の策なので,まだ改良余地があるとは思うが・・・

ファイル配置
www--------blog
　　　　　|
　　　　　|--Virtual Realityフォルダー
　　　　　　　　　|
　　　　　　　　　|--vr個別表示1--index.html
　　　　　　　　　|　　
　　　　　　　　　┋　表示画像分作成　(Google VR View又はa-frame用)
　　　　　　　　　|
　　　　　　　　　|--vr個別表示n--index.html
　　　　　　　　　|
　　　　　　　　　|--vrview-gh-pages　　(Google VR Viewダウンロードファイル)
　　　　　　　　　|
　　　　　　　　　|--a-frame　　(a-frameダウンロードファイル)
　　　　　　　　　|
　　　　　　　　　|--pannellum (pannellumダウンロードファイル)
　　　　　　　　　|
　　　　　　　　　|--image (vr画像)

①Google VR View　　vr個別表示フォルダーを作成し,index.htmlを配置。ブログにiflameで埋め込み。　　　　注)"<_" スペース有り

index.html　　　8,19,22は自環境に修正。22はプレビューなので削除しても良い。

< !DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
< html>
< head>
< META http-equiv="Content-Type" content="text/html; charset=Shift_JIS">
< META http-equiv="Content-Style-Type" content="text/css">
< title>VR< /title>
< !-- VR Viewのスクリプトを読み込み -->
< script src="https://hoge.com/vrview-gh-pages/build/vrview.min.js">
< /head>
 
< BODY>
< !-- VRコンテンツを表示するためのプレースホルダを準備 -->
< div id="vrview">< /div>
< !-- VR Viewプレイヤーを起動（インスタンス化） -->
< script>
window.addEventListener('load', onVrViewLoad);
function onVrViewLoad() {
  var vrView = new VRView.Player('#vrview', {
    image: '../image/vr画像.JPG',
                width: 600,
                height: 400,
                preview: '../image/vr画像.JPG',
                is_autopan_off:false
  });
}
< /script>
< /BODY>
< /html>

　　ブログ内iflame　　　パスを修正

< iframe width="700" height="500" src="https://hoge.com/vr個別表示フォルダー/" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture">< /iframe>

②a-frame　　vr個別表示フォルダーを作成し,index.htmlを配置。ブログにiflameで埋め込み
　　index.html　　　8,14を自環境に修正

< !DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
< html>
< head>
< META http-equiv="Content-Type" content="text/html; charset=Shift_JIS">
< META http-equiv="Content-Style-Type" content="text/css">
< title>VR< /title>
< !-- A-FRAMEのスクリプトを読み込み -->
< script src="https://hoge.com/a-frame/aframe.min.js">
< /head>
 
< BODY>
< !-- MozillaのA-Frame -->
< a-scene>
    < a-sky src="https://hoge.com/image/vr画像.JPG">
< /a-scene>
< /BODY>
< /html>

　　ブログ内iflame　　　パスを修正

< iframe width="600" height="400" src="https://hoge.com/vr個別表示フォルダー/" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture">< /iframe>

③Pannellum　　ブログに直接iflameで埋め込み　　　パスを修正

< iframe width="600" height="400" allowfullscreen style="border-style:none;" src="https://hoge.com/pannellum/pannellum.htm#panorama=https://hoge.com/image/vr画像.JPG&autoLoad=true&autoRotate=-2">< /iframe>

①Google VR Viewと②a-frameは,htmlファイルを作成する余計な手順が必要なので,使用頻度は少ないと思う。③Pannellumは今のところベスト!
　　

https化後の360度画像の表示検証

・外部サービスに依存しない方法は下記の3通り
　　①Google VR View
　　・セキュリティの関係で、httpの環境では表示されない。一部の環境からはhttpsでも表示不可。
　　・グーグルホスト型VR Viewを使う場合は、画像を置くサーバーがCORS（Cross-Origin Resource Sharing）をサポートしていることも必要。
　　・スマホのジャイロセンサーに敏感に反応して見れる画像ではない。

　　②a-frame
　　　IE以外で表示可能。画面移動が反対。ジャイロセンサー対応

　　③Pannellum
　　　全てのブラウザで無条件で表示可能。ジャイロセンサー連動on-off可能。初期画面で自動回転可能。この中では一番安定している。


比較する為,同じ画像を表示
①Google VR View

②a-frame



③Pannellum



【参考】外部サービスを使用する方法
①RICHO THETA
②ハコスコストア
③WordPressのプラグイン

今月に入ってから，暇を見つけてコツコツ修正作業をしてきましたが,
ようやくサーバーをSSL/TLS化することが出来ました。
全てのリンクを確認していませんが，ほぼ動くようです。
不具合が出たら,その都度修正します。

サーバー証明書



導入のメモを残しました。
https://na-3.com/na-blog/html/art/00343.html

webサーバーの機能では,httpsでないと正常動作しない条件があります。360°パノラマ画像の表示機能の一部(※)にも見られるようで,当サイトもSSL/TLSの導入を検討します。
時代の流れでもあり良い機会なので,久しぶりにサーバー設定を変更します。
(※ Google VR Viewでの表示やジャイロセンサー機能)

手順等を忘れ防止で記載

手順
①Apacheのアップデート
　　現在使用中のバージョンはかなり古い2.4.9-win64のため最新の2.4.46-win64にアップデートします。
　　ダウンロードファイル:httpd-2.4.46-win64-VS16.zip 「02 Oct '20 10.323k」
　　下記サイトよりダウンロードします。
　　Apache Lounge

②・VS16：Visual Studio C++ 2019 インストール
　　最新版のhttpd-2.4.46-win64で必要　
　　下記サイトよりダウンロードします。
　　最新のサポートされる Visual C++ のダウンロード

③サーバー証明書取得
　サーバー証明書は有料のものは,高額(数万円)なので,なるべくコストを抑えたい。
　「Let’s Encrypt」が無料で導入も簡単で信頼できるようです。
　　現在使用中のサーバーは,Windows－Apache 環境なのでApacheの機能
「Apache Module mod_md」を使用した導入が簡単そうです。この機能はApache 2.4.30 以降で利用可能。
参考:Let's Encrypt 総合ポータル

④リダイレクト処理
　サイト内の絶対パスのリンクをhttpsに書き換え(一括書き換えツール使用で今後wwwなし)
　ルートに“.htaccess”ファイルを配置(ブログルートのみでサイト全体は今後対応)

※とりあえずテストサーバー機に導入・テストしてから,本番機に導入したいと思います。
導入経過メモ
2020/12/05
テスト機にVisual Studio C++ 2019 インストールとApacheのアップデートは完了。
サーバー証明書取得で手こずる。フェイクの証明書発行はされたが,443ポートに外部からアクセスできない現象が発生し,アクセス拒否されてるメッセージが表示。
本番証明書発行もされたようだが,アクセス拒否。ルーターのポート443は解放してサーバーにipマスカレードで接続設定したつもり。サーバーのパーミッションにより拒否されているとかのメッセージが表示されているが,windowsなのでたぶん大丈夫なはず。なんだろう......

2020/12/07
「SSL 経由で接続するとページを表示できない」 この現象に似ている。ポート80では表示できる。
要約するとwindowsのIISの証明書にバインドされていて,本来のLet's Encrypt発行の証明書が使われないとなるのか。サーバー導入時にIISを一時的に動作させたことがあり,その際の証明書が残っていて,現在はIISのサービスを停止しているが,証明書はその当時のもを使用するので,アクセス拒否なのかと。
IISの証明書を削除すれば解決するのか。やってみよう。

2020/12/08
IISの証明書を削除した。がまだアクセスできない。ん!待てよ。ルーターのポート開放?
久しぶりにルーターの設定を触ったので勘違した。ファイヤーウォールのポート開放の画面で設定していた。別画面のipマスカレード画面で設定しないとダメな単純ミスだった。外から443ポート開放確認できた。
しかしfakeは発行されるが，本番はエラー

Missing parameter for the specified command line option: acme problem urn:ietf:params:acme:error:rateLimited: Error creating new order :: too many certificates already issued for exact set of domains: hoge.com: see https://letsencrypt.org/docs/rate-limits/
Missing parameter for the specified command line option: AH10056: processing hoge.com: Error creating new order :: too many certificates already issued for exact set of domains: hoge.com: see https://letsencrypt.org/docs/rate-limits/

rate-limits　一定の回数を超えたか？

MDCAChallenges http-01 を指定していたので,80ポートでLet’s Encryptからアクセスされて証明書が発行されていたようだ。 TLS-ALPN-01を指定すれば443ポートでチャレンジされる。逆に言えば80を閉じて443だけで証明書取得が可能と言うことか。サイトの運用次第ではあり得る。
https://letsencrypt.org/ja/docs/allow-port-80/
本番証明書エラーは今まで何度もconfを書き換えて,いろいろ試していたので制限に達したようだ。
https://letsencrypt.org/ja/docs/rate-limits/
https://crt.sh/で検索したら10回発行されていた。10÷2(Pre・Leaf)=5回複製? ん～　何だか制限が複雑なようで1週間待ってみることにする。ちなみにIISの証明書については,当初のエラーには関係していないが,ポート開放後に原因となった可能性あり。削除したので検証できない。

2020/12/12
最初の証明書取得(12/5)から１週間経過。テスト機で本番証明書取得に成功した。しかしリダイレクト処理とサイト内のリンクの書き換えをしないと，httpsで接続できない。今考えると，12/5の時点でmdフォルダーをコピーして証明書を残しておけば良かった。

2020/12/13
リダイレクトする際にURLの正規化も考慮する必要がある。今まであまり考えていなかったが，なるべく短いURLとしたいのでWWWなし，index.htmlなしで検討する。
テスト機でほぼSSL/TLS化の導入・動作試験が完了し，本番機への導入の目処が付いたので，本番機の作業に取り掛かる。
リンクの変換は,テスト機でざっくり確認したので無条件で,
"http://"→"https://" ，"://www.na-3."→"://na-3."に変換することにした。業務に使っているサイトではそうは行かないが，個人のサイトでもあり厳密に確認作業は行わない。

---

SSL/TLS化修正箇所
httpd.conf,httpd-ssl.conf,httpd-vhosts.confの修正必要。httpd.confにまとめて記入すれば1ファイルになりIncludeも必要なくなるが,今回はサブファイルを使用した。
他にサーバー安定化対策やPHP等で追加修正した箇所を新バージョンファイルにも追加修正する。

今回のSSL/TLS化による変更箇所をメモ(Google Code Prettifyを使ってみた)
タグ表示文字はエスケープが必要なため変換
"&"　→　"&amp;"　　,　　"<"　→　"&lt;"　　,　　">"　→　"&gt;"
"<"は文字の後ろに空白挿入"&lt;_"しないと表示されない。このブログの仕様でソースをhtml化する際に逆エスケープして元の文字に戻しているようです。
コピペの際は<の右の空白削除

・httpd.confの修正・追加箇所
行番号1～6,9,12はアンコメント,14～26は新規追加,23はfake証明書用,24は本番証明書用
新規追加の14～26はSSL関係なのでhttpd-ssl.confの最後に入れてSSLの機能をまとめることで,試験導入時にSSL機能のON-OFFをInclude文の1行で変更できる。今度そうしよう。

LoadModule md_module modules/mod_md.so
LoadModule rewrite_module modules/mod_rewrite.so
LoadModule socache_shmcb_module modules/mod_socache_shmcb.so
LoadModule ssl_module modules/mod_ssl.so
LoadModule vhost_alias_module modules/mod_vhost_alias.so
LoadModule watchdog_module modules/mod_watchdog.so

# Virtual hosts
Include conf/extra/httpd-vhosts.conf

# Secure (SSL/TLS) connections
Include conf/extra/httpd-ssl.conf

< IfModule md_module>
MDBaseServer            off
MDCertificateProtocol   ACME
MDCAChallenges          http-01 tls-alpn-01
MDRenewMode             auto 
MDPrivateKeys           RSA 2048
MDRenewWindow           33%
MDStoreDir              md

MDCertificateAuthority https://acme-staging-v02.api.letsencrypt.org/directory
#MDCertificateAuthority  https://acme-v02.api.letsencrypt.org/directory
MDCertificateAgreement  https://letsencrypt.org/documents/LE-SA-v1.2-November-15-2017.pdf
< /IfModule>

・httpd-ssl.confの修正・追加箇所
行番号1は追加し自ドメイン記入,4～9は自環境に修正,15,19はコメントアウト

MDomain hoge.com
< VirtualHost _default_:443>
#   General setup for the virtual host
DocumentRoot "D:/www/public_html"
ServerName hoge.com
ServerAlias www.hoge.com
ServerAdmin webmaster@hoge.com
ErrorLog "${SRVROOT}/logs/error.log"
TransferLog "${SRVROOT}/logs/access.log"
 
#   SSL Engine Switch:
#   Enable/Disable SSL for this virtual host.
SSLEngine on

#SSLCertificateFile "${SRVROOT}/conf/server.crt"
#SSLCertificateFile "${SRVROOT}/conf/server-dsa.crt"
#SSLCertificateFile "${SRVROOT}/conf/server-ecc.crt"

#SSLCertificateKeyFile "${SRVROOT}/conf/server.key"
#SSLCertificateKeyFile "${SRVROOT}/conf/server-dsa.key"
#SSLCertificateKeyFile "${SRVROOT}/conf/server-ecc.key"

・httpd-vhosts.confの修正・追加箇所
行番号2～7は自環境に修正,10～16はコメントアウト

< VirtualHost *:80>
    ServerAdmin webmaster@hoge.com
    DocumentRoot "D:/www/public_html"
    ServerName hoge.com
    ServerAlias www.hoge.com
    ErrorLog "${SRVROOT}/logs/error.log"
    CustomLog "${SRVROOT}/logs/access.log" common
< /VirtualHost>

#< VirtualHost *:80>
#    ServerAdmin webmaster@dummy-host2.example.com
#    DocumentRoot "${SRVROOT}/docs/dummy-host2.example.com"
#    ServerName dummy-host2.example.com
#    ErrorLog "logs/dummy-host2.example.com-error.log"
#    CustomLog "logs/dummy-host2.example.com-access.log" common
#< /VirtualHost>

・.htaccessによるリダイレクト　　(blogのルートに配置)
行番号7は自環境に修正

< IfModule mod_rewrite.c>
RewriteEngine On
RewriteBase /
# http又はwww有りの場合、https://hoge.com/blog/にリダイレクト
RewriteCond %{HTTPS} off [OR]
RewriteCond %{HTTP_HOST} ^www\. [NC]
RewriteRule ^(.*)$ https://hoge.com/blog/$1 [R=301,L]
< /IfModule>
DirectoryIndex index.html

2020/12/13
すったもんだしたが,何とかhttpsでアクセス出来るようになった。
このブログもだいぶん使ってきたが,そろそろバージョンアップも考えていく時期なのかも。
でもこのブログは広告が入らないところが魅力でいいんですよね。
WordPress（ワードプレス）が人気のようなので,試験導入でもしてみるか。

DynamicDNSサービスを利用して,自宅サーバーを公開していますが,本日午後からアクセス不能になりました。
理由は1週間以上IP更新が無かったのでエラーサイトへ誘導されたようです。

DDNSはMyDNSを利用し,更新ツールはDiCEを使用しています。
DiCEの更新設定はIPアドレス変化時と変化がないとき7日毎にしていましたが,定期更新に失敗していたようです。
一度失敗すると,IPアドレス変化が無いときは,7日後の更新となり,1週間以上IP更新が無かったのでエラーサイトへ誘導されたようです。

MyDNSは他のサービスより厳しく,更新が1週間以上無しで事前にメールで知らせてDNS情報の生成を停止するのですが,メールを見過ごしていました。
DiCEは最短更新が7日で一度更新を失敗すると次は7日後の更新となるので,今回のような事が発生します。過去にも何度か起こっています。
よって対策として毎日再起動で,DiCEの更新設定を起動時更新としました。ただしIPアドレス変化時に更新されず,次の再起動時までアクセス不能となるので,別途更新ツールを併用することにしました。
併用する更新ツールはDeNSukeにして,IPアドレス変化時の更新を担ってもらいます。
これで,しばらく様子を見てみたいと思います。