The sky is the limit

Vue.js、PHP、Java、Cordova、Monacaを中心にハイブリッドアプリ開発、PWA開発など効率的なWEB、iOS、Androidアプリ開発の情報を共有します。

【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タグにして画面遷…