Sketch 2 Code を使ってみた

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

[Sketch 2 Code](https://www.ailab.microsoft.com/experiments/30c61484-d081-4072-99d6-e132d362b99d)

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

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

![test.jpg](https://qiita-image-store.s3.amazonaws.com/0/239855/2e9435b2-d1da-3ba9-90a7-7021150d9a51.jpeg)

# 実験1
|  デザイン  |  結果([HTML](https://codepen.io/anon/pen/YOmwxW))  |
| ---- | ---- |
|  <img src="https://qiita-image-store.s3.amazonaws.com/0/239855/fe1d60be-0ffe-0d98-d6a5-a5e66b356022.jpeg" width="300">  |  <img src="https://qiita-image-store.s3.amazonaws.com/0/239855/78d8f95b-2550-4943-a7e3-ae8f8fc4956b.png" width="300"> |



```
<!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](https://codepen.io/anon/pen/dqxGWG))  |
| ---- | ---- |
| <img src="https://qiita-image-store.s3.amazonaws.com/0/239855/42a84bd1-feb3-3a44-acc9-2a4cdee2a481.jpeg" width="300"> | <img src="https://qiita-image-store.s3.amazonaws.com/0/239855/6bfaf0b5-210f-6da0-5620-e3dfbdcf7d78.png" width="300">
 |

# 実験3
|  デザイン  |  結果([HTML](https://codepen.io/anon/pen/XPvXew))  |
| ---- | ---- |
| <img src="https://qiita-image-store.s3.amazonaws.com/0/239855/39e8331a-adc6-b1a5-ff8d-77c3f2cdf08b.jpeg" width="300"> | <img src="https://qiita-image-store.s3.amazonaws.com/0/239855/79d36ebf-d3f4-9b57-d474-1fdb4c8c3f31.png" width="300">

 |

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