2022年8月4日 / 最終更新日時 : 2022年8月4日 officeの杜 Google

Google Apps ScriptでSVGを使ったイメージマップを操作 – 応用編【GAS】

前回の記事にて、SVG画像を利用した座席表アプリの基本構造を作りました。しかし、実用するにはまだ全然機能が装備されていません。そこで、今回はこれを最低限利用できるように色々と装備をします。

今回装備する内容は、座席のキープ、座席の情報、固定席の場合の処理、座席のリリース、毎日24時に自動でクリアの5点他、不都合が出ないように色々とエラートラップを追加します。

Google Apps ScriptでSVGを使ったイメージマップを操作 – 基礎編【GAS】

今回使用するファイルやツール

今回は前回の素材を更に拡張し、多くの席を用意し、割と自由に配置しています。また、SVGデータに対しても今回は更に手を加えています。また、UIを整える為に、Vue.jsおよびVuetifyも導入しています。

PC基準で作っていますが、Vuetifyの利用とSVGの自動スケールによって、またGAS側でもレンダリングにてレスポンシブ対応コードを入れています。

図：こんな感じのUIを構築します。

事前準備

実務で使う為に前回のSVG画像データおよびスプレッドシートに手を加えています。

SVGデータの改造

今回のSVG画像は机の部分が画像ファイルとして取り込んでる為、前半部分がテキスト化された画像データになっています。大分したのほうに、座席に関するドローのデータがあります。

改造した部分は

全てのaタグのonClickは、以下の関数にし、gタグ直下のIDを取得するようにしています。

JavaScript

seatinfo($(this).children().attr('id'))

1

seatinfo($(this).children().attr('id'))

seatA1といったようなIDを引数として取り、seatinfo関数に渡すようになっています。
タイルの縁取りであるstrokeの色を青に変更し、styleとしてstroke-width:3を設定。青い縁取りを追加しました。
textのサイズを小さめにして、ユーザ名が入り切るサイズに調整しました。
初期の座席の値は空にしました。

以下が完成形の1座席分のデータです。

<a href="javascript:void(0);" onclick="seatinfo($(this).children().attr('id'));" id="a23">
    <g id="seatA2" transform="matrix(0.84466019,0,0,0.88518024,17.616658,98.837363)">
        <rect 
            style="stroke-width:3" 
            id="A2" width="94.380722" 
            height="69.397591" 
            x="24.057831" 
            y="45.33976" 
            class="bar"
            fill="#afdde9" 
            stroke="blue" />
        <text xml:space="preserve"
            style="font-size:16.31940592px;font-family:sans-serif;-inkscape-font-specification:'sans-serif, Normal';fill:#1a1a1a;stroke-width:0.0867171"
            x="26.065416" 
            y="89.968636" 
            id="textA2" 
            transform="scale(0.99324444,1.0068015)">
        <tspan sodipodi:role="line" 
            id="spanA2" 
            style="fill:#1a1a1a;stroke-width:0.0867171;font-size:16.31940592px"
            x="26.065416" 
            y="89.968636">　</tspan>
        </text>
    </g>
</a>

<rect

style="stroke-width:3"

id="A2" width="94.380722"

height="69.397591"

x="24.057831"

y="45.33976"

class="bar"

fill="#afdde9"

stroke="blue" />

<text xml:space="preserve"

style="font-size:16.31940592px;font-family:sans-serif;-inkscape-font-specification:'sans-serif, Normal';fill:#1a1a1a;stroke-width:0.0867171"

x="26.065416"

y="89.968636"

id="textA2"

transform="scale(0.99324444,1.0068015)">

<tspan sodipodi:role="line"

id="spanA2"

style="fill:#1a1a1a;stroke-width:0.0867171;font-size:16.31940592px"

x="26.065416"

y="89.968636">　</tspan>

</text>

</g>

</a>

シートデータの準備

2つのシートのみとし、シートデータは前回同様ですが、増やした座席の分だけデータを増やしています。また、今回より

固定フラグにチェックが入ってる場合は、表示した場合灰色の席となり、キープできなくなるよう制限を加えるになります。
ユーザリストからの表示名とIDを入れるようになります。入ってる場合キープ済みとなります。

また、トリガーにより毎日24時にこれらのデータのうち、固定フラグがオンになっていないものについてはデータが自動でクリアされるようになり、翌日はまたキープできるようになるので、リリース忘れしても問題ありません。

セットアップ

必ず利用する場合は以下の2つを実行して、整備します。スプレッドシートを開きメニューにある「座席表Plus」をクリックし

セットアップ：スプレッドシートのIDをプロパティに格納します。
リセットトリガー設置：毎日24時にシートデータの固定席以外の座席登録をリセットする関数を実行するトリガーを設置します。

上記のセットアップが完了したら、以下の手順でウェブアプリケーションとして公開する必要があります。

スクリプトエディタを開く
右上のデプロイをクリックし、デプロイを管理をクリック
左上からウェブアプリを選び、ユーザ実行権限とアクセスできるユーザを指定
デプロイをクリックして、ウェブアプリのURLを取得する

図：デプロイして完了

ソースコード

HTML側コード

<!DOCTYPE html>
<html>
  <head>
    <base target="_top">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>

    <!-- Vuetify関係 -->
    <link href="https://fonts.googleapis.com/css2?family=M+PLUS+1p:wght@400;700&display=swap" rel="stylesheet">
    <link href="https://cdnjs.cloudflare.com/ajax/libs/MaterialDesign-Webfont/7.0.96/css/materialdesignicons.min.css" rel="stylesheet">
    <link href="https://cdn.jsdelivr.net/npm/vuetify@2.x/dist/vuetify.min.css" rel="stylesheet">

    <style>
      svg {
        width: 100%;
        height:300px;
      }

      svg a path{
        transition: fill 0.3s linear;
      }

      .bar {
        pointer-events: all;
      }

      .bar:hover { 
        opacity: 0.7;
        fill: red;
      }

      #map{
        width:100%;
        height:1px;
      }
    </style>

    <style>
			.fixed-bar {
				position: sticky;
				position: -webkit-sticky; /* for Safari */
				top: 0em;
				z-index: 9;
			}
			html::-webkit-scrollbar{  /* メイン画面だけスクロールバーを消す　*/
				display: none;
			}

			html, body{				  /* メイン画面のスクロールを抑止　*/
				overflow: hidden;
			}

			::-webkit-scrollbar{
				width: 10px;
			}
			::-webkit-scrollbar-track{
				background: #fff;
				border: none;
				border-radius: 10px;
				box-shadow: inset 0 0 2px rgb(54, 56, 53); 
			}
			::-webkit-scrollbar-thumb{
				background: rgb(65, 44, 255);
				border-radius: 10px;
				box-shadow: none;
			}

			.v-toolbar__extension{
				font-weight:bold;
				text-shadow:1px 1px 1px #000, -1px 1px 1px #000, 1px -1px 1px #000, -1px -1px 1px #000;
			}

			.titlehead{
				font-weight:bold;
				text-shadow:1px 1px 1px #000, -1px 1px 1px #000, 1px -1px 1px #000, -1px -1px 1px #000;
			}

			.tomato{
				text-shadow: 0 0 10px blue;
			}
		</style>

    <script>
      //グローバル変数
      var seatman = "";

      //リサイズ時にウィンドウにフィットさせる
			window.onresize = function(){
				setGridHeight();
			}
			  
			//gridのサイズを自動でウィンドウにフィットする
			$(document).ready(function () {
				setGridHeight();
			});

      //座席表の高さを自動補正する関数
			function setGridHeight() {
				var layoutHeight = $(window).height() - 25;
				$('#svg5').css('height', layoutHeight + 'px');
        $('#gridarea').css('height', layoutHeight + 'px');
			}

      //SVGファイルデータを呼び出し挿入する
      function init(){
        google.script.run.withSuccessHandler(onSuccess).svgload();
      }

      function onSuccess(data){
        //SVG画像を挿入する
        $("#map").html(data);
        setGridHeight();

        //シートデータを取得する
        google.script.run.withSuccessHandler(onSuccess2).seatload();
      }

      //シートデータを配列に格納する
      function onSuccess2(data){
        //データを取得する
        seatman = JSON.parse(data);

        //シートデータを反映する
        for(var i = 0;i<seatman.length;i++){
          //レコードを一個取り出す
          let rec = seatman[i];

          //割当ユーザ名を取得する
          let user = rec[2];

          //IDを取り出す
          let seatid = rec[0];

          //座席番号を取得する
          let seat = seatid.replace("seat","");

          //固定フラグがある場合の処理
          if(rec[1] == true){
            //ユーザ名を反映させる
            let textaddr = "#span" + seat;
            $(textaddr).html(user);
            
            //タイルのカラーを変更する（黄色）
            let gaddr = "#" + seat;
            $(gaddr).attr('fill', '#a6a6a6');
          }else{
            //割当ユーザがある場合の処理
            if(user != ""){
              //ユーザ名を反映させる
              let textaddr = "#span" + seat;
              $(textaddr).html(user);
              
              //タイルのカラーを変更する（黄色）
              let gaddr = "#" + seat;
              $(gaddr).attr('fill', '#fbffc7');
            }else{
              //次の処理へ
              //ユーザ名を消去する
              let textaddr = "#span" + seat;
              $(textaddr).html("");
              
              //タイルのカラーを変更する（デフォルト）
              let gaddr = "#" + seat;
              $(gaddr).attr('fill', '#afdde9');
            }
          }
        }

        //loaderを非表示にする
        $("#main").css("display", "block");
        $("#progress").css("display", "none");

      }

      //席のキープや情報ウィンドウを出す
      function seatinfo(seatid){
        //フラグ
        let kotei = false;
        let userflg = false;
        let userid = "";

        //seatidを格納する
        vm.seatid = seatid;

        //seatmanからidを検索して、固定席や割当ユーザがいるかチェック
        for(var i = 0;i<seatman.length;i++){
          //レコードを1個取り出す
          let rec = seatman[i];
          
          //idを取り出す
          let recid = rec[0];

          //IDと一致するかどうかチェック
          if(recid == seatid){
            //固定フラグの有無
            if(rec[1] == true){
              kotei = true;
              break;
            }else{
              if(rec[2] != ""){
                //ユーザが居るので、詳細ダイアログを出す
                userflg = true;
                userid = rec[3];
                break;
              }else{
                //ユーザがいないので、シート確保処理
                userflg = false;
                break;
              }
            }
          }else{
            //一致するのがないのでスルー
            continue;
          }
        }

        //koteiflgチェック
        if(kotei == true){
          //メッセージボックスを出して処理を終了
          vm.dialog = true;
          return;
        }else{
          if(userflg == true){
            //seatinfoに情報を追加
            vm.seatinfo = userid;

            //ユーザの詳細情報ダイアログを出す
            vm.dialog3 = true;
            return;
          }else{
            //座席キープの処理を実行
            vm.dialog2 = true;
            return;
          }
        }
      }

      //シートキープ後の処理
      function keepafter(keepflg){
        //keepflgに応じて処理を分岐
        switch(keepflg){
          case 0:
            snackman("席のキープに失敗しました。ユーザ登録が無いか？席情報の登録がありません。");
            break;
          case 1:
            snackman("席をキープしました。");
            //シートデータをリロードする
            google.script.run.withSuccessHandler(onSuccess2).seatload();

            //ダイアログを閉じる
            vm.dialog2 = false;
            break;
          case 2:
            snackman("すでに先に席がキープされてしまったようです。");
            break;
          case 3:
            snackman("座席はすでにキープ済みです。");
            //ダイアログを閉じる
            vm.dialog2 = false;
            break;
        }
      }

      //リリース処理後
      function releaseafter(rflg){
        switch(rflg){
          case 0:
            //リリース失敗
            snackman("リリースすべき席情報が見つかりませんでした。");
            break;
          case 1:
            snackman("席をリリースしました。");
            //シートデータをリロードする
            google.script.run.withSuccessHandler(onSuccess2).seatload();

            //ダイアログを閉じる
            vm.dialog4 = false;
            break;
        }
      }

      //snackメッセージを表示
      function snackman(msg){
				vm.text = msg;
				vm.snackbar = true;
			}

    </script>

  </head>
  <body onLoad="init()">
    <div id="progress" style="width: 100%; display:block">
      <center>
        <img src="https://officeforest.org/wp/library/loading.gif" border="0" alt="progress circle">
        <p><b>Now Loading ...</b></p>
      </center>
    </div>

    <div class="main" id="main" style="display:none">
      <v-app id="app">
        <v-toolbar dark	class="fixed-bar" src="https://picsum.photos/1920/1080?random">
					<v-toolbar-title class="titlehead">座席表アプリ</v-toolbar-title>
					<v-spacer></v-spacer>
					
					<v-btn icon @Click="onReturn">
						<v-icon color="white" class="tomato">mdi-train-car</v-icon>
					</v-btn>
				</v-toolbar>

        <!-- SVG画像貼り付け場所 -->
        <div id="gridarea" style="width: 100%; height: 300px;">
          <div id="map"></div>
        </div>

        <!-- 固定席メッセージ -->
        <v-dialog v-model="dialog" width="500">
          <v-card>
            <v-card-title class="text-h5 grey lighten-2">
              固定席ですよ！！
            </v-card-title>

            <v-card-text>
              <div>対象の席は固定席です。キープすることは出来ませんので、他の席を探して下さい。</div>
            </v-card-text>

            <v-divider></v-divider>

            <v-card-actions>
              <v-spacer></v-spacer>
              <v-btn color="primary" text @click="dialog = false">
                閉じる
              </v-btn>
            </v-card-actions>
          </v-card>
        </v-dialog>

        <!-- 座席キープダイアログ -->
        <v-dialog v-model="dialog2" width="500">
          <v-card>
            <v-card-title class="text-h5 grey lighten-2">
              座席のキープ
            </v-card-title>

            <v-card-text>
              <div>この席を今日はキープしますか？変える時には右上の帰宅のボタンを押して必ず座席のリリースを行って下さい。</div>
            </v-card-text>

            <v-divider></v-divider>

            <v-card-actions>
              <v-btn color="red" text @click="keepseat">
                キープ
              </v-btn>
              <v-spacer></v-spacer>
              <v-btn color="blue" text @click="dialog2 = false">
                閉じる
              </v-btn>
            </v-card-actions>
          </v-card>
        </v-dialog>

        <!-- ユーザ情報ダイアログ -->
        <v-dialog v-model="dialog3" width="500">
          <v-card>
            <v-card-title class="text-h5 grey lighten-2">
              ユーザの詳細情報
            </v-card-title>

            <v-card-text>
              <div>{{seatinfo}}についての詳細情報</div>
            </v-card-text>

            <v-divider></v-divider>

            <v-card-actions>
              <v-spacer></v-spacer>
              <v-btn color="primary" text @click="dialog3 = false">
                閉じる
              </v-btn>
            </v-card-actions>
          </v-card>
        </v-dialog>

        <!-- 座席リリースダイアログ -->
        <v-dialog v-model="dialog4" width="500">
          <v-card>
            <v-card-title class="text-h5 grey lighten-2">
              座席のリリース
            </v-card-title>

            <v-card-text>
              <div>今日はもうお帰りですか？リリースをクリックすると座席情報を開放して空にします。</div>
            </v-card-text>

            <v-divider></v-divider>

            <v-card-actions>
              <v-btn color="red" text @click="releaseseat">
                リリース
              </v-btn>
              <v-spacer></v-spacer>
              <v-btn color="blue" text @click="dialog4 = false">
                キャンセル
              </v-btn>
            </v-card-actions>
          </v-card>
        </v-dialog>

        <!-- メッセージ Toast-->
				<v-snackbar v-model="snackbar" :timeout="timeout">
					{{ text }}
					<template v-slot:action="{ attrs }">
            <v-btn color="blue"	text v-bind="attrs" @click="snackbar = false">
              閉じる
            </v-btn>
					</template>
				</v-snackbar>
      </v-app>
    </div>

    <script src="https://cdn.jsdelivr.net/npm/vue@2.x/dist/vue.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/vuetify@2.x/dist/vuetify.js"></script>

    <script>
			var vm;

      vm = new Vue({
        el: '#app',
        vuetify: new Vuetify(),
        data: () => ({
          snackbar:false,
          timeout:-1,
          text:"",
          seatinfo:"",
          seatid:"",        //座席クリック時のseatidを格納する用
          dialog:false,     //固定席ダイアログメッセージ用
          dialog2:false,    //席をキープするダイアログ用
          dialog3:false,    //ユーザの詳細情報ダイアログ用
          dialog4:false,    //席のリリース
        }),
        methods:{
          //座席キープ時処理
          keepseat(){
            google.script.run.withSuccessHandler(keepafter).onKeep(this.seatid);
          },

          //リサイズ時
          updateDataTableHeight() {
						setGridHeight();
					},

          //帰宅時の座席のリリースダイアログ
          onReturn(){
            this.dialog4 = true;
          },

          //座席のリリース処理
          releaseseat(){
            google.script.run.withSuccessHandler(releaseafter).onRelease();
          },
        },
        mounted : function(){

        }
			})		
    </script>
  </body>
</html>

100

101

102

103

104

105

106

107

108

109

110

111

112

113

114

115

116

117

118

119

120

121

122

123

124

125

126

127

128

129

130

131

132

133

134

135

136

137

138

139

140

141

142

143

144

145

146

147

148

149

150

151

152

153

154

155

156

157

158

159

160

161

162

163

164

165

166

167

168

169

170

171

172

173

174

175

176

177

178

179

180

181

182

183

184

185

186

187

188

189

190

191

192

193

194

195

196

197

198

199

200

201

202

203

204

205

206

207

208

209

210

211

212

213

214

215

216

217

218

219

220

221

222

223

224

225

226

227

228

229

230

231

232

233

234

235

236

237

238

239

240

241

242

243

244

245

246

247

248

249

250

251

252

253

254

255

256

257

258

259

260

261

262

263

264

265

266

267

268

269

270

271

272

273

274

275

276

277

278

279

280

281

282

283

284

285

286

287

288

289

290

291

292

293

294

295

296

297

298

299

300

301

302

303

304

305

306

307

308

309

310

311

312

313

314

315

316

317

318

319

320

321

322

323

324

325

326

327

328

329

330

331

332

333

334

335

336

337

338

339

340

341

342

343

344

345

346

347

348

349

350

351

352

353

354

355

356

357

358

359

360

361

362

363

364

365

366

367

368

369

370

371

372

373

374

375

376

377

378

379

380

381

382

383

384

385

386

387

388

389

390

391

392

393

394

395

396

397

398

399

400

401

402

403

404

405

406

407

408

409

410

411

412

413

414

415

416

417

418

419

420

421

422

423

424

425

426

427

428

429

430

431

432

433

434

435

436

437

438

439

440

441

442

443

444

445

446

447

448

449

450

451

452

453

454

455

456

457

458

459

460

461

462

463

464

465

466

467

<!DOCTYPE html>

<html>

<head>

<style>

svg {

width: 100%;

height:300px;

}

svg a path{

transition: fill 0.3s linear;

}

.bar {

pointer-events: all;

}

.bar:hover {

opacity: 0.7;

fill: red;

}

#map{

width:100%;

height:1px;

}

</style>

<style>

.fixed-bar {

position: sticky;

position: -webkit-sticky; /* for Safari */

top: 0em;

z-index: 9;

}

html::-webkit-scrollbar{ /* メイン画面だけスクロールバーを消す　*/

display: none;

}

html, body{ /* メイン画面のスクロールを抑止　*/

overflow: hidden;

}

::-webkit-scrollbar{

width: 10px;

}

::-webkit-scrollbar-track{

background: #fff;

border: none;

border-radius: 10px;

box-shadow: inset 0 0 2px rgb(54, 56, 53);

}

::-webkit-scrollbar-thumb{

background: rgb(65, 44, 255);

border-radius: 10px;

box-shadow: none;

}

.v-toolbar__extension{

font-weight:bold;

text-shadow:1px 1px 1px #000, -1px 1px 1px #000, 1px -1px 1px #000, -1px -1px 1px #000;

}

.titlehead{

font-weight:bold;

text-shadow:1px 1px 1px #000, -1px 1px 1px #000, 1px -1px 1px #000, -1px -1px 1px #000;

}

.tomato{

text-shadow: 0 0 10px blue;

}

</style>

//グローバル変数

var seatman = "";

//リサイズ時にウィンドウにフィットさせる

window.onresize = function(){

setGridHeight();

}

//gridのサイズを自動でウィンドウにフィットする

$(document).ready(function () {

setGridHeight();

});

//座席表の高さを自動補正する関数

function setGridHeight() {

var layoutHeight = $(window).height() - 25;

$('#svg5').css('height', layoutHeight + 'px');

$('#gridarea').css('height', layoutHeight + 'px');

}

//SVGファイルデータを呼び出し挿入する

function init(){

google.script.run.withSuccessHandler(onSuccess).svgload();

}

function onSuccess(data){

//SVG画像を挿入する

$("#map").html(data);

setGridHeight();

//シートデータを取得する

google.script.run.withSuccessHandler(onSuccess2).seatload();

}

//シートデータを配列に格納する

function onSuccess2(data){

//データを取得する

seatman = JSON.parse(data);

//シートデータを反映する

for(var i = 0;i<seatman.length;i++){

//レコードを一個取り出す

let rec = seatman[i];

//割当ユーザ名を取得する

let user = rec[2];

//IDを取り出す

let seatid = rec[0];

//座席番号を取得する

let seat = seatid.replace("seat","");

//固定フラグがある場合の処理

if(rec[1] == true){

//ユーザ名を反映させる

let textaddr = "#span" + seat;

$(textaddr).html(user);

//タイルのカラーを変更する（黄色）

let gaddr = "#" + seat;

$(gaddr).attr('fill', '#a6a6a6');

}else{

//割当ユーザがある場合の処理

if(user != ""){

//ユーザ名を反映させる

let textaddr = "#span" + seat;

$(textaddr).html(user);

//タイルのカラーを変更する（黄色）

let gaddr = "#" + seat;

$(gaddr).attr('fill', '#fbffc7');

}else{

//次の処理へ

//ユーザ名を消去する

let textaddr = "#span" + seat;

$(textaddr).html("");

//タイルのカラーを変更する（デフォルト）

let gaddr = "#" + seat;

$(gaddr).attr('fill', '#afdde9');

}

//loaderを非表示にする

$("#main").css("display", "block");

$("#progress").css("display", "none");

}

//席のキープや情報ウィンドウを出す

function seatinfo(seatid){

//フラグ

let kotei = false;

let userflg = false;

let userid = "";

//seatidを格納する

vm.seatid = seatid;

//seatmanからidを検索して、固定席や割当ユーザがいるかチェック

for(var i = 0;i<seatman.length;i++){

//レコードを1個取り出す

let rec = seatman[i];

//idを取り出す

let recid = rec[0];

//IDと一致するかどうかチェック

if(recid == seatid){

//固定フラグの有無

if(rec[1] == true){

kotei = true;

break;

}else{

if(rec[2] != ""){

//ユーザが居るので、詳細ダイアログを出す

userflg = true;

userid = rec[3];

break;

}else{

//ユーザがいないので、シート確保処理

userflg = false;

break;

}

}else{

//一致するのがないのでスルー

continue;

}

//koteiflgチェック

if(kotei == true){

//メッセージボックスを出して処理を終了

vm.dialog = true;

return;

}else{

if(userflg == true){

//seatinfoに情報を追加

vm.seatinfo = userid;

//ユーザの詳細情報ダイアログを出す

vm.dialog3 = true;

return;

}else{

//座席キープの処理を実行

vm.dialog2 = true;

return;

}

//シートキープ後の処理

function keepafter(keepflg){

//keepflgに応じて処理を分岐

switch(keepflg){

case 0:

snackman("席のキープに失敗しました。ユーザ登録が無いか？席情報の登録がありません。");

break;

case 1:

snackman("席をキープしました。");

//シートデータをリロードする

google.script.run.withSuccessHandler(onSuccess2).seatload();

//ダイアログを閉じる

vm.dialog2 = false;

break;

case 2:

snackman("すでに先に席がキープされてしまったようです。");

break;

case 3:

snackman("座席はすでにキープ済みです。");

//ダイアログを閉じる

vm.dialog2 = false;

break;

}

//リリース処理後

function releaseafter(rflg){

switch(rflg){

case 0:

//リリース失敗

snackman("リリースすべき席情報が見つかりませんでした。");

break;

case 1:

snackman("席をリリースしました。");

//シートデータをリロードする

google.script.run.withSuccessHandler(onSuccess2).seatload();

//ダイアログを閉じる

vm.dialog4 = false;

break;

}

//snackメッセージを表示

function snackman(msg){

vm.text = msg;

vm.snackbar = true;

}

</script>

</head>

<p><b>Now Loading ...</b></p>

</center>

</div>

<v-app id="app">

<v-toolbar dark class="fixed-bar" src="https://picsum.photos/1920/1080?random">

<v-toolbar-title class="titlehead">座席表アプリ</v-toolbar-title>

<v-spacer></v-spacer>

<v-btn icon @Click="onReturn">

<v-icon color="white" class="tomato">mdi-train-car</v-icon>

</v-btn>

</v-toolbar>

</div>

<v-dialog v-model="dialog" width="500">

<v-card>

<v-card-title class="text-h5 grey lighten-2">

固定席ですよ！！

</v-card-title>

<v-card-text>

<div>対象の席は固定席です。キープすることは出来ませんので、他の席を探して下さい。</div>

</v-card-text>

<v-divider></v-divider>

<v-card-actions>

<v-spacer></v-spacer>

<v-btn color="primary" text @click="dialog = false">

閉じる

</v-btn>

</v-card-actions>

</v-card>

</v-dialog>

<v-dialog v-model="dialog2" width="500">

<v-card>

<v-card-title class="text-h5 grey lighten-2">

座席のキープ

</v-card-title>

<v-card-text>

<div>この席を今日はキープしますか？変える時には右上の帰宅のボタンを押して必ず座席のリリースを行って下さい。</div>

</v-card-text>

<v-divider></v-divider>

<v-card-actions>

<v-btn color="red" text @click="keepseat">

キープ

</v-btn>

<v-spacer></v-spacer>

<v-btn color="blue" text @click="dialog2 = false">

閉じる

</v-btn>

</v-card-actions>

</v-card>

</v-dialog>

<v-dialog v-model="dialog3" width="500">

<v-card>

<v-card-title class="text-h5 grey lighten-2">

ユーザの詳細情報

</v-card-title>

<v-card-text>

<div>{{seatinfo}}についての詳細情報</div>

</v-card-text>

<v-divider></v-divider>

<v-card-actions>

<v-spacer></v-spacer>

<v-btn color="primary" text @click="dialog3 = false">

閉じる

</v-btn>

</v-card-actions>

</v-card>

</v-dialog>

<v-dialog v-model="dialog4" width="500">

<v-card>

<v-card-title class="text-h5 grey lighten-2">

座席のリリース

</v-card-title>

<v-card-text>

<div>今日はもうお帰りですか？リリースをクリックすると座席情報を開放して空にします。</div>

</v-card-text>

<v-divider></v-divider>

<v-card-actions>

<v-btn color="red" text @click="releaseseat">

リリース

</v-btn>

<v-spacer></v-spacer>

<v-btn color="blue" text @click="dialog4 = false">

キャンセル

</v-btn>

</v-card-actions>

</v-card>

</v-dialog>

<v-snackbar v-model="snackbar" :timeout="timeout">

<v-btn color="blue" text v-bind="attrs" @click="snackbar = false">

閉じる

</v-btn>

</template>

</v-snackbar>

</v-app>

</div>

var vm;

vm = new Vue({

el: '#app',

vuetify: new Vuetify(),

data: () => ({

snackbar:false,

timeout:-1,

text:"",

seatinfo:"",

seatid:"", //座席クリック時のseatidを格納する用

dialog:false, //固定席ダイアログメッセージ用

dialog2:false, //席をキープするダイアログ用

dialog3:false, //ユーザの詳細情報ダイアログ用

dialog4:false, //席のリリース

}),

methods:{

//座席キープ時処理

keepseat(){

google.script.run.withSuccessHandler(keepafter).onKeep(this.seatid);

//リサイズ時

updateDataTableHeight() {

setGridHeight();

//帰宅時の座席のリリースダイアログ

onReturn(){

this.dialog4 = true;

//座席のリリース処理

releaseseat(){

google.script.run.withSuccessHandler(releaseafter).onRelease();

mounted : function(){

}

})

</script>

</body>

</html>

シートデータロード時に固定席の場合には灰色、キープ済みの席は黄色へカラー変更する為のコードが入っています。
Vue.jsおよびVuetifyを導入してUIを整えています。ツールバーには座席のリリース用ボタンを設置しています。
リリース後やキープ後には再度シートデータをリロードするようにしています。
UIを整える為のいくつかのVuetify用のCSSを追加しています。
各種メッセージと確認用のダイアログ、スナックバーを追加しています。

ここに、データのリフレッシュ用の機能や、誰がどこに座っているのか検索する機能（検索後、タイルのstrokeカラーを赤にして場所を表示）といった機能を追加予定です。

図：座席のキープ時の問い合わせダイアログ

図：固定席はキープ出来なくしてあります

GAS側コード

今回追加したコードは以下の通り。トリガーの設置に関しては省略していますが、サンプルスプレッドシートには入っています。主に、シートデータを読み込んでHTML側へ返すコード、キープ時のコード、リリース時のコードになります。

//シートデータを取得する
function seatload(){
  //スプレッドシートのIDを取得する
  let Properties = PropertiesService.getScriptProperties();
  var ssid = Properties.getProperty("sheetid");

  //シートデータを取得する
  let sheet = SpreadsheetApp.openById(ssid).getSheetByName("シートデータ");
  let ss = sheet.getRange("A2:D").getValues();

  //シートデータを返す
  return JSON.stringify(ss);
}

//シートのキープ処理
function onKeep(seatid){
  //keepフラグ
  let keepflg = 0;
  let booking = false;

  //アクセスしてきてるユーザのアドレスを取得
  let user = GetUser();

  //スプレッドシートのIDを取得する
  let Properties = PropertiesService.getScriptProperties();
  let ssid = Properties.getProperty("sheetid");

  //シートデータを取得する
  let sheet = SpreadsheetApp.openById(ssid);
  let seatdata = sheet.getSheetByName("シートデータ").getRange("A2:D").getValues();
  let userdata = sheet.getSheetByName("ユーザリスト").getRange("A2:C").getValues();

  //ユーザリストに存在するかどうかチェック
  for(let i = 0;i<userdata.length;i++){
    //keepflgが1,2,3の場合場合ループを抜ける
    if(keepflg == 1 || keepflg == 2 || keepflg == 3){
      break;
    }

    //レコードを一個取り出す
    let urec = userdata[i];

    //ユーザアドレスが一致するかどうかチェック
    if(urec[1] == user){
      //ユーザ名とIDを取得
      let uid = urec[0];
      let uname = urec[2];

      //ユーザ登録があった場合
      for(let j = 0;j<seatdata.length;j++){
        //レコードを一個取り出す
        let srec = seatdata[j];

        //ユーザIDを取得する
        let srecid = srec[3];

        //すでに座席取得済みかどうかをチェックする
        if(srecid == uid){
          //座席取得済み
          booking = true;
          keepflg = 3;
          break;
        }
      }

      //座席まだ取得していない場合は取得処理をする
      if(booking == false){
        for(let k = 0;k<seatdata.length;k++){
          //レコードを一個取り出す
          let srec2 = seatdata[k];

          //seatidと一致するかどうか
          if(seatid == srec2[0]){
            //割当ユーザ列が空かどうかチェック
            if(srec2[2] == ""){
              //位置を特定
              let pos = k + 2;

              //空いてるのでキープ処理
              sheet.getSheetByName("シートデータ").getRange("C" + pos).setValue(uname);
              sheet.getSheetByName("シートデータ").getRange("D" + pos).setValue(uid);

              //フラグを変更
              keepflg = 1;
              break;
            }else{
              //すでに先に取られてる場合
              keepflg = 2;
              break;
            }
          }
        }
      }else{
        break;
      }
    }else{
      //一致しなかったのでスルーする
      continue;
    }
  }

  //フラグを元に答えを返す
  return keepflg;
}

//座席のリリース処理
function onRelease(){
  //フラグ
  let rflg = 0;

  //アクセスしてきてるユーザのアドレスを取得
  let user = GetUser();

  //スプレッドシートのIDを取得する
  let Properties = PropertiesService.getScriptProperties();
  let ssid = Properties.getProperty("sheetid");

  //シートデータを取得する
  let sheet = SpreadsheetApp.openById(ssid);
  let seatdata = sheet.getSheetByName("シートデータ").getRange("A2:D").getValues();
  let userdata = sheet.getSheetByName("ユーザリスト").getRange("A2:C").getValues();

  //ユーザデータを取得する
  for(var i = 0;i<userdata.length;i++){
    //レコードを一個取り出す
    let urec = userdata[i];

    //IDを取得する
    let uid = urec[0];

    //一致する情報を取り出す
    if(urec[1] == user){
      for(var j = 0;j<seatdata.length;j++){
        //レコードを一個取り出す
        let srec = seatdata[j];

        //idが一致するレコードを探索する
        if(srec[3] == uid){
          //位置を特定
          let pos = j + 2;

          //空いてるのでキープ処理
          sheet.getSheetByName("シートデータ").getRange("C" + pos).setValue("");
          sheet.getSheetByName("シートデータ").getRange("D" + pos).setValue("");

          //フラグ
          rflg = 1;
          break;
        }
      }
      //ループを抜ける
      break;
    }
  }

  //結果を返す
  return rflg;
}

//現在のユーザのアドレスを取得
function GetUser() {
  var objUser = Session.getActiveUser();
  return objUser.getEmail();
}

//深夜0時にデータをクリアするトリガー用関数
function clearsheet(){
  //シートIDを取得する
  var Properties = PropertiesService.getScriptProperties();
  var ssid = Properties.getProperty("sheetid");
  var ss = SpreadsheetApp.openById(ssid);
  
  //シートデータを取得する
  var sdata = ss.getSheetByName("シートデータ").getRange("A2:D").getValues();
  var slength = sdata.length;
  
  //ループを回して固定フラグ判定をしながらデータ消去
  for(var i = 0;i<slength;i++){
    if(sdata[i][1] == true){
      //固定席なので何もしない
    }else{
      //フリーアドレスなのでクリアする
      sdata[i][2] = "";
      sdata[i][3] = "";
    }
  }
  
  //配列データを一発貼り付け戻し
  var lastRow = sdata.length;      //レコードの数を取得する
  var lastColumn = sdata[0].length　　//カラムの数を取得する
  ss.getSheetByName("シートデータ").getRange(2,1,lastRow,lastColumn).setValues(sdata);
}

100

101

102

103

104

105

106

107

108

109

110

111

112

113

114

115

116

117

118

119

120

121

122

123

124

125

126

127

128

129

130

131

132

133

134

135

136

137

138

139

140

141

142

143

144

145

146

147

148

149

150

151

152

153

154

155

156

157

158

159

160

161

162

163

164

165

166

167

168

169

170

171

172

173

174

175

176

177

178

179

180

181

182

183

184

185

186

187

188

189

190

191

192

//シートデータを取得する

function seatload(){

//スプレッドシートのIDを取得する

let Properties = PropertiesService.getScriptProperties();

var ssid = Properties.getProperty("sheetid");

//シートデータを取得する

let sheet = SpreadsheetApp.openById(ssid).getSheetByName("シートデータ");

let ss = sheet.getRange("A2:D").getValues();

//シートデータを返す

return JSON.stringify(ss);

}

//シートのキープ処理

function onKeep(seatid){

//keepフラグ

let keepflg = 0;

let booking = false;

//アクセスしてきてるユーザのアドレスを取得

let user = GetUser();

//スプレッドシートのIDを取得する

let Properties = PropertiesService.getScriptProperties();

let ssid = Properties.getProperty("sheetid");

//シートデータを取得する

let sheet = SpreadsheetApp.openById(ssid);

let seatdata = sheet.getSheetByName("シートデータ").getRange("A2:D").getValues();

let userdata = sheet.getSheetByName("ユーザリスト").getRange("A2:C").getValues();

//ユーザリストに存在するかどうかチェック

for(let i = 0;i<userdata.length;i++){

//keepflgが1,2,3の場合場合ループを抜ける

if(keepflg == 1 || keepflg == 2 || keepflg == 3){

break;

}

//レコードを一個取り出す

let urec = userdata[i];

//ユーザアドレスが一致するかどうかチェック

if(urec[1] == user){

//ユーザ名とIDを取得

let uid = urec[0];

let uname = urec[2];

//ユーザ登録があった場合

for(let j = 0;j<seatdata.length;j++){

//レコードを一個取り出す

let srec = seatdata[j];

//ユーザIDを取得する

let srecid = srec[3];

//すでに座席取得済みかどうかをチェックする

if(srecid == uid){

//座席取得済み

booking = true;

keepflg = 3;

break;

}

//座席まだ取得していない場合は取得処理をする

if(booking == false){

for(let k = 0;k<seatdata.length;k++){

//レコードを一個取り出す

let srec2 = seatdata[k];

//seatidと一致するかどうか

if(seatid == srec2[0]){

//割当ユーザ列が空かどうかチェック

if(srec2[2] == ""){

//位置を特定

let pos = k + 2;

//空いてるのでキープ処理

sheet.getSheetByName("シートデータ").getRange("C" + pos).setValue(uname);

sheet.getSheetByName("シートデータ").getRange("D" + pos).setValue(uid);

//フラグを変更

keepflg = 1;

break;

}else{

//すでに先に取られてる場合

keepflg = 2;

break;

}

}else{

break;

}

}else{

//一致しなかったのでスルーする

continue;

}

//フラグを元に答えを返す

return keepflg;

}

//座席のリリース処理

function onRelease(){

//フラグ

let rflg = 0;

//アクセスしてきてるユーザのアドレスを取得

let user = GetUser();

//スプレッドシートのIDを取得する

let Properties = PropertiesService.getScriptProperties();

let ssid = Properties.getProperty("sheetid");

//シートデータを取得する

let sheet = SpreadsheetApp.openById(ssid);

let seatdata = sheet.getSheetByName("シートデータ").getRange("A2:D").getValues();

let userdata = sheet.getSheetByName("ユーザリスト").getRange("A2:C").getValues();

//ユーザデータを取得する

for(var i = 0;i<userdata.length;i++){

//レコードを一個取り出す

let urec = userdata[i];

//IDを取得する

let uid = urec[0];

//一致する情報を取り出す

if(urec[1] == user){

for(var j = 0;j<seatdata.length;j++){

//レコードを一個取り出す

let srec = seatdata[j];

//idが一致するレコードを探索する

if(srec[3] == uid){

//位置を特定

let pos = j + 2;

//空いてるのでキープ処理

sheet.getSheetByName("シートデータ").getRange("C" + pos).setValue("");

sheet.getSheetByName("シートデータ").getRange("D" + pos).setValue("");

//フラグ

rflg = 1;

break;

}

//ループを抜ける

break;

}

//結果を返す

return rflg;

}

//現在のユーザのアドレスを取得

function GetUser() {

var objUser = Session.getActiveUser();

return objUser.getEmail();

}

//深夜0時にデータをクリアするトリガー用関数

function clearsheet(){

//シートIDを取得する

var Properties = PropertiesService.getScriptProperties();

var ssid = Properties.getProperty("sheetid");

var ss = SpreadsheetApp.openById(ssid);

//シートデータを取得する

var sdata = ss.getSheetByName("シートデータ").getRange("A2:D").getValues();

var slength = sdata.length;

//ループを回して固定フラグ判定をしながらデータ消去

for(var i = 0;i<slength;i++){

if(sdata[i][1] == true){

//固定席なので何もしない

}else{

//フリーアドレスなのでクリアする

sdata[i][2] = "";

sdata[i][3] = "";

}

//配列データを一発貼り付け戻し

var lastRow = sdata.length; //レコードの数を取得する

var lastColumn = sdata[0].length　　//カラムの数を取得する

ss.getSheetByName("シートデータ").getRange(2,1,lastRow,lastColumn).setValues(sdata);

}

すでにキープ時の場合は、エラーを返すようにしました。
同一ユーザがキープ時の場合、ダブルブッキング防止の為にエラーを返すようにしました。
キープしていない場合は、スプレッドシートに表示名とIDを、自動取得したメアド（GetUser関数）に基づいて探索し、書き込みをするようになっています。
トリガーが24時にシートをクリアするコードを追加
リリース時はシートデータの該当のレコードから表示名とIDを消去します。

表示サンプル

フルサイズはこちらをクリック

固定席(灰色)をクリックすると、エラーメッセージが出ます。また、誰かがキープ済みの席(黄色)は、そのユーザの情報を表示するダイアログを表示し、キープ済みではない場合には、座席取得の為のダイアログが表示するようになっています。すでに座席を自身でキープ済みの場合はダブルブッキングを阻止する仕組みが入っています。

帰宅時は右上のアイコンをクリックして座席のリリースをするようにします。