スプレッドシートを、スマートフォンで使えるアプリにする（GAS）Spreadsheet App

スプレッドシートをアプリ化すると、何が変わりますか

• スマートフォンの小さな画面でも、表を横に送らずに 1 件ずつ読める
• 入力は画面の欄から行うので、関数の入ったセルや見出しを誤って消されない。必須の欄を空のまま保存させないこともできる
• 見るだけの人と、登録や修正をする人を分けられる

台帳はスプレッドシートのまま残るので、これまでどおりシートを直接開いて直すこともできます。

アプリにする前に、表をどう整えますか

画面を作る前に、表の形をそろえておきます。ここまではコードを書かずにできます。

1. 「顧客」「案件」のように、1 つの表を 1 つのシートに置く
2. 1 行目を見出しにする。画面が見出しの名前で列を探す作りにすれば、列の順番を入れ替えても崩れない
3. 左端に ID の列を作り、1 行に 1 つの番号を振る。同じ名前のお客さまがいても、どの行かを取り違えない
4. 状態や担当者のように決まった言葉しか入らない列は、プルダウンにしておく

GAS の Web アプリは、どう公開しますか

スプレッドシートの「拡張機能」→「Apps Script」を開き、下の 2 つを貼ります。index.html は、ファイルの「+」→「HTML」で、index という名前で作ります。シート名の「顧客」は、ご自分の表に合わせて直してください。

// コード.gs ── 開いた人に index.html の画面を返し、シートの中身を渡す
function doGet() {
  return HtmlService.createHtmlOutputFromFile('index')
    .setTitle('顧客一覧')
    .addMetaTag('viewport', 'width=device-width, initial-scale=1');
}

function getRows() {
  const sheet = SpreadsheetApp.getActiveSpreadsheet().getSheetByName('顧客');
  return sheet.getDataRange().getDisplayValues(); // 1 行目は見出し
}

<!-- index.html ── 1 行を 1 つの項目にして並べる -->
<ul id="list"></ul>
<script>
  google.script.run.withSuccessHandler(function (rows) {
    const list = document.getElementById('list');
    rows.slice(1).forEach(function (row) {
      const li = document.createElement('li');
      li.textContent = row.join(' / '); // 文字として出す
      list.appendChild(li);
    });
  }).getRows();
</script>

1. 「デプロイ」→「新しいデプロイ」→ 種類の歯車から「ウェブアプリ」を選ぶ
2. 「次のユーザーとして実行」を「ウェブアプリにアクセスしているユーザー」、「アクセスできるユーザー」を「Google アカウントを持つ全員」にしてデプロイする
3. 表示された URL をスマートフォンで開き、承認の画面で許可すると一覧が出る

開いた人の権限で動くので、スプレッドシートを共有していない人には中身が見えません。見せたい人には、スプレッドシートを閲覧者か編集者として共有します。値を getDisplayValues で文字として受け取っているのは、日付をシートの表示のまま渡すためです。

画面から書き込むとき、何に気をつけますか

一覧を出すだけなら上の 2 つで足ります。登録や編集もできるようにするときは、次の 3 つでつまずきます。

• 2 人が同時に保存すると、後の人の内容で上書きされる。LockService で書き込みを 1 件ずつにし、保存の前にその行が他の人に直されていないかを確かめる
• 「=」で始まる値をそのまま書くと、シートで数式として動いてしまう。先頭に「'」を付けるなどして、文字として保存する
• シートの値を画面に出すときは、上のコードのように textContent で文字として入れる。HTML として入れると、シートに書かれた文字がプログラムとして動くことがある

自分で組むか、キットを使うか、設定ごと頼むか

道は 3 つあります。

• 自分で組む: 一覧を見るだけなら、上のコードと公開の手順で足ります。費用はかかりません
• キットを使う: 「スプレッドシート業務アプリ キット」（¥12,800 の買い切り）は、「定義」シートに列の名前と型を書くだけで、一覧・検索・絞り込み・登録・編集・削除・CSV 出力の画面を組みます。幅の狭い画面では表がカードに切り替わり、権限は共有設定のまま効きます。顧客管理・案件管理・在庫管理の見本が入っていて、貼るのは 3 ファイル、置くのは 10 分ほどです ── BOOTH / note
• 設定ごと頼む: お使いの表に合わせた定義づくりと権限の設定、スマートフォンでの確認まで、こちらでお受けします ── ココナラ / ランサーズ

見本・キット・ご相談

• スプレッドシート業務アプリの見本を開く（その場で試せます）
• スプレッドシート業務アプリ キット（キットとテンプレートの一覧）
• 制作のご相談（料金の目安と進め方）