Google Apps Scriptでスマホ対応のカウントボタンを作る方法

HTML、CSS

Google Apps Script(GAS)で作成したスプレッドシートのカウントボタンは、PCでは簡単に動作しますが、スマホからではボタン画像にスクリプトを紐付けても動作しません。本記事では、スマホでも動作するカウント機能の作り方を解説します。

スマホでボタンが動かない理由

スプレッドシート上の画像や図形にスクリプトを割り当てる方法は、PCのブラウザ限定です。モバイルアプリやモバイルブラウザでは画像クリックによるスクリプト実行がサポートされていないため、ボタンが反応しません。

そのため、スマホから操作可能にするには別の方法を検討する必要があります。

Webアプリとして公開する方法

GASのWebアプリとして公開することで、スマホからでもボタン操作でスクリプトを実行できます。HTMLサービスを使って、ボタン付きのページを作成し、GAS関数に紐付けます。

例として、HTMLでボタンを作り、onclickでGASのincrementCount関数を呼び出すことができます。

具体的なHTMLとGAS連携例

HTML側:

<button onclick="google.script.run.incrementCount()">カウント</button>

GAS側: 既存のincrementCount関数をそのまま使用できます。

この方法で、スマホからでもボタンを押すとスプレッドシートの指定セルが更新されます。

デザインやレスポンシブ対応

スマホでの見やすさを考慮して、HTMLのボタンサイズやフォントを調整すると使いやすくなります。CSSを使ってレスポンシブ対応させることで、どの画面サイズでも快適に操作可能です。

例えば、幅をパーセンテージで指定したり、メディアクエリでスタイルを切り替えたりします。

まとめ

GASのスプレッドシートで画像ボタンにスクリプトを割り当ててもスマホでは動作しません。スマホ対応するには、GASのHTMLサービスでWebアプリとして公開し、ボタンをHTML上に作成して関数を呼び出す方法が有効です。

この手法を用いることで、PC・スマホ問わずスムーズにカウントボタンを動作させることができます。

コメント

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