Webサービスはじめに僕が通っている大学ではCMP実習という授業があり、そこでHTMLやCSS、JavaScriptを教えてもらいます。その課題で「JavaScriptのライブラリを使ったプログラムを作ってきてね」と言われたので僕はTESSERACT.jsという文字認識ライブラリを使いコード画像をテキストファイルに変えるWebサービス「ImageCode」を作りました。今回はそれを作った背景とコードについて解説していきたいと思います。以前、プログラミングの記事を読んでいて「使いたい!」と思ったコードがありました。それをコピペすることができませんでした。なんとそのコード、画像ファイルだったんです。テキストエディタに書いたコードをスクショして貼り付けたのだと思います。仕方なく僕はそのコードを画像のまま写すことに......。やって画像のコードを写すのは億劫でした。そこで僕は「コードの画像をそのままテキストファイルにすればいいのでは?」と考えてImageCodeを作りました。ロシア語に対応しています。今回はプログラミングコードを文字認識するため、英語の文字認識を使います。ブラウザで使うときはHTMLに下記のURLをscriptタグに入れればOKです。'https://cdn.rawgit.com/naptha/tesseract.js/1.0.10/dist/tesseract.js'GitHubに上がっているサンプルは下記の通りです。})このmyImageに画像URLを入力するとresultに文字を抽出した結果がJSON形式で返されます。progressは現在の進行状況を教えてくれます。今回は使わないので省きました。上の記事を参考に自分のPCのフォルダーから画像を選択し、描画と画像情報の取得するコードを作りました。文字認識で取得したコードはtextareaに設定し、保存ボタンを押したらそれをテキストファイル化しダウンロードするようにします。textareaの文字列のテキストファイル化は上の記事を参考にしました。変更点は三つあります。今回は僕が親しんでいるpdeファイル(Processingのファイル)にしたいため「text/plain」を「application/processing」に、「.txt」を「.pde」に変えています。一つの変更点はデフォルトのファイル名を「myText」から「sketch」にしていますが、これは単純に好みです。コードは以下の通りになります。ついでにCSSも書きました。value=""></textarea></div></body></html>imgタグにはデフォルトで「画像をアップロード」と書かれた画像を挿入しています。left;}}GitHubgithub.com完成図こちらのリンクからデモを体験できます。(ImageCode)僕は下の画像を使ってコード生成をしました。(ライブラリの性能的に誤字が発生するのでなるべく発生しないように工夫した画像ですので、)下の画像で試すのを推奨します。最後に生のJavaScriptに触れたことがあまりなく、授業で習ったばかりでHTMLやCSSの書き方もおぼつかないところがあると思いますが、なんとか完成させることができました。今回はpdeファイル限定ですが、今後は他のファイルでも対応させたり、文字認識の性能を上げていきたいと思います。PGraphicsでジェネラティブアート月別アーカイブはてなブログをはじめよう!ZawaWorksさんは、はてなブログを使っています。ブログを報告するスターをつけました引用をストックしましたストック一覧を見る閉じる引用するにはまずログインしてくださいログイン閉じる引用をストックできませんでした。再度お試しください閉じる限定公開記事のため引用できません。