NoCodeのglideでスマホアプリを作ったお話＜その１＞

ノーコーダーの皆さん、ジャンボ！！！！


今回は、弊社が運用している女性向けリッチテキストメールマガジン[e-zines](https://e-zines.jp)のスマホクライアントをNoCodeの Google glide で作成したお話です。


## 作成したアプリ


![e-zines_cli3-min.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/537228/abc3adf8-623b-5d64-9fc9-84950079b503.gif)


<blockquote class="twitter-tweet"><p lang="ja" dir="ltr">このような感じのアプリです😊<a href="https://t.co/ce9fX4x1Z8">https://t.co/ce9fX4x1Z8</a><a href="https://twitter.com/hashtag/glide?src=hash&amp;ref_src=twsrc%5Etfw">#glide</a> <a href="https://twitter.com/hashtag/NoCode?src=hash&amp;ref_src=twsrc%5Etfw">#NoCode</a> <a href="https://twitter.com/hashtag/%E3%83%8E%E3%83%BC%E3%82%B3%E3%83%BC%E3%83%89?src=hash&amp;ref_src=twsrc%5Etfw">#ノーコード</a> <a href="https://t.co/IN31sxO3fI">https://t.co/IN31sxO3fI</a> <a href="https://t.co/2YwK60cGR6">pic.twitter.com/2YwK60cGR6</a></p>&mdash; えりっちょ💓女性向けメールマガジン開発エンジニア (@ericcho_9) <a href="https://twitter.com/ericcho_9/status/1290900849246367744?ref_src=twsrc%5Etfw">August 5, 2020</a></blockquote> <script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>

## ダウンロードはこちら　※動かせます。

[e-zineスマホクライアント](https://app.e-zines.jp/)


## 1.課題

弊社は、女性向けコンテンツを集めたメールマガジンの[e-zines](https://e-zines.jp)を運営しています。

スマホアプリの開発も実施したかったのですが、別プロジェクトなどで人員リソースを割り当てることができなかったため、保留としていました。

そこで最近流行りの NoCode（ノーコード） でアプリを作れないか？という話が雑談から生まれて私が担当することになりました。

着手から数時間でほぼ出来てしまうというとんでもないことが起きたのです！！Σ(￣□￣|||)

なんと次の日にリリースできてしまいました！！ちょっと怖いです・・・Σ(･ω･ﾉ)ﾉ！

## 2.作成手順

[glide](https://www.glideapps.com/)でアカウントを作成してログインします。

Create app... をクリックします。
![2020-08-06_12h27_11.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/537228/ae236967-08f0-7284-8db1-4cb7acc5fbb4.png)

From Google sheet... をクリックします。

しまった、、元になるスプレッドシートを作成していませんでした。

Googleドライブにスプレッドシートを作成します。

必要になる項目を（[e-zines](https://e-zines.jp)で使っている）データベースのフィールドから選んでシートの１行目にフィールド名を記入します。
<font color="red">※データベースのリレーションは割愛します。</font>

２つシートを使っているのでこのような形になります。
![2020-08-06_12h33_01.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/537228/5e08ddef-8b61-3768-7393-8efae0593fa2.png)
![2020-08-06_12h33_14.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/537228/f6824efc-7a42-0917-70b2-252b063bc17a.png)

データベースから抽出したデータをスプレッドシートにインポートします。

そしてスプレッドシートを保存します。

From Google sheet... をクリックして先ほど作成したGoogleドライブ内のスプレッドシートを選択します。

次の画面のメニューにあるデータベースアイコンをクリックすると以下のようにデータが入っていることが分かります。
![2020-08-06_12h38_00.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/537228/5c3b3a92-e015-92e6-f6b1-08b0b383600b.png)
<font color="red">※rel1は、glide内のみのシート間リレーションです。</font>
![2020-08-06_12h38_16.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/537228/55a9c157-c003-2d4b-7e9e-8421ffa1b07f.png)

すでにカード形式の記事リンクが無限スクロール出来ちゃっていました・・・。

あとは、glideを弄りながらシート間リレーションを作成したり、画面の表示形式を選んだり、各カテゴリーごとのタブのフィルター設定（[e-zines](https://e-zines.jp)は５つのカテゴリーに分かれています）、最後にタブのアイコンを設定するだけです。

もっと詳しく説明したいのですが、これはこうかな？と機能を調べながら弄っていたら出来ていました。。。。。。。。。。
<font color="red">※詳細に説明できるように意識的に触ってみます。</font>

ここまでの所要時間は、２時間くらいです。

Excelに詳しければ簡単に操作できるレベルです　Excelより簡単かもしれません・・・笑

## 3.デイリーデータのインポート

月曜日から金曜日まで各カテゴリー毎に配信されるメールをスプレッドシートに追加しなくてはいけません。

ここでハマりました！！Σ(￣ロ￣lll)ｶﾞｰﾝ

そうです　データベースから当日メール配信されたデータだけを抽出してスプレッドシートに追加しなくてはなりません。

SQL文を手動で実行してファイルに出力、そのファイルをスプレッドシートに手動入力というのは、スマートじゃない！

なのでこの部分については、スプレッドシートにデータファイルを取り込むGASを作成し、弊社のバックエンドエンジニアに協力してもらいcronやwindowsのスケジューラ、スプレッドシートのトリガー設定を行い無事に全自動でのデータ反映に成功しました。

複数のスケジューラを動かすため、反映されないという設定不具合もありましたが、現在は快調に動作しています。

## 4.Pro app版へのアップグレードとSHARE(公開)

glideの公式ブログ[Glide Goes Pro](https://www.glideapps.com/blog/glide-goes-pro)をご確認ください。

## 5.glide所感

glideの記事を多少読んでいた程度ですが、私の作業時間はテストも含め３時間くらいです。

どちらかというと弊社のバックエンドエンジニアのテスト工数のほうが数時間多かった気がしますが気のせいですね笑
<font color="red">※その２でスケジューラの設定を書きたいと思います。</font>
<br>
<font color="blue"><h2>みなさん、無料なのでぜひお使いください！使ってね！！使ってよー　( ﾉД`)ｼｸｼｸ…</h2></font>
<br>
<br>
現場からは以上です。