GASのウェブアプリでも外部のJavaScriptのライブラリを使うことができます。今回はQRコードを個別に生成するケースでJavaScriptライブラリqrcode.min.jsを使った場合のGASでの処理例です。
基本的にはJavaScriptライブラリを読み込んだhtmlファイルをGASのdoGet関数で表示させます。
//GAS
function doGet() {
return HtmlService.createTemplateFromFile("index")
.evaluate()
.setXFrameOptionsMode(HtmlService.XFrameOptionsMode.ALLOWALL)
.addMetaTag('viewport', 'width=device-width, initial-scale=1');
}
html(index)ファイルのhead内でJavaScriptライブラリを読み込みます。
ダウンロードしたライブラリを使う場合の例
1.ソースをまるごとコピーしてhtmlファイルとして保存しておきます。
2.index.htmlのheadタグ間でライブラリのファイルを読み込みます。
<script>
<?!= HtmlService.createHtmlOutputFromFile('qrcodeminjs').getContent(); ?>
</script>
CDNが使える場合の例
直接読み込むので上記のようなライブラリファイルの作成は必要ありません。
<script src="ｈｔｔｐｓ(要半角変更)://cdnjs.cloudflare.com/ajax/libs/qrcodejs/1.0.0/qrcode.min.js"
integrity="sha512-CNgIRecGo7nphbeZ04Sc13ka07paqdeTu0WR1IM4kNcpmBAUSHSQX0FslNhTDadL4O5SAGapGt4FodqL8My0mA=="
crossorigin="anonymous" referrerpolicy="no-referrer"></script>
qrcode.jsの使い方
基本的にはhtml側のJavaScriptで下のように、内容、表示場所、大きさ、色を指定するだけでQRコードが表示されます。
const msg = 'QRコードの内容';
const qrDiv = document.getElementById("qrcode");// 表示場所の指定
new QRCode( qrDiv, {
text: msg,
width: 150,
height: 150,
colorDark : "#000000",
colorLight : "#ffffff",
} );
GASでの処理例
QRコードに変換したい内容をGAS側で処理してJavaScriptに渡すには以下の2つの方法があります。
1.doGet() 関数内で処理する例
上記
const msg = 'QRコードの内容';
の行を
const msg = <?!= contents ?>;
に変更しておき、
doGet()関数を
const indextpage = HtmlService.createTemplateFromFile("index");
let msg = 'QRコードにしたい内容';
indextpage.contents = msg;
return indextpage
.evaluate()
.addMetaTag('viewport', 'width=device-width, initial-scale=1')
.setXFrameOptionsMode(HtmlService.XFrameOptionsMode.ALLOWALL);
2.google.script.runで処理する例
//html側JavaScript
let m = 'test';
google.script.run
.withSuccessHandler(function2)//成功した場合の処理関数名(JavaScript)
.withFailureHandler(function3)//失敗した場合の処理関数名(JavaScript)
.myFunction1(m);//最初に実行されるGASの関数名(引数mを送る場合)
※成功した場合も失敗した場合も戻り値があれば受け取り可
function function2(m){なんらかの処理}
