GASの応用

GASとHTMLで作ったWebアプリをスマホ対応させる方法

スマホ対応 GASの応用

みなさんこんにちは!GASおじさんです。

GAS x HTMLで確認画面付きの本格的な発注フォームを作ろう」シリーズの第11回です。

前回の記事はこちら。

前回までで無事、発注フォームの一通りの機能を実装することができました。

完成したフォーム画面
無事完成!

しかし現状はスマホ対応できていないので、スマホ画面で扱いにくい状態です。

ためしにF12キーでデベロッパーツールを開いて、スマホ画面で表示した場合どうなるか確認してみましょう。

スマホ画面表示

このようにスマホで表示すると、画面が小さくなってしまい、操作性が悪い状態です。

現代はスマホファーストの時代です。スマホでも扱いやすいようにWebページを構築することは、もはや必須事項と言えるでしょう。

ちなみにスマホ対応したサイトのことを「モバイルフレンドリーなサイト」と言ったりもします。

ということで今回は作成したフォームをスマホ対応させる方法を解説していきます。

Youtubeでも解説していますので、動画で見たい方は以下からどうぞ。

GASとHTMLで作ったWebアプリをスマホ対応させる方法

結論から述べると、以下の1行を追加することで、スマホ対応させることができます。

htmlOutput.addMetaTag('viewport', 'width=device-width, initial-scale=1');

コード.gsのdoGet関数を以下のように書き換えてみましょう。

function doGet(e) {
  const items = getAllRecords('商品');
  const template = HtmlService.createTemplateFromFile('index');
  template.deployURL = ScriptApp.getService().getUrl();
  template.formHTML = getFormHTML(e, items);
  const htmlOutput = template.evaluate();
  htmlOutput.addMetaTag('viewport', 'width=device-width, initial-scale=1');
  return htmlOutput;
}

7行目を追加しました。

HtmlOutputオブジェクトに対してaddMetaTagメソッドを使っています。

通常、Webページを作るときは、以下の5行目ように、HTMLファイルのheadタグの中にmetaタグを追加することでスマホ対応させるのですが…

<!DOCTYPE html>
<html>
  <head>
    ...
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
  </head>
  <body>
    ...
  </body>
</html>

GASとHTMLでWebページを作る場合は、HTMLファイルにこちらを記述しても有効にならないんですね。

なので、GASファイル側でHtmlOutputオブジェクトに対してaddMetaTagメソッドを使うことによって、擬似的にmetaタグを追加する、ということをします。

それでは、コードを追加したらファイルを保存してデプロイしましょう。

あらためてデベロッパーツールでスマホ画面表示すると…

スマホ対応

無事、スマホ対応されました!

あとは、doPost関数にもHtmlOutputオブジェクトが複数あるので、すべてにaddMetaTagメソッドを適用しておきましょう。

function doPost(e) {
  const items = getAllRecords('商品');

  // 注文数が0の場合、alert付きでindex.htmlを返す
  if(isZero(e, items)) {
    const template = HtmlService.createTemplateFromFile('index');
    const alert = '少なくとも1個以上注文してください。';
    template.deployURL = ScriptApp.getService().getUrl();
    template.formHTML = getFormHTML(e, items, alert);
    const htmlOutput = template.evaluate();
    htmlOutput.addMetaTag('viewport', 'width=device-width, initial-scale=1');
    return htmlOutput;
  }

  // 商品が在庫切れの場合、alert付きでindex.htmlを返す
  if(outOfStock(e, items)) {
    const template = HtmlService.createTemplateFromFile('index');
    const alert = '入力中に在庫切れとなりました。再度入力してください。';
    template.deployURL = ScriptApp.getService().getUrl();
    template.formHTML = getFormHTML(e, items, alert);
    const htmlOutput = template.evaluate();
    htmlOutput.addMetaTag('viewport', 'width=device-width, initial-scale=1');
    return htmlOutput;
  }

  // index.htmlで「確認画面へ」ボタンが押されたらconfirm.htmlへ
  if(e.parameter.confirm) {
    const template = HtmlService.createTemplateFromFile('confirm');
    template.deployURL = ScriptApp.getService().getUrl();
    template.confirmHTML = getConfirmHTML(e, items);
    const htmlOutput = template.evaluate();
    htmlOutput.addMetaTag('viewport', 'width=device-width, initial-scale=1');
    return htmlOutput;
  }

  // confirm.htmlで「修正する」ボタンが押されたらindex.htmlへ
  if(e.parameter.modify) {
    const template = HtmlService.createTemplateFromFile('index');
    template.deployURL = ScriptApp.getService().getUrl();
    template.formHTML = getFormHTML(e, items);
    const htmlOutput = template.evaluate();
    htmlOutput.addMetaTag('viewport', 'width=device-width, initial-scale=1');
    return htmlOutput;
  }

  // confirm.htmlで「発注する」ボタンが押されたらcomplete.htmlへ
  if(e.parameter.submit) {
    createOrder(e, items);
    updateZaiko(e, items);
    sendMail(e, items);
    const template = HtmlService.createTemplateFromFile('complete');
    template.deployURL = ScriptApp.getService().getUrl();
    const htmlOutput = template.evaluate();
    htmlOutput.addMetaTag('viewport', 'width=device-width, initial-scale=1');
    return htmlOutput;
  }
}

これで全画面、スマホ対応できました!

まとめ

以上、「GASとHTMLで作ったWebアプリをスマホ対応させる方法」について解説しました。

冒頭でも述べた通り、現代は「スマホファースト」の時代です。

ユーザビリティを最大限高めるために、常に「スマホで見た場合どうなるか」という視点を持ちながらWebサイトやWebサービスを作ることが大切ですね!

連載目次: GAS x HTMLで確認画面付きの本格的な発注フォームを作ろう

  1. 【GAS x HTML】確認画面付きの本格的な発注フォームを作る
  2. GASとHTMLで簡単なWebページを表示する方法
  3. 【GAS】Bootstrapを使ってフォーム画面を作る方法
  4. doPost関数で確認画面ページに遷移させよう
  5. 確認画面ページから発注完了ページに遷移させよう
  6. 【GASxHTML】スプレッドシートの商品データを動的に表示する
  7. フォームの入力内容を確認画面ページに渡そう
  8. 確認画面ページに「修正する」ボタンを実装しよう
  9. 確認画面ページの「発注する」ボタンクリック後の機能を実装しよう
  10. 【GASxHTML】フォームのバリデーションを実装しよう
  11. GASとHTMLで作ったWebアプリをスマホ対応させる方法

GASを勉強するならこちら!

▼オススメ書籍はこちら!

スポンサーリンク
GASおじさんをフォローする
GASおじさんのブログ

コメント

  1. 柳谷智枝里 より:

    全くの素人なのですが、簡単な社内注文フォームをどうしても作成したく、大変助かりました。
    ただ、スマホ表示に対応させると、商品名が長いからか、入力画面で数量を選択しても見えなくなってしまいます。どのように改善すれば表示されるようになりますでしょうか?

    無料で公開しておられるものなのに恐縮なのですが、ご教示いただけるとありがたいです。
    よろしくお願いいたします。

タイトルとURLをコピーしました