Muika's Blog

プログラミング、ツールや英語の情報をつらつらと発信していきます。

【ツールの紹介】Sketch 2 Code

マイクロソフト社が公開しているWebツールです。
Web画面のテキストボックスやコンボボックス等の手書きを
HTMLファイルへ変換してくれます。
↓ 場所はここです。
Sketch2Code - Transform sketches into HTML using AI

Jpegpngの手書き画像をアップロードするとHTMLに変換してくれます。

使い方は、画面に左の緑ボタンでアップロードして その後画面が変わった後、
(右の赤ボタンで撮影もできます。)
やはり左の緑ボタンでHTMLファイルをダウンロードします。

色々試したところ、日本語は不可のようでした。
また 、サンプルのように正確に解釈されることは少ないです。
自分の悪筆のせいか、もしかすると使う色も関係しているのかもしれません。

ためした中で結果の良かった画像を載せます。
──────────────────────────────────────────────
f:id:mmm65536:20180906112459j:plain
──────────────────────────────────────────────

★結果です。※横線を引いた部分は適当な文章が挿入されるはずでしたが、テキストボックスと判断されたようです。
──────────────────────────────────────────────





HTML Result































──────────────────────────────────────────────
コツとしては、認識してもらいたい、オブジェクト単位で間隔を空ける必要があるようです。
OKとcancelボタンが上の線に近づきすぎていました。
ちょっと離してみました。
──────────────────────────────────────────────
f:id:mmm65536:20180906121342j:plain
──────────────────────────────────────────────

★結果:
──────────────────────────────────────────────





HTML Result






















Lorem ipsum dolor sit amet, consectetur adipiscing elit


sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.


Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris










──────────────────────────────────────────────
うまくいきました。
なかなか面白いツールです、オモチャの域をまだ出ていないですが、
翻訳ツール等のAIによる進化を考えると、侮れません。
あと数年もすれば、手書き画面と動作を口頭で説明すれば、
アプリを作成するツールが出てきそうです。