目的
自作のhtmlコードをwebサーバとして公開する方法に関する備忘録です
準備
以下を参考に、無料枠で使えるHTMLサーバー機能を用意します。
以下を参考に、何かしらの機能をhtml/javascriptで実装してローカルで確認します。
更新ボタンを押したら、「A と、見せかけてB」の文字列がランダムに更新されるようなWebサーバをjavascriptを使って作成してみる
コード
まず、公開webサーバにアクセスしてindex.htmlの内容が表示されることを確認します。今回はxfreeのHTML機能を利用します。
その後、index.htmlと同じフォルダへ、
実装したファイルを追加/上書きします。
追加/上書きは、今回はxfreeのファイルマネージャを利用しました。
フォルダ構成
(全て同じフォルダ)
./
index.html
to-misekakete.html
sample.js
index.html
<html lang="ja">
<head>
<meta charset="utf-8">
<title>Sample</title>
</head>
<body>
<h1>sample</h1>
<p>
<a href="to-misekakete.html">と、見せかけて</a>
</p>
</body>
</html>
to-misekakete.html
<html lang="ja">
<head>
<meta charset="utf-8">
<title>Sample</title>
</head>
<body>
<h1>sample</h1>
<p>
<a href="to-misekakete.html">と、見せかけて</a>
</p>
</body>
</html>
(base) seigonoMacBook-puro-1320:http seigo$ cat to-misekakete.html
<html lang="ja">
<head>
<meta charset="utf-8">
<title>Sample</title>
<script src="sample.js"></script>
</head>
<body>
<input type="button" value="更新" onclick="sample();">
<div id="area1">と、見せかけて </div>
</body>
</html>
sample.js
var data = ['りんご',
'みかん',
'いちご',
'パイナップル',
'ドラゴンフルーツ'];
/**
* 配列の値からランダムで1つ選択して返す
* @param arr arrayData (required) 選択する配列の内容
* @return str
*/
function choose_at_random(arrayData) {
var arrayIndex = Math.floor(Math.random() * arrayData.length);
return arrayData[arrayIndex];
}
function sample(){
var getData = choose_at_random(data);
var getData2 = choose_at_random(data);
var str = getData + "、と、見せかけて、" + getData2;
console.log(str);
document.getElementById("area1").innerText = str;
}
テスト
公開webサーバ(今回はxfreeを利用)にブラウザからアクセスして、
ローカルで用意した機能がhtml/javascriptで動けばOKです。
参考
xserver
xfree
更新ボタンを押したら、「A と、見せかけてB」の文字列がランダムに更新されるようなWebサーバをjavascriptを使って作成してみる
【初心者コーダー向け】現役Webエンジニアが教えるサーバー契約＋FTPでサイト公開までの全行程まとめ
無料でできるPHPのWEBサイト公開（テスト用）
【2020年版】無料レンタルサーバーおすすめランキング
https://おすすめレンタルサーバー徹底比較ガイド.com/post-1137
【2020年ホームページの作り方総まとめ】ホームページ自作方法を解説
Webサーバーを用意する方法
WebサービスをXserverで公開する方法
localhost をスマホ実機で確認する方法
mp4-to-gif