あらすじ 前回このような記事を書きました。やっぱり色々と勉強していましたが、モダンな情報を調べて自分の知識の穴を縫っていく方が明らかに効率が良いことを痛感しています。その為にはネットの海を彷徨う事の重要性が身に染みます。 melheaven.hatenadia…

あらすじ 前回この記事を書きました。ただ懸念点が一つ・・・2010年。古すぎじゃい！ やっぱり本で勉強するよりネットサーフィンの方がええわ！ 分からない単語が出てきたら深堀って調べていこうと思います。 melheaven.hatenadiary.jp2021年現在モダンとさ…

はじめに Web系の勉強をしてますが、もう少しWeb技術への基礎理解が欲しいので以下の本を読みました。 新しい技術が誕生するにせよ、RESTのような根幹の技術は変わりません。むしろWebの世界で統一化された規約（REST）を押させておこうと思いました。 ysk-p…

前書き 前回はこんな感じでUI設計・機能設計を簡単にやっていきました。 melheaven.hatenadiary.jp今回はデータ設計に取り掛かろうと思います。 データ設計 データ設計では、以下の3つを決定する必要があるみたいです。 データの具体的な中身 データベース設…

前書き 前回、こんな感じで要件定義をしました。 今回はUI設計・機能設計（処理内容・データ・操作)をやっていきます。 melheaven.hatenadiary.jp UI設計 必要最低限の画面は以下の3つ。加えてログイン画面・マイページ（パスワード変更など）とかですかね。…

前書き 前回の記事（Nginx+uWsgi+Flask）を自動起動してくれるようにします。 サービス起動デーモン化 Dockerを使用している場合、コンテナ起動時に--privileged （特権モード）とcommandに"/sbin/init"を追加しないと、 コンテナ起動時にsystemdにPID1が割…

前書き デプロイに向けて前回まで開発してきたアプリの起動をさらに効率化させようと思います。 melheaven.hatenadiary.jp正直Nginxに関してはイマイチよく分かってないのですが・・・。 次の製作物を開発している頃にはサーバーサイドの勉強をしたい。 Ngin…

前書き 12月末くらいから開発しているニュースコメント判定アプリの現状報告。 ReactとTypeScriptについて全くの初心者だったので、少々手こずっています。 追記（githubからのダウンロード方法） github.com $ git clone https://github.com/urbanweb2000/N…

前書き Yahoo! Newsのスクレイピングする上でも記事によっては、要素が異なったり、コメント取得に時間がかかりすぎたりします。 そこでエラー処理をどのようにしていくかを調べて、実装してみました。 今回の実装を以ってしても動作は少々不安定ですが、随…

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

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

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

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

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

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

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

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

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

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

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

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

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

前書き 前回こういった記事を書きました。 次は検索機能を追加し、検索ワードに絞って、タイムライン機能を実装させたいといった内容です。 前回の記事を見ないと「なんのこっちゃ」になるかもしれません。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>

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

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

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

前書き Vueで製作したPhoto Fallioが完成したので、 Firebaseを使ってデプロイしてみます。 手順 Vueプロジェクトのビルド まずVueファイルをビルドする必要があります。 通常package.jsonにて変更を加えていない場合は以下のコマンドでも可能です。 自分はp…

前書き Firebaseでは簡単にログイン認証が実現できるとのことなので、 即座に実装してみます。 Firebase関連の設定はこちらに記載しました。melheaven.hatenadiary.jp 実装 ./plugins/auth.js LoginやLogoutに関する関数をauth.jsに定義します。 これにより…

前書き ポートフォーリオ作成で、自分の開発した作品を自分で投稿できるようにしようということで、 Firebaseを活用してみました。今回は画像を一旦、Storageに格納する処理を書いていきます。 これまで Firebaseに関する設定をこちらで記載しました。 ここ…

前書き 以前、Axiosを使って、Firebase firestoreとのデータのやり取りをまとめました。 パッケージのfirebaseで簡単に実装できたのでまとめます。axiosの方が難しいが、firebaseを活用しない場合に応用が効く為、 やっていて損はないと思います。melheaven.…