画面タイトル・ボタン・説明文をカスタマイズする
この時間でやること
今回は、アプリの画面に表示される文字を、自分の企画に合わせて変えます。
商品名や価格は、前回 商品マスタ で変えました。
今回は、Apps Scriptの中にある
index.html
を編集します。
やることはこれだけです。
Apps Scriptを開く
↓
index.htmlを開く
↓
画面タイトルを変える
↓
説明文を変える
↓
ボタンの文字を変える
↓
保存する
↓
再デプロイして確認する
今日のゴール
この時間が終わると、アプリの雰囲気が変わります。
たとえば、最初はこうでした。
グッズ販売受付
これを、自分の企画に合わせて変えます。
3年A組 グッズ販売レジ
このように、文字を少し変えるだけでも、アプリが一気に自分の作品っぽくなります。
1. スプレッドシートを開く
まず、前回まで使っていたスプレッドシートを開きます。
https://docs.google.com/spreadsheets/
授業では、次のファイルを開きます。
イベントグッズ販売POS
2. Apps Scriptを開く
スプレッドシート上部のメニューから進みます。
拡張機能
↓
Apps Script
Apps Scriptの画面が開きます。
3. index.htmlを開く
左側のファイル一覧から、次のファイルをクリックします。
index.html
今回編集するのは、このファイルです。
index.html は、画面に表示される文字やボタンを作っています。
4. まずはタイトルを探す
index.html の中から、次の文字を探します。
<h1 class="page-title">グッズ販売受付</h1>
探すときは、検索を使うと早いです。
Windows：Ctrl + F
Mac：Command + F
検索欄に、
グッズ販売受付
と入力します。
5. タイトルを変更する
見つけたら、文字だけを変更します。
変更前です。
<h1 class="page-title">グッズ販売受付</h1>
変更後の例です。
<h1 class="page-title">3年A組 グッズ販売レジ</h1>
<h1 class="page-title"> や </h1> は消さないでください。
変えるのは、中の文字だけです。
OK：3年A組 グッズ販売レジ
NG：<h1> や </h1> まで消す
6. 説明文を変更する
次に、タイトルの下にある説明文を変更します。
探す文字はこちらです。
商品選択、現金決済、在庫管理、販売履歴、注文取消まで行えるイベント用POSです。
変更例です。
3年A組のオリジナルグッズを販売するためのレジアプリです。
商品選択から会計、在庫確認までこの画面で行えます。
長すぎると読みにくくなるので、1〜2文くらいがおすすめです。
7. 左上の小さな文字を変更する
次に、アプリ左上の表示を変えます。
検索で、次の文字を探します。
<span class="brand-kicker">学校内イベントで使用するECサイト</span>
変更例です。
<span class="brand-kicker">学校祭限定グッズ販売</span>
次に、こちらも探します。
<span class="brand-title">教材用</span>
変更例です。
<span class="brand-title">3年A組 POS</span>
ここを変えると、アプリの名前らしくなります。
8. メニュー名を変更する
左側、または上側のメニュー名も変えられます。
今はこの4つです。
販売
在庫
履歴
分析
検索して、必要に応じて変えます。
| 変更前 | 変更後の例 |
|---|---|
| 販売 | レジ |
| 在庫 | 商品管理 |
| 履歴 | 注文履歴 |
| 分析 | 売上分析 |
たとえば、この部分です。
<span>販売</span>
変更後です。
<span>レジ</span>
全部変えなくても大丈夫です。
まずは1つだけ変えてもOKです。
9. ボタンの文字を変更する
次に、ボタンの文字を変えます。
よく使うボタンはこちらです。
| 今の文字 | 変更例 |
|---|---|
| カートに追加 | 追加する |
| 現金決済を確定 | 会計を完了する |
| カートを空にする | 取り消す |
| 次の販売へ | 次のお客様へ |
| 在庫を更新 | 在庫を保存 |
| 明細を見る | 内容を見る |
| 注文を取消 | 注文を取り消す |
まずは、次の文字を検索します。
現金決済を確定
見つかったら、こう変えてみます。
会計を完了する
注意点です。
この文字は、HTMLのボタン部分だけでなく、JavaScriptの中にも出てくることがあります。
たとえば、次のような部分です。
submitOrderButton.textContent = '現金決済を確定';
ボタン名を完全にそろえたい場合は、ここも同じ文字に変えます。
変更例です。
submitOrderButton.textContent = '会計を完了する';
10. 保存する
変更できたら、必ず保存します。
Windows：Ctrl + S
Mac：Command + S
または、保存ボタンを押します。
保存しないと、変更が反映されません。
11. 再デプロイする
index.html を変更した場合は、Webアプリに反映するために再デプロイします。
Apps Script画面の右上から進みます。
デプロイ
↓
デプロイを管理
↓
鉛筆マーク、または編集
↓
バージョン
↓
新バージョン
↓
デプロイ
再デプロイが終わったら、WebアプリURLを開き直します。
すでに開いている場合は、再読み込みします。
Windows：Ctrl + R
Mac：Command + R
12. 画面で確認する
Webアプリを開いて、次を確認します。
□ タイトルが変わった
□ 説明文が変わった
□ 左上のアプリ名が変わった
□ メニュー名が変わった
□ ボタンの文字が変わった
反映されていれば成功です。
おすすめの変更例
迷った人は、以下のように変えてみましょう。
| 場所 | 変更後 |
|---|---|
| 左上の小さな文字 | 学校祭限定グッズ販売 |
| 左上のタイトル | 3年A組 POS |
| メインタイトル | 3年A組 グッズ販売レジ |
| 説明文 | クラス限定グッズを販売するためのレジアプリです。商品選択から会計、在庫確認までこの画面で行えます。 |
| 販売 | レジ |
| 在庫 | 商品管理 |
| 履歴 | 注文履歴 |
| 分析 | 売上分析 |
| 現金決済を確定 | 会計を完了する |
| カートに追加 | 追加する |
| 次の販売へ | 次のお客様へ |
よくあるつまずき
| 困ったこと | 原因 | 対応 |
|---|---|---|
| 画面が変わらない | 保存していない | Ctrl + S / Command + S |
| 保存したのに変わらない | 再デプロイしていない | デプロイを管理 → 新バージョン |
| 画面が崩れた | < や > を消した | 文字だけ変更する |
| ボタン名が一瞬戻る | JavaScript側の文字を変えていない | textContent の文字も変更 |
| どこを変えればいいか分からない | 検索していない | Ctrl + F / Command + F を使う |
編集するときのルール
初心者のうちは、これだけ守ればOKです。
タグは消さない
文字だけ変える
保存する
再デプロイする
確認する
タグとは、こういうものです。
<h1>
</h1>
<span>
</span>
<button>
</button>
この記号まで消してしまうと、画面が崩れることがあります。
最初は、中の文字だけ変えましょう。
ここまでできたかチェック
□ index.htmlを開いた
□ グッズ販売受付を検索した
□ 画面タイトルを変更した
□ 説明文を変更した
□ 左上のアプリ名を変更した
□ ボタンの文字を1つ以上変更した
□ 保存した
□ 再デプロイした
□ Webアプリで変更を確認した
全部できていれば成功です。
ミニ確認
Q1. 画面に表示される文字を変えるファイルはどれですか？
回答
index.html です。
Q2. 文字を探すときに使うショートカットは何ですか？
回答
Windowsは Ctrl + F、Macは Command + F です。
Q3. 変更するとき、最初はどこだけ変えるのが安全ですか？
回答
タグを消さずに、中の文字だけ変えます。
Q4. 変更したあと、Webアプリに反映するには何が必要ですか？
回答
保存して、再デプロイします。
今日のひとこと
画面の文字を変えるだけでも、アプリの印象は大きく変わります。
同じ仕組みでも、
グッズ販売受付
より、
3年A組 グッズ販売レジ
の方が、自分たちのアプリに見えます。
プログラミングでは、全部を作り直さなくても、少し変えるだけで使い道が広がります。
まずは、文字を変えて、自分のアプリにするところから始めましょう。
まとめ
今回は、index.html を編集して、画面の文字をカスタマイズしました。
やったことはこれです。
タイトルを変えた
説明文を変えた
メニュー名を変えた
ボタン名を変えた
保存した
再デプロイした
画面で確認した
次は、在庫・履歴・注文取消を確認して、業務アプリとしての流れを見ていきます。