kz’s blog

興味のあることについて書いていきます。

Nuxt.js でログイン機能を実装する

Nuxt をインストールする ja.nuxtjs.org $ npx create-nuxt-app <project-name> いくつかの質問に対する設定値 状況に応じて選択してください。 以下、筆者が普段選択するものを記載します。 サーバーサイドのフレームワーク None UI フレームワーク Vuetfy ※このページで</project-name>…

Nuxt.js × VeeValidate でカスタムルールを作成する

少々はまったので書いておきます。 前提として、プラグインとして VeeValidate を読み込む場合です。 カスタムルール作成 plugins/vee-validate.js 引数なしの場合 import Vue from 'vue' import VeeValidate, { Validator } from 'vee-validate' import ja …

Firebase の匿名アカウントを認証済みアカウントにリンクさせる

はじめに Firebase で匿名認証を使用すると、ユーザは何の情報も入力せずに Firebase のセキュリティルールに制御されているデータにアクセスできるようになるので、導入することでサービスの利用者が増えるのではないかと思いました。 firebase.google.com …

Nuxt.js と Firebase で SNS チックな個人開発サービスを公開した

はじめに 使用した技術 Nuxt.js SPA PWA vuetify Firebase Authentication Firestore Storage Hosting Functions ソース管理の話 サービスのコンセプト 検索 登録 繋がる やらないこと ユーザー同士のメッセージ等のやりとり 複数項目での検索 今後の課題 デ…

Vue.js で Firebase を利用するときに警告が出た場合の対処法

警告が出る場合 import firebase from "firebase"; このようにimportすると下記のような警告が出力されます。 It looks like you're using the development build of the Firebase JS SDK. When deploying Firebase apps to production, it is advisable to …

Heroku の Spring Boot アプリでテーブル接続を行う

環境 macOS Mojave 10.14.1 Eclipse (Pleiades) Oxygen.3a Release (4.7.3a) 使用するもの Heroku Spring Boot PostgreSQL Gradle Lombok 事前準備 あらかじめ Java 8 をインストールしておいてください。 Heroku 登録および設定 登録 下記サイトから登録を…

Vue.js でログイン機能を実装する

前提 この記事は@vue/cliを使用した内容となっております。 バージョン "vue": "^2.5.17", "vue-router": "^3.0.1", "vuex": "^3.0.1" ページ構成 ホーム プロフィール ログイン このうち、プロフィールはログイン認証が必要なページとします。 ソースファイ…

Github Pages に Vue.js の SPA サイトを公開して運営するまで

はじめに 基本的に以前の記事に書いてある通りに実行すれば Github Pages で SPA サイトを公開することができると思います。 今回は特にハマった点や、サイトを運営するために必要なことを記述していきます。 Github リポジトリ作成 通常通りに作成します。…

Vue.js で Buefy のラジオボタンの @change が拾えなくてハマった

はじめに 通常の Vue.js で作成したラジオボタンを Buefy で実装したら@changeが動作しなくなってしまいました。 調べても解決までに時間がかかったので、解決方法を書いておきます。 ちなみに、@changeはv-on:changeの省略記法になります。詳細はこちらを参…

Vue.js の methods と computed の違いを検証して理解する

はじめに jp.vuejs.org 公式の算出プロパティ(computed)を参照したところ、あまりピンと来なかったので、検証をして理解を深めました。 methods と computed の違い キャッシュされるかされないか キャッシュされる =computed キャッシュされない =methods …

Vue.js でラジオボタンのコンポーネントを作成する

ラジオボタンのコンポーネント テンプレート <template> <label> <input type="radio" :value="value" :checked="value === checkedValue" @change="$emit('change', $event.target.value)" /> <span v-if="label">{{ label }}</span> <span v-else>{{ value }}</span> </label> </template> スクリプト <script> export default { name: 'RadioButto…

Windows で Vue.js を開発する環境を整える

環境 Windows10 Enterprise nodist インストール github.com ダウンロードしたインストーラーを実行してインストールします。 コマンドプロンプト起動 以下作業はコマンドプロンプトで行うので起動しておいて下さい。 nodist バージョン確認 $ nodist -v 0.8…

MapUtils の使い方 (Apache Commons Collections)

Java の Map 操作を Null セーフで行いたい場合、Apache Commons Collections の MapUtils を使うと良いです。 Map インスタンス isEmpty isNotEmpty getString getString(デフォルト有り) getInteger getInteger(デフォルト有り) getBoolean getBoolean…

【はてなブログ】記事ごとの文字数を計測するツール

作成した経緯 Google Adsense の審査で「コンテンツの量が不十分」のため落ちたので、記事ごとの文字数を調べられるツールがないかと思い、作ってみました。 使用上の注意 当ツールで算出した文字数は目安となります。実際記事を書いている時の右下に表示さ…

Java で Json のシリアライズ・デシリアライズを柔軟に行う

前提 Json パーサライブラリは Jackson を使用しております。 Bean 定義 public class Bean { private int id; private String name; public int getId() { return id; } public void setId(int id) { this.id = id; } public String getName() { return nam…

はてなブログのIDを変更するためにやったことまとめ

はじめに 記事データバックアップ メールアドレス変更 はてなID登録 各種設定をコピー 設定 デザイン アカウント設定 はてなブログProにアップデート 独自ドメイン取得 旧ブログで使用していた画像のエクスポート 記事の移行 外部サービスの設定変更 Amazon …

お名前ドットコムの会員を退会する方法

退会方法 アクセス 下記のページにアクセスします。 www.onamae.com ログイン ページ右上からログインをします。 会員情報変更を選択 ページ右上からお名前ID > 会員情報変更を選択します。 お名前IDを削除 お名前ID削除のリンクをクリック。 パスワードを…

Vue Router のルーティングをネストする

前提 画面構成 Route 設定 ページの作成 ユーザ ユーザホーム ユーザ詳細 ユーザ編集 App.vue 修正 終わりに 関連書籍 前提 Vue Router をインストールしていない場合はしておいて下さい。 画面構成 下記のような画面構成を目指します。 ホーム ユーザ ユー…

社内SEになったらエンジニアとしてのスキルは身につかないのか

スキルアップができないと思われがちな社内SE。どうすれば社内SEでもスキルアップができるのか。

Java で文字列を指定の桁数で分割し配列にする方法

はじめに Java の文字列操作と言えば Apache Commons LangのStringUtilsをよく使いますが、文字列を指定の桁数で分割するメソッドは実装されていないようなので、やり方を書いておきます。 やりたいこと 分割対象文字列 あいうえおかきくけこを指定した桁数…

Vue UI で axios を導入し ajax 通信をできるようにする

Vue.js から API を介してデータの取得等を行う際に axios (Vue で ajax を利用できるようになる) を使用します。 バージョン確認 プロジェクトの作成 axios インストール ソースコード修正 axios を使用する準備 axios を使用して API にアクセスし、データ…

Vue UI で Bootstrap を導入しデザインを変更する

バージョン確認 プロジェクトの作成 Bootstrap インストール ソースコード修正 Bootstrap を使用する準備 Bootstrap を使用するコンテンツを配置する。 確認 関連書籍 バージョン確認 $ node -v v10.6.0 $ npm -v 6.1.0 $ vue --version 3.0.0-rc.10 プロジ…

Vue Router で動的ルートマッチングをする

前提 Vue Router をインストールしていない場合はしておいて下さい。 Route 設定 src/router.js export default new Router({ routes: [ { path: '/user/:id', name: 'user-edit', component: () => import('./views/UserEdit.vue') } ] }) path プロパティ…

Vue UI を使ってユーザ管理機能を作る

バージョン確認 Vue UI の使用方法 プロジェクト作成 ユーザ管理機能の構成 ユーザ管理の作成 ファイル名変更 パスの変更 ユーザデータの作成 ユーザを一覧で表示 確認 ユーザ編集の作成 パスの追加 ユーザ編集の vue を作成する 入り口を作る ID で指定した…

Vue.js の v-for でエラーが出た時の対処

ループ時のキー未設定によるエラーの対処 修正前コード <div v-for="data in datas"> エラー内容 Elements in iteration expect to have 'v-bind:key' directives. どうやらループ時の一意になるキーを設定しなければならないようなので以下のように修正する。 修正後コード datas が配</div>…

Eclipse で Gradle プロジェクトを Git からクローンして起動までさせる

環境 Git から Gradle プロジェクトをクローン 事前準備 Git リポジトリーのクローン プロジェクトのインポート Gradle プロジェクトへ変換 Spring Boot 起動 関連書籍 環境 macOS High Sierra 10.13.5 Eclipse Oxygen.3a Release (4.7.3a) Spring Boot 2.0.…