JavaScriptでURLのパラメータによって変化するサイトを作る方法

参考にしたサイトはこれ

 
URLの引数を参考にして、サイトの表示を変えたい。
の2通りがあるが、前者を採用。
 
参考にしたサイトのコードをコピペして、
テキトーに「test.html」とかつけてみたけど動かなかった。
⇒どうやらjQuery言語が混ざっていた模様。
 $マークのところね。
 
// URLのパラメータを取得
var urlParam = location.search.substring(1);
 
// URLにパラメータが存在する場合
if(urlParam) {
  // 「&」が含まれている場合は「&」で分割
  var param = urlParam.split('&');
 
  // パラメータを格納する用の配列を用意
  var paramArray = ;
 
  // 用意した配列にパラメータを格納
  for (i = 0; i < param.length; i++) {
    var paramItem = param[i].split('=');
    paramArray[paramItem[0]] = paramItem[1];
  }
 
  // パラメータidがosakaかどうかを判断する
  if (paramArray.id == 'osaka') {
    $('.pram').append('<p>大阪です</p>');
  } else {
    $('.pram').append('<p>大阪ではありません</p>');
  }
}
 
このコードだと、jQueryが混ざっちゃってるんで、javaScriptのみで、サンプルを作り直してみた。↓
 
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
<html lang="ja">
    <head>
        <title>サンプル</title>
    </head>
    <body id="body">
        Hello, World!<br><br>
        <a href="?id=tokyo">URL末尾が"?id=tokyo"の場合</a><br>
        <a href="?id=osaka">URL末尾が"?id=osaka"の場合</a><br>
        <a href="?id=nagoya">URL末尾が"?id=nagoya"の場合</a><br>
        <a href="?id=nagoya&pass=tokyo">URL末尾が"?id=nagoya&pass=tokyo"の場合</a><br>
        <a href="?id=nagoya&pass=tokyo&option=train">URL末尾が"?id=nagoya&pass=tokyo&option=train"の場合</a><br><br>
    </body>
<script>
// 現在アクセスしているURLを取得します。
document.writeln("------------------------------------------------------<br>");
var url = location.href;
document.writeln("「location.href」メソッドで取得できる値");
document.writeln("<br>");
document.writeln(url);
document.writeln("<br><br>");
//alert(url+"\nにアクセスします");
 
// 現在アクセスしている"?"以降を取得します。
var a = location.search;
document.writeln("------------------------------------------------------<br>");
document.writeln("「location.search」メソッドで取得できる値");
document.writeln("<br>");
document.writeln(a);
document.writeln("<br><br>");
 
var urlParam = location.search.substring(1);
document.writeln("------------------------------------------------------<br>");
document.writeln("「location.search.substring(1)」メソッドで取得できる値");
document.writeln("<br>");
document.writeln(urlParam);
document.writeln("<br><br>");
 
// URLのパラメータを取得
var urlParam = location.search.substring(1);
 
// URLにパラメータが存在する場合
if(urlParam) {
  // 「&」が含まれている場合は「&」で分割
  var param = urlParam.split('&');
 
  // パラメータを格納する用の配列を用意
  var paramArray = ;
 
 document.writeln("------------------------------------------------------<br>");
 document.writeln("引数を分割した結果");
 
  // 用意した配列にパラメータを格納
  for (i = 0; i < param.length; i++) {
    var paramItem = param[i].split('=');
    paramArray[paramItem[0]] = paramItem[1];
    document.writeln("<br>");
    document.writeln(paramItem[0]);
    document.writeln("   =>   ");
    document.writeln(paramItem[1]);
  }
 
  document.writeln("<br><br>");
 
  // パラメータidがosakaかどうかを判断する
  if (paramArray.id == 'osaka') {
    //$('body').append('<p>大阪です</p>');
    var answer = "大阪です";
  } else {
    //$('body').append('<p>大阪ではありません</p>');
    var answer = "大阪じゃないです";
  }
 
 document.writeln("------------------------------------------------------<br>");
 document.writeln("idが'osaka'かどうかの判定<br>");
    document.writeln("idは");
    document.writeln(answer);
    document.writeln("<br><br>");
 
 document.writeln("------------------------------------------------------<br>");
    document.writeln("たとえばこんな感じで、idごとに、裏のロジックで使用するディレクトリ名も変えられる。↓<br>");
    var directory = "/bbs/";
    directory += paramArray.id;
    directory += "/logs"
    document.writeln(directory);
}
</script>
</html>

 

このコードなら、「test.html」とかテキトーに名前をつけて、
デスクトップにでも置いてもらって大丈夫。
 
ダブルクリックして開いてみて、いろいろ挙動を見てほしい。
?マーク以降にいろいろ値をセットしてみると、表示が変わる。
 

firebaseでリアルタイム掲示板をたった2時間でWeb公開する方法

参考にしたサイトはこれ。
  

 
このサイトの通りに、掲示板を作成してみる。
 
 
Firebaseにログインする。
 
 
プロジェクトを追加
⇒「chatroom」という名前にしてみた
 
 
アクセス権の変更
プロジェクトを開いて、「Database」の「ルール」タブを表示
認証をやらないので、アクセス権を下記のようにする。
{
  "rules": {
    ".read": "true",
    ".write": "true"
  }
}

 

  

Node.jsをインストールしておく
省略。これやらないと、後続のnpmコマンドが打てない。
 
 
firebaseコマンドを打てるようにする
npm install -g firebase-tools
 
 
firebaseにログインする
firebase login
⇒「Y」で進む。
 
 
もろもろ初期構築する
firebase init
 
 
ローカル上でサーバーを動かす
firebase serve
⇒ここでエラー発生。オーマイガー
 
 
firebase serveコマンドを実行したときに、エラーになる。
当然「http://localhost:5000/」にアクセスしてみても、何も表示されない。
どうやら、サーバー立ち上げ時に読み込まれるfirebase.jsonが空っぽで作成されてしまう模様。
⇒その前のfirebase initコマンドのときに、Hostingを選択するときの方法が悪かった。
 Hostingに⇒を合わせてEnterを押していた。
 正しくは、Hostingに⇒を合わせて、"Spaceを押してから"Enter
※英語でそうするように書いてあったのに、ちゃんと読めよおれ...
 
改めて、
firebase serveコマンドを実行したところ、
今度は「http://localhost:5000/」が正しく表示された。
 
 
index.htmlを置き換える
デフォルトのページは、なんとも質素な感じ。
firebase initを実行すると、index.htmlが./public配下に作成されている。
これを、掲示板用のhtmlに置き換える。↓
 
<!DOCTYPE html>
<html><head><meta charset="utf-8">
<title>掲示板</title>
 
<!-- TODO 以下を書き換えてください★★★ -->
<script>
  alert("HTMLコードのTODOの部分を書き換えてください!");
</script>
<!-- ★★★ここまで -->
 
</head><body>
  <h1>掲示板</h1>
  <div><textarea id="txt" rows="4" cols="80"></textarea></div>
  <div><button onclick="post()">投稿</button></div>
  <div><hr></div>
  <div><ul id="logs"></ul></div>
  <script>
  // Firebaseのデータベースを取得
  var db = firebase.database();
  var bbs_db = db.ref("/bbs/logs");
  // ログが追加されたときの処理を記述
  function addLog(data) {
    var val = data.val();
    var e = document.getElementById("logs");
    var li = document.createElement("li");
    li.innerHTML = val.text;
    e.appendChild(li);
  }
  // 誰かがログに追加したら内容を通知するよう設定
  bbs_db.limitToLast(10).on("child_added", addLog);
  // 投稿ボタンが押されたとき
  function post() {
    var txt = document.getElementById("txt");
    bbs_db.push({ text: txt.value });
    txt.value = "";
  }
  </script>
</body></html>

 

firebaseスクリプトをindex.htmlに追記する
firebaseサイトの「Overview」内の「ウェブアプリにFirebaseを追加」をクリック
index.htmlのTODO枠にコピペする。
 
 
web公開する
参考にしたサイトはこれ。

 

いまは認証に興味ないので、参考にしたのは3ページ目の
firebase deploy
のみ。
※でも認証やってみたくなったら、めっちゃ参考になりそう。
 
 
コマンドラインに表示されたURLにアクセスする
⇒インターネット経由で、サイトを確認することができた。