ITエンジニア/デザイナ向けにオープンソースを毎日紹介

一昔前のTitaniumであったり、React NativeはJavaScriptをネイティブのJavaScriptエンジン上で実行してネイティブのコンポーネントを使えるようにしています。それを使ってReact Nativeではコードを即時反映しながら開発ができるようになっています。

そんな開発スタイルを一歩推し進めたのがJasonetteです。なんとJSONのみでiOSアプリが開発できるようになります。

Jasonetteの使い方

JasonetteのJSONの例です。これはInstagram風UIを作るものです。

{
  "$jason": {
    "head": {
      "data": {
        "posts": [{
          "type": "stories",
          "items": [{
            "avatar": "https://raw.githubusercontent.com/Jasonette/Instagram-UI-example/master/images/barton_avatar.png",
            "name": "Barton",
            "location": "Somewhere",
            "content": "https://raw.githubusercontent.com/Jasonette/Instagram-UI-example/master/images/barton.jpg"
          },
          :
        ]
      },
      "templates": {
        "body": {
          "header": {
            "style": {
              "shy": "true"
            },
            "title": {
              "type": "image",
              "style": {
                "width": "94",
                "height": "27"
              },
              "url": "https://raw.githubusercontent.com/Jasonette/Instagram-UI-example/master/images/logo.png"
            },
            "menu": {
              "image": "https://raw.githubusercontent.com/Jasonette/Instagram-UI-example/master/images/box.png"
            }
          },
          "sections": {
            "{{#each posts}}": [
              {
                "{{#if ('type' in this) && (type=='stories') }}": {
                  "type": "horizontal",
                  "items": {
                    "{{#each items}}": {
                      "type": "vertical",
                      "style": {
                        "background": "#fafafa",
                        "padding": "9",
                        "spacing": "13",
                        "width": "90",
                        "align": "center",
                        "distribution": "equalspacing",
                        "height": "120"
                      },
                      :
                    }
                  }
                }
              },
              {
                "{{#else}}": {
                  "header": {
                    "type": "horizontal",
                    "style": {
                      "background": "#ffffff",
                      "padding": "9",
                      "spacing": "13"
                    },
                    "components": [{
                      "type": "image",
                      "url": "{{avatar}}",
                      "style": {
                        "width": "38",
                        "height": "38",
                        "corner_radius": "19"
                      }
                    },
                    :
                    ]
                  },
                  "items": [{
                    "style": {
                      "width": "100%",
                      "padding": "0"
                    },
                    "type": "image",
                    "url": "{{content}}"
                  }]
                }
              }
            ]
          },
          "footer": {
            "tabs": {
              "style": {
                "background": "rgba(255,255,255,0.8)",
                "color": "#000000"
              },
              "items": [{
                "image": "https://raw.githubusercontent.com/Jasonette/Instagram-UI-example/master/images/home.png",
                "style": {
                  "height": "21"
                },
                "url": "https://raw.githubusercontent.com/Jasonette/Instagram-UI-example/master/home.json"
              },
              :
              ]
            }
          }
        }
      }
    }
  }
}

コマンドからはじめた場合は作るアプリを聞かれます。今回はデモを選択しています。

デモアプリです。

リスト表示もできます。

バイブレーションや位置情報取得、カメラにも対応しています。

バナー表示もできます。

テキストフィールドとローカルの入力チェック。

タイマーアプリ。

JSONの中にitemsやeachといった記述があります。つまり単なるJSONという訳でなく、プログラマブルなJSONと言えるでしょう。特徴として、このJSONはローカルにある必要はなく、オンライン上にあっても良いということがあります。オンラインのファイルをロードしてアプリを作るので、開発がよりインタラクティブに進められそうです。

JasonetteはSwift製のオープンソース・ソフトウェア(MIT License)です。

Jasonette

Jasonette/Jasonpedia: Test JSON snippets for Jasonette

 

MOONGIFTの関連記事

コメント

  • DevRel
  • Com2