アップススクリプトのウェブアプリにページ遷移を組み込む

アップススクリプトのウェブアプリにページ遷移を組み込む

アップススクリプトで作成したウェブアプリでは、target='_self'でリンクしても上手く動作しません。このためページ遷移にはjavascriptでHTMLを書き換えるか、styleを書き換えて表示/非表示を切り替えます。

ページ遷移するウェブアプリのサンプルコード

ページの遷移は、_selfのリンクではできません。正確には1回はできますが、2回目以降は動作しません。そこでjavascriptを使用して、innerHTMLを書き換えるか、styleで表示/非表示を切り替えます。

ウェブアプリを作成するには普通のjavascriptを記述するだけですが、今回のサンプルは_selfで動作しないことを確認できるコードにしています。

gsファイル

function doGet(e) {
  var template = HtmlService.createTemplateFromFile("html");
  var query = e.parameter.none;
  if(query == "true"){
    template.message = "";
    template.query = "false";
  }else{
    template.message = "Hello World!";
    template.query = "true";
  }
  var html = template.evaluate();
  return html
}

ファイルからテンプレートを作成して、クエリパラメータnoneに応じてHello World!を表示するかどうかを変えています。

none=trueの場合には、Hello World!を表示しませんが、それ以外の場合には表示します。これで_selfのリンクでページ遷移できるかどうかを確認します。

HTMLファイル

<!DOCTYPE html>
<html>
  <head>
    <base target="_top">
    <script>
      function changeHtml() {
        var e = document.getElementById("disp");
        if(!e.innerHTML){
          e.innerHTML = "Hello World!";
        }else{
          e.innerHTML = "";
        }
      }
      function changeStyle() {
        var e = document.getElementById("disp");
        if(e.style.display == "block"){
          e.style.display = "none";
        }else{
          e.style.display = "block";
        }
      }
    </script>
  </head>
  <body>
    <button onclick="changeHtml()">innerHTML書き換え</button>
    <button onclick="changeStyle()">style.display変更</button>
    <a href="https://script.google.com/macros/s/AKfycbzgKKYdWNmENq1FtiGJWmzKxViXIBSNpkMMHQ_6VyeKlxNBRyxB/exec?none=<?= query ?>" target="_self">クエリパラメータnone=<?= query ?></a>
    <div id="disp" style="display:block"><?= message ?></div>
  </body>
</html>

bodyには、HTMLを書き換えるボタン、styleを変更するボタン、target=_selfのリンク、それとメッセージを表示するための領域(div id="disp")があります。

メッセージ表示領域にはクエリnone=true指定がなければHello World!が表示されます。style="display:block"は初期状態を明示するために記述しています(style変更ボタンを1回クリックしても反応せずstyle.displayに何も設定されていないのかなというような動作だったため)。

HTML書き換えボタンをクリックするとメッセージ表示領域のHello World!の表示/非表示を切り替えます。style変更ボタンをクリックしてもメッセージ表示領域のHello World!の表示/非表示を切り替えます。

target=_selfのリンクにはクエリパラメータにメッセージ表示領域のHellow World!の表示/非表示を切り替えるパラメータが設定されています。

リンクの2回目が動作しないことの確認

ページ切り替え初期状態

クエリパラメータなしでアクセスした場合の表示です。2つのボタンとクエリパラメータnone=trueを持ったリンクが表示されています。

ページ切り替え初期状態

ボタンは2つとも何回クリックしても問題なく動作し、Hello World!の表示/非表示を切り替えることができます。

ページ切り替え初期状態

しかし、リンクをクリックした場合、Hello World!は非表示で、クエリパラメータnone=falseを持ったリンクが表示されますが、もう1度リンクをクリックすると何も表示されなくなります。

ページ切り替え初期状態

リンクの2回目が動作しない原因までは調査できていませんが、ウェブアプリが多重のiframeで構成されていることが影響していそうです。

ウェブアプリでページ遷移が必要な場合にはjavascriptでHTMLを書き換えるか、styleを書き換えるかにしておくのが無難です。

今回のサンプルの実行URL(クエリパラメータなし)です。

お読みくださり、ありがとうございました。