swchrm logs

妄想技術録

Sketch2Code を使ってみた

なにそれ

画像をあげるとHTMLに変換してくれるMicrosoft製のWebサービス

https://sketch2code.azurewebsites.net/

そんなんあったっけ？

2018年8月23日にでました

何が嬉しいの、誰が嬉しいの

モックをサッとつくりたいけどHTML爆速で書けんしな…せや！というときに使えそう

どうやって使うの

  1. 既存画像をアップロードするか、書いた図の写真をとる（その後アップ）

  2. できる

どんなかんじ

初期画面 f:id:swchrm:20180901132903p:plain

こちらのネ申画像を入力（アップロード） f:id:swchrm:20180901133524j:plain

画像アップ・解析後結果画面 f:id:swchrm:20180901132712p:plain

出力画像 f:id:swchrm:20180901130316p:plain

出力ソース（適当なフォーマッターにかけた）

<!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>

f:id:swchrm:20180901132048p:plain

感想

顧客が本当に必要だったものを得られる日はくるのか

テキストボックスとコンボボックスの識別に苦労してそう（下手なのは許して）

ある程度のデザイナーが書けばちゃんと識別されそうだけど、最近のデザイナーはHTMLくらいかけるし...