GAS上でJavaScriptやCSSをHTMLと別ファイルで管理し、埋め込む方法

GASのWEBアプリケーションでは、GASを使ってhtmlファイルを生成し、それを表示している。普通のWEBのように、htmlファイルにJavaScriptを埋め込むこともできる。

JavaScriptやCSSをHTMLファイルに直で書き込むと読みにくいので、別のファイルに書いたJavaScriptやCSSをHTMLファイルで読み込む形をとることが多い。GASではファイルの扱いが面倒くさいが、以下のページの記述がわかりやすい。

GASでHTML/CSS/JavaScriptを使ってWebアプリケーションを作る方法

やっていることは、GASでHTMLファイルにJavaScriptやCSSを埋め込んでしまい、マージされたHTMLを表示させるというものだ。

GASのプロジェクトではHTMLファイルとしてJavaScriptやCSSを作っておく。このとき、HTMLファイルといえどもJavaScriptならscriptタグとその中身、CSSならstyleタグとその中身だけを書いておく。また、HTMLのテンプレートとなるファイルには、<?!= HtmlService.createHtmlOutputFromFile(‘ 読み込むファイル名 ‘).getContent(); ?> と記述しておく。

関連 [GAS] Google Apps Script のHtmlServiceまとめ

JavaScriptの利用例　ブラウザ上でQRコードを読み込む

JavaScriptを使うといろいろ可能性が広がる。

たとえば、スマホのブラウザ (Chrome, Safariなど) からQRコードを読み込ませることもできる。ユーザーにブラウザ以外のアプリをインストールさせる必要がない。

たとえば、次に示すページでは、フォームのテキストボックスにQRコードを読んだ結果を書き込むシンプルな方法を紹介している。

ネイティブアプリ不要！モバイルWebサイトにQRコードリーダーを実装する方法 LazarSoft/jsqrcodeを使った例。写真を撮ってQRコード読み込み。

[HTML5] QRコードリーダーを作成する cozmo/jsQRを使った例。ビデオで撮ってQRコードを検出すると結果がテキストで出てくる。

QRコードの生成や印刷の条件

QRコードの生成はGoogleスプレッドシートとGoogle Charts APIを使うのが楽。QRコードに埋め込みたい文字列とGoogle Chartsを呼び出す式を並べれば一気にQRコードを生成できる。
Google Charts APIのQRコードの説明

1個1個つくるならQRコードの生みの親デンソーウェーブのQRQRも使い勝手がいい。PCにソフトウェアをインストールすれば大量生成も可能。

QRコードの仕様を学びたければKeyenceの資料がわかりやすい。