画像から文字を認識してさらに翻訳！

youtubeや洋ゲー、漫画でちょっと出てくる外国語をぱっと翻訳できれば便利だと思いませんか？
気になった文を手打ちで写すのは面倒です。
これをgoogleのを画像認識を使って翻訳できるようにします。
若干手作業も入るので半自動って感じです。
APIと既存のソフトの組み合わせでこんなに便利になります！

準備として
①今回、WinShotというフリーのスクリーンショットを活用します。
保存先のフォルダの監視できればいいので、他のスクリーンショットソフトでもいいですがWinShotは優秀なのでお勧め。 矩形範囲指定かつPNGが保存できるようにしてください。
②前回のノリでGoogle Play Consoleで「Google Cloud Translation API」を有効にします。
③さらに「Cloud Vision API」も有効します。

※②と③のサービスは有料です。洋ゲーで使いまくらなければ無料分で納まるかと思います。料金体系を理解して使用してください。便利なサービスなのでお金を払うのに値すると思う。
毎度のことですがAPIキーが他人の手にわたらないように！



以下、今回のコードの仕様
・「http://localhost/ocr_trs.php」をブラウザに入力して使用を開始します。
・ブラウザでコードのPHPを起動して、スクリーンショットを取ると自動で翻訳します。
・スクリーンショットで画像が保存されるたびにその画像を翻訳します。
・WinShotはショートカットキーで矩形範囲指定が行えるようにする。
そして読ませたい文字の部分を少し広めに囲って拡張子PNGで保存します。
コードはPNG対応になっています。文字がぼやっとするのが嫌なのでPNGにしています。
・認識した原文と翻訳後を表示する。
（画像認識結果がいまいちな場合は編集できるように原文をコピペできるように表示する）
・言語の指定をする必要が無いように言語検出を行う。 (その分、料金が発生することに注意)
・検出した言語→日本語の翻訳を行います。(日本語⇒日本語はエラーになってしまう)
・読みやすいようにピリオド以外の改行を無くした後、ピリオドで改行を行う


C:\xampp\htdocs直下に以下の2つのコードを保存してください。
1つ目
このコードはスクリーンショットソフトがPNGファイルを保存するフォルダを監視し続けます。
そして新規ファイルが保存されたらそのファイル名を返します。
どうもPHPではphpファイル直下のファイルしか画像表示できないようなので、「test.PNG」というファイル名を直下にコピーしています。
フォルダパスは自分の環境に合わせてください。




注釈として、
このコードは2つ目のコードから呼ばれます。
5行目で最初のフォルダの状況を保存し、12行目の最新のフォルダの状況を取得。
15行目で差分をとり、その差分があれば28行目でそのファイル名を返します。
※固定の名前でコピーしているのだからファイル名を返す必要はないのかも。。。
11行目で1秒毎に監視しています。頻度を早くするとレスポンスが少し良くなると思います。
20行目コピーを行うときに待ちなしで行うと失敗することがあるのでちょっとだけまっています
22行目表示用にコピーを行います。


2つ目
①は自分のAPIキー。
新規に画像が保存されたらそのファイルを画像認識のAPIに投げます。
次に画像認識結果のテキスト部分を翻訳のAPIに投げるという単純な構造です。





注釈として
24行目、①の部分に自身のAPIキーを入力します。
25行目、PHPで長時間待つために必要
31行目から35行目。言語の検出を行わない場合は$langをその言語に入力してこれらをコメントアウトしてください。
57行目　ファイル名を表示してますが邪魔ならコメントアウト
65行目　文字認識を指定しています。
68行目　画像データをbase64という文字列に変換しています。
93行目　改行を一度なくしたあと、94行目でピリオドを改行に変換しています。
98行目　翻訳結果のピリオドを「。」に変換しています。
110行目から　javascriptからajax通信を使いphpから新規のスクリーンショットのファイル名を取得しています。

変体仮名コンバート

基本的な処理は変体仮名タイピングと同じです。
テキストエリアの文字のひらがなを変体仮名(またその字母)に置き換えます。
変体仮名フォントを自分のPCにインストールする必要があります。
説明(変体仮名タイピングの挙動とほぼ同じ)

下記画像のようになります。

これ以下が本体です。

変体仮名をブログ上で表示したいぞ！(解決編)

やりたいこと。
フォントは個人個人が「Koin変体仮名明朝f2」を用意して、
ブログ上で変体仮名が表示できる状態。

今回の解決方法
①
※外字を活用していると上書きとなるかもしれません。そういう方は退避が必要です。
「Koin変体仮名明朝f2」のフォルダ内にある「Koin変体仮名明朝f2.tte」を
「C:\Windows\Fonts」に放り込みます。フォントのインストールが始まります。。
そうすると「EUDC」というフォントができます。
※今回の使用方法では、変体仮名フォントを外字エディターでリンクする必要はありません。

②コード上で
font-family: "EUDC","ＭＳ 明朝";
とします。後半の"ＭＳ 明朝"は字母を等幅フォント表示するため。

③IEのみ改行コードが改行はするものの「・」（トーフ？って奴かも）と
余計なものが表示されてしまいます。。
挙動として"EUDC"の直後の改行のようです。
そのため、


として改行のフォントを変更することによって一応の回避はできます。

※環境：Windows7 64bit　IE11、Chrome、Firefox

以上、スマートではないのかもしれませんが、WEBで外字フォントを使用の件は解決しました。

変体仮名をブログ上で表示したいぞ！(検討)

追記
解決しました。リンク

変体仮名タイピングver1.1

変体仮名タイピング

問題選択　　　： あ行か行 さ行た行 な行は行 ま行や行 ら行わを 百人一首からなど10問
表示モード　　 ： 字母のみ 変体仮名のみ 両方
ローマ字表示 ： あり なし

変体仮名タイピング説明

アンドロイドの変体仮名のアプリはあるものの、いまいちどうやって勉強していいかわかりません。
暗記なのか、書いて覚えるにしても変体仮名の書き順がわからないなど。
とりあえず字形から反射的に思いつくようになるかなという感じでタイピングゲームを作ってみました。
字母⇒変体仮名と変体仮名⇒字母どちらで覚えるのがいいのだろうか？

プレイはこちらから


使用方法
0:koinさんの変体仮名のフォント[Koin変体仮名外字明朝(フリー版)]を使用します。
※外字を活用していると上書きとなります。そういう方は退避が必要です。
「Koin変体仮名明朝f2」のフォルダ内にある「Koin変体仮名明朝f2.tte」を
「C:\Windows\Fonts」に放り込みます。フォントのインストールが始まります。
そうすると「EUDC」というフォントができます。
※今回の使用方法では、変体仮名フォントを外字エディターでリンクする必要はありません。


1:問題やモードを選択
2:問題初期化ボタンを押す
3:スペースキーを押してスタート
4:左から順に字母や変体仮名に対応したローマ字で入力する
(ローマ字は答えそのものなので、デフォルトでは右端に表示してます)

問題仕様
濁音、半濁音、小さい「っ」や「ょ」などは無し
「ん」は変体仮名フォントに割り当てがない
「百人一首からなど10問」は、百人一首から適当に選んだ言葉と適当に思いついた言葉からランダムに10問出題。
例として、「か」だったら変体仮名が3種類あるので（字母でいうと「加」「可」「嘉」の3種類）だが連続して同じ文字がでないようになっている。
始まりはランダムで順繰り割り当て。頭にきやすい変体仮名とかがあるようですが関係なく割り当てします。
それ以外の問題は、変体仮名を一文字ずつ割り当てがある分すべて出題します。
同じ字母で字形が違う変体仮名がこのフォントセットにあるため同じ字母が出ます。

(自分向けに)タイピングしやすいようにローマ字は以下のMAPで製作しています。
訓令式に近い感じです(「を」をwoとしています)

コード仕様：
javascriptを使用
変体仮名は「Koin変体仮名外字明朝(フリー版)」を使用。
ファイル分割(.jsファイル)はブログ版ではあきらめた
ブログに上げた場合、変体仮名がなぜかコード内では8文字扱いになっているため
「ん」と混在した時に処理が煩雑になるので「ん」を「百人一首からなど10問」から削除。

いつのまにかコード表示しなくなってる＼(^o^)/

そりゃ、レイアウト変えたらカスタム部分に書いたSyntaxHighlighter消えますね
その上、bodyとheadを勘違いして悩むしさぁ 
 ＼(^o^)/

これで復活したはず