まとめ

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

2016-6-26

昨日に続いて、SketchとCraftの新機能を使ってAPIを叩いてSketch上に画像やテキストを表示してみたいと思います。
前回の記事はこちら。Sketch上でAPIを叩いてデザインに内容を表示する方法【1/2】
関連記事:InVisionにSilver Flowsがジョイン。彼らが描く未来とは?

利用するAPI

今回試したのはグルメサイト「ぐるなび」のレストラン検索APIです。店舗名や店舗の画像をはじめ、ぐるなびに掲載されている情報をAPIで呼び出して自分のWebサービスやアプリ上で使うことができます。アカウント発行が必要なので、詳しくは開発者向けページを見ながら試してみてください。
ぐるなび Web Service for Developers

Craftのインストール

InVisionが提供するSketchプラグイン「Craft」をインストールしてください。ランディングページからメールアドレスを打ち込むとインストール用のURLが送られてきます。
Craft by InVision LABS

Sketch・Craft・ぐるなびAPIを使ってレストラン紹介アプリを作る

まずはこんな感じでレストランの一覧と詳細のスクリーンを作りました。
レストラン一覧と詳細

レストラン一覧の画像をまとめて選択します。
画像をまとめて選択

Sketch内に表示されているCraftのボタンから一番上のDATAを選択し、タブをJSONに切り替えます。URL入力欄があるのでここのぐるなびAPIのURLを入力します。
ぐるなびAPIを入力する

Importボタンを押すとAPIを叩いた結果のJSONが読み込まれます。情報量が多い場合は折りたたまれて表示されます。
APIの結果が返ってきた

折りたたまれた情報を展開していくとshop_image1という項目が出てきます。
shop_image1

shop_image1を選択すると、さきほど選択した箇所に画像が挿入されます。
画像が挿入された様子

店舗名も同様の流れで挿入できます。
店舗名を表示する

店舗詳細もこんな感じに。
店舗詳細

開発者とのコミュニケーションがよりスムーズに

画面のデザインを組んでいて、実装が進んで実際のデータを入れてみたら、あれ?思っていた感じと違う…なんてことはないでしょうか?Sketch上で実際のデータをAPIで取得して見ることができれば、そういった手戻りを防ぐことができるでしょう。
Craftは現在プロトタイピング機能を開発中なので、これができればサーバー上にある実際のデータを参照しながらスクリーンの遷移を再現し、それをInVision上で共有することができるようになります。Sketch・Craft・InVisionを使ったら制作フローがどんなふうになるのか、一度検討してみてもいいかもしれません。

Qiitaにも掲載中です。

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