Google APP Script (GAS)로 단일 페이지 애플리케이션 (SPA) 스타일 구현

12221 단어 HTMLCSS자바스크립트gas

구현 정책



사내 교육을 위해 가능한 한 쉽게 만들고 쉽게
HTML과 JS와 CSS로 구현할 수 있는 간단한 구조를 작성한다.

간단한 디자인



① HTML 파일과 지정된 이름의 파일을 작성한다.
② 특정 상태(사용자 계정에 연결하는 데이터)에 현재 페이지명을 저장
③그 상태에서 화면 천이의 처리를 호출한다

이제 ①에서 작성한 페이지로 천이한다.
또한 동일한 응용 프로그램에 액세스하면 상태 (사용자 데이터)
보존된 페이지에서 재개할 수 있다.

실제 구현 부분




왼쪽의 파일 목록 정보
표시할 이름의 HTML을 만듭니다.

화면 전환




이미지와 같은 처리를 준비합니다.
// 指定したディスプレイを表示する
function getDisplayById(display) {

  var properties = PropertiesService.getUserProperties(); 
  properties.setProperty('display', display);
  return HtmlService.createHtmlOutputFromFile(display).getContent(); 
}

여기서 하고 있는 것은, 화면으로부터 화면명을 받고, 처리를 실시하는 함수.
propertiies 에 유저 프로퍼티 (계정에 세이브 데이터) 오브젝트를 세트.
그 중의 키명:display에 대해서, 표시하고 싶은 디스플레이명을 저장한다.
그런 다음 HtmlService에서 createHtmlOutputFromFile()을 사용하여
그 파일이 보관 유지하고 있는 html 파일을 묘사하는 처리.

초기 표시 처리




// 表示画面選定関数
function getDisplay() {

  var properties = PropertiesService.getUserProperties(); 
  var display = '';
  if (properties.getProperty('display')){
     display = properties.getProperty('display');
  } else {
     display = 'top';
  }
  return HtmlService.createHtmlOutputFromFile(display).getContent(); 
}

1 개 전의 화면 묘사와 비교하여, 프로퍼티로부터 취득해 표시한다.
따라서, 초기 표시(브라우저 리로드나 복귀, 진행)의 대책으로서 사용하고 있다.

화면에서 호출하는 처리



※JS는 1개의 파일로 할 필요가 있다(향후 개선을 찾을지도)

function transition(display) {
  console.log("hello world!");
  document.getElementById('loading').style.display ="block";

  google.script.run.withSuccessHandler(function(html) {
  document.getElementById("vm").innerHTML = html;
  document.getElementById('loading').style.display ="none";
  }).getDisplayById(display);
};

transition이라는 함수를 준비하고 display의 명칭을 인수로 화면상의 vm이라는 div 요소의 내용을 통째로 다시 쓰는 함수를 준비한다.

google.script.run.withSuccessHandler가 화면상에서 GAS로 작성한 처리에 액세스할 수 있다.

초기 묘사 화면


<!DOCTYPE html>
<html>
<head>
  <base target="_top">
  <meta charset="utf-8">
  <!-- BootStrap読み込み -->
  <?!= HtmlService.createHtmlOutputFromFile('css').getContent(); ?>
  <?!= HtmlService.createHtmlOutputFromFile('top_css').getContent(); ?>
</head>
<body>
  <div class="spinner" id="loading">
    <div class="rect1"></div>
    <div class="rect2"></div>
    <div class="rect3"></div>
    <div class="rect4"></div>
    <div class="rect5"></div>
  </div>
  <div id="vm" class="container-fluid"></div>
<script>document.getElementById("vm").innerHTML = "<?= getDisplay(); ?>"; </script>
<?!= HtmlService.createHtmlOutputFromFile('js').getContent(); ?>
</body>
</html>

이미지 하단의 div 요소 vm의 내용을 동적으로 다시 씁니다.
또, 초기 표시를 위해서, getDisplay()를 호출하고 있다.

화면 전환 처리



방금 JS에서 준비한 transition 함수를 호출한다.

 <div id="top">
 <div class="row justify-content-center">
  <h1>お見積作成サービス</h1>
 </div>
 <div class="row justify-content-center">
  <button id="button" onclick="transition('quotation');" type="button" class="button_top col-md-6">見積もり</button>
 </div>
 <div class="row justify-content-center">
  <button type="button" class="button_top col-md-6 text-center">請求書</button>
 </div>
 <div class="row justify-content-center">
  <button type="button" class="button_top col-md-6">月次レポート</button>
 </div>
</div>

호출은 일반적으로 onClick에서 JS 함수를 호출합니다.

실제 화면 전환



URL 천이 없이 이하와 같은 화면 천이를 실현할 수 있다.
※스타일 등은 각 사람 잘 하시기 바랍니다.




이상입니다.
사내 공부회의 자료로서.
new Date()가 현재 시간과 일치하지 않는 경우의 대처법
GAS에서 스프레드시트 이름을 가져와 셀로 설정

좋은 웹페이지 즐겨찾기

개발자 우수 사이트 수집

개발자가 알아야 할 필수 사이트 100선 추천 우리는 당신을 위해 100개의 자주 사용하는 개발자 학습 사이트를 정리했습니다
best100-homepage