お知らせ(2019-11-19): VirtualSkySlideShow (VSSS) の使用方法の最新版は、以下を参照してください。
ここから先の内容は VSSS v0.1.2 時点のもので最新版にはあてはまらない場合があります。
昨日のエントリで紹介したスライドショーですが、
使ってみたいという声もありましたのでスクリプトの使用方法を以下にまとめました。
概要
VirtualSkySlideShow (VSSS) は、JSON または JavaScript 形式で記述したスライドデータから写真のURLと被写体の座標等を読み込んでスライドショーを再生します。
JavaScript のセキュリティの関係でスクリプトの設置方法とスクリプトを読み込むページの設置場所、スライドデータの記述方法によって制限や注意点があります。
条件によっては正常に動作させることができないので、最初に「スクリプトの設置方法」「スライドデータの設置方法」「スクリプトの使用方法」を確認してから使用するかどうかを決めてください。
スクリプトの設置方法
スクリプトを自分で設置しない場合
僕のサーバー*1 に置いてあるスクリプトを直接利用する場合です。簡単ですがおすすめはしません。理由は、以下の通り。
- 僕に悪意があれば忘れた頃に悪意あるコードを紛れこませることができる。
- サーバーが負荷に弱いので大勢が使うと読み込めなくなる。
- 予告なくスクリプトの提供を停止する場合がある。
- 予告なくスクリプトをバージョンアップする場合がある。
以上を了承した上であまり負荷をかけない範囲で使用したい場合は、スクリプトの読み込み先に以下のURLを使用してください。
- stuquery.min.js: https://rna.sakura.ne.jp/share/scripts/stuquery.min.js
- virtualsky.min.js: https://rna.sakura.ne.jp/share/scripts/virtualsky.min.js
- vsss.min.js: https://rna.sakura.ne.jp/share/scripts/vsss.min.js
自分のサーバーにスクリプトを設置する場合
VirtualSky を含む一式を zip に固めたものを以下の場所に置きました。これをサーバー上の一か所のディレクトリ内に展開してください。
https://rna.sakura.ne.jp/share/VirtualSkySlideShow-0.1.0.ziphttps://rna.sakura.ne.jp/share/VirtualSkySlideShow-0.1.1.ziphttps://rna.sakura.ne.jp/share/VirtualSkySlideShow-0.1.2.zip- https://rna.sakura.ne.jp/share/VirtualSkySlideShow-0.2.0.zip
vsss.js/vsss.min.js がスライドショー実行プログラムです。その他は VSSS が利用しているプラネタリウム表示ソフト VirtualSky (https://github.com/slowe/VirtualSky) v0.7.4 のファイルです(virtualsky.js/virtualsky.min.js のみ少し手を加えています)。
使用方法が「ブログ等で使用する場合」に該当する場合は設置サーバーに後述のCORS設定が必要です(「自分のサーバー上のページで使用する場合」なら不要)。
CORS設定
VSSS および VirtualSky にはユーザーの作成したスライドデータやスクリプトに同梱された星図のデータを外部ファイルから読み込む処理があります。この種の JavaScript は、スクリプトを使用するページが置いてあるサーバーと、データの置いてあるサーバーが異なる場合、セキュリティ上の理由でデータの読み込みに失敗して正常に動作しなくなります。
これを回避するためには、データ(あるいはデータを含んだスクリプト一式)を設置するサーバーにCORS(Cross-Origin Resource Sharing: オリジン間リソース共有)設定が必要です。ただし、レンタルサーバーの場合、この設定ができない環境もあります。
サーバーの Web サーバーが Apache の場合、VSSS のスクリプト一式およびJSON形式のスライドデータファイルが設置されたディレクトリ(またはその親ディレクトリ)の .htaccess ファイルに以下の設定を追加します。
Header set Access-Control-Allow-Origin: "*"
特定のサーバー上のページからのみ読み込みを許可したい場合は以下のように設定します。
Header set Access-Control-Allow-Origin: "https://your-blog-site.example.com"
レンタルサーバーでは .htaccess で Header 設定が使用が許可されていないためにCORS設定ができない場合があります。
CORS設定はスクリプトを設置する前に済ませておくことをおすすめします。設定前にブラウザがスクリプトが読み込んでしまうと、ブラウザのキャッシュを消さないとCORS設定が反映されないため面倒なことになります。
スクリプトの使用方法
ブログ等で使用する場合
まず、ブログ等のWebサービス上で VSSS を利用する場合は、まずそのサービスで任意の JavaScript が実行が可能かどうか確認してください。
ブログ等で使用する場合は、スクリプトの設置サーバーと使用するサーバー(スクリプトを読み込むページのあるサーバー＝ブログサービスのサーバー)が異なるため設置サーバー側でCORS設定が必要になります。*2
スライドデータは JavaScript 形式のものを埋め込むか、やはりCORS設定したサーバー(通常はスクリプトの設置サーバーと同じサーバー)に設置します。
自分のサーバー上のページで使用する場合
自分のサーバー上のページで VSSS を使用する場合は、同じサーバーにスクリプトを設置すればCORS設定なしで動作します。
スクリプトの読み込み方
スクリプトの設置先が https://your-server.example.com/vsss/ である場合、スクリプトを読み込む HTML コードは以下のようになります。
<script src="https://your-server.example.com/vsss/stuquery.min.js" type="text/javascript"></script> <script src="https://your-server.example.com/vsss/virtualsky.min.js" type="text/javascript"></script> <script src="https://your-server.example.com/vsss/vsss.min.js" type="text/javascript"></script>
スクリプト実行コードの書き方
スライドショーを実行するコードはスライドデータの形式によって異なります。
JSON形式のスライドデータを使用する場合
以下は 800x800 の表示領域に、https://your-server.example.com/data/your-slide.json に置いたJSON形式のスライドデータを表示するコードです。
<div id="starmap" style="width:800px;height:800px;"></div> <script type="text/javascript"> var ss; S(document).ready(function() { ss = new VirtualSkySlideShow({ id: 'starmap', url: 'https://your-server.example.com/data/your-slide.json', latitude: 35.4943963, longitude: 139.525167, datelocale: 'ja-JP' }); }); </script>
- 表示領域用の div 要素に id を振ります(ここでは starmap)。
- 表示領域のサイズは div 要素の style 属性で指定します。
- VirtualSkySlideShow() の引数のオブジェクトに以下のプロパティを指定します。
VirtualSkySlideShow() の引数のオブジェクトには他にも VirtualSky() の引数と共通するプロパティを指定できます。ただし projection プロパティだけは指定しないでください。詳細は https://github.com/slowe/VirtualSky/blob/gh-pages/virtualsky.js の冒頭のコメントの OPTIONS を参照してください。
同じページに複数のスライドショーを貼る場合は、上のようなコードをスライドショー毎に貼ります。表示領域用の div 要素の id (と、それを指定するプロパティ)は、スライドショー毎にユニークな値に変更します。
JavaScript形式のスライドデータを使用する場合
https://your-server.example.com/data/your-slide.js に置いたJavaScript形式のスライドデータを表示するコードは以下のようになります。
<div id="starmap" style="width:800px;height:800px;"></div> <script type="text/javascript"> var ss; var data; function callback(obj) { data = obj; } S(document).ready(function() { ss = new VirtualSkySlideShow({ id: 'starmap', data: data, latitude: 35.4943963, longitude: 139.525167, datelocale: 'ja-JP' }); }); </script> <script src="https://your-server.example.com/data/your-slide.js" type="text/javascript"></script>
スクリプトに callback 関数が追加され、コードの最後でスライドデータをJavaScriptとして読み込んでいます。VirtualSkySlideShow() の引数のオブジェクトのプロパティは、url がなくなってかわりに data が指定されています。他はJSON形式と同様です。
注意: 他人のスライドデータを利用する場合
自分の作ったスライドデータではなく他人の作ったスライドデータを他人の管理するサーバーから読み込んで利用する場合は JavaScript 形式のスライドデータは使用しないでください。
JavaScript 形式のスライドデータはスライドショーを表示するサイト上で JavaScript として実行されるため、後からスライドデータが悪意のあるコードに書き換えられると危険です。
スライドデータをページ内に埋め込む場合
スクリプトやデータを置くサーバーがない場合は、僕のサーバーからスクリプトを読み込むことになりますが、スライドデータはページ内のコードに埋め込むことになります。その場合のスライド表示コードは以下のようになります
<div id="starmap" style="width:800px;height:800px;"></div> <script type="text/javascript"> var ss; var data = { "config" : { "date": "2017-10-01T00:00:00+09:00", "latitude": 35.4943963, "longitude": 139.525167, "az": 180, "spin_duration" : 1500, "pan_duration" : 500, "stop_duration" : 1000, "image_duration" : 5000 }, "slides" : [ { "date": "2017-10-26T01:40:00+09:00", "ra": "05h 35m 17.3s", "dec": "-05° 23′ 28″", "image": "https://live.staticflickr.com/4505/24115433588_a9612b9b3c_c.jpg", "label": "M42" }, { "date": "2017-11-01T18:24:00+09:00", "planet": "Moon", "image": "https://live.staticflickr.com/4493/37379606344_25889b7a72_c.jpg", "label": "月齢12.6" } ] }; S(document).ready(function() { ss = new VirtualSkySlideShow({ id: 'starmap', data: data, latitude: 35.4943963, longitude: 139.525167, datelocale: 'ja-JP' }); }); </script>
変数 data に JavaScript のオブジェクトとしてデータを記述しています。データの書式はJSON形式と同様です。
スライドデータの書き方
JSON 形式
以下はJSON形式のスライドデータの例です。
{ "config" : { "date": "2017-10-01T00:00:00+09:00", "latitude": 35.4943963, "longitude": 139.525167, "az": 180, "spin_duration" : 1500, "pan_duration" : 500, "stop_duration" : 1000, "image_duration" : 5000 }, "slides" : [ { "date": "2017-10-26T01:40:00+09:00", "ra": "05h 35m 17.3s", "dec": "-05° 23′ 28″", "image": "https://live.staticflickr.com/4505/24115433588_a9612b9b3c_c.jpg", "label": "M42" }, { "date": "2017-11-01T18:24:00+09:00", "planet": "Moon", "image": "https://live.staticflickr.com/4493/37379606344_25889b7a72_c.jpg", "label": "月齢12.6" } ] }
JavaScript 形式
以下はJavaScript形式のスライドデータの例です。
callback({ "config" : { "date": "2017-10-01T00:00:00+09:00", "latitude: 35.4943963, "longitude": 139.525167, "az": 180, "spin_duration" : 1500, "pan_duration" : 500, "stop_duration" : 1000, "image_duration" : 5000 }, "slides" : [ { "date": "2017-10-26T01:40:00+09:00", "ra": "05h 35m 17.3s", "dec": "-05° 23′ 28″", "image": "https://live.staticflickr.com/4505/24115433588_a9612b9b3c_c.jpg", "label": "M42" }, { "date": "2017-11-01T18:24:00+09:00", "planet": "Moon", "image": "https://live.staticflickr.com/4493/37379606344_25889b7a72_c.jpg", "label": "月齢12.6" } ] })
全体を "callback(" と ")" で括る以外はJSON形式と同じです。
スライドデータの書式
n 個のスライドを含むスライドデータの全体構造は以下のようになっています。
{ "config" : { (スライドショーの設定) }, "slides" : [ { (スライド1の設定) }, { (スライド2の設定) }, ... { (スライドnの設定) } ] }
スライドショーの設定
"config" オブジェクトにはスライドショー全体の設定を記述します。
例:
"config" : { "date": "2017-10-01T00:00:00+09:00", "latitude: 35.4943963, "longitude": 139.525167, "az": 180, "spin_duration" : 1500, "pan_duration" : 500, "stop_duration" : 1000, "image_duration" : 5000 }
各設定値の意味と書式は以下の通りです。
- "date" : スライド開始時に最初にプラネタリウムに表示する星空の日付時刻です。ISO形式で指定します。例: 2017-10-01T00:00:00+09:00 は日本時間(標準時から+9時間差)の2017年10月1日0時0分0秒。
- "latitude" : 観測地の緯度です。数値で指定します。
- "longitude" : 観測地の経度です。数値で指定します。
- "az" : スライド開始時に最初にプラネタリウムに表示する星空の方位です。数値で指定します。0 は北、90 が東、180 が南、270 が西です。
- "spin_duration" : 次のスライドを表示する前にプラネタリウムの表示時刻を変化させるのにかかる時間(星空が日周運動で回転する時間)です。ミリ秒単位の数値を指定します。
- "pan_duration" : 次のスライドを表示する前にプラネタリウムに表示する星空の方位を変化させるのにかかる時間です。ミリ秒単位の数値を指定します。
- "stop_duration" : spin と pan が終わった後スライドを表示するまでの待ち時間です。ミリ秒単位の数値を指定します。
- "image_duration" : スライド画像を表示する時間です。ミリ秒単位の数値を指定します。
スライドの設定
スライドオブジェクト("slides" 配列の要素)には各スライドの設定を記述します。
以下は被写体が月、太陽、惑星の場合の記述例です。
{ "date": "2017-11-01T18:24:00+09:00", "planet": "Moon", "image": "https://live.staticflickr.com/4493/37379606344_25889b7a72_c.jpg", "label": "月齢12.6" }
各設定値の意味と書式は以下の通りです。
- "date" : 撮影日時です。書式は "config" の "date" と共通です。
- "planet" : 太陽系の天体の名前です。太陽は "Sun"、月は "Moon"、水星は "Mercury"、金星は "Venus"、火星は "Mars"、木星は "Jupiter"、土星は "Saturn"、天王星は "Uranus"、海王星は "Neptune" を指定します(大文字小文字を区別します)。
- "image" : 写真の画像ファイルのURLです。文字列で指定します。
- "label" : プラネタリウム上のマークに表示するラベル文字列です。
以下は被写体が月、太陽、惑星以外の天体の場合の記述例です。
{ "date": "2017-10-26T01:40:00+09:00", "ra": "05h 35m 17.3s", "dec": "-05° 23′ 28″", "image": "https://live.staticflickr.com/4505/24115433588_a9612b9b3c_c.jpg", "label": "M42" }
各設定値の意味と書式は以下の通りです。
- "ra" : 対象天体の赤経です。時分秒形式の文字列で指定します。例: "05h 35m 17.3s" は赤経5時35分17.3秒。
- "dec" : 対象天体の赤緯です。度分秒形式の文字列で指定します。例: "-05° 23′ 28″" は赤緯マイナス5度23分28秒。*3
その他は月、太陽、惑星の場合と同様です。
Q&A
- Q: 星座線が表示されません。
- A: 星座線データが読み込めていません。スクリプトの設置サーバーにCORS設定が必要です。
- Q: スライドショーが始まりません。
- A: 以下を確認してください。
- JSON形式のスライドデータの場合、スライドデータの設置サーバーにCORS設定が必要です。
- スライドデータの書式がJSONまたはJavaScriptの文法を違反している場合はスライドショーは実行されません。カンマの抜けや余分なカンマ等でエラーになりやすいので注意してください。
- A: 以下を確認してください。
- Q: プラネタリウム上に被写体のマークが表示されません。
- A: スライドの時刻("date")または座標("ra", "dec")が間違っていると被写体の天体が地平線以下に位置してしまい画面上にマークが表示されない場合があります。
