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

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

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

前回の記事はこちら。

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

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

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

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

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

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

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

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

GASとHTMLで作ったWebアプリをスマホ対応させる方法
まとめ
連載目次: GAS x HTMLで確認画面付きの本格的な発注フォームを作ろう

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とHTMLで作ったWebアプリをスマホ対応させる方法

まとめ

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

コメント