2018-01-01から1年間の記事一覧
【Vue.js】Vue.js(Nuxt.js)でユーザー登録・ログイン・ログアウトなどの認証機能を簡単に実装する with Firebase【Firebase Auth】 今回はVue.jsで作成するアプリケーションに認証機能を実装します。 Firebase Authenticationを使いますので、手間なく速攻で…
【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をご紹介します。 ここでは開発環境を整えるまでを解説しますが、Nu…
【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】 今回はアクセスしている端末がPCかタブレットか、モバイルかを判定する方法をご紹介します。 Vue.jsで使うことを想定して解説します。 目次 isMobile.jsの導入 モバイル・タブレット判定方法 isMobile.js…
【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】 今回は以下のような実装をしました。See the Pen vuejs-refs-test by duotaro (@duotaro100) on CodePen.pタグとulタグ、liタグにそれぞれ「ref」属性を付与して、それぞれの要素を取得します。 そ…
【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を使いました。 簡単な使い方を何回かに分けてまとめます。 今回はデフォルトの動きと、…
【Vue.js】Vue.jsでaタグにhrefを設定した際に、画面遷移せずに他の処理を実行する方法【prevent.stop】 もともとvue-routerで実装していたが、aタグで設置して欲しいという要望がきました。 (SEOとか、右クリックで別タブで開きたいとか) aタグにして画面遷…
【機械学習】TensorFlowの基本分類チュートリアル「Fashion MNIST」を実行しながら解説 - Part3 -【TensorFlow】 前回 www.sky-limit-future.com 目次 モデルの訓練 モデルの評価 予測 モデルの訓練 ここからモデルの学習・訓練です。 訓練は次のようになり…
【機械学習】TensorFlowの基本分類チュートリアル「Fashion MNIST」を実行しながら解説 - Part2 -【TensorFlow】 前回 www.sky-limit-future.com 目次 正規化 分類クラス モデルの作成とコンパイル 正規化 前回の続きで、実装の説明に入ります。 機械学習で…
【機械学習】TensorFlowの基本分類チュートリアル「Fashion MNIST」を実行しながら解説 - Part1 -【TensorFlow】 最近はVue.jsは一旦休憩して、TensorFlowの勉強をしています。 そこで、TensorFlowの基本分類チュートリアルである「Fashion MNIST」を実行し…
【Vue.js】Vuexでストアオブジェクトをモジュールに分割する【Vuex】 【前回】Vuexの基本的な使い方 www.sky-limit-future.com Vuexを使用する際に、単一のストアオブジェクトを使っているとストアオブジェクトが膨れ上がってきてしまいます。 すると管理が…
【Vue.js】Vue.jsでモバイル/タブレットであるかを判定する【isMobile.js】 Vue.jsに限らず、javascriptの実装をPCかモバイルやタブレットで分けたいということがあるかと思います。 そのためのライブラリとして「isMobile.js」というものがありますが、これ…
【iOS】iOS11.3や11.4で発生したpreventScrollを防ぐ方法【スクロール】 iOS 11.3からSafariやChrome、FirefoxでpreventScrollが生じるようになり、ブラウザの動きが気持ち悪くなりました。 状況としては下記ページの内容です。182521 – REGRESSION (iOS 11.…
【Vue.js】Vue.jsでボタンをdisabledして押せなくする方法【:disabled】 本日はVue.jsを使って、ボタンを押せなくする方法を解説します。 ボタンを押すとdisabledにする 実装は簡単で、ボタンを押したかどうかのフラグを用意しておき、ボタン押下と同時にフ…
【Vue.js】mixinを使ってグローバルメソッドを定義する 今回はVue.jsの各コンポーネントで使用するグローバルメソッドの導入方法を解説します。 ここではグローバルミックスインを使った手法を使います。 目次 グローバルメソッドの定義 ミックスイン設定 グ…
Vue.jsでChart.jsを使う方法 今回はvue-cliで作成したVue.jsを使って作成したアプリケーションにChart.jsを導入する方法を解説します。 ここではvue-chartjsを使って導入します。GitHub - apertureless/vue-chartjs: Vue.js wrapper for Chart.js 元となる…
【Vue.js】Vue.jsアプリケーションにSNSシェアボタンを導入する【Facabook/Twitter/Hatena】 今回は、Vue.jsを使って作成したアプリケーションにFacebook,Twitter,Hatenaのシェアやブックマークボタンを設置する方法を解説します。 それぞれ公式サイトで用意…
【モーダル】Vue.jsで作成したモーダルの外側をクリックした時に閉じるようにする 今回はVue.jsで作成したモーダルの外側をクリックした時に、そのモーダルを閉じる方法を解説します。以下のページでは、Vue.jsを使ったモーダルの作成方法と、今回の記事内容…
【filter】Vue.jsのfilterで金額にカンマを入れる【フォーマット】 ここではVue.jsを使って金額にカンマを入れるフォーマット処理について解説していきたいと思います。 目次 カンマの付け方 filterの作成 filterの使用 カンマの付け方 最初に、金額にカンマ…
【アドセンス】Vue.jsアプリケーションにアドセンス導入【vue-cli】 今回はvue-cliを使って作ったVue.js + webpackのWEBアプリケーションにGoogleアドセンスを導入する方法を解説していきたいと思います。 ここではvue-google-adsenseというプラグインを用い…
【Vue.js】titleタグやmetaタグ(description)を書き換える方法【vue-rouetr】 ここではVue.jsを使ったアプリケーションで、ページタイトルやmetaタグのdescriptionを動的に変更する方法を解説します。 titleタグやdescriptionはSEOで最も基本かつ重要なポイ…
【vue-cli】webpackで作成したアプリケーションで、v-bindした画像の読み込みがうまくいかない【v-bind】 目次 ■v-bindした画像パスが正しく読み込まれない ■vue-loaderのアセットURLハンドリング ■解決方法 v-bindした画像パスが正しく読み込まれない vue-c…
【Vue.js】VueアプリケーションがSEO的によくなさそう？？【SPA・シングルページアプリケーション】 ここでは「単一ファイルコンポーネントを使わない」Vueアプリケーションについて言及しています。 目次 ■単一ファイルコンポーネントを使わないVueアプリケ…
【Vue.js】さくらのVPSにvue-cliを使って作成したVueアプリケーションを公開した方法【さくらのVPS】 前提 ・Macで実施しています(Windowsなどは方法が異なる場合があります)経緯などを読み飛ばしたい方はさくらのVPS上にvue-cliで作成した(単一ファイルコン…
【vue-router】router-link でクリックイベントが反応しない【 v-on:click / @click】 タイトル通りで、vue-routerを使っている場合に、router-linkにクリックイベント(v-on:click / @click)を定義しても、反応しません。 そんな時にどうしたら良いか、2つの…
【DB】MAMPでデータベースを使用する方法【MySQL】 事前準備 以下の環境が整っていることを前提として話を進めます。 【MAMP】MAMPでPHP開発環境を整える【MySQL PHP 環境構築】 www.sky-limit-future.com 目次 phpMyAdminを使う方法 その他ツールを使う方法…
【MySQL】ユーザーを作成と権限の追加 今回はMySQLのユーザー作成と権限追加についてです。 いつも通り、Macでの話になりますのでご注意下さい。 事前準備 MAMPの環境を想定していますので、以下の記事を元に環境構築をお願いします。 www.sky-limit-future.…
