Glideで英語多読記録アプリ(PWA)を作成してみる
Googleスプレッドシート（Google製のExcelの無料版）から簡単にPWA（Progressive Web Apps）を作成できるサイトGlide。ずっとこれで何かを作ってみたいと思っていたのですが、今回、英語多読記録アプリを作ってみました。
- 1. 開発環境
- 2. どんなアプリを作りたいか
- 3. Googleスプレッドシートの新規作成
- 4. GlideにGoogleログイン
- 5. 新規Glideアプリ作成
- 6. 項目を追加できるようにする
- 7. 開始と終了を日付としてDate picker入力にする
- 8. 語数や金額を数値に変更し、さらに累計語数などを削除
- 9. Share app ボタンをクリックしてアプリを公開
- 10. 自分のスマホでアプリを開いて入力してみる
- 11. Googleスプレッドシート上で累計語数と送金額を自動計算する
- 12. 累計語数と送金額は新しいSheetを作成して別のタブに表示する
- 13. ソースコード
- 14. Glide公式ドキュメント
開発環境
Windows 8.1 Pro
Chrome
Googleアカウント
https://www.glideapps.com/
どんなアプリを作りたいか
とりあえず、自分専用。最終的にはログイン形式にしたい（Glideでは難しいかも。）
- 読んだ本の題名
- YL（読みやすさレベル）
- 読んだ本の語数
- 累計語数 ← 自動計算したい
- 本の評価
- 金額
- 総金額 ← 自動計算したい
- 感想
- 知らない単語
- 開始
- 終了
Googleスプレッドシートの新規作成
Googleアカウントがなければ作成します（無料）。
Googleドライブ https://www.google.com/intl/ja/drive/ にログインします。
新規 をクリック
Googleスプレッドシート ＞ 空白のスプレッドシート の順にクリック
新しいタブが開いてスプレッドシートの画面になるので、題名を『英語多読記録』に変更
さらに、一番上の行に、以下のように項目を記入
GlideにGoogleログイン
Glideのページ https://www.glideapps.com/ へ行き、Sign In をクリックして、Googleアカウントのメールアドレスとパスワードを入力して、Googleログインします。
新規Glideアプリ作成
Googleログイン後、『+ New app』をクリック
以下のような画面になるので、先ほど作成した、『英語多読記録』をクリックしてから、『Select』をクリック。
すると、いきなり解説動画が始まりますが、とりあえず、消しておきます。
項目を追加できるようにする
以下のような画面になるので、Properties の中の、『ADD』をクリックして、
『Allow users to add items』のチェックボックスをONにします。
すると、以下のようになります。
開始と終了を日付としてDate picker入力にする
画面右上の『＋』ボタンをクリックします。ここから、いろいろなコンポーネントを追加することができます。
PICKERS の中の、『DATE』をクリックすると、
真ん中の画面の一番下に、 Date picker対応の項目が追加されるので、そのまま選択された状態で、画面右側の DATA の Column のところを、Googleスプレッドシートでの対応するカラム（列）を選択します。
今回は、『開始』と『終了』をDate pickerで追加しました。
画面右上の Date の左側の 『＜』 をクリックしてリスト表示にして、不要な項目を削除します。
語数や金額を数値に変更し、さらに累計語数などを削除
以下のようになりました。
Share app ボタンをクリックしてアプリを公開
画面左下の『Share app』ボタンをクリックしてアプリを公開します。
図の、Publish app ボタンをクリック。
アプリのアドレスを変更して、『Open app in browser』をクリック
以下のように新しいタブが開きます。できたのかな！？
自分のスマホでアプリを開いて入力してみる
自分のスマホのブラウザで、tadoku.glideapp.io を開き、入力してみます。
なんかうまくいっているようです。当然、PWA（Progressive Web Apps）として、ホーム画面に追加もできます。（オフラインで入力できるかどうかは試していません。）
Googleスプレッドシート上で累計語数と送金額を自動計算する
以下のような感じでやってみます。
このままだと、まだ題名などが未入力のものもリストに表示されてしまうため、以下のように設定しておきます。
具体的には、Properties ＞ FEATURES ＞ FILTER で、 題名 is not empty でフィルターすることにより、うまくいきました。
しかし、今度は、一覧から、累計語数と総金額が消えてしまいました。
Googleスプレッドシートを見てみると、以下のようになってしまっており、累計語数と総金額がうまく計算してもらえません。残念。
あと、無料プランでは、500行までだそうです。
https://docs.glideapps.com/all/guides/quick-starts/intermediate-techniques/calculating-columns
上のページを参考にして、以下のようにしてみました。
=ARRAYFORMULA(IF(LEN(C3) = 0, "", (C3)+D2))
このスプレッドシート上で、とりあえず、累計語数の3行目の”D3″と、送金額の3行目の”G3″に上のような数式を入力して、50行目くらいまでドラッグして、コピーしておきます。
これでやっと、無事、累計語数と送金額を自動的に計算してくれるようになったかと思いきや、ダメでした。。。
累計語数と送金額は新しいSheetを作成して別のタブに表示する
本当は、同じSheet内で表示したかったのですが、私の技術では無理でした。
まず、スプレッドシートでSheet1に加えてSheet2を新たに作成し、以下のようにしました。
sheet2の方で、累計語数と送金額の列を作成し、以下のコードで計算するようにしました。
=sum(sheet1!C2:C)
Glideの方では、『Tabs』をクリックしてから
画面右上の『＋』ボタンをクリックして、新しいタブをsheet2 から追加します。
Layout 画面に行き、 右側で、 Details を選択します。
文字の大きさが小さいですが、大きくするのは面倒なので、これでよしとします。
また、本当は3桁ごとにカンマを入れたいのですが、その方法も分かりませんでした。なかなかうまくいかないです。まあ、コーディング無しで簡単に作成できるので、仕方がないといえば仕方がないのかもしれません。
ソースコード
Glideのアプリ作成中に、Settingsのところで、『ほかの人もアプリをコピーできるようにする』のチェックボックスをONにすると、他の人も、同じアプリをコピペで作成することができるようになります。
同じアプリを作成されたい場合は、『COPY THIS APP』をクリックして、後はご自身のGoogleアカウントでログインしていただければ同じアプリを作成し、カスタマイズすることができます。
Glide公式ドキュメント
英語ですが、動画もふんだんにあって、分かりやすいです。まあ、ドラッグアンドドロップでアプリを作っていくのですから、その説明は、動画が分かりやすいですよね！
https://docs.glideapps.com/all/
