iframeで星図を埋め込む

English

ブログ、Wiki、CMSなど、自分のスクリプトを動かせないページのために、デモサイトにembed.htmlがあります。アドレスが求める星図だけを描くページです。

<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <title>Hoshi Stars in an iframe</title>
  </head>
  <body>
    <iframe
      src="https://johnmorrisdotca.github.io/hoshi-stars/embed.html?proj=stereographic&ra=84&dec=0&zoom=1.5&mag=5&layers=lines,names&c=Ori"
      title="A chart of the sky around Orion"
      width="480"
      height="360"
      loading="lazy"
      style="border: 0"
    ></iframe>
  </body>
</html>

星図は枠いっぱいに広がり、枠の大きさが変わると描き直します。自分のファイル以外は何も読み込みません。星図はいつも夜空の色なので、ライトとダークの違いはありません。

見る人は星図を動かせます。ドラッグで星空を回し、ピンチ、またはCtrl（MacではCommand）キーを押しながらホイールで拡大します。枠にフォーカスがあるときは+、-、矢印キー、0も使え、3つのボタン（拡大、縮小、最初に戻す）もあります。開いた直後の大きさではホイールが枠の後ろのページをスクロールし、拡大したあとは星空を動かします。見ている位置（ra、dec、zoom）は、動かすたびにこのページ自身のアドレスに書き戻されます。拡大は0.1（空全体の小さな姿）から500（デスクトップ幅の枠で幅約0.7度。肉眼で見える星のカタログが見せられるのはここまで）です。

アドレス

デモの「ページに入れる」のパネルは、いま見ている星図のアドレスとiframeタグを書き出します。

使わないほうがよいとき

iframeは外からスタイルを変えられず、リクエストも1つ増えます。スクリプトを動かせるなら、自分で星図を描くほうが簡単です。数行で、ページも1つ少なくなります。