Noriyasu_Katano's blog

脳科学や量子力学、政治や戦争に関して、日々の感じた雑感を書いていきます。

Sketch2Codeを

f:id:Noriyasu_Katano:20180907100008p:plain

先日マイクロソフトから衝撃的なニュースが発表された。
衝撃といっても多分衝撃を受けたのは一部の人達だけだと思うが。何が衝撃かというと、手書きのスケッチを自動でHTMLコードにしてくれるという技術だ。

詳しい内容や仕組みの話は色々記事にもなっているので、そちらを見ておいてほしい。

 

www.atmarkit.co.jp

 すごく簡単に解釈すると、とった写真をAI使ってHTMLで吐き出すというだけである。

一見簡単そうだが、すごい技術

最近では仕事にWebサイト業務が当たり前になりつつあると思う。専門職でなくてもWebサイトの作成には単純に絵を書いて終わりではなく、そこからまた別の専門職の人が何かしなくてはいけないというなんとなくのイメージは持ってもらえ始めていると思う。たまに、絵を描く人がそのままWebページ作っちゃうってことはありますが、なんらかの技術が必要ということだけ理解していただければと思う。

そのなんらかの技術が、今まで人が介入しないとできなかった。

なぜなら、人の作ったデザインってコンピューターには理解できないから。見た目文字が大きければそれが大きい見出しで、その文章を象徴しているタイトルなんだなと理解できるが、コンピューターはそんな情報は理解できない。

これをコンピューターにもわかりやすくしてインターネットに載せるのがHTMLという技術。つまり、デザインを内容を判断してHTMLにしなくてはいけない。一見人にとっては簡単そうだが、非常に奥が深しめんどくさい。

めんどくさいから、なんとかしたい

多くの技術者はこのめんどくさい作業をなんとかしたいと考えていた。

今年の始めにも同じような記事を書いた。 

noriyasu-katano.hatenablog.com

 この内容は別の会社が同じような仕組みで作っていたようだ。つまり、このHTMLにする作業はある意味専門でやっている人にとって悲願となっている。それによって職を失う人もいるかもしれないが、それ以上に必要な技術だと感じている。

そこでマイクロソフトも作ったのだろう。

やってみた

実際にやってみました。非常に簡単です。
下記のサイトにいって、スケッチ画像をアップするだけ。

sketch2code.azurewebsites.net

デスクトップで読んでいる人は面倒だと思うので、スマホでこのURLにいった方が楽です。実際に撮影何枚かテストしてみた。
A4のコピー用紙に大きく内容を記載して、文字も日本語ではなく英語で大きめに書きました。試したのは全部で3つ「ちょっと複雑なフォーム」「簡単なフォーム」最後に「画像と文字」。

1回目:ちょっと複雑なテキストフォーム

f:id:Noriyasu_Katano:20180907101805p:plain

左がスケッチで、右がソースコードのキャプチャです。
実際のコードはこちら 

result (1).html - Google ドライブ

キャプチャーを見ていただくとわかると思いますが、文字は読み込まれてないです。私の文字が汚すぎるという意見もあるかもしません。
紙のシワや影なども影響するのかもしれないです。
そしてコードを見るとbootstrapのcssを自動で読み込むようになっています。

link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css"
integrity="sha384-WskhaSGFgHYWDcbwN70/dfYBj47jz9qbsMId/iRN3ewGhXQFZCSftd1LZCfmhktB" crossorigin="anonymous" 

 <link>タグはこんな感じ。
四角の中に何かあると<button>だと認識してくれました。

2回目:簡単なフォーム

f:id:Noriyasu_Katano:20180907104411p:plain

やはり大きくはっきりと文字をかくとちゃんと認識してくれた。
「NAME」と「Email」は反応してくれなかったが、「Message」はいけた。しかし、フォームになると、メッセージ部分は削除されている。大きさの問題なのか認識されていない。
前回同様、四角の中に文字を描くとbuttonだと認識してくれるぽい。今回はこの中の文字も認識してくれた。

実際のHTMLはこちら、

result (2).html - Google ドライブ

3回目:画像と文字

f:id:Noriyasu_Katano:20180907100008p:plain

画像は四角に大きくバツを描くと画像と認識してくれるぽい。デフォルトの画像(SVG)が差し込まれている。大きな「Z」が上段のものは文章として認識してくれたぽいけど、TITLEの下の段の「Z」は画像として認識された。

3カラムの要素は全て<div>で設定されている。3つのテストに共通しているが大きなスタイルはBootstrapを元にして、細かいマージンなどはタグに直に書かれている。

HTMLの構造としてはclass="row"で行ごとに区切られているのはBootstrapだからだろうな。

result (3).html - Google ドライブ

まとめ

最初は実装前のベースになるかと期待したが、現段階ではまだ実用とするのは難しいと思う。Bootstrapに慣れているエンジニアであれば、良いのかもしれないが、<div>を多用したマークアップにどうも違和感を感じる。

しかし、技術としては非常に素晴らしい。認識スピードや精度も高いと言える。3回目のテストで「Z」にちゃんとリプサムの文章を入れてくれたところなどすごいなと感じた。この技術の今後の発展に大きく期待したい。