Loading...
2025.大阪関西万博へ

出展事業者様をサポートしています

詳しく知る

360°パノラマツアーをGitHubのWebで動かす

パノラマ写真|バーチャルツアー|アットマイン・アイキャッチ パノラマVR/バーチャルツアー
パノラマ写真|バーチャルツアー|アットマイン・アイキャッチ

GITHUBのサービスですが、必要なったコードのネットワーク上のバックアップとして活用しています。
無料枠で非公開(プライベート設定)にできるなんてありがたい限りです。
そのGITHUBですが、確認用とは思うのですが、静的なWebsite(ホームページ)にすることもできるようです。
あ、便利そうだなーっと試してみることにした記事です。

GITHUBで自分のWeb(ホームページ)を立ち上げ

この辺は、詳しく書いて頂いているサイトがあるのでググって頂けると誰でもできると思います。
普通のレンタルサーバーを借りて、Wordpressを入れて・・・というような流れではありませんが、一応、HTMLやJSなどをアップロードできます。
それを、公開に設定することで誰にでも見せられるWeb(ホームページ)になる+ソースなども見ることができる(見られてしまう)ページとなるわけです。

課題というか、嫌なこと?

公開しないとダメということは、オリジナルのコードやプログラムを分かり易い形で見られてしまう。
何なら、コードも分かってしまうという点ですねー

そもそも、自由に公開できて・自由に使って貰えるコードを置く場所的なものです。

心が狭いと言われると、アレなのですが・・・
頑張って作っているコードが流用されたり、バレたりするのは、ちょっと嫌だったりします。
(もうちょっと、360°系が一般的なWeb制作みたいな仕事になればなぁと思います)

その部分は回避できる:嫌なこと

実は、使っているツールなのですが、いくつかのセキュリティーを設定することができます。
このセキュリティーを利用すれば、GITHUBをWebサーバーとして問題なく使うことも・・・

  • 主となるJSを動かせるドメインを決めることができる
    例えば、hoge.youというドメインに対して決め打ちだけではなく、
    me.hoge.youという上位に対しても決めることができるようです。
    つまり、フリーであるあるなレンタルサーバーでも頭の部分を決められるならアリということです。
  • コードを暗号化することができます
    これは、軽量化も兼ねているようなのですが、暗号化をかけることができます。
    ソースを復元させることは原則できません。
    (中華とかに怪しいツールはあるけど、絶対、やめた方が無難)
  • そのJSと暗号化したコードを紐づけることができます
    これですよ!これ!
    つまり、そのJSのライセンスを持っている人が暗号化をかけると、暗号化されたコードを持っていても、そのJSを持っていないと動かすことができません。
  • とどめは・・・
    で、そのJSは、ドメインでしか動かさない設定はもちろんですが、ドメインに入っていないと動かせないという設定まで決めることができます。(パソコンでは動かせない・違うドメインのサーバーでも動かせない)
    ちなみに、他のホームページに埋め込むことができないように設定もできたりしますー

つまり、GITHUBのWebをはじめ、その辺の無料ホームページでもディスクスペースがあって、JSが動かせるなら基本的には、制作した人しか分からない無敵のホームページが仕上がるわけです。

ただ、できることならURLは見せたくない

例えば、360°バーチャルツアーをホームページに埋め込むとき、URLを見せたくないなーっというのがあると思います。
一般的には、iframeというものを使います。
今回は、GITHUBのものなので、URLを見せたくないよなーっと思いました。
どうするのか?

っという分けで、これと同じようなエンコードをかけて・・

で、そのコードを、Chat GPTさんに書いて貰えば完成です!

GITHUBのWebに載せてみた360°パノラマツアー

という感じで、デモ制作をしてみた360°パノラマツアーがこちら(埋め込み)です。
うん、URLが分り難いというのもいいのかもしれませんね。

ツアーの主コードに暗号化はかけていませんが、外部のコードからホットスポット作るようにしています。
こうすれば、全部を暗号化する必要がなくなるので、各シーンの名前(360°パノラマ写真の名前)や視野角などを変更するときには・・・(あ、使いませんねー💧)

とは別に、新しいことができるのか?できないのか?を試しているところです。

暗号化というところや、他サーバーでは動かせないとか、GITHUBの使い方としては推奨すべきものではないと思いますが、このような使い方をやろうと思えばできる便利なツールということを知って頂けたら嬉しいなと思います。

コメント

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