Sketch上でAPIを叩いてデザインに内容を表示する方法【1/2】

SketchとPhotoshopのプラグイン「Craft」のDATAという機能がバージョンアップし、APIを叩いてJSONをパースしてデザイン上に表示するということができるようになったようなので試してみました。
関連記事：InVisionにSilver Flowsがジョイン。彼らが描く未来とは？

APIってなに？

アプリケーションを開発するとき、その中身はいろいろな要素が組み合わさってひとつのものが出来ていますが、その色々な要素を組み合わせて連携できる仕組みがAPIと呼ばれるものです。

具体的な話だと、iOSアプリ上でサーバーにある情報を表示させたいというときは、iOSアプリからサーバー側のAPIに情報をくださいというリクエストをしてデータを受け取り、受け取った情報をiOS側で表示させるための形にして、表示をします。

APIに情報をください、保存をしてください、変更をしてくださいなどのリクエストをすることを「APIを叩く」と言います。別に何かモノを叩いているわけじゃないです。

JSONってなに？

JSONはJavaScript Object Notation（JavaScriptでオブジェクトを記述する書式）の略で、APIを叩くときに送信・受信するデータの形式です。データをやりとりするとき、データは必ず「表」で表現されています。

例えばりんごについてのデータ。

商品名	りんご
産地	青森県
値段	100円
甘さ	ふつう

上の表はJSONだとこんな感じで表現されます。

{
  "商品名": "りんご",
  "産地": "青森県",
  "値段": "100円",
  "甘さ": "ふつう"
}

さきほどよりちょっと複雑なデータです

商品名	産地	値段
りんご	青森県	100円
バナナ	フィリピン	150円
ぶどう	山梨県	300円

こんな感じ。

[
    {
        "商品名": "りんご", 
        "産地": "青森県",
        "値段": "100円"
    }, 
    {
        "商品名": "バナナ", 
        "産地": "フィリピン", 
        "値段": "150円"
    }, 
    {
        "商品名": "ぶどう", 
        "産地": "山梨県", 
        "値段": "300円"
    }
]