Xserver上でHTML+CSS+Javascriptを動作させる方法

WordPress
スポンサーリンク

 

以前から開発しているポケモン努力値調整ツールですが」という枕詞で始めている記事が溜まり溜まって、

「んで、いつ完成するんや?」

という疑問を持たれていると思われる今日この頃。

 

ようやく、ようやく完成しました!

※素早さ努力値調整ツールのみですが

こ~んな感じです。

 

ですが、実際の開発環境は全てローカルにあるため、このツールをグローバルでアクセスできるいずれかのサーバにのっけないといけない。

この前申し込みして構築したさくらVPSにのせても良いのですが、折角HTTPSが使える、そしてドメインが使えるこのWordPressサイト(通称ばちブロ)があるのだから、このサーバで動作させればよいじゃん。

というわけで、今回はWordPressにてHTML+CSS+javascriptを動作させるように試行錯誤してみました。

 

スポンサーリンク

環境

  • レンタルサーバ :Xserver
  • 使用テーマ   :Cocoon(子テーマ導入済み)
  • WPバージョン :5.3.2

レンタルサーバは有名なXserver

非常に快適に利用できているので、これからWPサイトを立ち上げたいという方には非常にオススメ。

月額1000円とまあリーズナブルですし。

なんか宣伝みたいになってしまった。

使用テーマはCocoon

こちらも使いやすくて複雑なカスタマイズも必要なく、直感的に使用できるのでお勧めです。

なんか宣伝みたいになってしまった。

 

目的

導入でもお話しましたが、作成した.htmlファイル+.css+.jsをグローバル経由でアクセスできるようにしたい。

そのために、すでに存在するサイト(ばちブロ)を使用したい。

具体的には

https://gametech.vatch.com/〇〇/tool.html

みたいな感じでアクセスできるようにしたい。

 

htmlファイルの構成

さて、サーバに乗っけたいhtml及びcss,jsのフォルダ構成ですが、

一番上

cssの下

jsの下

こんな感じです。

speed-calc.html
css
 ∟ speed-calc.css
js
 ∟ calcSpeed.js

speed-calc.htmlの中に以下の記載があります。

<link rel="stylesheet" type="text/css" href="css/speed-calc.css">
中略
<script src="js/calcSpeed.js" charset="UTF-8"></script>

これにより、相対パスでそれぞれのcssファイル、jsファイルを読み込んでいます。

 

手順

ファイルを配置するディレクトリを確認する

まずはどこにファイルを配置するか。

もちろん、外部からアクセスできるところに配置しないといけないのですが、それがどこなのかを調べないといけません。

そこで注目するのがstyle.cssというcssファイル。

WordPressを使用しているのであれば、おそらく絶対に読み込まれているこのファイル。

このファイルがある場所に配置しておけば間違いないだろう、ということでそのファイルの場所を検索します。

Cocoonの場合は以下にありました。

/[ドメイン名]/public_html/[CNAME]/wp-content/themes/cocoon-child-master/style.css

じゃあ、ここに配置すれば取り合えずはhttpで取得できるようになるでしょう。

 

ファイルを置く

Xserverのレンタルサーバ上へファイルを配置する方法はいくつかありますが、今回は最もベーシックな方法(だと思われる)である、管理GUIからのファイル転送を利用します。

というわけで、まずはXserverの管理画面にログイン。

そして「ファイル管理」を開きます。

すると、サーバ内のファイルにアクセスできるようになります。

 

フォルダ階層を進んでいき、お目当てのディレクトリまで移動したあと、htmlファイル等をアップロードします。

今回は、「pktool」というディレクトリを作成して、その中にhtmlやら何やらを格納しました。

これで外部からのアクセスができるようになったはずです。

 

アクセスして確認

アクセスしてみる。

まずはどういうURLを入力すればアクセスできるかを調べる必要がありますが、上記した通りstyle.cssというファイルと同じ階層(正確にはpktoolというディレクトリを挟むが)に配置したので、style.cssを取得するときのURLが分かればよいです。

ChromeのDEVツール等を駆使してstyle.cssを取得するときのURLを調べてみると、以下であると分かりました。

[h]ttps://gametech.vatchlog.com/wp-content/themes/cocoon-child-master/style.css

ので、以下にアクセスしたらよいはず。

[h]ttps://gametech.vatchlog.com/wp-content/themes/cocoon-child-master/pktool/speed-calc.html

おお~~~

まとめ

  • Xserver上で自作したhtmlやjavascriptを動かすことは可能。
  • 多分.htaccessをいじることでアクセスできるディレクトリをいじることも可能

 

ちなみに

上記で配置した素早さ努力値調整ツールですが、使用できません。

なぜなら、こんなエラーが発生してしまったから。

calcSpeed.js:1188 Mixed Content: The page at 'https://gametech.vatchlog.com/wp-content/themes/cocoon-child-master/pktool/speed-calc.html' was loaded over HTTPS, but requested an insecure XMLHttpRequest endpoint 'http://***.***.***.***:***/calc-speed'. This request has been blocked; the content must be served over HTTPS.

要約すると、

httpsでアクセスしてるファイルからhttpで別ファイルを取ろうとするなよ!

ってことらしいです。

つまり、さくらVPSにて動作している努力値計算APIについても、httpsでアクセスできるようにする必要があるようです。

・・・結局さくらVPS側にもドメインと証明書が必要やんけ!

ツールの公開はもうちょいかかりそうです・・・

※現在は以上のページについて、ファイルごと消しているのでアクセスできません。

コメント

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