常連

注目の的

自己紹介

### 前提・実現したいこと

実験的に、GASを使ってwebサイトを作ろうとしていたのですが、**HTMLからGASの関数を呼び出し**、実行した結果をwebサイトに表示するにはどうすればいいのか分かりません。調べて、下記のようにしてみたのですが、実行しても何も表示されません。何か方法があれば教えてください。

### 該当のソースコード

```GAS
function doGet() {
  var html = HtmlService.createTemplateFromFile('index');
  return html.evaluate();
}
function Me(){
  return "正常に動きました";
}
```
```HTML
<!DOCTYPE html>
<html>
  <head>
    <base target="_top">
  </head>
  <body>
     <?= Me(); ?>      //ここでMe関数を呼び出しているはず
  </body>
</html>
```

HTMLからGASの関数を呼び出す

# 解決したいこと
Railsでtextareaの内容をコピーするボタンを設置したいです。

# 調べた内容
[Rails]「clipboardにコピーする」ボタンを超簡単に設置
https://qiita.com/kidach1/items/0cef215de8ff47221f24

# 検証作業と結果
上記のQiitaに沿って進めました。以下は現在のコードです。

Gemfile
```
source 'https://rubygems.org'
git_source(:github) { |repo| "https://github.com/#{repo}.git" }

ruby '2.6.5'

# Bundle edge Rails instead: gem 'rails', github: 'rails/rails'
gem 'rails', '~> 6.0.0'
# Use mysql as the database for Active Record
# gem 'mysql2', '>= 0.4.4'
gem 'mysql2', '0.5.3'
# Use Puma as the app server
gem 'puma', '~> 3.11'
# Use SCSS for stylesheets
gem 'sass-rails', '~> 5'
# Transpile app-like JavaScript. Read more: https://github.com/rails/webpacker
gem 'webpacker', '~> 4.0'
# Turbolinks makes navigating your web application faster. Read more: https://github.com/turbolinks/turbolinks
gem 'turbolinks', '~> 5'
# Build JSON APIs with ease. Read more: https://github.com/rails/jbuilder
gem 'jbuilder', '~> 2.7'
# Use Redis adapter to run Action Cable in production
# gem 'redis', '~> 4.0'
# Use Active Model has_secure_password
# gem 'bcrypt', '~> 3.1.7'

# Use Active Storage variant
# gem 'image_processing', '~> 1.2'

# Reduces boot times through caching; required in config/boot.rb
gem 'bootsnap', '>= 1.4.2', require: false

group :development, :test do
  # Call 'byebug' anywhere in the code to stop execution and get a debugger console
  gem 'byebug', platforms: [:mri, :mingw, :x64_mingw]
end

group :development do
  # Access an interactive console on exception pages or by calling 'console' anywhere in the code.
  gem 'web-console', '>= 3.3.0'
  gem 'listen', '>= 3.0.5', '< 3.2'
  # Spring speeds up development by keeping your application running in the background. Read more: https://github.com/rails/spring
  gem 'spring'
  gem 'spring-watcher-listen', '~> 2.0.0'
  gem 'rubocop', require: false
end

group :test do
  # Adds support for Capybara system testing and selenium driver
  gem 'capybara', '>= 2.15'
  gem 'selenium-webdriver'
  # Easy installation and use of web drivers to run system tests with browsers
  gem 'webdrivers'
end

# Windows does not include zoneinfo files, so bundle the tzinfo-data gem
gem 'tzinfo-data', platforms: [:mingw, :mswin, :x64_mingw, :jruby]

gem 'active_hash'
gem 'zeroclipboard-rails'
gem 'jquery-rails'
```

config/routes.rb
```ruby
Rails.application.routes.draw do
  root to: 'kifus#index'
  resources :kifus
end
```

app/controllers/kifus_controller.rb
```ruby
class KifusController < ApplicationController
  before_action :set_kifu, only: [:edit, :show, :destroy, :update]

  def index
    @kifus = Kifu.all.order('date DESC')
  end

  def new
    @kifu = Kifu.new
  end

  def create
    @kifu = Kifu.create(kifu_params)
    if @kifu.valid?
      @kifu.save
      redirect_to root_path
    else
      render 'new'
    end
  end

  def edit
  end

  def update
    if @kifu.update(kifu_params)
      redirect_to kifu_path(@kifu.id)
    else
      render 'edit'
    end
  end

  def show
  end

  def destroy
    if @kifu.destroy
      redirect_to root_path
    else
      redirect_to kifu_path(@kifu.id)
    end
  end

  private

  def kifu_params
    params.require(:kifu).permit(:date, :opponent, :result_id, :type_id, :kifu)
  end

  def set_kifu
    @kifu = Kifu.find(params[:id])
  end

end
```

app/views/kifus/index.html.erb
```html
<div class="index-wrapper">

  <div class="new-link">
    <%= link_to '棋譜投稿ページへ', new_kifu_path %>
  </div>

  <h2>＜棋譜一覧＞</h2>

  <div class="kifu-lists">
    <% @kifus.each do |kifu| %>
      <div class="one-kifu">

        <%# 日付 %>
        <span class="date">
          <%= kifu.date %>
        </span>

        <%# 相手 %>
        <span class="opponent">
          <%= kifu.opponent %>
        </span>

        <%# 結果 %>
        <span class="result">
          <%= kifu.result.name %>
        </span>

        <%# 戦型 %>
        <span class="type">
          <%= kifu.type.name %>
        </span>

        <%# 棋譜リンク %>
        <span class="kifu-page">
          <%= link_to '棋譜', kifu_path(kifu.id)  %>
        </span>

      </div>
    <% end %>
  </div>
</div>
```

app/assets/stylesheets/index.scss
```scss
.index-wrapper {
  margin: 20px;
}

.new-link {
  font-size: 20px;
}

h2 {
  margin-top: 10px;
}

.kifu-lists {
  margin-top: 5px;
}

.one-kifu {
  font-size: 18px;
}
```

app/views/kifus/new.html.erb
```html
<div class="new-wrapper">
  <div class="input-forms">

  <h2>＜対局情報入力＞</h2>

    <%= form_with(model: @kifu, local: true) do |f| %>

      <%# 日付 %>
      <div class="input-field">
        <%= f.label :date, '日付：' %>
        <%= raw sprintf(
                    f.date_select(
                        :date,
                        use_month_numbers: true,
                        start_year:        2015,
                        end_year:          2025,
                        default:           Date.today,
                        date_separator:    '%s'),
                    '年 ', '月 ') + '日'
        %>
      </div>

      <div class="input-field">
        <%= f.label :opponent, '相手：' %>
        <%= f.text_field :opponent %>
      </div>

      <div class="input-field">
        <%= f.label :result_id, '結果：' %>
        <%= f.collection_select :result_id, Result.all, :id, :name, {} %>
      </div>

      <div class="input-field">
        <%= f.label :type_id, '戦型：' %>
        <%= f.collection_select :type_id, Type.all, :id, :name, {}  %>
      </div>

      <div class="input-field">
        <%= f.label :kifu, '棋譜' %><br>
        <%= f.text_area :kifu, placeholder: '棋譜を貼り付け', size: "35x5"  %>
      </div>

      <div class="submit">
        <%= f.submit "保存", class: 'submit-btn' %>
      </div>

      <div class="back">
        <%= link_to "棋譜一覧へ戻る", root_path, class: "back-btn" %>
      </div>
    <% end %>
  </div>
</div>
```

app/assets/stylesheets/new.scss
```scss
.new-wrapper {
  margin: 20px;
}

.input-field {
  margin-top: 20px;
}

.back {
  font-size: 20px;
  margin-top: 20px;
}

.submit-btn {
  width: 50px;
  height: 30px;
}
```

app/views/kifus/show.html.erb
```html
<div class="show-wrapper">

  <div class="kifu-text">
    <textarea id="fe_text" name="" rows="10" cols="40"><%= @kifu.kifu %></textarea>
    <button class='my_clip_button' data-clipboard-target='fe_text' data-clipboard-text='Default clipboard text from attribute' id='d_clip_button'>
      <b>コピー</b>
    </button>
  </div>

  <strong>※解析は棋譜をコピーしてから押してね</strong>

  <div class="btns">
    <div class="edit">
      <%= link_to "編集", edit_kifu_path(@kifu.id), method: :get, class: "edit-btn" %>
    </div>

    <div class="destroy">
      <%= link_to "削除", kifu_path(@kifu.id), method: :delete, class: "destroy-btn" %>
    </div>

    <div class="analysis">
      <%= link_to '解析', 'https://www.shogi-extend.com/adapter', class: "analysis-btn" %>
    </div>
  </div>

  <div class="back">
    <%= link_to '棋譜一覧へ戻る', root_path, class: "back-btn" %>
  </div>

</div class="div">
```

app/assets/stylesheets/show.scss
```scss
.show-wrapper {
  margin: 20px;
}


.btns {
  display: flex;
  align-items: center;
  margin-top: 20px;
}

.edit, .destroy, .analysis, .copy {
  margin-right: 20px;
}

.edit-btn, .destroy-btn, .analysis-btn {
  font-size: 20px;
  font-weight: bold;
  text-decoration: none;
  background-color: yellow;
  padding: 5px;
  border: 2px solid black;
  border-radius: 5px;
}

.edit-btn {
  color: black;
}

.destroy-btn {
  color: red;
}

.analysis-btn {
  color: blue;
}
```

app/javascript/packs/application.js
```js
// This file is automatically compiled by Webpack, along with any other files
// present in this directory. You're encouraged to place your actual application logic in
// a relevant structure within app/javascript and only use these pack files to reference
// that code so it'll be compiled.

require("@rails/ujs").start()
// require("turbolinks").start()
require("@rails/activestorage").start()
require("channels")

// Uncomment to copy all static images under ../images to the output folder and reference
// them with the image_pack_tag helper in views (e.g <%= image_pack_tag 'rails.png' %>)
// or the `imagePath` JavaScript helper below.
//
// const images = require.context('../images', true)
// const imagePath = (name) => images(name, true)
//= require zeroclipboard
//= require jquery
//= require rails-ujs
//= require turbolinks
//= require_tree .

$(document).ready(function() {
  var clip = new ZeroClipboard($("#d_clip_button"))
});
```

package.json
```
{
  "name": "kifu_app",
  "private": true,
  "dependencies": {
    "@rails/actioncable": "^6.0.0-alpha",
    "@rails/activestorage": "^6.0.0-alpha",
    "@rails/ujs": "^6.0.0-alpha",
    "@rails/webpacker": "4.3.0",
    "jquery": "^3.5.1",
    "turbolinks": "^5.2.0"
  },
  "version": "0.1.0",
  "devDependencies": {
    "webpack-dev-server": "^3.11.0"
  }
}
```

## ブラウザでの表示
![イメージ説明](315544b58ade49fe219241f99b41bfc5.png)

## コピーできない
コピーボタンを押しても、コピーされていません。原因と対処法を教えていただきたいです。

textareaの内容をコピーする実装

iphoneのショートカットアプリを用いて、あるスプレッドシートのkumaというシートのA2にiphoneから送信されたJSONデータのmydata内のvalueの値を書き込むというGASを実行するようにしたいと思い、以下のようにコードを作成しました。ですが、スプレッドシートには書き込みがされておりません。どこが誤っているのでしょうか。ご検討宜しくお願い致します。

```ここに言語を入力
function doPost(e) {
  let jsonString = e.postData.getDataAsString();
  let data = JSON.parse(jsonString);
  let myData = data.mydata.value;
  let ss = SpreadsheetApp.openById("19crtWUWfuKp3clAIinP2AcAEM_UJ2Ecm7g74gQzhH-M");
  let sheet = ss.getSheetByName("kuma");
  let range = sheet.getRange(1,2);
  range.setValue(myData);
}
```
iphoneのショートカットは以下のように設定しております。

![イメージ説明](891fc80ba065950ab250734a9217cd0b.png)

iPhoneのショートカットを使ったGASにPOSTリクエストを送信する方法

基本情報処理技術者試験の過去問に下記の問題があります。
Bの横のプラスが小さくて少し上にあります。
そのような記号はどう読み、どういう意味なのでしょうか？

"売上"表への次の検索処理のうち，B**+**木インデックスよりもハッシュインデックスを設定した方が適切なものはどれか。ここで，インデックスを設定する列を<>内に示す。

　売上(伝票番号，売上年月日，商品名，利用者ID，店舗番号，売上金額)


[基本情報処理技術者試験の過去問](https://www.fe-siken.com/kakomon/26_aki/q27.html)

小さいプラスのような記号はなんと読み、どういう意味があるのでしょうか？

### 前提・実現したいこと
参考URL;https://note.com/consul_addtag/n/nd581fe122540
に記載の社員管理システムをGASで作りたいのですが、
一度、成功したのですが、２回目以降、何度やっても、以下のエラーが出てきます。

スプレッドシートのID指定時は、'XxXXXXXX' シングルクオーテーションで囲み、
シート名は、ダブルクオーテーションで囲っても、シングルクオーテーションで囲ってもエラー内容は同じ物が出ます
### 発生している問題・エラーメッセージ

```
ine.html
TypeError: output.append is not a function（行 59）
```

### 該当のソースコード
入力制限をこえてしまうので、
参考URL;https://note.com/consul_addtag/n/nd581fe122540を参照ください。
よろしくお願いいたします。
```html
<!DOCTYPE html>
<html>
  <head>
    <base target="_top">
  </head>
  <body>
  <style>
  #header-fixed{
	border: 5px solid #fff;    /* 表示領域を白枠で囲う */
    position: fixed;            /* ヘッダーの固定 */
    padding:10px 0 20px;       /* 上10px、下20pxをあける */
    top:  0px;                   /* 位置(上0px) */
    left: 10px;                  /* 位置(右0px) */
    width: 100%;                /* 横幅100%　*/
    height:70px;                /* 縦幅70px */
    background-color:#FFF      /* バックの色 */
  }
  #content{
    top:  80px;                   /* 位置(上0px) */
    left: 0px;                  /* 位置(右0px) */
    padding:110px 0 0px;
    width: 100%;                /* 横幅100%　*/
    background-color: "#000000" /* バックの色 */
  }
  #menu{
    font-size : 20px;
    border : 1px;
    padding : 10px 20px 0px 0px;
  }
  thead {
    display: block;
  }
  tbody {
    overflow-x: hidden;
    overflow-y: scroll;
  }
</style>
<?
  url = "https://script.google.com/macros/s/[App-ID]";
?>
  <div id='header-fixed'>
    <font size="5pt" color="#5555ff">社員管理システム　　</font>
    <a id='menu' href="<?=url?>/exec?name=view">再表示</a>
    <a id='menu' href="<?=url?>/exec?name=inputStuff">社員登録</a>    

  </div>

<script>
function clock()
{
    // 現在日時を表すインスタンスを取得
//    var now = new Date();
//    document.getElementById("clock_time").innerHTML = now;
}
setInterval(clock, 1000);
</script>
      <?
        myMail = Session.getActiveUser().getEmail();
        output.append('<font size="2px" color="#5555ff">ログインユーザー：');
        output.append( myMail);
      ?>
  <div id='content'>
      <?
        //スタッフリストのスプレッドIDを指定
　　     var id =[シートのIDを指定];
    　　 var mySheet = SpreadsheetApp.openById(id).getSheetByName("スタッフ");
        var endrow = mySheet.getLastRow();
        var headData = mySheet.getRange("A1:N1").getValues();
        var myData = mySheet.getRange(2, 1 , endrow-1 , 14).getValues();
        output.append('<table border="1" cellspacing="0" cellpadding="5" bordercolor="#333333" style="table-layout:fixed;width:100%;">');
        output.append('<thead><div fixed>');
        output.append('<colgroup>');
        output.append('<col style="width:3%;"><col style="width:7%;"><col><col><col><col><col><col style="width:20%;"><col style="width:10%;"><col><col style="width:10%;"><col style="width:15%;"><col style="width:5%;"><col>');
        output.append('</colgroup>');
        output.append('<tr>');
        headprefix = '<th bgcolor="#5555ff"><font color="#FFFFFF" size="2px">';
        headbackfix = '</font></th>';
        
        //ヘッダー情報取得
        no = headData[0][0];
        name = headData[0][1];
        commit = headData[0][2];
        company = headData[0][3];
        payroll = headData[0][4];
        roll = headData[0][5];
        post = headData[0][6];
        profile = headData[0][7];
        tag = headData[0][8];
        avalable = headData[0][9];
        address = headData[0][10];
        facebook = headData[0][11];
        ndadate = headData[0][12];
        status = headData[0][13];
        
        //テーブルヘッダー作成
        output.append(headprefix + no + headbackfix);
        output.append(headprefix + name + headbackfix);
        output.append(headprefix + commit + headbackfix);
        output.append(headprefix + company + headbackfix);
        output.append(headprefix + payroll + headbackfix);
        output.append(headprefix + roll + headbackfix);
        output.append(headprefix + post + headbackfix);
        output.append(headprefix + profile + headbackfix);
        output.append(headprefix + tag + headbackfix);
        output.append(headprefix + avalable + headbackfix);
        output.append(headprefix + address + headbackfix);
        output.append(headprefix + facebook + headbackfix);
        output.append(headprefix + ndadate + headbackfix);
        output.append(headprefix + status + headbackfix);
        output.append('</tr>');
        output.append('</thead></div>');
        
        //テーブルボディの作成
        output.append('<tbody>');
        y=0;
        for(var i=0; i<myData.length; i++){
          no = myData[i][y];
          name = myData[i][y+1];
          commit = myData[i][y+2];
          company = myData[i][y+3];
          payroll = myData[i][y+4];
          roll = myData[i][y+5];
          post = myData[i][y+6];
          profile = myData[i][y+7];
          tag = myData[i][y+8];
          avalable = myData[i][y+9];
          address = myData[i][y+10];
          facebook = myData[i][y+11];
          ndadate = myData[i][y+12];
          status = myData[i][y+13];
          
　　　　　　headprefix = '<td style="word-wrap:break-word;"><font color="#000000" size="1px">';
          headbackfix = '</font></td>';
          
          if (status === "解約" || status === "退職"){
            output.append('<tr bgcolor = "#333333">');
          }else if(status === "停止中"){
            output.append('<tr bgcolor = "#AAAAAA">');
          }else{
            output.append('<tr bgcolor = "#FFFFFF">');
          }
          output.append(headprefix + no + headbackfix);
          output.append(headprefix + getModifyUrl(no,name) + headbackfix);
          output.append(headprefix + commit + headbackfix);
          output.append(headprefix + company + headbackfix);
          output.append(headprefix + payroll + headbackfix);
          output.append(headprefix + roll + headbackfix);
          output.append(headprefix + post + headbackfix);
          output.append(headprefix + getLink(profile) + headbackfix);
          output.append(headprefix + tag + headbackfix);
          output.append(headprefix + avalable + headbackfix);
          output.append(headprefix + getMailAddress(address) + headbackfix);
          output.append(headprefix + getLink(facebook) + headbackfix);
          output.append(headprefix + getViewDate(ndadate) + headbackfix);
          output.append(headprefix + status + headbackfix);
          output.append('</tr>');
        }
        output.append('</tbody>');
        output.append('</table>');
      ?>
      <?
        //上記から参照する関数群
        function escape_html (string) {
          if(typeof string !== 'string') {
            return string;
          }
          return string.replace(/[&'`"<>]/g, function(match) {
          return {
          '&': '&amp;',
          "'": '&#x27;',
          '`': '&#x60;',
          '"': '&quot;',
          '<': '&lt;',
          '>': '&gt;',
          }[match]
          });
        }

        //修正画面リンクを埋め込む関数
        function getModifyUrl (no, name) {
          var modifyUrl = url + "/exec?name=modify&no=" + no;
          return '<a href="' + modifyUrl + '" target="_top">' + name + '</a>';
        };

　　　　　//URLリンクを埋め込む関数
        function getLink (stringUrl) {
          var pattern = 'http';
          if(stringUrl.indexOf(pattern) === 0){
            return '<a href="' + stringUrl + '" target="_blank">' + stringUrl + '</a>';
          }else{
            return stringUrl;
          }
        };

        //メールリンクを埋め込む関数
        function getMailAddress (stringMail) {
          if(stringMail.indexOf('@') != -1){
            return '<a href="mailto:' + stringMail + '">' + stringMail + '</a>';
          }else{
            return stringMail;
          }
        };

  ?>
    </div>
</body>
</html>
```

さらに、現在は、以下のエラーが出ており困っております

ReferenceError: 「url」が定義されていません。（行 27、ファイル「stuff」）
この部分で、うまくURLを取得できていないようで、困り果てております。
```js
        //修正画面リンクを埋め込む関数
        function getModifyUrl (no, name) {
          var modifyUrl = url + "/exec?name=modify&no=" + no;
          return '<a href="' + modifyUrl + '" target="_top">' + name + '</a>';
        };
コード
```

GAS エラーの原因がわからない

###前提・実現したいこと
GASでVBAでいうとユーザーフォームのようなものを作るために、UserForm.htmlを作成し、そこにテキストボックスなどを配置し、その値をGAS側で受け取りたいのですが方法がわかりません。
また、GAS側の値をhtml側で受け取りたいのですがそれもよくわかりません。どのようにすればよいのでしょうか？そもそも可能なのでしょうか？
###発生している問題・エラーメッセージ
値の受け渡し方法がわからない。
###該当のソースコード
GAS側(コード.gs)
function main(){
  var app=SpreadsheetApp;
  var html = HtmlService.createHtmlOutputFromFile('UserForm');
  app.getActiveSpreadsheet().show(html);
}
function adasu(){
  var a = "aaa";
  return a;
}

UserForm.html側
<!DOCTYPE html>
<html lang="ja">
  <head>
    <base target="_top">
  </head>
  <body>
  <script type="text/javascript" >
  var d=//ここでadasu()の値を受け取りたい  
 for(var i=0;i<3;i++){
      document.writeln('<input type="text" value='+ d +' name="pra'+ i +'"/>');//このテキストボックス内に入力された値をGAS側で受け取りたい。
  
    }
    </script>
  </body>
</html>

###試したこと
<??>,<?=?>を使えばよいとの記述を見たのですが、使い方が間違っているのか、そのまま表示されてしまいます。使い方も教えていただけると幸いです

###補足情報(言語/FW/ツール等のバージョンなど)
より詳細な情報

GAS⇔html間の値の渡し方

type="submit"と指定することで、クリックするとformタグ内の情報（プルダウンやラジオボタンなどで指定した値）を送信できるボタンができるのはいいのですが、

ボタン自体に値を持たせて、そのボタンを押すと決まった値が送信されるようにすることは可能ですか？