前書き 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を使って、 データを取得するまでは実行を止めるというコードを書きました。 …

前書き 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.…

前書き Vue.jsでメインバーを実装します。 可読性を向上させるためにメインバーについて記述したMainBar.vueと その親であるApp.vue間をpropsを使ったデータの渡しについて勉強します。 使用したパッケージ vue-router vuetify 親コンポーネント（App.vue） …

はじめに お久しぶりです。Vueの心機一転記事を書いていきます。 ポートフォーリオで自分の更新を機能を加えたいなと思い、 自己ログイン機能と編集機能を実装します。 FirebaseだとCloud Store、Authentication、DataBaseが用意されているので、 簡単に実装…

前書き そういえば3ヶ月前にこんな記事をQiitaに投稿しました。 最初の方はいまいち中身を理解してなかったのですが、 インターンでバイナリ操作、 Axiosを触るようになって理解した画像投稿部分を説明します。 記事も更新しました。qiita.com Vueの箇所 // …

Vueで変なエラー vue-router、vuex、axiosを一括インストールした時に気づいたのですが、 改めてnpm run serveをするとこんな警告が出ていました。 "export 'default' (imported as 'Vue') was not found in 'vue'main.js import Vue from 'vue' import App …

ポートフォーリオを作り直そかな 昔Vueでポートフォーリオ作ったんですけど、 動作不安定+画像の読み込みが遅い問題を放置してたわけです。https://aoi-portfolio.netlify.app/outputsgithub.comVueの勉強しながら色々作ったんですけど、 コードも問題箇所ば…

Qiitaに記事を投稿しました。 実に二年ぶり。プログラミング始めて一年くらいブランクがありましたので、また一から再開しようと思います。今回はVue.jsでマインドマップ投稿サイトを作ってみた話です。 qiita.com

ディレクトリ事情 Vue-myappフォルダ以下です。 |--Vue-myapp | |--docker | | |--Dockerfile | |--docker-compose.yml | |--.devcontainer.json | |--.vscode | | |--launch.json Dockerコンテナ作成 Dockerfile 実行コマンドをここで表記。 ローカル環境を…