2020-12-01から1ヶ月間の記事一覧

【Mecab】Docker上に構築した環境でSentiment Analysisライブラリ「oseti」を動かす

前書き 前回Google Colab上で自然言語処理の基礎でもある文章のポジティブ・ネガティブ判定を実践しました。 形態素分析についても記述しています。 melheaven.hatenadiary.jp 使用したのは、東北大学の乾・鈴木研究室の日本語評価極性辞書を活用したSentime…

【スクレイピング】DockerコンテナにSeleniumをインストールしてブラウザ操作

前書き 前回Google Colabでchromium-chromedriverとSeleniumを使って、Yahoo! Newsのコメントをスクレイピングしました。 melheaven.hatenadiary.jp 環境構築 seleniumとはWebブラウザの自動操作化を実現させるためのフレームワークです。 Seleniumを介してC…

【BeautifulSoup】Yahoo!Newsの記事をスクレイピングして表示させる【Flask】

前書き 前回の記事でフロントエンドにてReactを適用し、バックエンドにてFlaskを動かしました。 Reactにて入力タグを取得し、タグに該当するYahoo! Newsの記事をバックエンド側で検索します。 melheaven.hatenadiary.jp 技術 フロントエンド側(React):入…

【Flask】React→Flaskにアクセスする際に発生したエラー【CORS】

前書き React~Flaskアプリケーション「環境構築」編 melheaven.hatenadiary.jp 環境のおさらい React(TypeScript)ポート番号3000 Flask(Python)ポート番号5000 シンプルにReact側で入力した入力タグ情報をFlask側へ送信するだけの記事です。 実装 React…

【TypeScript】react-tags-inputを使って検索フォームの実装【React】

前書き 前回「React-tags-inputモジュールを用いてタグフォームの実装する」記事を書きました。 今回はTypeScriptファイル用にうまく動かしてみます。 melheaven.hatenadiary.jpこちらはReact-Tag-InputモジュールのREAD MEです。非常に分かりやすく書かれて…

【React】タグ検索モジュールの比較【react-tags-input】

前書き タグ検索機能を以前Vueで実装しました。 これをReactの場合、どのように実装できるのかを調べました。melheaven.hatenadiary.jp 方法 (1)react-tag-input まず最初にこちらに倣って実装。www.npmjs.comReact-dndに関するモジュールのバージョンは以下…

【TypeScript】Create-react-app+Flaskの環境構築【Docker】

前書き 開発するアプリはフロントエンド側をCRA(TypeScript)とバックエンド側をFlask(Python)とします。 個人的にReactのフレームワークはCRAやNext.js、Gatsbyなど様々であり、正直悩みました。特に今回開発するアプリは静的サイトに近いので、Gatsbyの方が…

Reactの初心者勉強まとめ

前書き 神動画です。www.youtube.com Reactの特徴 コンポーネント ここはVueとも共通点にもなります。 UIには見た目(View)と機能(Controller)に分類され、これらをまとめてコンポーネントと呼ぶ。 Webの構造はコンポーネントのツリー構造となっており、 …

React+TypeScriptでアプリケーション開発する意味

前書き 前回、自然言語処理の記事を書きました。 これをフロントエンドから動かしたいなと思い、何らかのアプリケーションを開発します。 サーバーサイドに軽量なFlaskを採用し、フロントエンドにはモダンなreact+TypeScriptを採用します。近年では静的型付…

【ポジネガ編】初心者でも簡単に自然言語処理で感情分析判定

前書き melheaven.hatenadiary.jpこの記事の続きです。 Mecab Mecabは日本語形態素解析エンジンです。 Mecabを導入方法は複数ありますが、以下のコマンドを打つことで、 Google Colabでは簡単に動作します。 !apt install aptitude !aptitude install mecab …

【スクレイピング編】初心者でも簡単に自然言語処理でポジネガ判定

前書き 普段、研究にて画像認識関連は非常に活用しているのですが、自然言語処理に関してはイマイチ縁がありません。 Yahoo!Newsの記事をスクレイピングしよう!と思ったのですが、 あえてYahoo!Newsのコメント部分をスクレイピングしてネガポジ判定をしま…

マインドマップ共有アプリを作った

URL 「Mind View」mindmap-app-d9302.web.app 前書き 脳の中を整理できるマインドマップを日頃から書くと良いとよく聞きます。 思考整理や記憶力向上、分析力向上に繋がるといったメリットがあるらしいです。 成功者の方々は毎朝、メモで思考整理を行ってか…

【Firebase】Googleログインを実装する【Vuex】

前書き melheaven.hatenadiary.jp前回メール認証のログイン機能を実装しました。 この時はポートフォーリオの開発でログインするのは自分くらいだったので、メール認証でも「まあいいか」と思っていました。 今回製作しているアプリケーションは誰でも気楽に…

【Firebase】Vue・Vuetifyでタグ 機能・検索の実装

前書き 前回にキーワード検索の実装を行いましたが、 これ・・・タグ検索の方がええなと思い、急遽タグ検索に切り替えました。melheaven.hatenadiary.jp 投稿時にタグの追加(Post.vue)| 投稿ページ Vueファイルのtemplateタグとscriptタグの中身からタグ検…

【Vue】投稿中にLoading画面を追加

前書き 投稿処理にどうしても時間がかかってしまう為、 記事を投稿中、Loading画面を追加しました。 参考資料 非常にわかるやすいです! 'vue-loading-overlay'の使い方について www.kabanoki.net 実装(Post.vue)| 投稿ページ import Loading from 'vue-lo…

【Vue】配列を取得してるのにlengthできない現象【Promise】

前書き melheaven.hatenadiary.jp前回の記事にてFireStoreとStorageからデータを取得するスクリプトを書きました。 実は大きな欠陥がありまして・・・ 悪しきコード export async function getAllData() { let buffData = []; // 1 const snapshot = await d…

【Firebase】検索処理と検索結果でページング処理【タイムライン】

前書き 前回こういった記事を書きました。 次は検索機能を追加し、検索ワードに絞って、タイムライン機能を実装させたいといった内容です。 前回の記事を見ないと「なんのこっちゃ」になるかもしれません。melheaven.hatenadiary.jp 【実装】 Home.vue <v-form color="primary"> <v-text-field v-model="searchWord" placeholder="1ワードまで" label="検索ワード(タイトル名)" type="text" /> </v-text-field></v-form>

【Firebase】FireStoreとVueでページング処理【タイムライン】

前書き 実装の一つのテーマとしてTwitterのタイムラインのような機能が欲しいなと思って実装しました。 FireStoreから取得したデータと画像をタイムライン形式に表示し、 ボタンを押すと、次の投稿をロードできます。 【実装】auth.js(FireStoreとのアクセ…

【Firebase】非同期処理におけるデータ・ファイル取得の方法【FireStore】

前書き 前回の記事にてデータの取得について書きました。 melheaven.hatenadiary.jp前回の記事では非同期処理に関する考え方が甘いなと感じました。 今回の記事では、asyncとawaitを使って、 データを取得するまでは実行を止めるというコードを書きました。 …

【深層距離学習】画像分類が難しい場合の学習法

前書き 画像分類をする上でどうしても特徴が2クラス間で似通っており、 分類させるのが難しいといったケースが存在します。 そういった場合にどういった学習が有効なのか調査してみました。 深層距離学習 深層距離学習の考え方についてはこちらの記事を参考…

ポートフォーリオが完成した

前書き そういやこんなこと言ってました。 melheaven.hatenadiary.jpそれで1週間くらいでポートフォーリオが完成しました。 使用技術 Vue CLI Firestore(Storage・FireStore) URL My PhotoFallio wired-photofallio.web.app こだわった箇所 まあシンプルな…