blog脳科学や量子力学、政治や戦争に関して、日々の感じた雑感を書いていきます。先日マイクロソフトから衝撃的なニュースが発表された。衝撃といっても多分衝撃を受けたのは一部の人達だけだと思うが。何が衝撃かというと、手書きのスケッチを自動でHTMLコードにしてくれるという技術だ。詳しい内容や仕組みの話は色々記事にもなっているので、そちらを見ておいてほしい。www.atmarkit.co.jpすごく簡単に解釈すると、とった写真をAI使ってHTMLで吐き出すというだけである。最近では仕事にWebサイト業務が当たり前になりつつあると思う。専門職でなくてもWebサイトの作成には単純に絵を書いて終わりではなく、そこからまた別の専門職の人が何かしなくてはいけないというなんとなくのイメージは持ってもらえ始めていると思う。絵を描く人がそのままWebページ作っちゃうってことはありますが、なんらかの技術が必要ということだけ理解していただければと思う。そのなんらかの技術が、今まで人が介入しないとできなかった。人の作ったデザインってコンピューターには理解できないから。見た目文字が大きければそれが大きい見出しで、その文章を象徴しているタイトルなんだなと理解できるが、コンピューターはそんな情報は理解できない。これをコンピューターにもわかりやすくしてインターネットに載せるのがHTMLという技術。デザインを内容を判断してHTMLにしなくてはいけない。一見人にとっては簡単そうだが、非常に奥が深しめんどくさい。めんどくさいから、なんとかしたい多くの技術者はこのめんどくさい作業をなんとかしたいと考えていた。今年の始めにも同じような記事を書いた。noriyasu-katano.hatenablog.comこの内容は別の会社が同じような仕組みで作っていたようだ。このHTMLにする作業はある意味専門でやっている人にとって悲願となっている。それによって職を失う人もいるかもしれないが、それ以上に必要な技術だと感じている。そこでマイクロソフトも作ったのだろう。やってみた実際にやってみました。下記のサイトにいって、スケッチ画像をアップするだけ。sketch2code.azurewebsites.netデスクトップで読んでいる人は面倒だと思うので、スマホでこのURLにいった方が楽です。実際に撮影何枚かテストしてみた。A4のコピー用紙に大きく内容を記載して、文字も日本語ではなく英語で大きめに書きました。試したのは全部で3つ「ちょっと複雑なフォーム」「簡単なフォーム」最後に「画像と文字」。1回目:ちょっと複雑なテキストフォーム左がスケッチで、右がソースコードのキャプチャです。ドライブキャプチャーを見ていただくとわかると思いますが、文字は読み込まれてないです。私の文字が汚すぎるという意見もあるかもしません。紙のシワや影なども影響するのかもしれないです。コードを見るとbootstrapのcssを自動で読み込むようになっています。crossorigin="anonymous"<link>タグはこんな感じ。四角の中に何かあると<button>だと認識してくれました。2回目:簡単なフォームやはり大きくはっきりと文字をかくとちゃんと認識してくれた。「NAME」と「Email」は反応してくれなかったが、「Message」はいけた。フォームになると、メッセージ部分は削除されている。大きさの問題なのか認識されていない。前回同様、四角の中に文字を描くとbuttonだと認識してくれるぽい。今回はこの中の文字も認識してくれた。画像は四角に大きくバツを描くと画像と認識してくれるぽい。デフォルトの画像(SVG)が差し込まれている。大きな「Z」が上段のものは文章として認識してくれたぽいけど、TITLEの下の段の「Z」は画像として認識された。3カラムの要素は全て<div>で設定されている。3つのテストに共通しているが大きなスタイルはBootstrapを元にして、細かいマージンなどはタグに直に書かれている。HTMLの構造としてはclass="row"で行ごとに区切られているのはBootstrapだからだろうな。ドライブまとめ最初は実装前のベースになるかと期待したが、現段階ではまだ実用とするのは難しいと思う。Bootstrapに慣れているエンジニアであれば、良いのかもしれないが、<div>を多用したマークアップにどうも違和感を感じる。技術としては非常に素晴らしい。認識スピードや精度も高いと言える。3回目のテストで「Z」にちゃんとリプサムの文章を入れてくれたところなどすごいなと感じた。この技術の今後の発展に大きく期待したい。11:04Sketch2CodeをTweet広告を非表示にする関連記事2018-01-18スクリーンショットからHTMLへ、もうフロントエンドはいらなくなるのか!?久しぶりに衝撃的なニュースが入ってきた。布施英利先生の話は、「アンドロイド...2016-02-14子供に数字で分からせると効果的かも小学校2年の息子は字が汚かった。»プロフィールid:Noriyasu_Katano横浜に住んでWebデザイナーをなんとなくやっている2児の父です。中心に政治や戦争に関してダラダラと書いています。更新が途絶えてだいぶ経ってしまった。転職...秦野稲荷木遺跡の第二回報告会に行ってきました。ウィジェットはてなブログをはじめよう!Noriyasu_Katanoさんは、はてなブログを使っています。ブログを報告するスターをつけました引用をストックしましたストック一覧を見る閉じる引用するにはまずログインしてくださいログイン閉じる引用をストックできませんでした。再度お試しください閉じる限定公開記事のため引用できません。