satake

Sketch3のプラグインCraftを使ってJSONを読み込もう

今回ご紹介するのは、Sketch3のCraftというプラグインを使用して、JSONのデータをデザインに反映させるというものです。
ダミーデータではなく、実際に稼働しているAPIのデータを取り込むことで、より公開後のイメージに近いデザインを作り出すことができます。

Craftとは

ダミーデータを挿入して作業を自動化できるSketch3とPhotoshopのプラグインです。

公式サイト
https://www.invisionapp.com/craft

以前のCraftについての記事(※バージョンが古いものなので、現バージョンとはUIと機能が少し異なります)
https://www.tam-tam.co.jp/tipsnote/html_css/post9091.html

本記事で検証した仕様環境

OS X El Capitan - version 10.11.3
Sketch 3 - version 39.1
Craft - versition 1.4.1

JSONを読み込む

取得イメージ画像
tipsnote_sample6.png

公式サイト説明(ページ中段 Inserting JSON contentより)
https://support.invisionapp.com/hc/en-us/articles/209650506

JSONの取得方法

APIから取得

1.JSONタブ内のinputにAPIのエンドポイントを入力してImportする

tipsnote_sample.gif

2.JSONを反映させたいレイヤー、JSONのKEYをそれぞれ選択する


tipsnote_sample2.gif

ローカルのJSONファイルから取得

  • 1.JSONタブ内のinputにローカルのJSONデータの場所を入力する
    or ファイルをドラッグ&ドロップしてImportする
  • 2.JSONを反映させたいレイヤー、JSONのKEYをそれぞれ選択する

データの複製

取得したJSONデータはSketch上のレイヤーとリンクされます。
tipsnote_sample7.png

Craftの複製機能を使用したとき、リンクされたkeyが別のvalueに差し代わって複製できます。
tipsnote_sample8.png

tipsnote_sample3.png

※リンクさせたJSONの階層が深いとvalueが差し変わらないこともあるようです。
サムネイル画像の階層が深くて今回差し変わりませんでした。

JSONとリンクされているレイヤーのリンク解除は、
レイヤーを選択後、JSONに表示されている青枠の中にある×をクリックします。
tipsnote_sample5.png

補足

  • APIで叩けるhttp動詞はGETのみ (PUT, POST, DELETEは使えない)

痒いところに届かなかったところ

  • 日付などAPIのレスポンスがparse前のものだと、そのまま使うのが難しい

    tipsnote_sample9.png

  • APIでリンクされたレイヤーはAPIが更新されても動的に変更されない

    tipsnote_sample10.png

  • <br>などのタグは反映しない
    tipsnote_sample11.png

まとめ

今回Craftを使用して簡単にJSONをレイヤーに反映できました。

JSONをデザインに反映させるメリットとしましては、実際に使用するデータを使用することでダミーデータを反映させるよりもよりリアルな感じを出すことができるところでしょうか。

テキストや画像を抽出する素材としてJSONを扱う、もしくは限定的に部分部分で表示を別媒体で管理する、などで使えるといいかと思いました。

参考サイト

Sketch上でAPIを叩いてデザインに内容を表示する方法
http://qiita.com/yoshikikoji/items/8e889de5c21046713946

新しいウェブ体験を作ろう TAMのPWA開発
お問い合わせはこちら