ノーコードツール「softr」をつかってみよう

沖中塾(初心者向け記事) アドベントカレンダー 2022 3日目の記事です

# softrとは？
無料ではじめられるノーコードアプリ作成サービス
[softr公式ページ](https://www.softr.io/)

こういうサンプルアプリが5分で出来ます
https://client-portal.softr.app/
https://teamwiki.softr.app/
https://open-startup-dashboard.softr.app/

まだsoftrに習熟しているわけではないので、浅くしか知らないですが、軽く触った感じ以下の特徴があると感じました
## サンプルデータ込みでサンプルアプリが作れる
[airtable](https://airtable.com/)というスプレッドシートのようなデータベースのようなサービスと連携機能が強く、サンプルアプリを作成する時に、airtableにサンプルデータをコピーして始められます。どのデータがどこに表示されているのかが非常にわかりやすいので、自分のアプリに組み替えるのがとても簡単です。
## 決済機能を簡単に導入できる
[stripe](https://stripe.com/jp)と連携機能が強く、決済サービスを簡単に導入できる

# 今回作るもの
今回はとりあえず、softrを使ってどんなふうにアプリを作るのかをざくっと紹介するために、「トップページに商品の一覧が表示されていて、商品をクリックしたら詳細ページに飛ぶ」という、めちゃくちゃ簡単なアプリを作ってみます。

# 作ってみよう
## softrのアカウント登録
[softr signup](https://studio.softr.io/auth/signup) にアクセスして、アカウント登録を行います

名前とメールアドレス、パスワードを入力します
![スクリーンショット 2022-12-02 3.25.30.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/27192/725009be-03a1-381a-af37-0074642dd4f5.png)

いろいろ聞かれるので、適当に答えましょう
![スクリーンショット 2022-12-02 3.25.55.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/27192/10be5216-0c8e-6659-d46c-989f295db60b.png)

最後に、　start buildingのボタンを押せばアプリ制作を開始できます
![スクリーンショット 2022-12-02 3.27.18.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/27192/dea11510-3a83-1c8b-5ee6-3198a2f34aee.png)

テンプレートが複数あり、プレビューで詳しい動きを見ることができます
![スクリーンショット 2022-12-02 3.27.29.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/27192/9273e6bb-815e-02f5-c736-f13fbeb67551.png)

プレビューを選択し、右のアイコンの一番下から「Open application」を選択すると、サンプルアプリを試すことができます
![スクリーンショット 2022-12-03 1.10.18.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/27192/ed5cfa4d-0ece-7674-30e6-29fd9f160580.png)

:::note
登録したメールアドレスに「確認メール」が来ているはずなので、忘れずにアカウントの有効化をしましょう
:::

## アプリを作ってみる
サンプルアプリはめちゃめちゃ作り込まれているのですが、軽い気持ちで取り組むにはいささか重たいので、最低限のものを作成してみます。

Blank application を選択
![スクリーンショット 2022-12-03 1.11.28.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/27192/114f35a9-9d70-8587-0ffc-9f17c39decf5.png)

Airtableの設定を聞かれます。登録をしていきます（画面右側で何をすればいいかが映像で流れるので、わからなければ確認しましょう）
![スクリーンショット 2022-12-03 1.11.34.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/27192/952282e8-1dbd-b92a-d99e-b4610c45804e.png)

Airtable Account page のリンクをクリックするとサインインページに飛ぶので、アカウントがない場合は create an account からアカウントを作成します

![スクリーンショット 2022-12-02 3.30.25.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/27192/2aac4554-9cae-c419-418d-a86d708e177f.png)

登録が完了したら、アカウント画面から「Generate API key」を押し、内容をコピーし、softrのページに戻りましょう
![スクリーンショット 2022-12-02 3.31.56.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/27192/7ce15faa-445f-4d2f-5b59-4b4504f1fcf9.png)

APIkeyを入力すると、最初に準備してくれるページを選択できます。
最初からいろいろあると混乱するので、Home、List、List Detailsだけにしておきましょう。（あとで追加できます）![スクリーンショット 2022-12-03 1.25.38.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/27192/9312162f-5afc-5145-649e-c8c21b220127.png)

これでアプリケーションの雛形が作成されました！
びっくりするほど簡単ですね。
![スクリーンショット 2022-12-03 1.27.11.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/27192/3c0f3475-45ac-a721-d28d-9547c79f4e79.png)

画面右下にチュートリアルが表示されています
![スクリーンショット 2022-12-03 1.28.02.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/27192/9ede0758-654d-2b31-91c8-db7c3365d61e.png)

未完了のタスクをクリックすると、動画で何をすればいいか教えてくれます
![スクリーンショット 2022-12-03 1.28.14.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/27192/c562950a-ed9e-a9bc-97f7-d8b5259dbfe5.png)

ひとまずAirtableのデータをList形式で表示するようにしてみましょう
Airtableのページに戻り、Start with templatesを選択
![スクリーンショット 2022-12-03 1.32.13.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/27192/80fefcee-e8b0-d257-14a0-bf59c3912d0f.png)

Product catalogを選択
![スクリーンショット 2022-12-03 1.32.43.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/27192/2f068cbd-b621-e90d-07f2-8ba3a805d4a3.png)

サンプルデータがあなたのAirtableにコピーされました。
あなたのデータなので好きにいじっても問題ないです。
![スクリーンショット 2022-12-03 1.33.03.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/27192/d29c0ade-e750-9136-9cff-26f2ec73ade7.png)

これでひとまずデータが準備できたので、softrに戻ります

Add Blockを選択し、
![スクリーンショット 2022-12-03 1.36.38.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/27192/84565034-fb2b-7f82-96ac-ba49e3f29a0a.png)

なんでもいいですが、Listから「List with deletable elements, vertical cards」を選んでみましょう
![スクリーンショット 2022-12-03 1.37.28.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/27192/1459f6d1-e866-a6cb-7635-486ae6df75d9.png)

Listが追加されました。
![スクリーンショット 2022-12-03 1.38.43.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/27192/a3faa2c4-aeac-5b53-c08a-0c7943ed995f.png)

右側のどのデータを表示するかを選択します（keyはAPIkeyなので人それぞれです。）
![スクリーンショット 2022-12-03 1.39.38.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/27192/d2ed48db-2756-72c2-625b-cdcbe5415a5f.png)

うまく選択できると、チュートリアルのタスクが進むのうれしいですね
![スクリーンショット 2022-12-03 1.39.45.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/27192/7bbe6306-9357-87a0-f1da-e7c1d2652201.png)

でも、選択したデータはFurniture(家具)だったはずですが、
![スクリーンショット 2022-12-03 1.46.57.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/27192/1f3885f4-5231-2678-ab30-04705e8b5a1f.png)

変な人たちが表示されていますね。
![スクリーンショット 2022-12-03 1.47.58.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/27192/54530ac8-34b5-3235-adee-9c9cbedb8c3f.png)

Airtableのどのデータを表示するかを設定してあげる必要があります。
右側のタブをDATAからFEATURESに切り替え、ITEM FIELDSを以下のように設定します。
![スクリーンショット 2022-12-03 1.49.58.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/27192/dbe5bcbe-eaf0-c59e-06b1-68cbc1124858.png)

選択しているのはAirtableのFurnitureのImagesとNameです
![スクリーンショット 2022-12-03 1.51.23.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/27192/ca87cf72-24f6-1d70-d40e-dc5c8a5728ea.png)

次はItem Detailの設定です。ITEM ON CLICKを以下のように設定してください。
![スクリーンショット 2022-12-03 1.53.39.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/27192/7de743f2-372b-8408-a5e2-f718bc86b105.png)

画面左側のPagesからList detailsを開きます
![スクリーンショット 2022-12-03 1.54.49.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/27192/fb2be5fb-f985-9337-bd2a-4ebdd4e921e1.png)

こんな感じですね
![スクリーンショット 2022-12-03 1.55.43.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/27192/3ac82e31-498e-9d6a-a10f-e4e1e397b024.png)

こちらも同様にデータをどこから持ってくるのかを設定します
![スクリーンショット 2022-12-03 1.56.20.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/27192/59652218-ed8c-bedd-82f2-635190f920e6.png)

DATAを指定して
![スクリーンショット 2022-12-03 1.57.21.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/27192/9966e846-22d5-fef2-213d-6bd2ebef557c.png)

FEATURESをいい感じに指定
![スクリーンショット 2022-12-03 2.06.10.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/27192/ae2093a7-d9fc-9439-2986-28a5f8c0739b.png)

という感じでチュートリアルに従っていけば、アプリ完成まで迷うことはないでしょう！

いったんアプリを確認してみましょう。
画面右上のpublishのボタンを押して下さい
![スクリーンショット 2022-12-03 1.43.48.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/27192/3fc53471-a4ad-781a-3d0d-d23eedc6173e.png)

![スクリーンショット 2022-12-03 1.44.37.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/27192/8a020844-c93e-f635-8dcd-7737921ab30a.png)

実際に作ったアプリはこちら！
https://kim535.softr.app


以上めちゃくちゃ簡単にですが、softrの使い方の紹介でした。
チュートリアルがめちゃめちゃ優秀で、迷うことは少ないと思うので、初心者の方のアプリ作成もとっつきやすいんじゃないかと思います！

決済機能が簡単に実装できる〜というのも別の機会に紹介できたらなと思ってます！

本当に世の中どんどん便利になっていって、エンジニアは失業の危機ですね（苦笑）


アドベントカレンダー次回は @h2m_kinoko さんの「Notion APIを叩いてみたくて。GoogleForm->GAS->Notion」です！お楽しみに！