かとのぼのマイコード・マイライフ

エンジニア兼ウェブサービス開発者のプログラミングと雑記ブログ

プログラミングTip集

Vue.jsでページを移動した時に画面をトップに戻しておきたい場合

Vue routerを使ってトップにスクロールさせる方法 Vue.jsはSPA(シングルページアプリケーション)なので、もしページの下までスクロールした後にルーターを使って、別のページに遷移しても自動ではトップに戻ってくれません。一般的なサイトではトップになる…

JavaScriptで今日の0時を取得し、FireStoreのTimestampでその時間以降のデータを取得する

FirestoreのTimestamp JavaScriptのnew Date()を操作する Vue.jsとFirebaseとJavaScriptで実装 FirestoreのTimestamp FirebaseのFirestoreには、データ型にtimestampがあります。このタイムスタンプを使えば時間を並び順にしたり、特定の時間以降、以前のデ…

Vue.jsでCloud Firestoreのリアルタイムアップデートはコンポーネントのどこに設定するか?

以前、Cloud Firestoreを使ってリアルタイムアップデートを実装するのに参考になるサイトを紹介した記事を書きました。 www.katonobo.com 多くのサンプルではmain.jsに記述する方法が紹介されていますが、Vue.jsなら同じコンポーネントに書いておきたいとこ…

Cloud Firestoreのデータ追加で、データがない場合は新規に作成、ある場合は更新させる方法

Cloud Firestoreのデータの追加と変更 データがすでにあるかわからない場合は? set()メソッドにオプション「merge: true」を利用する Cloud Firestoreのデータの追加と変更 Cloud Firestoreで、データを作成、追加するときは「set()メソッド」を使います。 …

Cloud Firestoreでリアルタイムアップデートを使う時に参考になる記事とサイト【Firebase】

FirebaseとVue.jsのチャットアプリのサンプルは多くありますが、結構採用しているデータベースがリアルタイムデータベース(Realtime Database)のことが多いです。これはFirestoreが少し前までベータ版だったからでしょうか。 QiitaではFirestoreのリアルタイ…

BulmaでVue.jsのv-forを使って複数行に跨るカラムを配置したい場合【Vue.js】【Bulma】【Buefy】

この記事は、フロントエンドに「Vue.js」、CSSレイアウトに「Bulma」もしくは「Buefy」を使っていて、要素数がわからない項目で「v-for」を使ってカラムの複数行の折り返しを実現する方法について書いています。 Bulmaのグリッドシステム 複数行を折り返して…

Cloud Firestoreの配列の検索・追加・削除は「array-contains」「arrayUnion 」「arrayRemove」が便利

FirebaseのFirestoreで、配列の扱いが便利になっていたのでメモ。 従来では、配列の検索が面倒だった Version 5.3.0から一般的な配列のデータの入れ方で対応できるようになった 従来では、配列の検索が面倒だった 今まで、FirebaseのFirestoreは配列の扱いが…

複数のトークルームが存在するチャットアプリのデータ構成【Firebase firestore】

Firebaseを使ったチャットアプリを作成するとき、ちょっと悩んだのがfirestoreのデータベース構成です。 Firebaseの「firestore」と「real time database」はNoSQLなので、普段使い慣れているRDB(リレーショナルデータベース)とはデータ構造の扱い方が違い…

Vue.js+Vuex +firebaseでログイン機能を実装する場合はルートガードが便利

vue.js、Vuex、firebaseで認証機能を使っている場合、以下の二つの記事を組み合わせるとfirebaseのログイン認証機能を使って簡単にルートガードできる。 Vue vuexでfirebaseのログイン保持 - Qiita Vue.js でログイン機能を実装する - kz’s blog ポイント 実…

DateオブジェクトのtoLocale​Time​Stringで秒を表示しないようにする【JavaScript】

toLocaleTimeStringで秒は表示したくない場合の方法

Vue.jsでBootstrap-vueの画像をデータバインディングする方法

Bootstrap-vueで画像をデータバインディングする方法が少し難しかったのでメモです。

Firebase Cloud StorageとCloud Functionの設定の基礎

Firebaseの機能、Cloud storageとCloud Functionを使う必要がが出てきたので設定の基礎の基礎のメモです。 Firestoreの情報は多いですが、Cloud storageとCloud Functionは結構情報が少ないです。 Cloud Storegeは基本的にFirestoreが使ったことがあれば問題…

ログイン認証後にもともとの閲覧したかったページにリダイレクトする方法【Vue.js】【ログイン認証】

Vue.jsで、Vue Routerを使っている場合の話です。 ログインが必要な画面で、ログイン認証のページで一旦ログインしてもらった後に、もともと行きたかったページにリダイレクトして表示する方法のメモです。 router.beforeEachにクエリーを持たせておく 結論…

サーバーから取得したテキストの改行の表示はCSSで処理【Vue.js】【CSS】

Firebaseに入れたテキストデータの改行などを行う処置で少し迷ったんですが、CSSを使うと楽だったのでメモです。 Firestoreから取得した文字の改行などはどの方法でブラウザに表示させるか悩みどころ qiita.com firestoreに保存したデータをそのまま表示させ…

imgを動的にバインディングする方法【Vue.js】

Vue.jsで、ツイッター認証などで取得した画像を表示させる方法が少しハマったのでメモです。 Vue.jsで動的に画像を設定させるには「v-bind:src」 結論は、動的に画像を設定するためには template要素の中に <img v-bind:src="ここにdataや画像のURLを入れる"> 「v-bind:src」で設定する。 二重括弧( {{ }} )…

Solidityのindexedとは?

ERC721トークンのSolidityコードのサンプルを読んでいたらeventのコントラクトの所に「indexed」というワードが出てきたのでこの役割のメモです。 event TokenSold(uint256 indexed tokenId, string name, bytes5 dna) このindexedを付与すると、指定したパ…

Vue.jsでIPFSにアップロードしipfsHash値を取得する方法

IPFSにファイルをアップロードし、その値を取得して画面に表示するためのコードをメモ。 Vue.jsでは「var self = this;」が必要 基本的にはReactやJavascriptでのサンプルはネットに多くなるのでそれを参考にすればほとんど問題ない。参考になる動画はこちら…

Can't add script behaviour CallbackExecutor. The script needs to derive from MonoBehaviour! エラー対処法【Unity2018】

Unity2018で、スクリプトをアタッチしようとしたら出たエラー。 Can't add script Can't add script behaviour CallbackExecutor. The script needs to derive from MonoBehaviour! このエラーは、ファイル名とスクリプトのクラス名が一致していない時にでる…