kz’s blog

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

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…

はてなブログで使用可能な変数について

はじめに はてなブログには下記のような使用可能な変数があります。 変数 説明 {Title} 記事タイトル {Permalink} 記事URL {BlogTitle} ブログタイトル {BlogURL} ブログURL {URLEncodedTitle} URLエンコードされた記事タイトル {URLEncodedPermalink} URLエ…

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

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

Python 初心者が mac にインストールしてから Hollow World するまで

OS バージョン確認 macOS High Sierra 10.13.6 ターミナル起動 本手順では、ターミナルを使用して作業を進めますので、あらかじめターミナルを起動しておきます。 Homebrew インストール 下記サイトのコマンドを実行してインストールします。 The missing pa…

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削除のリンクをクリック。 パスワードを…

はてなブログをカスタマイズする際のスクリプト記述場所まとめ

はじめに はてなブログをカスタマイズする際、スクリプト<script>...</script>を記述しますが、記述できる箇所がいくつかあるので迷う方もいらっしゃると思います。 はてなブログのページ毎に有効になる記述場所とポイントをまとめましたので参考にして頂ければ幸いです。 ヘ…

はてなブログのカスタマイズで使用できるショートカット【コメント】

はじめに はてなブログをカスタマイズする際は、各種 HTML 入力欄にコードを入力します。 僕は入力する際は、何のためのコードなのかをコメントとして残しておきますが、毎回手動で入力しておりました。 コメントはこんなやつ /* */ // このコメント入力、…

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

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

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

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

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

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

通勤中よく利用するスマホアプリ7選 2018年版

どうも。社畜SEです。 通勤時間って何もしなければ無駄な時間になってしまいますが、少しでも有意義なことをすれば楽しく過ごすことができるかと思います。 今回は僕が通勤中に暇つぶしをしているスマホアプリをご紹介致します! ちなみにiPhone6s Plusを使…

はてなブログでアクセス数100超えたので振り返り

みなさま、こんにちは! ついにアクセス数が100を超えました(しょぼ) はてなブログを開始したのが今年の6月25日なので大体40日くらいでしょうか。 ブログ自体初めてで、右も左も分からない状態で、最初のうちは1日のアクセス数0がほとんどで、アクセス数が…

Vue UI で作成した静的ファイルを GitHub Pages に公開する

簡単にできると思ったけど意外と手こずったのでやったことをまとめておきます。 前準備 GitHub Pages で公開できるように GitHub 側の設定を済ませておいて下さい。 公開するページの情報 Git リポジトリプッシュ先 リポジトリルート/sample/user-manager/ U…

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

www.kz62.net 前回の記事ではユーザ編集機能の一部を作成しました。今回はその続きをやっていきます。 ユーザ追加機能の作成 新規登録ボタン追加 追加機能の確認 ユーザ削除機能の作成 削除ボタン追加 削除機能の確認 終わりに 今回作成したソースコード Git…

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

www.kz62.net 前回の記事ではユーザ管理機能の一覧表示まで作成しました。今回はその続きをやっていきます。 ユーザ編集の作成 パスの追加 ユーザ編集の vue を作成する 入り口を作る ID で指定したユーザを表示する 完了ボタンの設置 編集機能の確認 ユーザ…

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 を使ってユーザ管理機能を作る①

バージョン確認 プロジェクト作成 ユーザ管理機能の構成 ユーザ管理の作成 ファイル名変更 パスの変更 ユーザデータの作成 ユーザを一覧で表示 確認 バージョン確認 $ node -v v10.6.0 $ npm -v 6.1.0 $ vue --version 3.0.0-rc.7 vue のバージョンは 3.0 以…

Vue CLI 3 の Vue UI を使って画面を表示させる

バージョン確認 $ node -v v10.6.0 $ npm -v 6.1.0 インストール $ npm install -g @vue/cli npm install -g @vue/cli にすることで Vue CLI のバージョン3 以降がインストールされるっぽいですね。 npm install -g vue-cli にするとバージョン2 になるみた…

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.3 Gradle …