Sketch2Code を使ってみた
なにそれ
画像をあげるとHTMLに変換してくれるMicrosoft製のWebサービス
https://sketch2code.azurewebsites.net/
そんなんあったっけ?
2018年8月23日にでました
何が嬉しいの、誰が嬉しいの
モックをサッとつくりたいけどHTML爆速で書けんしな…せや!というときに使えそう
どうやって使うの
既存画像をアップロードするか、書いた図の写真をとる(その後アップ)
できる
どんなかんじ
初期画面
こちらのネ申画像を入力(アップロード)
画像アップ・解析後結果画面
出力画像
出力ソース(適当なフォーマッターにかけた)
<!DOCTYPE html> <html lang="en"> <head><meta name="viewport" content="width=device-width" /> <title>HTML Result</title> <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" integrity="sha384-WskhaSGFgHYWDcbwN70/dfYBj47jz9qbsMId/iRN3ewGhXQFZCSftd1LZCfmhktB" crossorigin="anonymous"></head> <body> <div class="container body-content"> <div class="container"> <div class="row justify-content-start" style="padding-top:10px;"> <div class="col" style="padding-top:10px;"> <h1>Suchrm</h1></div> <div class="col" style="padding-top:10px;"> <button class="btn btn-primary">2</button></div></div> <div class="row justify-content-start" style="padding-top:10px;"> <div class="col" style="padding-top:10px;"><img alt="Image html" width="90%" height="90%" style="max-height:500px;max-width:500px;" src="https://sketch2code.azurewebsites.net/Content/img/fake_img.svg" /></div> <div class="col" style="padding-top:10px;"> <div class="dropdown"> <button type="button" class="btn btn-primary dropdown-toggle" data-toggle="dropdown"></button> <div class="dropdown-menu"> <a class="dropdown-item" href="#" title="Drop down list"></a></div></div></div></div> <div class="row justify-content-end" style="padding-top:10px;"> <button class="btn btn-primary">jan</button></div> <div class="row justify-content-end" style="padding-top:10px;"> <a href="">@ suchrom</a></div></div></div></body></html>
- 書いたものがどんな判断を下されているのか(ここがおもしろい) https://sketch2code.azurewebsites.net/details/1103f7c5-1681-49d1-a9dc-430a05b3ef71
感想
顧客が本当に必要だったものを得られる日はくるのか
テキストボックスとコンボボックスの識別に苦労してそう(下手なのは許して)
ある程度のデザイナーが書けばちゃんと識別されそうだけど、最近のデザイナーはHTMLくらいかけるし...