目的

自作のhtmlコードをwebサーバとして公開する方法に関する備忘録です

準備

以下を参考に、無料枠で使えるHTMLサーバー機能を用意します。

xfree

以下を参考に、何かしらの機能を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