ローコードツール「Appsmith」を使ってみた（Qiita初登場?!😝）

**Appsmith**を紹介します！！
日本語の説明はほとんど見つかりませんが、たまたまTwitterで見つけたツールで興味を持ったので使ってみました。

https://www.appsmith.com/

# Appsmithとは

> A powerful open source framework to build internal tools
Quickly build any custom business software with pre-built UI widgets that connect to any data source. Control everything with JavaScript.

DeepL翻訳

> 社内ツールを構築するための強力なオープンソースフレームワーク
あらゆるデータソースに接続可能なビルド済みUIウィジェットで、あらゆるカスタムビジネスソフトウェアを迅速に構築できます。JavaScriptですべてをコントロール。

# 環境構築

クラウドサービスとして提供されていますが、ローカルDocker環境で構築してみました。

https://docs.appsmith.com/setup

こんだけ。**超簡単!!!**

```shell
curl -L https://bit.ly/32jBNin -o $PWD/docker-compose.yml
docker-compose up -d
```

# 天気を表示するアプリを作ってみた

[OpenWeatherMap](https://openweathermap.org/)から天気情報を取得し表示するアプリを作ってみました。
**どーん！！**

![localhost_applications(1280x720) (1).png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/41574/eca2e2ed-ebf5-e0e4-4a2e-87318870a9a4.png)

* 初期画面

    アプリを新規作成した直後。左側に並んでいるウィジェットから簡単に画面が作成できます。
    ![localhost_applications(1280x720).png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/41574/19b5d3e5-f2c0-9c5d-53b4-16ca709abafd.png)


1. APIを作る
    どこから見てもPOSTMANな画面で作成します。 `Tokyo`という名前をつけました。
    ![localhost_applications(1280x720) (3).png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/41574/6f17c05f-adf2-ff6e-d4de-676f8d6a025e.png)

1. テキストを配置する
    配置したテキストに固定値を設定します。右側の`Text`欄に表示したい文字列を入力するだけです。フォントなども選択するだけで指定ができます。
    ![localhost_applications(1280x720) (4).png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/41574/174d7fff-262d-ec4e-9c1c-c7db7291afe6.png)

1. APIで取得した気温を表示する
    テキストにAPIで取得した値を設定する場合は`{{}}`で囲ってパラメーターを指定します。`Tokyo`APIで取得した結果（JSON）をパスを追ってドット区切りで表現します（``{{Tokyo.data.current.temp}} ℃``）。このあたりは少しなれが必要だと思いますが、すぐ慣れます。
    ![localhost_applications(1280x720) (5).png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/41574/dbde538d-0ff0-1a05-aaf0-3d11c4b5d6c8.png)

1. グラフを表示する
    `CHART`ウィジェットを使って天気予報の気温を表示してみます。このウィジェットは以下のようなキーに`x`と`y`があるオブジェクトの配列をインプットとして期待しています。

    ```json
    [
      {
        "x": "Product1",
        "y": 20000
      },
      {
        "x": "Product2",
        "y": 22000
      },
      {
        "x": "Product3",
        "y": 32000
      }
    ]
    ```

    OpenWeatherMapのAPIのレスポンスは残念ながらこの形式ではありません。こういった場合はJavaScriptを書いて変換することで対応します。

    ![localhost_applications(1280x720) (6).png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/41574/d9dd149a-eefb-2485-8c37-8c03f7767c6f.png)

    CHARTのインプットをこの関数を指定します。タイトルやラベルを指定するといい感じになります。
![localhost_applications(1280x720) (7).png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/41574/d5a36884-5674-d24c-8cd1-b8b19c508633.png)

こんな感じで、慣れれば簡単にアプリが作れます。😝😝😝

# iTunesのJSONを表示するアプリを作ってみた

[ここ](http://itunes.apple.com/jp/rss/generator/)のJSONと[iTunes Search API](https://developer.apple.com/library/archive/documentation/AudioVideo/Conceptual/iTuneSearchAPI/index.html)を使ったアプリを作ってみました。

* TOP10

    ![localhost_applications(1280x720) (8).png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/41574/c36c866e-72ca-c159-35d8-1dd7bdea572a.png)

* 検索

    プレビュー音源の再生もローコードでできます😝😝😝
    ![localhost_app_itunes-music_toppage-627f9118e62d8b26b55694f2_keyword=(1280x720).png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/41574/3d78c7c5-f69f-9704-f1ba-e6ba690d4d88.png)

画面遷移に少し手間取りましたが、（慣れれば）ある程度のものは作れそうです。
ちなみにある程度レスポンシブになってます。また、URLの末尾に`?embed=true`を加えると上部のヘッダーも非表示になります。

![localhost_app_itunes-music_toppage-627f8e15e62d8b26b55694e1_embed=true(iPhone SE).png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/41574/6747e5cc-b9e1-c6b2-9e8c-6d5872b0e59d.png)


**なかなかいい感じじゃないでしょ～か？？！**