Techvenience

Technology × Convenience - Vue / React / Next / Nuxt / ChatGPTなどのIT技術がもたらす便利さをお伝えします。最近はChatGPTなどのAI技術を使ってブログを書いています。

Collections.emptyMap()に対してputするとUnsupportedOperationExceptionが起こる

Collections.emptyMap()に対してputするとUnsupportedOperationExceptionが起こる タイトル通りですが、とある条件の場合に map = Collections.emptyMap(); として、そのあとに map.put(key, value); とすると「UnsupportedOperationException」が発生します…

Mojaveにしたら Could not find nokogiri-1.6.7.1 in any of the sources と怒られた

Mojaveにしたら Could not find nokogiri-1.6.7.1 in any of the sources と怒られた macOSをMojaveにあげたら以下のエラーが出ました。 (もうCatalina来てるのに今更Mojaveですが) Could not find nokogiri-1.6.7.1 in any of the sources Run `bundle inst…

AndroidアプリのGoogleDrive連携でRealmObjectを難読化したらバックアップが正しくできなかった

AndroidアプリのGoogleDrive連携でRealmObjectを難読化したらバックアップが正しくできなかった タイトル通り、Androidアプリでアプリ内のデータをGoogleDriveにバックアップとして保存する際に正しく動かなかったので、そのメモ書きとなります。 ローカルで…

【Vue CLI 3】Typescriptを使ったVue.jsプロジェクト開発 実装準備編

【Vue CLI 3】Typescriptを使ったVue.jsプロジェクト開発 実装準備編 前回の続きとして、Typescriptを使ったVue.jsプロジェクト開発について解説していきます。www.sky-limit-future.com 今回はfilter、環境変数、vuexのモジュール化など今後の実装を簡単に…

【Vue CLI 3】Typescriptを使ったVue.jsプロジェクト開発 環境準備編

【Vue CLI 3】Typescriptを使ったVue.jsプロジェクト開発 環境準備編 今回からTypescriptを使ったVue.jsプロジェクト開発について解説していきます。 サンプルとして保育園比較サイトを作ってみます。サンプルなので小規模なものになります。サーバー側はPHP…

Androidアプリ開発 GoogleAPI連携 the name must not be empty: null

Androidアプリ開発 GoogleAPI連携 the name must not be empty: null 目次 AndroidアプリデータのバックアップにGoogleDriveを使う the name must not be empty: nullというエラー AndroidアプリデータのバックアップにGoogleDriveを使う Androidアプリの開…

Vue.Draggableで「Cannot convert undefined or null to object」のエラーが出た

vuedraggableを使用している箇所で以下のようなエラーが出ました。Vueでドラッグ&ドロップを使う際にお世話になっている「Vue.Draggable」でエラーが出ていたので対処方法を調べました。 www.npmjs.com Options props is deprecated, add sortable options d…

Mysqlで「0000-00-00 00:00:00」の登録が出来なかったので対処

今回は、タイトル通りで「0000-00-00 00:00:00」をinsertするとエラーとなったので解決方法を示します。 ■原因1 基本的には設定で解決できます。my.cnfの中のsql_modeを編集します。 私は以下の設定にしています。 sql_mode=NO_ENGINE_SUBSTITUTION,STRICT_T…

flywayのmigrateでERROR: Unable to connect to the database.に対処した話

今回はDockerを使った環境で、flywayのmigrateを実施した時に出た以下のエラーERROR: Unable to connect to the database. Configure the url, user and password!に対する対処方法を示します。migrateをしようと、以下のコマンドを実行しました。 >> $ ../f…

Nuxt.jsでページタイトルに共通文言を使用する

Nuxt.jsでページタイトルに共通文言を使用する 今回はNuxt.jsの各ページでタイトルを設定する際に、それぞれのページで共通の文言を入れる方法をご紹介します。 言葉で説明するのが難しいですが、以下のような例です。 ページ1のタイトル ページ1 | ここが共…

Nuxt.jsでassetsに作成した共通cssを読み込む

Nuxt.jsでassetsに作成した共通cssを読み込む nuxtjs今回はNuxt.jsで共通のcssを読み込む方法をご紹介します。 cssファイルをassets配下に作成 まずはcssファイルを作成します。 作成箇所はassetsで、今回は例としてmain.cssファイルを作成します。 assets/c…

無限ループのjavascriptを書かないように頑張ります

無限ループのjavascriptを書かないように頑張ります 元ネタ www3.nhk.or.jpエンジニアの方であればこの記事のことは耳に届いていると思います。 無限ループのプログラムのリンクをSNSに投稿したことで女子中学生が補導されましたね。 関連ネタ また、javascr…

Mysqlで大文字小文字を区別してレコードを取得する

Mysqlで大文字小文字を区別してレコードを取得する 今回はMysqlでvarcharの値を指定して、レコードを取得する際に大文字小文字を区別する方法をご紹介します。 目次 Mysqlでは大文字・小文字で区別しない 検索時に「BINARY」を指定する テーブル定義を変える…

【レンタルサーバー不要】WEBアプリをFirebaseで開発・公開した話

【レンタルサーバー不要】WEBアプリをFirebaseで開発・公開した話 今回はFirebaseでWEBアプリの開発と公開を行ったので、その話を書いていきたいと思います。 Firebaseは、制限こそあるものの無料で利用できるので、WEBアプリの開発をやりたいけどお金をかけ…

javascriptでクリップボードに文章をコピーする

javascriptでクリップボードに文章をコピーする 今回はjavascriptでクリップボードに文章をコピーする方法を記載します。 いくつか方法を試しましたが、今回ご紹介する方法が最善かと思います。 textareaを作成してコピー?? 今回ご紹介する方法以外に、 コ…

モバイルフレンドリーなコンテンツかどうか調べてみた

SEO

モバイルフレンドリーなコンテンツかどうか調べてみた 昨今、WEBサービスやブログなどはモバイルからのアクセスが多いですね。 当ブログに関しては、記事の内容などに依存しているのか90%程度がPCからのアクセスとなっていますが、念のためモバイルフレンド…

「Remove all Google+ web integrations from XXX」のメールが届いたらやるべきこと

Google+の連携機能を採用しているWEBサイトは対応が必要です

【Nuxt.js】Nuxt.jsにFont Awesomeを導入する【nuxt-fontawesome】

【Nuxt.js】Nuxt.jsにFont Awesomeを導入する【nuxt-fontawesome】 今回はNuxt.jsにFont Awesomeを導入する方法を解説していきます。 導入方法は2通りです。 nuxt.jsのnuxt.config.jsでfontawesomeのcssを読み込む nuxt-fontawesomeを使う 私は前者を利用し…

【Nuxt.js】Nuxt.jsでFont Awesomeを使うと「The client-side rendered virtual DOM tree is not matching server-rendered content.」というエラーが出る【Font Awesome】

【Nuxt.js】Nuxt.jsでFont Awesomeを使うと「The client-side rendered virtual DOM tree is not matching server-rendered content.」というエラーが出る【Font Awesome】 タイトルの通りですが、Nuxt.js内でアイコンを使うために、Font Awesomeを導入しま…

【Vue.js】Vue.js(Nuxt.js)でユーザー登録・ログイン・ログアウトなどの認証機能を簡単に実装する with Firebase【Firebase Auth】

【Vue.js】Vue.js(Nuxt.js)でユーザー登録・ログイン・ログアウトなどの認証機能を簡単に実装する with Firebase【Firebase Auth】 今回はVue.jsで作成するアプリケーションに認証機能を実装します。 Firebase Authenticationを使いますので、手間なく速攻で…

【Vue.js】Nuxt.jsでvue-routerのルーティング設定【Nuxt.js】

【Vue.js】Nuxt.jsでvue-routerのルーティング設定【Nuxt.js】 今回はVue.jsアプリケーションを簡単にSSR化できるフレームワークであるNuxt.jsの中でも、ルーティング設定をする方法を解説していきます。 かなり簡単なので簡潔に解説していきます。 Nuxt.js…

【Vue.js】SSR(サーバーサイドレンダリング)アプリケーション開発のためにNuxt.jsの環境を整える【Nuxt.js】

【Vue.js】SSR(サーバーサイドレンダリング)アプリケーション開発のためにNuxt.jsの環境を整える【Nuxt.js】 今回はVue.jsアプリケーションを簡単にSSR化できるフレームワークであるNuxt.jsをご紹介します。 ここでは開発環境を整えるまでを解説しますが、Nu…

【Vue.js】Vue.Draggableを使って、Vue.jsでドラッグ&ドロップを実装する【Vue.Draggable】

【Vue.js】Vue.Draggableを使って、Vue.jsでドラッグ&ドロップを実装する【Vue.Draggable】 Vue.Draggableとは Vue.Draggableの導入 npmやyarnを使った導入方法 CDNを使った導入方法 Vue.Draggableの使い方 【Vue.js】Vue.Draggableを使って、Vue.jsでドラッ…

【Vue.js】PCかモバイルかを判定する【isMobile.js】

【Vue.js】PCかモバイルかを判定する【isMobile.js】 今回はアクセスしている端末がPCかタブレットか、モバイルかを判定する方法をご紹介します。 Vue.jsで使うことを想定して解説します。 目次 isMobile.jsの導入 モバイル・タブレット判定方法 isMobile.js…

【Vue.js】Vue Schoolで改めてVue.jsを学びなおしてみた【Vue School】

【Vue.js】Vue Schoolで改めてVue.jsを学びなおしてみた【Vue School】 Vue.js学習プラットフォームとして、Vue Schoolというものがあります。vueschool.io 今回は、Vue.js経験1年程度の私が、Vue SchoolでVue.jsを学びなおしてみた感想を書いていきたいと思…

【Vue.js】$refsで取得した要素で使えるプロパティ【ref】

【Vue.js】$refsで取得した要素で使えるプロパティ【ref】 今回は以下のような実装をしました。See the Pen vuejs-refs-test by duotaro (@duotaro100) on CodePen.pタグとulタグ、liタグにそれぞれ「ref」属性を付与して、それぞれの要素を取得します。 そ…

【Vue.js】TSとVue.jsを書く場合に、$refsへの参照でエラーとなる【TypeScript】

【Vue.js】TSとVue.jsを書く場合に、$refsへの参照でエラーとなる【TypeScript】 実装した内容 要素の高さを取得したかったので、Vueの$refを使いました。 取得したい要素に、ref属性をつけることでその要素の情報を取得することができます。 html側 <div> <p ref="test">テスト</p></div>…

【Vue.js】Vue Carouselを使ってカルーセルを実装する その1【デフォルト・自動・ループ】

【Vue.js】Vue Carouselを使ってカルーセルを実装する その1【デフォルト・自動・ループ】 Vue.jsを使っているプロダクトにカルーセルを組み込もんだ時に、Vue Carouselを使いました。 簡単な使い方を何回かに分けてまとめます。 今回はデフォルトの動きと、…

【Vue.js】Vue.jsでaタグにhrefを設定した際に、画面遷移せずに他の処理を実行する方法【prevent.stop】

【Vue.js】Vue.jsでaタグにhrefを設定した際に、画面遷移せずに他の処理を実行する方法【prevent.stop】 もともとvue-routerで実装していたが、aタグで設置して欲しいという要望がきました。 (SEOとか、右クリックで別タブで開きたいとか) aタグにして画面遷…

【機械学習】TensorFlowの基本分類チュートリアル「Fashion MNIST」を実行しながら解説 - Part3 -【TensorFlow】

【機械学習】TensorFlowの基本分類チュートリアル「Fashion MNIST」を実行しながら解説 - Part3 -【TensorFlow】 前回 www.sky-limit-future.com 目次 モデルの訓練 モデルの評価 予測 モデルの訓練 ここからモデルの学習・訓練です。 訓練は次のようになり…