More than 5 years have passed since last update.

Sketch 2 Code を使ってみた

Microsoft

Last updated at 2018-10-11Posted at 2018-10-11

Sketch 2 Code

Kabel, Spike Techniques, Microsoftが2018年8月末に公開したSketch 2 Codeというライブラリ。「手書きのワイヤーフレームを適切に修正してHTMLに自動変換」してくれます。

Sketch 2 Code

ユーザはWebに画像（手書きワイヤーフレーム）をアップロード
ビジョンモデルが、画像に含まれているHTML要素とその位置を推測
文字認識サービスが、そのHTML要素に含まれている文字を書き起こす
レイアウトアルゴリズムが、ビジョンモデルの生成結果の空間情報からグリッドを自動生成
HTML生成エンジンが、以上の処理によって作成されたモデルをHTML化

このことにより、左（手書き）のものが、右（HTMLマークアップ済み）に変換されます。

実験1

デザイン	結果(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-center" style="padding-top:10px;">
               <h1></h1>
            </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;">
                  <input class="form-control"></input>
               </div>
            </div>
            <div class="row justify-content-end" style="padding-top:10px;">
               <input class="form-control"></input>
            </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="row justify-content-end" style="padding-top:10px;">
                     <input class="form-control"></input>
                  </div>
                  <div class="row justify-content-end" style="padding-top:10px;">
                     <input class="form-control"></input>
                  </div>
               </div>
            </div>
         </div>
      </div>
   </body>
</html>

実験2

デザイン	結果(HTML)

実験3

デザイン	結果(HTML)

結果

・実用にはまだまだ
・利用シーンがあまり浮かばない

You get articles that match your needs
You can efficiently read back useful information
You can use dark theme

What you can do with signing up