React+Webスクレイピング+Azureでアプリを作ってみた話

キーワードを入れると、Google Scholarで検索をかけてタイトル一覧を表示し、選んだタイトルの概要文を抽出して日本語訳するというアプリを作ってみました。

こんなのです↓

今回はMicrosoft AzureCognitive Servicesを使ってみたかったというのが大きいです。

多分そこまで需要がないのと、Azureが高い(利用料金が)気がするので一般公開はしないつもりのため、これ以上作り込みはしないと思うのですがとりあえずどんな技術を使ったのかまとめてみようと思います。

 

React, Redux, Next.js

フロントエンドはReactで作りました。一応処理ごとに画面遷移させたくないという理由です。

SSRする必要もなくルーティングも行わないためNext.jsは正直メリットがそこまでないのですが、Next.jsでReduxを使ったことがなかったので練習と思って導入しました笑

Reduxでは検索キーワードや取得したタイトル、ローディングの状態、取得した概要文などを管理しています。このくらい状態を管理しているとReduxを入れたほうが書きやすいですね。

今回はミドルウェアは入れず、非同期処理なども全てComponent内で行いました。

Reactほんと楽しいです。

初めての人にオススメしたいReactの勉強法【初心者向け】

 

Python, Selenium

Webスクレイピングを行いたかったため、今までスルーして来たPythonについに手を出してしまいました。

Ruby等を書いていたためかすんなり理解でき、Seleniumを用いたスクレイピングも比較的楽に実装できたので手応えとしては良かったです。機械学習とかもしてみたくなりますね…!

一応Beautiful Soupも利用しています。

リアルタイムでスクレイピングを行うとどうしても待ち時間ができてしまうので、ここの時間短縮などしてみたいところです。

【Selenium】30分で出来るWebスクレイピング【Python初心者】

 

Flask

フロント側とバックエンド側を分けて構築するつもりだったので、APIを何で作ろうかなと思ったのですが、スクレイピングにPythonを使うため何かいいのないかと調べたところFlaskがとても良かったです。

軽量で実装しやすく、今回のような小規模のWebアプリケーションの構築にはうってつけのフレームワークだと思います。

普段ならRails APIでバックエンド実装しているのですが、Flaskの手軽さは衝撃でした…

【Flask】5分で作るめちゃくちゃ簡単なAPI【Python初心者】

 

Azure

これがスクレイピングと並んでメインの機能です、以前からCognitive Servicesを使ってみたいと思っていたので、今回はついにAzureに登録して実装してみました。Translator Text APIです。

実装内容はサンプルコードをほぼそのまま利用することができ、スクレイピングで取得した概要文(原文)をAPIに渡してあげると翻訳されて返ってくるのでそのまま出力しています。

ただ、個人でAzureを使ったサービスを公開するとどんどんお金がなくなっていきそうなので注意ですね…

Web APIでAIを簡単に使う方法 (翻訳機能の実装)【Microsoft Azure Cognitive Services】

 

おわりに

卒論のテーマ決めで論文を調べることがあって、概要文をもうちょっと楽に読めたらいいかなと思って考えたアプリなのですが、意外とすんなり実装でき、なおかつ今まで触れたことのない技術に触れたので個人的にはすごく満足です。

今までは言語なりフレームワークなりを勉強して「勉強したはいいけど何が作れるんだろう…」となっていたのですが、作りたいサービスが先に来てそれの実現に必要な技術を勉強していくほうがモチベーションにもなりますし楽しいですね。

Azureなどのクラウドサービスや便利なライブラリが数多くあって意外とどんなことでもいけちゃう気がするので、皆さんも何か作ってみてはいかがでしょうか。