1行もコードを書かずにネイティブアプリ（もどき）をリリースする7つのステップ

## 前提
これだけでちゃんとしたアプリが作れるとは言いませんし、ネイティブアプリオワタとは言いません。
ただ、ノーコードでアプリをデプロイまでできるのは結構すごいなあと思ったので、共有します。
（やはり[Y Combinator](https://www.ycombinator.com/)すごい）

## 必要とされる知識など
* インターネット接続できる環境にあること。
* PCで画面をみれて、スプレッドシートが開けること。（&作れること）
* Gmailのアカウントがあること。
* 作りたいアプリのイメージがあること。

## 今回のアプリについて
米国株の配当金、買い時の指標などを管理できるアプリを作ります。

完成イメージは

メインページがこれで

<img width="574" alt="スクリーンショット 2019-04-13 17.55.30.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/76779/e5e82856-dee4-5e03-fba8-55a709bb57d2.png">

詳細画面がこれです。シンプルですね。

<img width="531" alt="スクリーンショット 2019-04-13 17.56.45.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/76779/8c12fec7-1d5e-5fbc-4573-338315c4b81c.png">

**もう一度言いますが、一行もコードは書いていません。**

**もう一つ付け加えると15分くらいでリリースまでこぎつけました。**

では、作っていきましょう！

### 事前準備
添付のような感じでスプレッドシートを作リます。
<img width="1280" alt="スクリーンショット 2019-04-13 18.09.27.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/76779/205c586d-77a2-475d-e5c0-12c56d13bbfb.png">


### 手順1
[Glide](https://go.glideapps.com/?signUp)にアクセスする。

### 手順2
Create an appを押して、下記の画像の画面に遷移する
<img width="1349" alt="スクリーンショット 2019-04-13 18.02.23.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/76779/b8d4b911-2680-1929-ed43-c1c725b4f276.png">

Sign Upを押して、Gmailのアカウントでログインする。

### 手順3
左上にあるNew Appを押す。
<img width="1257" alt="スクリーンショット 2019-04-13 18.04.57.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/76779/2dbdbfb3-8887-16b8-fc2d-fb2399d75f84.png">

### 手順4
スプレッドシートを読み込む。
（スプレッドシートは事前に作っておいたものを利用）
<img width="1109" alt="スクリーンショット 2019-04-13 18.06.13.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/76779/c9a3d07e-676c-fcca-bd18-473735daa4b6.png">
僕の場合はここに書いてある「配当金管理」というスプレッドシートを使います。

### 手順5
アプリの開発画面になったので、見た目を調整する

<img width="1422" alt="スクリーンショット 2019-04-13 18.10.26.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/76779/45702055-2bb6-0dc8-8a30-982cdd088845.png">

検索バーがデフォルトでついてて驚愕・・・

大まかにいうと、左側が「どんなことをしたいか」右側が「その詳細を変更する」という感じになっています。めっちゃわかりやすいですね。

機能は色々いじりながら試していってもらいたいのですが、先ほどの見た目に近づけるための方法を簡単に記載します。

まず、「ア」とか「ウ」とか左側に表示されるのがダサいので無くします。
Show initials as default Imageの部分が有効になっているので無効になります。

次に色を黒くしたいので、左側のSettingsを押して、右側に出てくるThemeを押します。

<img width="1426" alt="スクリーンショット 2019-04-13 18.16.53.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/76779/4b328910-720e-a765-4101-1fc7c76ed216.png">

これでほぼできたので、あとは細かいところを適当に作ります。（アイコンとか、色合いとかはご自身でどうぞ）

### 手順6
URLを決める。

Settingを押した後の画面でAPP URLを入れるところがあるので、適当に名前を決めて入力します。

<img width="1423" alt="スクリーンショット 2019-04-13 18.21.01.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/76779/c0375420-f2a9-21de-d0dc-917ba3e6d68c.png">

### 手順7
リリースする（まじか・・・！）

左下のopen appを押す。

<img width="1015" alt="スクリーンショット 2019-04-13 18.23.32.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/76779/29fe4315-f82b-4119-203d-e9772df8e0b2.png">

これでアプリができてしまいました。。

完成品が[これ](https://dividend-sheet.glideapp.io/)です。

PWA対応もしているので、Androidだともはやネイティブアプリです。
ちなみにiOSでもちゃんとアプリという認識で立ち上がってくれました。

![ezgif.com-video-to-gif.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/76779/a6ba9c4c-044b-32ae-70f5-369cbe712b8f.gif)


すごい世界がやってきたものだ。。