vue-cli でローカルサーバを起動し，接続に時間が掛かる場合の対応方法
現在 Vue.js の勉強をしているのだが，以下のように vue-cli でサーバを立ち上げてブラウザでアクセスした所，接続にやたらと時間が掛かったので原因と対応方法についてまとめる．
$yarn serve yarn run v1.22.4 $ vue-cli-service serve INFO Starting development server... 98% after emitting CopyPlugin DONE Compiled successfully in 1530ms App running at: - Local: http://localhost:8080/ - Network: http://192.168.1.12:8080/ Note that the development build is not optimized. To create a production build, run yarn build.
原因
はっきりとした原因が判明しなかったが，実施時は他のローカル開発環境も立ち上げていたことから，名前解決が上手くいっていないのではないかということがわかった．
こちらの記事がとても参考になった．
対応方法
上記の記事にもある通り，vue-cli のプロジェクト直下にvue.config.jsを作成し，以下のようにポート番号を変更すれば良い．
module.exports = { devServer: { port: 8888, disableHostCheck: true, }, };
vue.config.js の詳細はこちらのドキュメントを見た．
cli.vuejs.org
もしくは，起動している他のローカル開発環境を停止すれば，vue-cliのポート番号を変えなくても良さそうではある．
まとめと所感
今回は vue-cli のローカルサーバの接続に時間が掛かる場合の対応方法についてまとめてみた．ホットリロードも上手く効かなったため，ここは解決するかしないかで勉強も開発にも関わってくるので，原因が何とかクリアできて良かった．この調子で Vue.js を習得していくぞ！！
WFH(ワークフロムホーム)中にスタンディングデスクとストレッチポールをよく使うようになったので軽く紹介
「ワークフロムホーム中に気分転換になったものを語る | GWアドベントカレンダー」2日目の記事です。
1日目の記事は id:kic-yuuki さんの WFH(ワークフロムホーム)中、気分転換になったもの・こと でした．バイシクルクランチとビールのサブスクめっちゃ興味あります．
さて，私も現在自宅でリモートワーク中なのですが，前に買って使っていたスタンディングデスクとストレッチポールを使う頻度が高くなったので軽く紹介しようと思います．
スタンディングデスク
私が使っているのは弘益というメーカーの「LDC-L127B」というスタンディングデスクを使っています．結構良い値段がするのですが，ガス圧式でレバーを引けば簡単に高さを変更できるため眠くなった時や気分を変えたい時によく立って仕事をするようにしています．Bauhutte というメーカーにもスタンディングデスクと迷いましたが，LDC-L127B の方が机が断然広いため，こちらを使うという決断になりました．
ストレッチポール
とはいえ，ずっと座っていたり，立っていたりすると体が凝ってくるので運動が必要になるのですが，知り合いからストレッチポールを進められたので「【Amazon限定ブランド】プリマソーレ(primasole) エクササイズポール 【アイボリー】 長さ98cmのロングサイズ 耐荷重100kg ヨガ ストレッチ エクササイズ 筋膜セルフケアポール」というのを買ってみました．結構お手頃です．一息ついた時や，仕事が終わった時に腰のあたりを意識してストレッチポールを置いてグリグリ回しています．結構凝りが取れます．こちらの動画少し参考にしてます．
他にも書きたいことが沢山あるんですよ
今回はスタンディングデスクとストレッチポールについて軽く紹介してみました．他にも買ったものや書きたいことが沢山あるんですが，色々あってまだ整理できていない状態でして...💦 しかしこれで，終わりにするのもなんか中途半端なので，まだこのアドベントカレンダーの枠があればもう少し踏み込んだ内容を書こうと思います．
SQL クライアントツール「DBeaver」が「OSqlEdit」レベルの使いやすさで感動した！！
皆さんはどんな SQL クライアントツールを使っていますか？ 私は普段，MySQL を使っているため「Sequel pro」を使っていました．しかし，たまに PotgreSQL も使うことがあるんですね...
「Sequel pro」は MySQL のクライアントツールのため「pgAdmin」や「PG Commander」を使おう...という話になるのですが...一つの SQL クライアントツールで色々な種類の DB を操作したくなりますよね．
そこで思い切って最近の SQL クライアントツールについて調べてみたら「DBeaver」がかなり便利だったので，思いきって「Sequel pro」から移行しました．今回はこの DBeaver について紹介します．
DBeaver とは?
DBeaver は「DBeaver Corp」が開発したマルチプラットフォーム対応の SQL クライアントツールです．対応している DB は MySQL, PostgreSQL, SQLite, Oracle, MariaDB, Amazon Redshift など殆どの DB に対応しています．
またDB だけではなく，全文検索エンジンの Elasticsearch や Hadoopの上構築されたデータウェアハウス である Apache Hive など様々なデータ分析ツールにも対応しております．
対応している DB はここから確認できます． dbeaver.com
使ってみる
インストール
DBeaver は「Community Edition」と「Enterprise Edition」の2種類があります．今回は無料で使える Community Edition を使ってみます．以下の公式サイトにあるダウンロードリンクからインストールしましょう．
Community Edition と Enterprise Edition の比較はここから確認できます． dbeaver.com
使い方
DBeaver を起動し，画面の左上にあるコンセントマークを押すとDBの接続画面が表示されます．
対応している DB が沢山あってスクショに収まりきらない！！
こんな感じで DB に接続する情報を入力できます．趣味で作った Webアプリの DB に接続してみます．
接続に成功するとこんな感じで，DB の情報が表示されます．先程の接続設定で Database を選択していない場合は Host に存在する DB が全て表示されます．
テーブル名をフィルタリングする
テーブルが沢山ある場合はテーブル名の文字を入れることでフィルタリングできます．
レコードの値を更新する
接続しているユーザに書き込み権限があればレコードのカラムをダブルクリックすることで編集することができます．
編集したカラムには色が付きます．この段階ではまだ更新処理(UPDATE)が実行されていません．画面下にある「Save」を押せば実行されます．そのため間違えた値で編集をしても「Save」を押さなければまだ大丈夫です．
「Save」を押すと色が消えます．上記にもある通り複数のレコードを一気に更新することもできます．
SQL エディタ
SQL エディタは勿論，文法やテーブル名の補完機能があります．書いた SQL は「ctrl + Enter」で実行できます．
レコードのコピーも JSON や マークダウン など様々な形式に対応しています．
SELECT したレコードのカラムを選択した状態で，右クリックを押すと「SQLの生成」から SQL 文を生成することができます．
「コピー」を押すと，クリップボードにコピーされます．
※今回の記事のためにテストとして作成した DB のため，カラムの値は適当です
ER図で各テーブルの関係を見てみる
テーブルに制約を設定していれば，「ER図」のタブから各テーブルの関係をER図で見ることができます．これは便利ですね．
かつて使っていた「OSqlEdit」を思い出した
テーブル名のフィルタリング，直感的な複数レコードの更新...こんな SQL クライアントツールどこかで使ったことであるような...そうです！「OSqlEdit」です．
私は新卒の時に業務系の SIer で SE をやっていたのですが，その時現場で使っていた DB は Oracle でした．当時は SQL(PL/SQLも...) をよく書いていて，使いやすい SQL クライアントツールを探すのに苦労していました．その時に先輩にオススメされたのが OSqlEdit でした．
OSqlEdit は今回紹介した DBeaver の便利な機能や(ER図の機能はありませんが)，シンプルな UI のため操作がしやすかった記憶があります．当時は最強の SQL クライアントツールだと感じていました．あまりにも便利すぎて READ ONLY ユーザにじゃないと事故るレベルだとも感じていました．
現在は Webエンジニア として転職し，業務で使う DB は MySQL で，使用している PC も MacBook Pro(OSqlEdit は Windows アプリ)のため OSqlEdit が使えません．「OSqlEdit Mac」みたいな感じでググって OSqlEdit レベルで使いやすい SQL クライアントツールをよく探していたのですが，その時は見つかりませんでした．
しかし，「DBeaver」を見つけ，使っていくうちに「お！これ OSqlEdit レベルの使いやすさじゃん！！しかも色んな種類の DB にも対応していて便利！！」とやっと求めていた SQL クライアントツールに巡り会うことができて，モヤモヤしていた気持ちをスッキリさせることができました．
まとめと所感
今回は DBeaver という SQL クライアントツールについて紹介しました．Mac で使える OSqlEdit レベルの便利な SQL クライアントツールをやっと見つけることができて，達成感みたいなものを感じてます．(約3年は掛かった...)．
今回の件をきっかけに新卒時代のことも思い出したのですが，当時と今で経験している技術も大分変わったこともしみじみ感じました．
もちろんコマンドライン上から操作するスキルも必要ですが，これで DB 操作がだいぶ楽になったので良かったです．
SQL クライアントをどれにするのか迷っている人や私のようにかつて OSqlEdit を使っていた人にオススメなのでお試しを！！
CDN でキャッシュ時間を変更した後にブラウザで確認する方法をまとめる
最近，担当しているサービスで AWS CloudFront(以下，CloudFront )のキャッシュ時間(Time To Live)の時間を変更する対応をした．
その時にキャッシュの時間が本当に変わったかを確認しようとした時に「アレ？そもそもどうやって確認するんだっけ？」とふと思い，色々調べたのでざっくりまとめておく．なおブラウザは Google Chrome を使用する．
調べるにはそもそも HTTP ヘッダーを知る必要がある
AWS CloudFront がどうのというわけではなく，どうやら HTTP ヘッダーについて理解する必要があることがわかった．
そのため，HTTP ヘッダーについての勉強が必要になるが，今回は「age」と「x-cache」について書いておく．下記の画面は CloudFront を使っているサイトで「Chrome DevTools」の 「Network」のタブを開いた状態で「Doc」を選択した状態でサイトのページにアクセスした時の画面である．
age
ページがキャシュされてからの経過時間を表す．単位は秒(s)．この場合だと17秒経過したことがわかる．
x-cache
キャッシュがヒットしたかがわかる．成功の場合は「Hit from CDNサービス名」，失敗した場合は「Miss from CDNサービス名」と出てくる．そもそもキャッシュが利用できているかを確認する時にみている．
調べ方
上記を踏まえて，CDN でキャッシュ時間を変更した後にブラウザで確認する方法としては，x-cache がヒットされていることと，再度ページにアクセスした時に age が変更したキャッシュ時間を過ぎずにリセットされているかを確認すれば良い．
例えば CloudFront でキャッシュ時間を 10 分，つまり 600 秒に変更した場合， age が 610等といったように変更したキャッシュ時間を超えずに 0 からカウントされているかを確認できれば OK となる．
まとめと所感
今回は CDN でキャッシュ時間を変更した後にブラウザで確認する方法についてまとめてみた．キャッシュといえば，今まではブラウザで「キャッシュを消す」というボタンをとりあえず押すみたいなことをよくやっていたが，CloudFront を触ったことをきっかけに HTTP ヘッダーを少し勉強するきっかけになって良かった．
HTTP ヘッダーは調べてみるとかなり奥が深いので今回の件をきっかけにさらに理解を深めていき，CDN やブラウザへの理解をさらに深めていきたい．
というか，別の機会でもっと HTTP ヘッダー についてわかったことを書いてみよう．
「KindleGen」を使って epub の電子書籍を mobi に変換する
技術書を読む時に iBooks を使ったり Kindle for Mac を使ったりと電子書籍を管理するアプリケーションが統一化していないことにより，「どこに栞つけたっけか？」ってなったり，「あの電子書籍って Kindle だっけ? Kindle for Mac だっけ?」と混乱することが顕在化してきた．
そのため，どちらかに統一化しようと暫く考えてみた結果，Kindle の方がどの端末からでも栞を共有できたり，Kindle で購入していない電子書籍を Kindle に送信し，他の端末に配信できる「Kindleパーソナル・ドキュメントサービス」があることがわかったため，Kindle に統一することにした．
Kindleパーソナル・ドキュメントサービス は mobi と pdf はそのまま送信できるが，epub は送信できない．そのため，今回は「KindleGen」を使って epub から mobi に変換する方法にまとめる．
やり方
インストール方法
以下のページもしくは Homebrew で「Kindle Previewer」インストールする．
$ brew cask install kindle-previewer
これで，kindlegenコマンドを実行することが出来るようになるが， macOS Catalina の場合は実行すると変換エラーが発生するとのことのため，シンボリックリンクを貼る必要がある*1．
$ ln -s /Applications/Kindle\ Previewer\ 3.app/Contents/lib/fc/bin/kindlegen /usr/local/bin/kindlegen
使い方
kindlegenで以下のように変換したい epub の電子書籍を指定し，実行するとその epub の電子書籍と同じディレクトリに mobi 形式に変換された電子書籍が生成される．
$ kindlegen 変換したい電子書籍.epub
変換した電子書籍はどんな感じか?
文字列検索やサイドバーにある章のリンクから飛ぶことが出来るが，目次ページの章のリンクを押しても該当ページへは上手く飛ばないようだ．それ以外は epub の電子書籍とそこまで変わらない感じだった．
まとめと所感
「KindleGen」を使って epub の電子書籍を mobi に変換してみた．完全な形で mobi に変換できないようだが，技術書を読んで勉強する分にはまぁ許容できるレベルだと感じた．Kindleパーソナル・ドキュメントサービス の使い方は近いうちにまとめようと思う
チームメンバーに感謝の気持ちを伝えるために「pluspl.us」を使ってみた
仕事をしている時にチームメンバーに助けられたり，「いいね！」って思う時が度々あると思います．それを伝えるために「HeyTaco!」や「Unipos」を使って感謝を表現するのをよく聞きます．こういうのを「ピアボーナス」って呼ぶみたいですね．ちなみに今のチームでは「HeyTaco!」を使っています．
しかし，友人やコミュニティのメンバーで使ってみたい時はどちらのサービスも基本的には有料なので，使うかどうか少し踏みとどまると思います．
そんな時に先輩エンジニアさんから無料で手軽に始められる「pluspl.us」という Slack App を教えて頂いたので今回はそれについてまとめてみます．
使い方
Slack の App から普通に検索できるので「追加」を押してインストールします．
使いたいチャンネルに追加し，以下のように「@ユーザ名++」の形式でメンションすると相手に1ポイントをあげることができます．画像がモザイクでわかりにくくてすいません...
自分自身にメンションしてポイントをあげようとすると「詐欺師がいる」と言われます．この仕様は面白いですね．
「#thing(モノ)++」でユーザだけではなく，thing(モノ)にもポイントあげることができます．これも中々面白いですね．こんな感じな使い方であってるのかな...
「@pluspl.us leaderboard」でポイントが付与されたユーザの一覧を見ることができます．Things に okabeeeat があるのはあくまでテストでやってみた結果です😅．
「@pluspl.us leaderboard global」を実行すると，なんと世界中のユーザの一覧を見ることができます．
さらに詳しい使い方と GitHub はこちら
まとめと所感
今回は「pluspl.us」についてまとめてみました．チームメンバーに無料で手軽に感謝の気持ちを伝えられるのは良いですね．
これを知るまでは以下の記事のような Slack App を自作しようと思いましたが，知った時は「作るまでもなかったかぁ」とふと思ってしまいました...
しかし，最近 GAS + Slack App の勉強をしていて敢えて自作で作ってみたい気持ちは消えてないので引き続きモチベーションを保ってキャッチアップしつつ作りたい Slack App の候補に入れておこうと思います 💪
「WakaTime」で日々のコーディング時間を可視化してみた
たまたま「WakaTime」という日々のコーディング時間を可視化するサービスを見つけて使ってみたのですが，これが結構面白かったので記事にしてみました．
※この記事書いてる時に「WakaTime」を「WakeTime」だと勘違いしていることに気がつきました😅
使い方
アカウントの登録
まずは，公式サイトからアカウントを登録します．
GitHub アカウントでサクッと登録ができます．
登録後，認証用のメールが来るのでメールにある認証用のリンクにアクセスし，認証を完了します．アカウントの登録作業はこれで終わりです．
エディタ / IDEの設定
plugins にアクセスすると，WakaTime と連携できるエディタ / IDE が表示されます．各アイコンにクリックするとプラグインのインストール方法が書いてあります．
私の場合は VS Code と連携をしてみました．連携方法はこちら
可視化したコーディング時間を見てみる
VS Code でコーディングしたいプロジェクトを立ち上げ，⌘+Shift+pでWakaTime: Status Bar Enabledを選択し，ステータスバーに WakaTime を表示させます．
コーディングしたいプロジェクトで普通にコーディングをします．このようにステータスバーに時間が表示されるようになります．
さぁ！これで Dashboard にアクセスしてみましょう．するとこのようにどんな言語でコーディングのしたのか・どのプロジェクトにどれくらい時間が掛かった等がわかります．すごい！！！
まとめと所感
今回は「WakaTime」で日々のコーディング時間を可視化することについてまとめてみました．普段どの言語にどれくらいの時間を掛けているかは，今まではざっくりとした感じでしか把握できていなかったなぁと改めて思いましたが，「WakaTime」を使えばより正確に把握することができますね✨
また日々の勉強の振り返りをする時のモチベーションアップの仕組みの一つにもなりそうだと思ったので，週に1回はチェックすることを楽しみに思いながらコードを書いていこうと思います．
