Google Apps Scriptのウェブアプリでメディアクエリ対応
Google Apps ScriptのWebアプリケーションでスマフォのレスポンシブ対応・メディアクエリ対応するときにはちょっと変わったテクニックが１つ必要です。故に通常のウェブアプリのようにHTML側にMetaタグを書いてしまい、結果動かないということがちょいちょい報告されます。
今回そのメディアクエリ部分対応をテストしてみました。
目次
今回利用するスプレッドシート
- メディアクエリテスト - Google Spreadsheet
メディアクエリとは、ウェブアプリを開いてるデバイス画面のサイズに応じて見せ方を変える為のCSSのテクニックの１つです。今回は画面サイズに応じてClass指定した内容を表示/非表示を切り替えるものを作っています。
JavaScriptでデバイス判定をする方法もありますが、CSSで完結できるものはCSSで構築したほうが望ましいでしょう。
スマフォ対応させてみる
ソースコード
GAS側コード
Google Apps Scriptのウェブアプリでレスポンシブというかメディアクエリ対応させるためには、doGetでデプロイする際にaddMetaTagでviewport指定をしないと反映しません。HTML側でMetaタグを使っても効きませんので注意が必要です。
|
1 2 3 4 5 |
function doGet(e) { var html = HtmlService.createHtmlOutputFromFile('index') .addMetaTag("viewport", "width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=10.0"); return html; } |
HTML側コード
HTML側では、Styleの中で通常通りメディアクエリを記述することで反映します。今回は自分が使ってるPCおよびZenfone8 flipのサイズに合わせて調整しています。こちらのサイトで自分のスマフォの横サイズを調べることが可能です。
3パターンで構成しています。スマフォ縦、スマフォ横、デスクトップの３つで構成しています。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 |
<!DOCTYPE html> <html> <head> <base target="_top"> <style> @media screen and ( min-width:100px) { .desktopHidden { display:none;} .mobileHidden { display:inline;} } @media screen and (min-width:413px){ .desktopHidden { display:inline;} .mobileHidden { display:inline;} } @media screen and (min-width:867px) { .desktopHidden { display:inline;} .mobileHidden { display:none;} } </style> </head> <body> <a href='https://www.google.com/' target='_blank' class='mobileHidden'>モバイル</a> <a href='https://www.yahoo.co.jp/' target='_blank' class='desktopHidden'>デスクトップ</a> </body> </html> |
ウェブアプリとしてデプロイ
これらのメソッドを使っても、最終的に「ウェブアプリケーションとしてデプロイ」をしなければ、ウェブページは表示されません。また、このウェブアプリケーションとしてデプロイはいくつかのハマりポイントがありますので注意が必要です。公開の仕方は以下の手順。
- スクリプトエディタを開く
- 右上のデプロイをクリック
- 新しいデプロイをクリック
- 種類の選択ではウェブアプリを選択し、次のユーザとしてアプリケーションを実行で誰の権限で動かすかを指定する。自分か？アクセスしてるユーザの二択。
- アプリケーションにアクセスできるユーザを指定する。自分のみ、組織内全員、Googleアカウントを持つ全員、全員の四択。但し、全員の場合はGoogleアカウントが必要で、匿名含むの場合は、Googleアカウントなしでアクセス可能です。
- 最後に導入すると、ウェブアプリケーションのURLが取得できます。このURLでアクセスをします。URLの最後がexecが本番用、devがテスト用で、テスト用はデプロイをテストをクリックすると表示されますが、変更したコードがそのまますぐに反映されてしまうので、テスト用のURLで運用しないように。
- 次回以降コードを編集して再デプロイ時はデプロイを管理から同じURLにて、新しいバージョンを指定して発行することが出来ます。
※5.の設定はGoogle Workspaceの設定次第では、Googleアカウントを持つ全員や全員は選択肢に出てこない事があります。
図：デプロイの仕方で挙動が変わります。
デプロイしたサンプル
フルスクリーンでテストをする場合はこちらのリンクをクリックします。
