kz’s blog

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

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…

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

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

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

作成した経緯 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削除のリンクをクリック。 パスワードを…

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

はじめに はてなブログをカスタマイズする際、スクリプト<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 で 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 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 以…