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

ウェブサービス開発者のブログ

プログラミングTip集

チャットアプリの会話のように、テキスト内にURLが貼られた場合にアンカーリンクをつける方法と手順メモ【Vue.js】

チャットアプリを作る時のメッセージ部分のテキストにアンカーリンクをつけたい時の手順メモです。

Vue.jsで、ツイッターのURLシェアを実装したら「Refused to execute inline script because it violates the following Content Security Policy directive」というエラーが出た。

Vue.jsで、ツイッターのURLシェアを実装したら「Refused to execute inline script because it violates the following Content Security Policy directive」というエラーが出た。 理由 このエラーは、多くはグーグルの「コンテンツ・セキュリティー・ポリシ…

Buefyのタブで画面を変えてもタブの位置を記録させておきたい時【Buefy】【Tabs】【Vuex】

Buefyを使えばv-modelとの組み合わせによって、簡単にタブが実装できます。 buefy.org タブを変更した時にアクティブな場所を表示させる機能の実装は面倒なので大変助かります。 ただ、この方法だとrouter-linkで画面を遷移されたりするとタブが最初に設定し…

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

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

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

javascriptで当日の0時を取得してfirebaseのfirestoreのタイムスタンプでそれ以降の時間を取得する方法のメモです。

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】

BulmaとVueの組み合わせで複数行のカラムをうまく設置したい場合の手順メモです。

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

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

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

Firebaseを使ったチャットアプリで、それぞれ別のトークルームを作成したい場合のデータ構成についての記事

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

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

Vue.jsのUIコンポーネントはBuefyが便利

Vue.jsでSPAを作っているときに、レイアウトも楽をしたかったので良いUIフレームワークを探してたんですが、BuefyというUIフレームワークが導入が楽で扱いやすかったのでその感想と紹介です。 Buefyとは Buefyのサイトに簡潔に説明されています。 Lightweigh…

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とは?

ソリディティの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! このエラーは、ファイル名とスクリプトのクラス名が一致していない時にでる…