Jasonette - JSONでiOSアプリを開発するフレームワーク
一昔前の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