【文字認識を利用したAIアプリ】LINEに画像を送ったら自動で文字起こししてくれる機械学習アプリを作ろう

*******************************************************

【お得なマガジンもあります】
セット割で、3000円ほどお得になります。現在、3本のチュートリアルが利用できます。LINE Botの作成を学べるコースです。以下のチュートリアル3点が、セット割で購入することができます。

・【AIプログラミング】LINEに画像を送ったら自動で文字起こししてくれる機械学習アプリを作ろう
・スケベAI「スケベ博士」をPythonとGoogle Apps Scriptで作るスケベ・チュートリアルを公開します
・JavaScriptだけで書ける!LINEからDMMのサンプル動画が見れる、「変態コンシェルジュ」を作ろう!



*******************************************************

---------------------------------------------------------------------------

今回作ったものは、LINEに本の一説の画像などを送ると、中のテキストを自動で解析して返してくれる、「文字起こし君」を作成しました。

文字おこし君ができること

何をしてくれるかというと、

1. LINEから画像を送信する

2. LINEが画像から文字を抽出してくれる

3. LINEが文字を返してくれる

という処理をしてくれます。


現在の稼働状況

一応友達登録することはできますが、ユーザー数が90000名を超えてしまいました。サーバーがパンクしています。動かなくなっている時間が長いです。

QRコードはこちらです。

作った背景

文字起こしって、超絶面倒くさくないですか?

書評記事書くときに、紙の本だと本の一説コピペするときとかめっちゃくちゃ面倒くさいんですよね。それをカメラで画像とって自動で文字起こししてくれたら便利だなぁと思って作りました。

卒論書くときとかまさに、その本の一説をそのまま引用したいときとかってあるじゃないですか、それを一つ一つ本を抑えてパソコンに打ち込むのって、現代人らしくないですよね。もう2018年ですよ?そんなルーチンを人間がやるのはあほらしいので、さっさとそういうことはAIにやらせたかったんですよね。ということで、サクッと作りました。

インターネットでの反応

やっぱり需要はあるみたいでした。文字起こし面倒くさいし全然生産的じゃないですからね。

購入者の者の声


実装方法

Google Apps Scriptという、Google製のJavaScriptをベースに、サーバレスな環境で作っているので、めっちゃくちゃ簡単です。

GoogleがGoogle Apps Scriptを起動時に、Web アプリとして公開ボタンをポチっとするだけで、無料でサーバーを提供してくれるので、環境構築も一切必要ありません。

このチュートリアルでこのアプリを作るために必要な前提知識

このアプリを0から構築するための前提として必要な知識について書いていきたいと思います。チュートリアルをやる前に、必ずこれらの知識はつけておいてください!

1. JavaScriptの知識

JavaScriptの知識は必要になるので、Progateで勉強してきてください。ちなみにプログラミング未経験の人でも、Progateならわかりやすく学べるのでお勧めです!

2. Web APIの知識

今回の画像送信に関する部分はLine Messaging API、機械学習の部分については、Google Vision APIというAPIを利用して行いますので、Web APIの知識が必要です。そのうえで、APIってじゃんじゃらほい?って人は、Web APIについて詳しめに解説しているこちらの記事を読んで学んでください。一応無料部分でAPIについては理解できると思いますが、性欲に有り余っていたらぜひ有料コンテンツでもWeb APIを利用した実装をやってみてくださいね!

以上です!

「え、すくな」と思われる方も多いと思いますが、安心してください。これで十分なんです。

例えばRubyでアプリを作る場合は、ローカル環境(自分のPC)でRubyが動くようにとセットアップしなければならないのですが、Google Apps ScriptはすべてWebで完結するので、環境構築は一切必要ないのです。

また、アプリケーションをディプロイする(常に全世界からアクセスできるようにする)場合、本番環境にシステムを設定しなければならないのですが、それもGoogle Apps Scriptがワンクリックでやってくれるので必要ありません。

なので、純粋にJavaScriptとWeb APIの知識があればできてしまいます。ので、さっそく実装していきましょう!

ちなみに有料版にすると、チュートリアルで解説が見れます。

目次

・処理の全体を眺めて、だいたい何をしているのか理解しよう(LINE API・Google Apps Script・Google Vision API)

・Web APIとは

・LINE Messaging APIの設定をしよう

・Google Vision APIの設定をしよう

・Google Apps Scriptで実装しよう

処理の全体を眺めて、だいたい何をしているのか理解しよう(LINE API・Google Apps Script・Google Vision API)

LINEからメッセージを送り、実際にコードを書く部分が、Google Apps Scriptとなります。そして、文字起こしをしてくれるのがGoogle Cloud Vision APIになります。

Web APIとは


では初めに、APIとは何かを学びましょう。Web APIの説明は、以下の記事にまとめてあります。一言でいうと、ほかのアプリからデータを操作する窓口になります。

この記事の無料部分には、Web APIの詳細な解説があります。その中で、以下の章を読んでみて、なんとなくでよいのでWeb APIとは何か学んでみてください。

・そもそもWeb APIとは

・Web APIで使う通信の仕組みを学ぼう

・HTTPの通信で覚える知識

・CRUD (CREATE READ UPDATE DELETE)

・URL (エンドポイント・リクエストURL)

・リクエストパラメーターとURLエンコーディング

・リクエストヘッダーと認証

・リクエストメッセージボディ

Google Apps Scriptで実装してみよう!


ということで、いきなり実装をはじめます!

まず、いきなりLINE Messaging APIを使うと、何やってるかようわからん!って状態になる可能性が大なので、Google Apps Script上で画像を指定して、そこからGoogle Cloud Vision APIで文字起こしするところから始めましょう!

事前準備① Google Apps Scriptを開こう

まず、Google Apps Scriptを利用する準備をしましょう。グーグルアカウントをお持ちの場合は、以下のGoogle Driveのアドレスにアクセスします。

画面左上の[新規]ボタンをクリックし、[Google Spread Sheet]をクリックします。そうするとGoogle Spread Sheetが開かれます。

画面上の[ツール]をクリックし、[スクリプトエディタ]をクリックします。そうすると、Google Apps Scriptのコードエディタが表示されるかと思います。

画面上部の[公開]をクリックし、[ウェブアプリケーションとして導入]をクリックします。そして、[アプリケーションにアクセスできるユーザー]を自分だけから、[全員(匿名ユーザーを含む)]に設定し、[導入]をクリックします。

そうすると、「このプロジェクトをウェブ アプリケーションとして導入しました。」と表示されます。その下に「現在のウェブ アプリケーションの URL:」と表示された下に、Google Apps ScriptのURLが指定されていますので、それをコピペしどこかに保存しておいてください。こんな感じのURLになると思います。

https://script.google.com/macros/s/AKfycbwdwOhOfQ5gw2cQMtejfV35zeLlfp3AgihQrikhaoshrijrfoaSk/exec

事前準備② LINE Developperに登録し、アプリを登録しよう

今度は、LINE Developperに登録し、アプリを登録します。手順は公式ドキュメントを読んでいただくのがよいと思います。

上記のマニュアルに沿ってチャンネルを作成し、以下の値を取得しておいてください。のちに使います。

・アクセストークン(ロングターム):Google Apps Scriptで後に[LINE_ACCESS_TOKEN]として利用します。

また、以下の設定を行ってください。

・アプリ名:文字起こし君(任意の名前で大丈夫です)

・アプリ説明:任意の説明

・Webhook送信:有効化

・Webhook URL:さきほどGoogle Apps Script上で取得したURL(https://script.google.com/macros/s/AKfycbwdwOhOfQ5gw2cQMtejfV35zeLlfp3AgihQrikhaoshrijrfoaSk/exec)

ここまでできたら、最後にQRコードを取得し、スマホからLINE BOTを友達登録しておいてください。

事前準備③ Google Cloud Vision APIにアプリを登録しよう

さて、今度は文字起こしをしてくれるAPI Google Cloud Vision APIの登録を行います。以下のページにアクセスしてください。

流れとしては、

1. Googleのアカウントを用意する

2. Google Developers Consoleにアクセスする

3. プロジェクトを作成する

4. Cloud Vision APIを有効にする

以下のチュートリアルを参考に、Google Cloud Vision APIのAPI KEYを取得します。

取得したAPIキーは、後で使うのでメモしておいてください。後で、[VISION_ACCESS_TOKEN]として利用します。

事前準備④ Google Documentをひらこう

のちほどGoogle Apps Scriptでログを出力するためにGoogle Documentを使いいます。そのための下準備をしましょう。まずGoogle Driveを開いて、作成 > Google Documentを選択します。

別タブでGoogle Documentが開かれるので、右上の[共有] から[詳細設定]を開き、アクセスできるユーザーを[オン ウェブ上一般公開]に設定し、[保存]をクリックします。

Google Documentの公開URLは、https://docs.google.com/document/d/${ID}/edit のようになっています。ここのIDの部分をコピペして、保存しておいてください!後で[GOOGLE_DOCS_ID]として利用します。

さっそくコードを書いてみよう!

これで準備完了です!それでは、さっそくコードを書いてみたいと思います。

この続きをみるには

この続き:35,321文字/画像3枚
この記事が含まれているマガジンを購入する
総額8940円のチュートリアルが、4980円で購入できるお得なセット割です。

LINE Botの作成を学べるコースです。以下のチュートリアル3点が、セット割で購入することができます。 ・【AIプログラミング】L...

・プログラミングの学習方法 ・受託案件を取るまでの営業方法 ・SNS、メディアの運用方法 ・ポートフォリオの作成方法 等を学べます。複数のチュートリアルを購入するよりも、こちらのチュートリアルを買っていただいた方がお得です。

プログラミングを学習して、Web案件を受託できるようになるまでのスキルセットをまとめているコースです。

または、記事単体で購入する

【文字認識を利用したAIアプリ】LINEに画像を送ったら自動で文字起こししてくれる機械学習アプリを作ろう

Dai

2,980円

この記事が気に入ったら、サポートをしてみませんか?気軽にクリエイターを支援できます。

note.user.nickname || note.user.urlname

サポートでいただいたお金はFanzaの動画を購入するために利用されます。

うれしいです!ぜひ感想を#DAINOTE とツイッターでお願いします!
258

Dai

Daiの技術チュートリアル(単品)

PythonやGoogle Apps Scriptを利用して、役に立つアプリケーションを作成する方法をまとめています。 #Python #JavaScript
15つのマガジンに含まれています