先日マイクロソフトから衝撃的なニュースが発表された。
衝撃といっても多分衝撃を受けたのは一部の人達だけだと思うが。何が衝撃かというと、手書きのスケッチを自動でHTMLコードにしてくれるという技術だ。
詳しい内容や仕組みの話は色々記事にもなっているので、そちらを見ておいてほしい。
すごく簡単に解釈すると、とった写真をAI使ってHTMLで吐き出すというだけである。
一見簡単そうだが、すごい技術
最近では仕事にWebサイト業務が当たり前になりつつあると思う。専門職でなくてもWebサイトの作成には単純に絵を書いて終わりではなく、そこからまた別の専門職の人が何かしなくてはいけないというなんとなくのイメージは持ってもらえ始めていると思う。たまに、絵を描く人がそのままWebページ作っちゃうってことはありますが、なんらかの技術が必要ということだけ理解していただければと思う。
そのなんらかの技術が、今まで人が介入しないとできなかった。
なぜなら、人の作ったデザインってコンピューターには理解できないから。見た目文字が大きければそれが大きい見出しで、その文章を象徴しているタイトルなんだなと理解できるが、コンピューターはそんな情報は理解できない。
これをコンピューターにもわかりやすくしてインターネットに載せるのがHTMLという技術。つまり、デザインを内容を判断してHTMLにしなくてはいけない。一見人にとっては簡単そうだが、非常に奥が深しめんどくさい。
めんどくさいから、なんとかしたい
多くの技術者はこのめんどくさい作業をなんとかしたいと考えていた。
今年の始めにも同じような記事を書いた。
noriyasu-katano.hatenablog.com
この内容は別の会社が同じような仕組みで作っていたようだ。つまり、このHTMLにする作業はある意味専門でやっている人にとって悲願となっている。それによって職を失う人もいるかもしれないが、それ以上に必要な技術だと感じている。
そこでマイクロソフトも作ったのだろう。
やってみた
実際にやってみました。非常に簡単です。
下記のサイトにいって、スケッチ画像をアップするだけ。
デスクトップで読んでいる人は面倒だと思うので、スマホでこのURLにいった方が楽です。実際に撮影何枚かテストしてみた。
A4のコピー用紙に大きく内容を記載して、文字も日本語ではなく英語で大きめに書きました。試したのは全部で3つ「ちょっと複雑なフォーム」「簡単なフォーム」最後に「画像と文字」。
1回目:ちょっと複雑なテキストフォーム
左がスケッチで、右がソースコードのキャプチャです。
実際のコードはこちら
キャプチャーを見ていただくとわかると思いますが、文字は読み込まれてないです。私の文字が汚すぎるという意見もあるかもしません。
紙のシワや影なども影響するのかもしれないです。
そしてコードを見ると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回目:簡単なフォーム
やはり大きくはっきりと文字をかくとちゃんと認識してくれた。
「NAME」と「Email」は反応してくれなかったが、「Message」はいけた。しかし、フォームになると、メッセージ部分は削除されている。大きさの問題なのか認識されていない。
前回同様、四角の中に文字を描くとbuttonだと認識してくれるぽい。今回はこの中の文字も認識してくれた。
実際のHTMLはこちら、
3回目:画像と文字
画像は四角に大きくバツを描くと画像と認識してくれるぽい。デフォルトの画像(SVG)が差し込まれている。大きな「Z」が上段のものは文章として認識してくれたぽいけど、TITLEの下の段の「Z」は画像として認識された。
3カラムの要素は全て<div>で設定されている。3つのテストに共通しているが大きなスタイルはBootstrapを元にして、細かいマージンなどはタグに直に書かれている。
HTMLの構造としてはclass="row"で行ごとに区切られているのはBootstrapだからだろうな。
まとめ
最初は実装前のベースになるかと期待したが、現段階ではまだ実用とするのは難しいと思う。Bootstrapに慣れているエンジニアであれば、良いのかもしれないが、<div>を多用したマークアップにどうも違和感を感じる。
しかし、技術としては非常に素晴らしい。認識スピードや精度も高いと言える。3回目のテストで「Z」にちゃんとリプサムの文章を入れてくれたところなどすごいなと感じた。この技術の今後の発展に大きく期待したい。