GASで作成したWebページをスマホで表示させたいときのmetaタグviewportの設定


viewport

photo credit: robjstanley Window via photopin (license)

みなさん、こんにちは!
タカハシ(@ntakahashi0505)です。

GASユーザーのためのHTML入門、簡単なWebページの作り方についてお伝えしています。

前回の記事はコチラ。

GASで作成したWebページにファビコンを設定する方法
GASユーザーのためのHTML入門、簡単なWebページの作り方をお伝えしています。今回は、GASで作成したWebページにファビコンを設定する方法です。Googleドライブ内の画像の指定の仕方もありますよ。

GASのWebページにファビコンを設定する方法をお伝えしました。

もう、だいたいOKなのですが、もうひとつ重要なことを確認しておきたいと思います。

そう、スマホでの表示です。

GASで作ったWebページをスマホでも使いたいときありますよね。

その場合、これまで作ってきたコード群にもうひと手間が必要になります。

ということで、今回はGASで作成したWebページをスマホで表示させたいときのmetaタグviewportの設定についてです。

では、行ってみましょう!

前回までのおさらいと今回のお題

さて、前回までのおさらいです。

HTMLファイル「index.html」はコチラ。

そして、「コード.gs」はコチラです。

さらに、Bootstrapを導入するために、「css.html」と「js.html」を以下のようにしています。

これにてWebページを表示すると以下のようになります。

GASで作成したWebページ

だいぶ出来上がりましたね。

もう完成といってもいいかも知れません。

スマホで表示させた場合

ただ、このGASによるWebページをスマホで表示させると、こうなります。

GASのWebページをスマホで表示

小っちゃ…!!!

そうなんです、無理やりスマホの画面サイズに全部詰め込んじゃう感じになるんですね…

今回は、この現象を解決していきます。

Webページをスマホ対応する

さて、結論から言ってしまいますと、これを解決するには、headタグ内にviewportの設定をmetaタグで指定すればOKです。

一般的なWebページ制作でのviewportの設定

一般的なWebページ制作の場合は、以下のmetaタグをheadタグ内に記述します。

<meta name=”viewport” content=”width=device-width, initial-scale=1>

まず、metaタグですが、色々な設定をするためのタグです。

そして、そのname属性に「viewport」を指定すると、「文書の表示領域」を設定することができます。

そして、content属性にviewportに関する設定を記述していくのですが、上記のものは

  • width=device-width:表示領域の幅を端末画面の幅に合わせる
  • initial-scale=1:初期のズームの倍率を1、つまり拡縮なしに設定しておく

という意味になります。

ただ、これまでページタイトルやファビコンでお伝えしてきたとおり、GASのWebページではheadタグ内はうまく機能しない…そしてそれは今回のviewportについてのmetaタグについても同様です。

addMetaTagでmetaタグを指定する

GASのWebページでmetaタグを指定するために、addMetaTagメソッドが用意されています。

書き方はこうです。

HtmlOutputオブジェクト.addMetaTag(name属性の値, content属性の値)

つまり、今回の場合は、以下のような設定をすればよいということになります。

こちらで保存の上、プロジェクトのバージョンを「新規作成」で更新しましょう。

GASのWebページでプロジェクトのバージョンを新規作成

スマホなどで確認するときには、都度バージョンを新しく新規作成してくださいね。

そして、スマホで確認すると…

GASのWebページをviewport設定してスマホで表示

スマホでも見やすいサイズで表示されるようになりました。

まとめ

以上、GASで作成したWebページをスマホで表示させたいときのmetaタグviewportの設定についてお伝えしました。

GASのWebページをスマホで見る必要があるときには、addMetaTagメソッドでの指定は必須になると思いますので、忘れずにどうぞ…!
ここまで長らくお伝えしてきたGASユーザーのためのHTML入門ですが、いったんここまででシリーズは完結となります。

次は新シリーズとして、クライアント側のJavaScriptも含めて、Webアプリケーションの作り方をお伝えしていければと思いますよ。

どうぞお楽しみに!

連載目次:GASユーザーのための初めてのHTML・CSS講座

Google Apps ScriptではHTML・CSSを使ってWebページを作成し、公開することもできます。本シリーズでは、HTMLやCSSの全くの初心者が、GAS環境を利用してその基本的な知識を身に着けられるようにお手伝いしますよ!
  1. Google Apps Scriptで最も簡単なWebページを作成して公開する
  2. GASでWebページを表示するdoGet関数のスクリプトについて丁寧に解説
  3. GASで作成した最も簡単なWebページのHTMLコードについて丁寧に解説
  4. 【GASユーザーのためのHTML入門】よく使う基本のHTMLタグを紹介します
  5. 【GASユーザーのためのHTML入門】アンカーリンクを張るaタグの書き方
  6. GASのWebページにGoogleドライブ内の画像を挿入する方法
  7. GASで作ったWebページにCSSでスタイルをする最初の一歩
  8. 【GASユーザーのためのHTML入門】好きな要素にだけCSSでスタイルを適用する
  9. 【GASユーザーのためのHTML入門】範囲指定するだけの便利なdivタグとspanタグ
  10. GASでWebページを作るときにHTMLとCSSを別ファイルに記述する方法
  11. GASでWebページを作成する際にCSSフレームワークBootstrapを導入する方法
  12. GASのWebページのナビゲーションをBootstrapでスタイルする方法
  13. GASとBootstrapでWebページを超簡単にいい感じのレイアウトにする方法
  14. GASでWebページを作るときにページのタイトルを設定する方法
  15. GASで作成したWebページにファビコンを設定する方法
  16. GASで作成したWebページをスマホで表示させたいときのmetaタグviewportの設定

The following two tabs change content below.
株式会社プランノーツ代表、コミュニティ「ノンプロ研」主宰。1976年こどもの日生まれ。東京板橋区在住。「ITで日本の『働く』の価値を上げる!」をテーマに、VBA&GASの開発、講師、執筆などをしております。→詳しいプロフィールはコチラ ★ご依頼・ご相談はお気軽にどうぞ!→お問い合わせはコチラ ★フォロー頂ければ嬉しいです。

コメント