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

前書き 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の箇所 // …

前書き よく分からないAPIでも、 ソースコードを遡ればAxiosでやり取りしてたということがありました。 ドキュメント読んだり、コード遡ったりするのは大事ですね。 Buffer fileをAxios使ってやり取り 自分がやり取りしたかったのではFBX-Binaryファイル。 F…

XMLHttpRequestとは サーバーとWebページの更新なしにデータのやり取りを実現できる。 同期的・非同期的かはオプションとして選択でき、 テキストデータだけでなくバイナリデータのやり取りも可能である。 Fetch APIとは fetchではXMLHTTPRequestと比べてモ…

前書き 前回ブラウザ上で3D表現をJavaScriptで表現できるThree.jsについて説明した。 melheaven.hatenadiary.jp ファイルの読み込みをしたい ozateck.sakura.ne.jp上記のサイトによると、 FBXLoaderというモジュールを適用して実装する。 ローカルに3DFileで…

前書き 諸事情でThree.jsについて扱っています。 Three.jsを扱えばJavaScriptで3Dモデルを扱えます。 node.js環境の場合、npmでthree.jsを導入できます。 基礎知識 webGLとは ブラウザ上で3D表示のための標準仕様です。 webGLではGPUによる高速なコンピュー…