SNSのスクショ画像からタグやURLなどを取り出すWebアプリを作ってみた

はじめに

「SNSのスクショ画像に映っているSNSのアカウント名やハッシュタグ、短縮リンクなどを手軽に取り出せれば…」知人の要望をきっかけに簡単にWebアプリを作ってみました。

システムの構成

フロントはReactで実装。アップロードされたスクショ画像をOCRにかけて、結果であるテキストから必要な要素を正規表現で検出&表示する流れになっています。

ReactとOCRについて

最近は仕事でフロントエンドを触ることが多いので、Reactを始めAngularやvue.jsを簡単に触ったりもしました。個人的にはReactが好みです。やはり人気どころのUIフレームワークなので、

  • 多種多様なComponentが用意されている
  • 関連するライブラリの開発が速い

などのメリットがいいですね。

あと、OCRはCloud Vision APIを利用。他にも無料枠があるFree OCR APIなるものもあったりします。割りと使える印象ですが、さすがGoogleと比べると精度が落ちる印象。

 文字列からメタ要素を取り出し

正規表現を使って、文字列から要素を取り出します。そのことについては次の記事にまとめました。

DEMO

公開はしていないので動作動画だけ。はたして一般的に需要があるかどうか…

せっかくReactを使っているので、OCRの結果を編集してリアルタイムで要素の再検出ができるようにしてあります。

スポンサーリンク
スポンサーリンク