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

更新日:2016年6月25日

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円"
    }
]

APIの使い方の流れ

APIを使って画面に何かを表示するときはこんな流れになります。
・サーバーにリクエストをしてAPIを叩く
・サーバーから結果がJSONで返ってくる
・JSONをパースする
・パースした内容をデザインしたレイアウトに当てはめて表示する

それでは実際にAPIを使ってSketch上にサンプルデータを表示してみましょう。
続きはこちら。Sketch上でAPIを叩いてデザインに内容を表示する方法【2/2】

Qiitaにも掲載中です。

書き手:小島 芳樹
Webやスマートフォンアプリによるサービスを開発・提供する会社で働いています。
Twitter: @yoshikikoji

この記事が気に入ったらいいね・フォローお願いします!

『デザインツール』の記事