Google Apps Script恧Vue.js悒ä½æć£ć¦ćæ悋

Google Apps Script恧ćÆć‚¦ć‚§ćƒ–ć‚¢ćƒ—ćƒŖć‚±ćƒ¼ć‚·ćƒ§ćƒ³ć‚’ä½œęˆć§ćć¾ć™ćŒć€ćć®ć¾ć¾ć§ćÆä½•ć®ä½œęˆę”Æę“ć‚‚ć‚ć‚Šć¾ć›ć‚“ć€‚ęœ€čæ‘ćÆ态JavaScriptć®å„ēØ®ćƒ•ćƒ¬ćƒ¼ćƒ ćƒÆćƒ¼ć‚Æć§ć‚¦ć‚§ćƒ–ć‚¢ćƒ—ćƒŖć‚±ćƒ¼ć‚·ćƒ§ćƒ³ć‚’ä½œęˆć™ć‚‹ć®ćŒå½“ćŸć‚Šå‰ć«ćŖć£ć¦ćć¦ć„ć¦ć€GASäøŠć§jQueryć§é ‘å¼µć‚‹ćØ恄恆恮ćÆč³¢ę˜Žć§ćÆć‚ć‚Šć¾ć›ć‚“ć€‚ćć“ć§ä»Šå›žåˆ©ē”Øć™ć‚‹ć®ćŒć€Vue.js怂

GUIćƒ•ćƒ¬ćƒ¼ćƒ ćƒÆćƒ¼ć‚Æ恧ćÆćŖ恏惐惃ć‚Æć‚Øćƒ³ćƒ‰ć®ę§˜ć€…ćŖę“ä½œć‚’č”Œć†ē‚ŗć®ćƒ¦ćƒ¼ć‚¶ć‚¤ćƒ³ć‚æćƒ¼ćƒ•ć‚§ćƒ¼ć‚¹ćƒ•ćƒ¬ćƒ¼ćƒ ćƒÆćƒ¼ć‚Æ恧态GUI恫恤恄恦ćÆ刄途VuetifyćØå‘¼ć°ć‚Œć‚‹ćƒ•ćƒ¬ćƒ¼ćƒ ćƒÆćƒ¼ć‚ÆćŒå­˜åœØ恙悋怂

ā€»ä»Šå›žćÆćƒ‡ć‚£ćƒ¬ć‚Æćƒ†ć‚£ćƒ–ćØå‘¼ć°ć‚Œć‚‹č¶…åŸŗęœ¬éƒØåˆ†ć ć‘ć€‚

é›£ę˜“åŗ¦ļ¼š

今回ä½æē”Øć™ć‚‹ć‚µćƒ³ćƒ—ćƒ«ćƒ•ć‚”ć‚¤ćƒ«

Vue.jsćØćÆ

ꦂ要

Vue.jsćØćÆ态React.js悄AnqularJSćŖć©ć®ć‚ˆć†ćŖćƒ•ćƒ¬ćƒ¼ćƒ ćƒÆćƒ¼ć‚Æ恮ļ¼‘ć¤ć§ć€č»½é‡äø”ć¤é«˜ę©Ÿčƒ½ć€ćŠć¾ć‘ć«å­¦ēæ’ć‚³ć‚¹ćƒˆćŒä½Žćć¦ęøˆć‚€ćØčØ€ć‚ć‚Œć‚‹ć‚‚ć®ć§ć€JavaScriptć®å­¦ēæ’ć§ć®ć‚ć‚‹ę®µéšŽć¾ć§åˆ°é”ć—ćŸć‚‰ć€ę‰‹ć‚’å‡ŗ恙åæ…要恮恂悋ć‚øćƒ£ćƒ³ćƒ«ć€‚ćć‚Œć¾ć§ć®ć‚·ćƒ³ćƒ—ćƒ«ćŖJavaScript恧ćÆ面倒ćŖDOMę“ä½œćŖć©ć‚’ę‰‹č»½ć«ć—ć€äø”恤開ē™ŗć‚’å®¹ę˜“ć«ć—ć¦ćć‚Œć‚‹č£ę–¹ć§ć™ć€‚

Google Apps Scriptć§ć‚‚ć‚¦ć‚§ćƒ–ćƒ—ćƒŖć‚±ćƒ¼ć‚·ćƒ§ćƒ³ę§‹ēÆ‰ć§åˆ©ē”Ø恙悋äŗ‹ćŒåÆčƒ½ć§ć‚ć‚Šć€ć¾ćŸå…Øä½“åƒćŒć‚ć‚„ćµć‚„ćŖå­¦ēæ’åˆęœŸć§ć‚ć£ć¦ć‚‚ć€åæ…要ćŖéƒØåˆ†ć«ć ć‘å–ć‚Šå…„ć‚Œć¦ä½æ恆恓ćØ悂åÆčƒ½ļ¼ˆč¦ē“ ć®éƒØå“åŒ–ćŒåÆčƒ½ćŖć®ć§ć€ćƒœć‚æćƒ³č¦ē“ ć ć‘ć¾ćšćÆå­¦ēæ’恗恦ćæ悋ćØ恋ļ¼‰ć€‚

GAS恧ä½æć†ćƒ”ćƒŖ惃惈

Vue.jsćÆć€ć‚·ćƒ³ć‚°ćƒ«ćƒšćƒ¼ć‚øć‚¢ćƒ—ćƒŖć‚±ćƒ¼ć‚·ćƒ§ćƒ³ä½œęˆćŒåÆčƒ½ćØć„ć†č¬³ć„ę–‡å„ć§ć€Google Apps Scriptć®ć‚ˆć†ćŖ複ꕰ恮HTML悒駆ä½æ恙悋äŗ‹ćŒé›£ć—恄悂恮恫ćÆć‚‚ć£ć¦ć“ć„ć®ę©Ÿčƒ½ćŒęŗ€č¼‰ć€‚ć¾ćŸć€GAS恧開ē™ŗ悒恙悋äŗŗ達ćÆåŸŗęœ¬ć€VBA恮開ē™ŗ者ćŖ恩ćØåŒę§˜ć«ćƒ©ć‚¤ćƒˆćƒ¦ćƒ¼ć‚¶ćŒå¤šć„ć“ćØć‚‚ć‚ć‚Šć€å­¦ēæ’ć‚³ć‚¹ćƒˆćŒć‚¬ćƒƒćƒ„ćƒŖꎛ恋悋悈恆ćŖä»–ć®ćƒ•ćƒ¬ćƒ¼ćƒ ćƒÆćƒ¼ć‚Æć‚ˆć‚Šć‚‚ć€å­¦ēæ’ć‚³ć‚¹ćƒˆćŒä½Žć„ćƒ”ćƒŖćƒƒćƒˆćŒå¼·ć„ć§ć™ć€‚

åŸŗęœ¬ć€CDN恮JSćƒ•ć‚”ć‚¤ćƒ«ć‚’ćƒ­ćƒ¼ćƒ‰ć™ć‚Œć°č‰Æ恄恮恧态GASć®ć‚ˆć†ć«ć‚ć¾ć‚ŠęŸ”č»Ÿć«JSć‚„ćƒ©ć‚¤ćƒ–ćƒ©ćƒŖ悒配ē½®ć§ććŖ恄悈恆ćŖ開ē™ŗē’°å¢ƒć§ć‚ć£ć¦ć‚‚åˆ©ē”ØćŒå®¹ę˜“ćŖć®ć‚‚åˆ©ē‚¹ć®ļ¼‘恤怂

ć¾ćŸć€ä»–ć®ćƒ•ćƒ¬ćƒ¼ćƒ ćƒÆćƒ¼ć‚ÆćØé•ć„ć€å­¦ēæ’ć‚³ć‚¹ćƒˆćŒä½Žć„ćØ恄恆äŗ‹ćÆć€ćć®ćƒ•ćƒ¬ćƒ¼ćƒ ćƒÆćƒ¼ć‚Æå‰ęć§ć‚³ćƒ¼ćƒ‰ć‚’ēµ„ć‚“ć§ć‚‚å…±ęœ‰ć—ć‚„ć™ć„ļ¼ˆå¾Œä»»ć®äŗŗé–“ćŒć‚¹ć‚­ćƒ«ć«äøč¶³ćŒć‚ć£ć¦ć‚‚ć€čæ½ć„恤恑悋ļ¼‰ć€‚jQueryć®ć‚ˆć†ć«åœ§å€’ēš„恫äø€čˆ¬ēš„ć«åˆ©ē”Øć•ć‚Œć¦ć„ć‚‹ć‚‚ć®ć«čæ‘恄恮ćÆč‰Æć„ćƒ”ćƒŖ惃惈恧恙ļ¼ˆčæ½åŠ ć§AngularJSå­¦ć¹ćØčØ€ć‚ć‚Œć‚‹ćØēµ¶ęœ›ć™ć‚‹ć‹ć‚‚ć—ć‚Œć¾ć›ć‚“ć—ļ¼‰

åŸŗęœ¬ć‚¹ć‚æć‚¤ćƒ«

꜀悂åŸŗęœ¬ćØćŖć‚‹ćƒ“ćƒ„ćƒ¼ćØć„ć†ć‚‚ć®ć‚’ä½œć‚Šć€ę—¢å­˜ć®elementć«ć‚ć‚‹ę–‡å­—ć‚’ē½®ćę›ćˆć‚‹ćØć„ć£ćŸć‚±ćƒ¼ć‚¹ć§ćÆ仄äø‹ć®ć‚ˆć†ćŖć‚³ćƒ¼ćƒ‰ć«ćŖ悋怂

  • ć‚­ćƒŽć‚³ć‚’ę–™ē†ć®ćƒœć‚æćƒ³ć«ćÆ态cookpadćØć„ć†é–¢ę•°ć‚’å‘¼ć³å‡ŗć™ć‚ˆć†ć«@clickćŒć¤ć‘ć‚‰ć‚Œć¦ć„ć‚‹ļ¼ˆęœ¬ę„ćÆv-on悒ä½æ恆ļ¼‰
  • id恌appć®ćƒ“ćƒ„ćƒ¼ć‚’ćƒ­ćƒ¼ćƒ‰ę™‚ć«ćć®ć¾ć¾åˆęœŸåŒ–ć€‚{{cookman}}ć‚’ć‚­ćƒŽć‚³ć‚’čŖæē†ć™ć‚‹ć‚ˆćØć„ć†ćƒ”ćƒƒć‚»ćƒ¼ć‚øć‚’ć¾ćšć‚»ćƒƒćƒˆć—ć¦ć‚‹(dataćØ恄恆悻ć‚Æć‚·ćƒ§ćƒ³ļ¼‰ć€‚ęœ¬ę„ćÆv-text悒ä½æ恆怂
  • ē¶šć„恦态methodsć«ć¦é–¢ę•°ć‚’å®šē¾©ć€‚cookpadćØć„ć†é–¢ę•°ć‚’ē”Øę„ć—ć¦ć€Vueć‚’ć‚»ćƒƒćƒˆć—ćŸvmå¤‰ę•°ć®cookmanć«å€¤ć‚’ć‚»ćƒƒćƒˆć™ć‚‹ćØ态č‡Ŗ動ēš„恫cookmanć®ćƒ”ćƒƒć‚»ćƒ¼ć‚øćŒé€£å‹•ć—ć¦å…„ć‚Œę›æ悏悋ļ¼ˆć“ć“ćŒćƒć‚¤ćƒ³ćƒˆļ¼‰
  • äŗˆć‚å¤‰ę›“恌äŗˆå®šć•ć‚Œć¦ć‚‹č¦ē“ ćØJavaScriptć€é–¢é€£ćƒ”ć‚½ćƒƒćƒ‰ć‚’äø€å”Šć«ć—ć¦ćŠćļ¼ˆę§‹é€ åŒ–ļ¼‰ć®ćŒć€Vue.js恮ē‰¹å¾“怂ē›“ꎄDOMć‚’ę“ä½œć™ć‚‹jQueryć®ć‚ˆć†ćŖē…©é›‘ć•ćŒē„”恄怂

å®Ÿč”Œēµęžœ

äøŠčØ˜ć®ć‚³ćƒ¼ćƒ‰ć‚’å®Ÿč”Œć—ć¦ćæ悋怂恙悋ćØ态惜ć‚æćƒ³ćØåˆęœŸćƒ”ćƒƒć‚»ćƒ¼ć‚ø恌č”Øē¤ŗ恕悌态惜ć‚æćƒ³ć‚’ć‚ÆćƒŖ惃ć‚Æ恙悋ćØćƒ”ćƒƒć‚»ćƒ¼ć‚øćŒå…„ć‚Œę›æ悏悋怂

図ļ¼šjQuery恧悂å‡ŗę„ć‚‹ć‘ć‚Œć©ć€ćć‚Œć‚’ć‚ˆć‚Šę§‹é€ åŒ–ć—ć¦č”Œćˆć‚‹ć®ćŒVue.js

Vue.jsć§ć®å®Ÿč£…ä¾‹

ćƒ«ćƒ¼ćƒ—ć§ćƒ‡ćƒ¼ć‚æ悒ē”Ÿęˆ

ć‚¹ćƒ—ćƒ¬ćƒƒćƒ‰ć‚·ćƒ¼ćƒˆć®ćƒ‡ćƒ¼ć‚æ悒HTMLå“ć§å—ć‘å–ć‚Šć€ćƒ«ćƒ¼ćƒ—ć§ćƒ‡ćƒ¼ć‚æ悒ē”Ÿęˆć™ć‚‹ć€‚非åøøć«ć‚ˆćä½æ恆惑ć‚æćƒ¼ćƒ³ć§ć™ć€‚ć“ć‚Œć¾ć§ć®å “åˆć€ć‚³ćƒ¼ćƒ‰ć‚’ęŒæå…„ć™ć‚‹å “ę‰€ć®č¦ē“ ć‚’å–å¾—ć—ć€Forćƒ«ćƒ¼ćƒ—ć§HTMLćƒ‡ćƒ¼ć‚æ悒ē”Ÿęˆć—态要ē“ ć«innerHTML恧ęŒæå…„ć™ć‚‹ć€‚ćć†ć„ć£ćŸćƒ«ćƒ¼ćƒćƒ³ć§ć—ćŸć€‚Vue.js悒ē”Øć„ćŸå “åˆć€äŗˆć‚HTMLå†…ć§å®šē¾©ć—ć¦ć‚ć‚‹ć®ć§ć€å¤‰ę•°ć«å€¤ć‚’å…„ć‚ŒćŸć ć‘ć§ć€ć“ć‚ŒćŒå®Œęˆć—ć¾ć™ć€‚

GASå“ć‚³ćƒ¼ćƒ‰

  • å–å¾—ć—ćŸć‚¹ćƒ—ćƒ¬ćƒƒćƒ‰ć‚·ćƒ¼ćƒˆć‚’ćć®ć¾ć¾JSON.stringify恗恦čæ”恙恠恑恧ćÆ駄ē›®
  • JSONå½¢å¼ć‚’ēµ„ćæē«‹ć¦ć¦čæ”恗恦恂恒悋際恫态1č”Œē›®ć®ć‚æć‚¤ćƒˆćƒ«č”Œć‚’keyćØć—ć¦åˆ©ē”Ø恙悋ļ¼ˆć“ć‚Œć‚’HTMLå“ć§åˆ©ē”Øļ¼‰

HTMLå“ć‚³ćƒ¼ćƒ‰

  • ä»Šå›žćƒ†ćƒ¼ćƒ–ćƒ«ćƒ‡ć‚¶ć‚¤ćƒ³CSSćÆć€ć“ć”ć‚‰ć®ć‚µć‚¤ćƒˆć®ęƒ…å ±ć‚’åˆ©ē”Øć„ćŸć—ć¾ć—ćŸć€‚
  • Vue.jsć®å¤‰ę•°spreadć®åˆęœŸå€¤ćÆē©ŗ恫恗恦恂悋恮恧态č”Øē¤ŗ恗恟恠恑恧ćÆćƒ†ćƒ¼ćƒ–ćƒ«č”Øē¤ŗć•ć‚Œć¾ć›ć‚“ć€‚
  • sheetmané–¢ę•°ć‚’@clickć§å‘¼ć³å‡ŗ恙ćØ态GASå“ć‹ć‚‰JSONćƒ‡ćƒ¼ć‚æć‚’å–å¾—ć—ć€vm.spreadć«å€¤ć‚’ę ¼ē“ć—ć¾ć™ć€‚
  • å¤‰ę•°spreadć«å€¤ćŒę ¼ē“ć•ć‚Œć‚‹ćØ态<tr v-for=”rec in spread”>仄äø‹ć«ćƒ‡ćƒ¼ć‚æćŒćƒ«ćƒ¼ćƒ—ć§ę ¼ē“ć•ć‚Œć¾ć™ć€‚ćć‚Œćžć‚Œć®TDć‚æć‚°ć«ęŒ‡å®šć®JSONć®å€¤ć‚’å…„ć‚Œč¾¼ć‚€ć‚ˆć†ć«ćŖć£ć¦ć„ć¾ć™ć€‚
  • v-forćŒćƒ«ćƒ¼ćƒ—ć«ćŖć‚Šć¾ć™ćŒć€for each恠ćØꀝ恈恰č‰Æ恄恧恙怂
  • JavaScriptć§ćƒ«ćƒ¼ćƒ—ć®ę§‹ę–‡ć‚„innerHTMLćØć„ć£ćŸć‚³ćƒ¼ćƒ‰ćÆčؘčæ°ć®åæ…č¦ćŒć‚ć‚Šć¾ć›ć‚“ć€‚
  • jQuery恠ćØé…åˆ—ć«ćƒ‡ćƒ¼ć‚æć‚’å…„ć‚Œć¦ć€HTML恫悂čæ½åŠ ć—ć¦ćƒ»ćƒ»ćƒ»å‰Šé™¤ć®ę™‚ćÆ逆悒怂vue.jsćÆćƒ‡ćƒ¼ć‚æć‚’ę“ä½œć™ć‚Œć°ć€č¦ē“ ćŒå¤‰ć‚ć‚‹ć®ć§ć€å‡¦ē†ć‚’č½ćØ恙悈恆ćŖ恓ćØć‚‚é˜²ć’ć¾ć™ć€‚
  • computed恫恦态spreadå¤‰ę•°ć®äø­ć®ä»¶ę•°ć‚’č‡Ŗ動ēš„ć«å–å¾—ć—åę˜ ć—ć¦ć„ć¾ć™ć€‚

å®Ÿč”Œēµęžœ

å…„åŠ›ćƒ‡ćƒ¼ć‚æć®åę˜ ćØ取得

ćƒ†ć‚­ć‚¹ćƒˆćƒœćƒƒć‚Æć‚¹ć«ćƒ¦ćƒ¼ć‚¶ćŒå…„ć‚ŒćŸęƒ…å ±ć‚’å–å¾—ć—ć€HTMLäøŠć«å³åę˜ ć€‚ć¾ćŸć€ćć®å€¤ć‚’å–å¾—ć—ć¦ę¬”ć®å‡¦ē†ć‚’č”Œć†ć€‚ć“ć‚Œć‚‚éžåøøć«ć‚ˆćåˆ©ē”Ø恙悋惑ć‚æćƒ¼ćƒ³ć§ć™ć­ć€‚ćƒ†ć‚­ć‚¹ćƒˆćƒœćƒƒć‚Æć‚¹ćØHTMLć®ęŒ‡å®šéƒØ分ćØć‚’é€£ēµć™ć‚‹ćƒ†ć‚Æ惋惃ć‚Æć§ć™ć€‚ć¾ćŸć€å–å¾—ć—ćŸćƒ‡ćƒ¼ć‚æć§ć‚¹ćƒ—ćƒ¬ćƒƒćƒ‰ć‚·ćƒ¼ćƒˆć®ćƒ‡ćƒ¼ć‚æ悒ꤜē“¢ć—态čæ”ć—ć¾ć™ć€‚

GASå“ć‚³ćƒ¼ćƒ‰

  • 単ē“”ć«ć‚·ćƒ¼ćƒˆć®ćƒ‡ćƒ¼ć‚æć‚’å–å¾—ć€é…åˆ—ć‹ć‚‰åˆč‡“ć™ć‚‹ćƒ¬ć‚³ćƒ¼ćƒ‰ćŒć‚ć£ćŸć‚‰ć€äŗŗå£åˆ—ć®å€¤ć‚’čæ”ć—ć¾ć™ć€‚

HTMLå“ć‚³ćƒ¼ćƒ‰

  • this.spreadć§ćƒ†ć‚­ć‚¹ćƒˆćƒœćƒƒć‚Æć‚¹ć®å€¤ć‚’å–å¾—ć•ć›ć¦ć„ć¾ć™ć€‚
  • ć¾ćŸć€å–å¾—ę™‚ć«ćÆv-modelć«ć¦ćƒ‡ćƒ¼ć‚æ恮č”Øē¤ŗå…ˆć‚’ęŒ‡å®šć—ć¦ć‚‹ć®ć§ć€ä½•ć‚‚ć›ćšćØć‚‚å…„åŠ›å¾Œć«å€¤ćŒHTMLćøåę˜ ć—ć¾ć™ć€‚
  • sheetchké–¢ę•°ć«ć¦GASå“ę¤œē“¢ć€‚ēµęžœć‚’alertć§å˜ē“”恫č”Øē¤ŗć—ć¦ć„ć¾ć™ć€‚

å®Ÿč”Œēµęžœ

ć‚æć‚°ć®å±žę€§ć«é€£ēµć•ć›ć‚‹

HTML恮ć‚æ悰恫ćÆä¾‹ćˆć°ć€ać‚æć‚°ć®å “åˆć€hrefå±žę€§ćŖć©ćŒć‚ć‚Šć¾ć™ć€‚ē“ ć®JavaScript恠ćØ态document.getElementById(id).hrefćØć„ć£ćŸå…·åˆć«ęŒ‡å®šć™ć‚‹ć‚¢ćƒ¬ć§ć™ć€‚ć“ć®å±žę€§å€¤ć«åÆ¾ć—ć¦ćƒ‡ćƒ¼ć‚æć‚’é€£ēµć™ć‚‹äŗ‹ćŒåÆčƒ½ć§ć™ć€‚

GASå“ć‚³ćƒ¼ćƒ‰

  • 単ē“”ć«ć‚¹ćƒ—ćƒ¬ćƒƒćƒ‰ć‚·ćƒ¼ćƒˆć®ćƒ‡ćƒ¼ć‚æ恮äø€éƒØć®åˆ—ć ć‘ć‚’å–å¾—ć—ć¦äŗŒę¬”å…ƒé…åˆ—ć§čæ”ć—ć¦ć„ć¾ć™ć€‚

HTMLå“ć‚³ćƒ¼ćƒ‰

  • GASå“ć‹ć‚‰ć®äŗŒę¬”å…ƒé…åˆ—ćƒ‡ćƒ¼ć‚æ悒v-for恫恦順ē•Ŗć«ćƒ­ćƒ¼ćƒ‰ć•ć›ć¦ć„ć¾ć™ć€‚
  • v-bindćÆēœē•„čؘčæ°åÆčƒ½ć€‚ć‘ć‚Œć©ć€ać‚æć‚°ć®å “åˆć‚ć‹ć‚Šć«ćććŖć‚‹ć®ć§ć€ć‚ćˆć¦ć¤ć‘ć¦ć„ć¾ć™ć€‚
  • listćÆ1ćƒ¬ć‚³ćƒ¼ćƒ‰åˆ†å…„ć£ć¦ć„ć‚‹ć®ć§ć€é…åˆ—ć®ęŒ‡å®šć§å€¤ć‚’å–ć‚Šå‡ŗć—ć¦ć¾ć™ć€‚
  • GASå“ć‹ć‚‰ć®ćƒ‡ćƒ¼ć‚æć®å–å¾—ćŒć‚‚ćŸć¤ćć®ć§ć€č”Øē¤ŗćÆå·„å¤«ćŒåæ…要ļ¼ˆv-if悄v-cloak悒ä½æ恆ćØč‰Æ恄恋悂ļ¼‰

å®Ÿč”Œēµęžœ

ć‚¤ćƒ³ćƒ©ć‚¤ćƒ³ē”»é¢é·ē§»ć‚’実ē¾ć™ć‚‹

Vue.js恫ćÆcompnentćØć„ć£ćŸć‚‚ć®ćÆ态routerćØć„ć£ćŸć‚·ćƒ³ć‚°ćƒ«ćƒšćƒ¼ć‚øć‚¢ćƒ—ćƒŖć‚±ćƒ¼ć‚·ćƒ§ćƒ³ć«å½¹ē«‹ć¤ę©Ÿčƒ½ćŒć‚ć‚‹ć®ć§ć™ćŒć€Vue.js悒Google Apps Scriptć§åˆ©ē”Øć™ć‚‹å “åˆć«ęœ‰åŠ¹ćŖ恮ćÆ态怌v-htmlć€ć§ć™ć€‚ć“ć®v-htmlćÆä½æć„ę–¹ć‚’é–“é•ćˆć‚‹ćØXSSå•é”Œć‚’å¼•ćčµ·ć“ć™äŗ‹ćŒć‚ć‚‹ć®ć§ć€å®‰å…ØćŖć‚½ćƒ¼ć‚¹ć‚„ē’°å¢ƒäø‹ć§ć ć‘ä½æć†ć‚ˆć†ć«ćØć€å…¬å¼ć‚µć‚¤ćƒˆć«ć‚‚čؘčæ°ć•ć‚Œć¦ć„ć¾ć™ć€‚

componentć®å “åˆć€templateć«ć¦å‚ē…§ć§ćć‚‹ć®ćÆč‡Ŗčŗ«ć®Vueć®ć‚¹ć‚³ćƒ¼ćƒ—ć®ēÆ„å›²å†…ć§ć‚ć‚‹ć®ćØ态templateć«ć‚¹ć‚ÆćƒŖćƒ—ćƒˆćƒ¬ćƒƒćƒˆć§HTML悒ēŖć£č¾¼ć‚“恧悂态č”Øē¤ŗćÆćŖć•ć‚Œć¾ć›ć‚“ć€‚ćć“ć§åˆ©ē”Øć™ć‚‹ć®ćŒć€v-htmlć§ć™ćŒć€ć“ć”ć‚‰ćÆ外éƒØ恋悉恮HTMLć‚’å–å¾—ć—ęµć—č¾¼ć‚ć‚‹ć®ć§ć€GAS恧ä½æć†å “åˆć«ćÆ非åøøć«ęœ‰ē”Ø恧恙怂

恟恠恗态ä½æć†å “åˆć«ćÆ仄äø‹ć®ę³Øꄏē‚¹ćŒć‚ć‚Šć¾ć™ć€‚

  • GASå“ć§ē”Øꄏ恗恟HTMLćƒ•ć‚”ć‚¤ćƒ«ć‚’getContentć§å¼•ć£å¼µć£ć¦ę„ć‚Œć‚‹ć®ćÆ态HTML, CSS怂
  • innerHTMLćØåŒć˜ć‚ˆć†ćŖå‹•ćć‚’ć—ć¾ć™ćŒć€ćƒ­ćƒ¼ćƒ‰ć—ćŸJavaScriptćÆ刄途ē”Øꄏ恙悋恋ļ¼Ÿå®Ÿč”Œć§ćć‚‹ēŠ¶ę…‹ć«ćŖ恑悌恰ćŖ悉ćŖ恄怂
  • ćƒ­ćƒ¼ćƒ‰ć—ćŸHTMLå†…ć§ć‚‚Vue悒ä½æćˆć¾ć™ćŒć€å‘¼ć³å‡ŗć—å…ƒć®vuećØidćŒč¢«ć‚‰ćŖć„ć‚ˆć†ć«ę³Øꄏ恗ćŖ恑悌恰ćŖ悉ćŖ恄怂

GASå“ć‚³ćƒ¼ćƒ‰

  • 単ē“”恫HTMLćƒ•ć‚”ć‚¤ćƒ«ć®äø­čŗ«ć‚’å–å¾—ć—ć¦ćć®ć¾ć¾čæ”ć—ć¦ć„ć¾ć™ć€‚å¼•ę•°ćÆHTMLåć‚’å–ć£ć¦ć„ć¾ć™ć€‚

HTMLå“ć‚³ćƒ¼ćƒ‰(moveview.html)

  • 惜ć‚æćƒ³ć‚’ć‚ÆćƒŖ惃ć‚Æ恙悋ćØč©²å½“ć™ć‚‹HTML悒GASå“ć‹ć‚‰čŖ­ćæć«č”Œćć€čæ”ć‚Šå€¤ć‚’v-htmlć§ęŒ‡å®šć•ć‚Œć¦ć„ć‚‹å “ę‰€ćøęŒæå…„ć—ć¦ćć‚Œć¾ć™ć€‚
  • vm_link恮Ꙃ恠恑态makelinké–¢ę•°ć‚’HTMLć®ćƒ­ćƒ¼ćƒ‰å¾Œć«å®Ÿč”Œć—ć¦ć„ć¾ć™ć€‚

HTMLå“ć‚³ćƒ¼ćƒ‰(vm_table.html)

  • GASå“ć‹ć‚‰getContentć§å–å¾—ć™ć‚‹HTMLć®ä¾‹ć§ć™ć€‚
  • ć‚µćƒ³ćƒ—ćƒ«ć®HTMLćŠć‚ˆć³CSSćƒ‡ćƒ¼ć‚æćÆć“ć”ć‚‰ć‹ć‚‰åˆ©ē”Øć•ć›ć¦ć„ćŸć ćć¾ć—ćŸć€‚
  • ć¾ć‚‹ć§ć€vuećƒ•ć‚”ć‚¤ćƒ«ć§ćƒ‘ćƒƒć‚±ćƒ¼ć‚øć—ćŸć‹ć®ć‚ˆć†ćŖć‚¹ć‚æć‚¤ćƒ«ć§GASå“ć‹ć‚‰ć‚³ćƒ¼ćƒ‰ć‚’ćƒ­ćƒ¼ćƒ‰ć—ć¦ćć®ć¾ć¾åˆ©ē”Ø恙悋äŗ‹ćŒåÆčƒ½ć§ć™ć€‚

å®Ÿč”Œēµęžœ

関連ćƒŖćƒ³ć‚Æ

å…±ęœ‰ć—ć¦ćæ悋ļ¼š

ć‚³ćƒ”ćƒ³ćƒˆć‚’ę®‹ć™

ćƒ”ćƒ¼ćƒ«ć‚¢ćƒ‰ćƒ¬ć‚¹ćŒå…¬é–‹ć•ć‚Œć‚‹ć“ćØćÆć‚ć‚Šć¾ć›ć‚“ć€‚ * ćŒä»˜ć„ć¦ć„ć‚‹ę¬„ćÆåæ…須項ē›®ć§ć™

ć“ć®ć‚µć‚¤ćƒˆćÆć‚¹ćƒ‘ćƒ ć‚’ä½Žęø›ć™ć‚‹ćŸć‚ć« Akismet 悒ä½æć£ć¦ć„ć¾ć™ć€‚ć‚³ćƒ”ćƒ³ćƒˆćƒ‡ćƒ¼ć‚æć®å‡¦ē†ę–¹ę³•ć®č©³ē“°ćÆć“ć”ć‚‰ć‚’ć”č¦§ćć ć•ć„ć€‚