11
8

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 1 year has passed since last update.

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

Last updated at Posted at 2022-05-15

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

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環境で構築してみました。

こんだけ。超簡単!!!

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

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

OpenWeatherMapから天気情報を取得し表示するアプリを作ってみました。
どーん!!

localhost_applications(1280x720) (1).png

  • 初期画面

    アプリを新規作成した直後。左側に並んでいるウィジェットから簡単に画面が作成できます。
    localhost_applications(1280x720).png

  1. APIを作る
    どこから見てもPOSTMANな画面で作成します。 Tokyoという名前をつけました。
    localhost_applications(1280x720) (3).png

  2. テキストを配置する
    配置したテキストに固定値を設定します。右側のText欄に表示したい文字列を入力するだけです。フォントなども選択するだけで指定ができます。
    localhost_applications(1280x720) (4).png

  3. APIで取得した気温を表示する
    テキストにAPIで取得した値を設定する場合は{{}}で囲ってパラメーターを指定します。TokyoAPIで取得した結果(JSON)をパスを追ってドット区切りで表現します({{Tokyo.data.current.temp}} ℃)。このあたりは少しなれが必要だと思いますが、すぐ慣れます。
    localhost_applications(1280x720) (5).png

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

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

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

    localhost_applications(1280x720) (6).png

    CHARTのインプットをこの関数を指定します。タイトルやラベルを指定するといい感じになります。
    localhost_applications(1280x720) (7).png

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

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

ここのJSONとiTunes Search APIを使ったアプリを作ってみました。

  • TOP10

    localhost_applications(1280x720) (8).png

  • 検索

    プレビュー音源の再生もローコードでできます😝😝😝
    localhost_app_itunes-music_toppage-627f9118e62d8b26b55694f2_keyword=(1280x720).png

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

localhost_app_itunes-music_toppage-627f8e15e62d8b26b55694e1_embed=true(iPhone SE).png

なかなかいい感じじゃないでしょ~か??!

11
8
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
11
8

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?