フリーランス チャレンジ!!

フリーランス チャレンジ!!

現役フリーランスエンジニアが書く雑記ブログ

フリーランスの生産性を上げるタイムマネジメントと仕事術

※執筆者:ゲストライター

 

フリーランスの一番の魅力は、自由に働くことができることです。
会社員や契約社員、短期のアルバイトとして働いている方も一度は「フリーランスになってみたい」と思ったこともあるのでは?


フリーランスは、会社内の人間関係などに影響されることなく、自由に働くことができ、仕事をしたぶん報酬につながるため、理想の働き方と考える方も多いかと思われます。

 

しかし、フリーランスの場合、仕事を管理するのは自分のみであるため、うまく時間を管理しないと、だらだらと長時間働いて、効率が下がってしまい、締め切りに間に合わないなど、悪循環になる傾向があります。生産性を上げることによって、使える希少資源(時間、お金)が増えるため、好きなことにその希少資源を費やすことができます。「誰にでもできる、生産性を向上させる方法!!」については、こちらをご覧ください。

 

この記事では、フリーランスの生産性を上げるためのタイムマネジメントと仕事術をいくつか紹介します。

 

 

生産性を上げるタイムマネジメント

「タイムマネジメント」とは、直訳すると「時間管理」ですが、それだけではなく、目標を達成するためにタスクを効率よく実行することによって、時間を有効活用するための行動管理の方法のことを意味します。タイムマネジメントには、大別して「仕事効率の向上」と「時間効率の向上」の2つの目的があります。

 

「仕事効率の向上」と実践例

仕事効率を向上するためには、まず各仕事を「重要度」と「緊急性」の観点から、優先順位づけをします。その優先順位に基づき、締め切り日までに充分間に合うように、おおまかなスケジュール(1週間、2週間、1カ月単位など)を決めます。

その後、1日単位でのその日にやるべきことを書きだす「ToDoリスト」を仕事に取り掛かる前に作成します。「ToDoリスト」を作成することによって、その日に終わらせないといけない仕事を完了することに集中することができ、ダラダラと働くことを避けることができます。

 

「時間効率の向上」と実践例

業務やコミュニケーションを改善することにより、時間効率を向上することが可能です。案件の受注から、仕事の流れの説明、進捗状況や締め切りに関する顧客とのコミュニケーションは、ほぼテンプレート・マニュアル可することができるため、個別の案件のたびに作成・確認する手間が省けるため、時間を効率よく使うことができ、業務の進行がスムーズになります。

 

生産性を上げる仕事術

仕事に費やす無駄な時間を減らし、なおかつフリーランスとしての仕事の質を高めるためには、「仕事を選ぶ」「アウトソースする」などのコツがあります。

 

仕事を選ぶ

フリーランスとして仕事を引き受ける前に、仕事の依頼主とやり取りする際に何らかの疑問があり、その疑問が解決されない場合や、単価が極端に低い場合、締め切り日がタイトな場合などは、仕事を断ることを検討することをおすすめします。仕事を選ぶことによって、依頼を受けた後で、トラブルに巻き込まれることや、悪質なクライアントと関わることを避けることができます。また、仕事の依頼に関するやりとりは口頭ではなく、メールで行うことが最適です。やりとりの詳細や同意内容を記録することができるため、あとあとのトラブルが発生することを回避できます。

 

アウトソースする

さまざまな案件の依頼を受け、多忙なことから締め切りに間に合うかが心配な場合や、苦手な作業(例、マーケティングなど)をする必要がある場合は、他のフリーランサーやフリーランス専用のエージェントにアウトソースすることが可能です。フリーランスにとって、締め切りを守り、質の高い仕事を提供することはとても重要なため、たまにはアウトソースすることも選択肢の1つです。

 

最後に

フリーランスの生産性を上げるためのタイムマネジメントと仕事術をいくつか紹介しました。仕事の優先順位づけやToDoリストの作成、コミュニケーションのテンプレート・マニュアル化を利用して、タイムマネジメントを行い、引き受ける仕事を選び、アウトソースすることによって、より生産性を上げることが可能となります。

あなたもぜひフリーランスとしての生産性を上げ、もっと有意義なことに時間を使ってみては!!

 

【Angular】Cypressスクリーンショットの差分でデグレしてないことを確認する

 

開発の過程で画面表示に差分が出てもCypressのcypress-image-snapshotを使えば、e2eテストで差分を検知し教えてくれるので、画面表示のデグレを心配せずにガンガン開発することができます!!

 

 

cypress-image-snapshot

github.com

 

最初に説明した通り、画面の差分を教えてくれます。

仕組みとしてはe2eテストの時に画面のスナップショットを取得し、前回のスナップショットとの差分を確認、差分があればエラーとなります。

 

※もし、プロジェクトにCypressを導入してない場合は、下記記事を参考に導入してください。

www.ksakae1216.com

 

インストール

githubのページ通りにcypress-image-snapshotをインストールします。

gist15be16e8b9891d0748a5d1f68446dd12

 

準備

次は準備です。

 

GitHub - palmerhq/cypress-image-snapshot: Catch visual regressions in Cypress

このページを参考に<rootDir>/cypress/plugins/index.jsと<rootDir>/cypress/support/commands.jsを修正してください。

 

さらに、<rootDir>/cypress/support/index.tsも下記のように修正してください。

gist972283a0bddc12c514593fa2100e113b

 

これでcypress-image-snapshotを使うことができます。非常に簡単ですね!

 

実装

次はスクリーンショットをとる実装をしていきます!!

今回はページオブジェクトパターンでテストを書いていきます。

 

[login.po.ts]

ログインページをテストするのに必要な定数、部品を定義します。

gistb39b9c73a945105046743493b4e7646a

 

[login-spec.ts]

実際にログインページのテストです。

gistfd35b0450779c73a34d3f6f1951e30f4

 

今回は必要な箇所だけ説明ます。

11行目が大切で、ここで画面のスクリーンショットを取得しています。

取得したスクリーンショットが前回と異なる場合、ここでエラーが発生します。

 

動作確認

それでは実際にやってみましょう。

動画では、最初にテストが成功し、次に、意図的にHTMLを修正してテストを失敗させました。

(ログイン画面のplaceholderを"login id"から"login id!!!!"に変更)


cypress diff

 

ちなみに画面のスクリーンショットは、 <rootDir>/cypress/screenshotsディレクトリ配下に出力されます。

もし意図的に画面を変更した場合はここのファイルを削除すればエラーになりません。

 

参考までにテスト含めたソースはこちら

GitHub - ksakae1216/my-app5: angular study repo

 

最後に

 e2eテストで画面の差分を確認することができれば、デグレすることなく安心して開発できますね!!

【Visual Studio Code】Githubのプルリク(pull-req)便利プラグイン

Githubにpushしてレビューしてもらったら、レビュー指摘事項をGithub見ながらソース修正しますね。

 

ノートPCの場合、外付けディスプレイがあれば、片方にGithub表示して、もう片方にソース修正すればいいけど、ノートPCだけの場合、画面がそんなに大きくないから画面切り替えながらレビュー指摘事項確認してソース修正ってちょっと面倒。

 

そこでVisual Studio Codeのプラグイン使うと、Visual Studio Codeでプルリク(pull-req)確認しながらソース修正できるので作業が捗ります!!

 

この記事ではそんな便利プラグインをご紹介。

 

 

 

GitHub Pull Requests and Issuesプラグイン

プラグインはこれ

↓↓↓

marketplace.visualstudio.com

 

おすすめは上記リンクからプラグインをインストールするのがおすすめです。

そうすると、githubの連携まで面倒なく進みます。

 

インストール後の設定

プラグインページからインストールすると自動的にVisual Studio Codeが開きます。

そして画面右下にGithubにサインインするよう、ダイアログが表示されるので「Sign in」ボタンを押下。

GitHub Pull Requests and Issues sign in ボタン

GitHub Pull Requests and Issues sign in ボタン

 

次にGithubで使ってるメールアドレス、パスワードを入力してください。

すると下記のような確認画面が表示されるのでContinueボタンを押下。

Visual Studio CodeからGithubへの許可確認画面

Visual Studio CodeからGithubへの許可確認画面

 

このようにtoken設定画面が表示されます。

モーダル表示されてる「Open Visual Studio Code.app」ボタンを押下すると、自動的にGithubと連携が完了するのでこちらがオススメです。

※画面下に1〜4の手順で記載されてるのは手動の設定です。

token設定画面

token設定画面

 

プルリク(pull-req)を確認しながらの修正イメージ

さあ、これで設定も完了したので早速、どんな感じになるのか見てみましょう!!

 

下記のようにプルリク(pull-req)に対してレビューしました。

レビュー指摘箇所

レビュー指摘箇所

このようにVisual Studio CodeでGithubのプルリク(pull-req)を確認することができます。

Visual Studio CodeでGithubのプルリク(pull-req)を確認

Visual Studio CodeでGithubのプルリク(pull-req)を確認


エディタを上下に分割すれば、プルリク(pull-req)を見ながらソース修正できます。

もう、Githubとエディタを切り替えながら作業しなくていいんです!!

Visual Studio Codeでプルリク(pull-req)とソース同時に表示

Visual Studio Codeでプルリク(pull-req)とソース同時に表示

在宅勤務が長引き肩こりが酷くなってきたのでPCスタンドを買った

 コロナウィルスの影響で2月後半から気がつけば1ヶ月以上、在宅勤務が続いています。

最近ではめっきり肩こりがひどくなってきた。

 

今後もしばらく在宅勤務は続くだろうと予想して家のPC環境を整えようと決意。

ノートPCで簡単に肩こりを解消できるグッズがないか調べた結果、PCスタンドを買ってみた。

 

 

PCスタンドはBluelounge Kickflip

買ったのはこれ。

↓↓↓

値段は3000円ちょっと。
 
基本、シールで取り付けて使う感じ。
もし剥がれてしまっても、接着部分を水洗いして、乾かせば何度でも付けることができるし、剥がしても跡が残らないようだ。
 
このPCスタンドの特徴は下記の通り。
・丈夫
・外れても何度でもくっつけることができる(外しても跡が残らない)
・傾斜を付けることで放熱生がアップしてPCが暑くなりづらい
・人間工学に基づいた設計でタイピングしやすい角度
 
一応、製造元の説明リンクも。(ちなみに自分が購入したのは13インチ)
 

購入と設置

Amazonでポチったら翌日配送された。

Bluelounge Kickflip

Bluelounge Kickflip

次に取り付けて設置したらこんな感じ

Bluelounge Kickflipをmacbook pro 13インチに取り付けた結果の環境

Bluelounge Kickflipをmacbook pro 13インチに取り付けた結果の環境

思ってたよりPCに角度がつくんだなーって感じ。

でもしばらく作業して分かったんだけど確かに、 キーボード打ちやすい。

 

ちなみに横から見たらこんな感じ。

Bluelounge Kickflipを取り付けて横から見た画像

Bluelounge Kickflipを取り付けて横から見た画像

ノートPCが高くなった分、ディスプレイも高くした。

100均で購入したブロックを縦に2つ積み重ね

100均で購入したブロックを縦に2つ積み重ね

今まではブロック1つ分の高さだったのでだいぶ目線が高くなったような気がする。

今までの環境はこちら。

www.ksakae1216.com

 

最後に

あんまり良かったので、自分用PC以外に、家に持ち帰っている会社様PC用もさっき追加でポチった。

明日届くので、会社用PCもこのPCスタンドをつけて作業しよう。

【GitHub】依存先パッケージ(ライブラリ)のSecurityAlerts(脆弱性)はマージするだけ(Botが自動的にプルリク作成)

GitHub パッケージ ライブラリ 脆弱性

 

GitHubから依存先パッケージ(ライブラリ)のSecurityAlerts(脆弱性)に関するメールを受信しました。

 

GitHubは依存先パッケージ(ライブラリ)でSecurityAlerts(脆弱性)が修正されるとそれを使用してるリポジトリに対して、「脆弱性が直ったからプルリクしたよ、マージしてね」とお知らせしてくれます。なんて便利!!

 

 

依存先パッケージ(ライブラリ)のSecurityAlerts(脆弱性)

こんな感じのメールを受信します。

GitHub パッケージ ライブラリ 脆弱性

 件名のピンク色がリポジトリ名、緑色がパッケージ(ライブラリ)です。

このようにSecurityAlerts(脆弱性)のあるリポジトリとパッケージ(ライブラリ)が件名になったメールとなります、わかりやすい!!

 

Botが自動的にプルリク作成してくれる

 はい、メールを一番下までスクロールするとこのように(ピンク色下線)、自分のリポジトリにBotが自動的にプルリクを作成してくれてる。

 

リンクをクリックすると

GitHub パッケージ ライブラリ 脆弱性

GitHubのページが開きます。

 

対応はマージするだけ

気になる人は修正内容(commits, Files changed)見て、後はマージするだけ。

特に問題ないよーって人は、マージボタンを押すだけ。

 

マージボタン押下して、次に出てくるConfirmボタンも押下すると無事マージ完了。

しかも、少しその画面で待ってると、Botが作成したプルリクのブランチも自動的に削除してくれます。素晴らしい。

 

 ライブラリって一度導入すると仲々バージョンアップもしないしSecurityAlerts(脆弱性)があってもそんなことも知らずに放置することになるけど、この仕組みがあると安心ですね。

【Visual Studio Code】Java開発でTomcatホットデプロイ(HotDeploy HotReload)

f:id:ksakae1216:20200308150946p:plain


長年、JavaのWeb開発はeclipseを使ってて世間的にもデファクトスタンダードになってると思うんですけど、やっぱeclipseは重い!!

 

もし、Visual Studio Codeでも簡単にホットデプロイができるんだったらもうeclipseにこだわる必要は無いですね。

 

ということで評判の良い(と思ってる)Visual Studio Codeで挑戦です。

(ちなみにMacですが、Windowsの人も参考になると思います)

 

 

Githubからcloneする

下記のGithubプロジェクトをローカルにcloneしてください。

GitHub - ksakae1216/vscodeJava: try java develop to vscode

 

mavenプラグインをインストール

次は、Visual Studio Codeのプラグイン関連です。

まずはmavenプラグインをインストール。

f:id:ksakae1216:20200308150205p:plain

 

Tomcatプラグインをインストール

Tomcatプラグインのインストールです。

f:id:ksakae1216:20200308152654p:plain

 

Tomcat起動

プラグインを入れたのでVSCODEからTomcatを起動できます。

f:id:ksakae1216:20200308152732p:plain

ダイアログが出てくるのでローカルにインストールしてあるTomcatディレクトリを指定。

 

f:id:ksakae1216:20200308152820p:plain
 

Web画面を開く

Tomcatが起動できたのでWeb画面を開いてみます。 

f:id:ksakae1216:20200308153036p:plain

 

するとデフォルトブラウザが開きます。

f:id:ksakae1216:20200308153103p:plain

はい、とりあえずWeb画面が開きました。

 

次はGithubからcloneしたコードの画面を表示してみましょう。

f:id:ksakae1216:20200308153136p:plain

 

f:id:ksakae1216:20200308153230p:plain

 

f:id:ksakae1216:20200308153339p:plain

Welcomeページが開きました。もう成功したようなもんです。

 

アドレスバーの最後に"index"という文字列を付与してEnterキー押下するとこの画面(Githubでcloneしたページ)が開きます。 

f:id:ksakae1216:20200308153924p:plain

 

Tomcatのホットリロード設定

 VSCODEの設定を開きます(MacだとCmd + ,で開きます)

検索窓に"autobuild"と入力すると設定がフィルタリングされるので「Java Autobuild」と「Java・Debug」のHod Codeをそれぞれ下記のようにします。

f:id:ksakae1216:20200308154014p:plain

 

Tomcatをdebug起動する

さあ、あと少しですよ。

TomcatをDebug起動します。

一度、Tomcatをstopしてから「Debug War Package」を選択してdebugモードでtomcatを起動。

f:id:ksakae1216:20200308154114p:plain
 

Java修正してホットデプロイ確認

 いよいよです!!

それでは早速Javaを修正してみます。

Indexページを表示した時のJavaコード(IndexController.java)にログを追加してみます。

f:id:ksakae1216:20200308154203p:plain

赤枠部分を追加して保存。

 

この状態でWebページ(http://localhost:8080/web/index)をリロードすると

f:id:ksakae1216:20200308154429p:plain

ホットデプロイされて追加したログが表示されましたね!! 

 

最後に

Visual Studio CodeでもJavaのWeb開発できそうなのでeclipseはもうやめようと思います。(多分ね)

 

ホントは会社で普段Intellij使ってるからプライベートもそうしたいんだけど、自宅では無償版使ってて機能が制限されてるので今後はオープンソース化されてるVisual Studio CodeをメインのIDEとしてやっていこー

【Java DB】Webアプリケーションサンプル

以前、Springを使ってDBのデータを画面に表示する記事を書きましたが、ログイン、一覧、更新画面まで作成したのでサンプルを紹介します。

 

 

今回のサンプルでできること

使う技術は多いですが

・ポートフォリオっぽい画面を表示

・ログイン画面(DBのID、パスワードをみてログイン可否)

・一覧画面(ログインした後、DBのデータを表示して一覧画面を表示、ページャー、フィルタも使える)

・更新画面(一覧で選択したデータを更新、削除または新規登録)

 

環境

環境は以下の通りです。

・eclipse Oxygen

・tomcat 9.0

・java 9

・Docker

・MySQL 5.6

 

※あとPCはMACなのと、言語を英語にしてるのでそこはすいません。

 

eclipse

eclipseをインストールしてください。

あとSpringを使うのでプラグインも必要なので下記記事を参考に。

【Java】Eclipse + Spring(STS) でMVCサンプル簡単作成 - フリーランス チャレンジ!!

 

 

DataBase

DBは好きにインストールしてください。

個人的にはDockerにDB(MySQL)をインストールするのがすごく楽ですし、Dockerは覚えておいて損はないのでチャレンジした方がいいかなーと思います。

【Docker入門】5分でMySQLのDB、テーブル作成 - フリーランス チャレンジ!!

 

DBを作成したら下記SQL文でテーブルを作成してください。

※下記はDB名を"test_mysql"としてるので適宜変えてくださいね。

gist6b68c7ab5adee45a34d155a306b7f83e

 

 次にデータも入れてください。

gista43e808ab58f4dfee8b345f422692c75

  

eclipseにインポート

gitから直接cloneしてeclipseにインポートします。

f:id:ksakae1216:20191218215503p:plain

 

f:id:ksakae1216:20191218215517p:plain

 

f:id:ksakae1216:20191218215727p:plain


URIに下記を入力

gistc0f85a6930c05066cca93848abe9aeb7

 

f:id:ksakae1216:20191218215835p:plain


そのままNextボタンを押下

f:id:ksakae1216:20191218220123p:plain

 

f:id:ksakae1216:20191218220348p:plain

 

何かいろいろやるので終わったらNextボタン押下

f:id:ksakae1216:20191218220555p:plain

 

これで無事eclipseにインポートされます。

 

動かすための準備

インポートしたプロジェクトを右クリックして「Maven」→「Update Project」を選択してダイアログが出てくるのでOKボタンを押下。

f:id:ksakae1216:20191218220926p:plain


 プロジェクトを右クリックして「Run As」→「Maven Clean」を選択してCleanを実行。

f:id:ksakae1216:20191218221315p:plain

 

 プロジェクトを右クリックして「Run As」→「Maven install」を選択してbuildを実行。

f:id:ksakae1216:20191218221342p:plain

 

Tomcat設定

次にWebサーバーを設定します。

事前にTomcatをローカルにダウンロードしてください。

Apache Tomcat® - Apache Tomcat 9 Software Downloads

 

プロジェクトを右クリックして「Run As」→「Run on Server」を選択。

f:id:ksakae1216:20191218221704p:plain

 

Webサーバーを選択できるので、ダウンロードしたTomcatのバージョンを指定します。

今回は、Tomcat9。

f:id:ksakae1216:20191218222130p:plain

 

Finishボタン押下すると、Tomcatが起動してHello World画面がeclipse内に表示されると思います。

 

次に「Servers」→「Tomcat v9.0.5」→「Add and Remove」を選択。

f:id:ksakae1216:20191219075017p:plain

 

今回のプロジェクト「web-sample」を追加してFinishボタンを押下してください。

f:id:ksakae1216:20191219075352p:plain

 

これで準備完了!!

 

動作確認

 さて動作確認です。

 

ブラウザに下記URLを入力するとポートフォリオっぽい画面が表示されます。

gist7ea5ef810ed4e31df9d7a955b099cf8f

f:id:ksakae1216:20191219075850p:plain

 

 さらに下記URLでログイン画面。

gist8763aa97a0215e7c4ffab66b6cfa2735

f:id:ksakae1216:20191219080605p:plain

 

ログインID、パスワードはloginテーブルにinsertした値(testlogin, testpass)です。

入力してEnterボタン押下で一覧画面に遷移します。

f:id:ksakae1216:20191219080633p:plain

 

一覧画面の機能としては下記の通り。

・画面右上のログアウトボタン押下でログイン画面に遷移

・1ページの表示件数変更(10, 25, 50, 100)

・データの検索(1文字ずつ入力する毎にフィルタされます)

・テーブルの列名(ユーザーID、名前・・・)をクリックでソート

・新規登録ボタンで更新画面遷移(新規登録モード)

・ユーザーIDのリンク押下で更新画面遷移(更新モード)

 

更新画面に遷移するとこんな感じです。

【新規登録】

f:id:ksakae1216:20191219081723p:plain

 

【更新】

f:id:ksakae1216:20191219081741p:plain

 

最後に

ボリュームは少しありますが1つずつ丁寧にやってけば大丈夫です。

なかなか、JavaでDBのデータを画面に表示するサンプルってネットにたくさんあるんですがうまくいかないんですよね。

 

私の感覚としては環境、ライブラリのバージョン、手順もれが原因ではないかと思います。

この記事では1つずつ確認しながら作ってたので安心してこの記事通りに進めていただければと思います。

プロトタイプ作成やデモの時にWebページを直接変更する方法

chrome.google.com

 

プロトタイプ作成してる時、デモの時に他の人の意見を聞きながら、文字や色、フォントなど変更したい時ってありますよね?

 

そんな時に便利なのが、visbugというChromeで使える拡張機能。

 

 

visbugの簡単なデモ

まずは、一部機能の簡単なデモ動画を見てください。

※検索結果の3番目に表示されたこのブログ記事を1番目に移動しました。

 

youtu.be

 

インストール方法

インストール方法は簡単。

下記ページでChrome拡張を追加するだけ。

https://chrome.google.com/webstore/detail/visbug/cdockenadnadldjbbgcallicgledbeoc

 

機能紹介:Guides

f:id:ksakae1216:20190818203253p:plain

 

マウスカーソルを調べたい箇所の上に持ってくと要素を表示してくれます。

また、要素をクリックして、他の要素にカーソルを持ってくと最初にクリックした要素との距離をピクセル表示してくれます。

 

機能紹介:Inspect

f:id:ksakae1216:20190818210819p:plain

マウスカーソルで選択した要素のStyle(CSS)を表示してくれます。

 

またMacの場合、Optionキー押下して、クリックすると表示を残してくれます。

例えば、最初に選択した要素をOption+クリックして、別の要素をOptin+クリックすると最初と2番目をそのまま表示してくれるので見比べることができます。

 

機能紹介:Accessibility

f:id:ksakae1216:20190818210841p:plain

人が見て、どのくらい分かりやすいかをチェックするためのものっぽいです。

マウスカーソルで選択した箇所で出てくる数値が高ければ高いほど人の目に優しくて問題なければ緑色のチェックが表示され、問題があれば赤色でバツが表示されます。

 

機能紹介:Move

f:id:ksakae1216:20190818210855p:plain

要素の中で上下左右に対象の要素を移動できます。

例えば横にボタンが3つ並んでいたらそのボタンの順番を変更できます。

 

つまり要素の中だけで順番を変更できる感じです。

 

機能紹介:Margin

f:id:ksakae1216:20190818212100p:plain

要素を選択して、その後に上下左右ボタン押下でそれぞれのMarginを広げたり、狭めたりできます。

 

機能紹介:Padding

f:id:ksakae1216:20190818212208p:plain

要素を選択して、その後に上下左右ボタン押下でそれぞれのPaddingを広げたり、狭めたりできます。

 

機能紹介:Flexbox Align

f:id:ksakae1216:20190818212325p:plain

選択した要素のAlignを上下左右ボタン押下で変更することができます。 

 

機能紹介:Hue Shift

f:id:ksakae1216:20190818212914p:plain

選択した要素の色、背景色を上下左右ボタンで変更することができます。

要素は複数選択も可です。 

 

機能紹介:Shadow

f:id:ksakae1216:20190818212946p:plain

選択した要素の影を追加することができます。

こちらも上下左右ボタンで変更することが可能です。 

 

機能紹介:Position

f:id:ksakae1216:20190818213155p:plain

このブログのデモに紹介した機能です。

要素を移動できます。 

 

機能紹介:Font Styles

f:id:ksakae1216:20190818213922p:plain

選択した要素のフォントサイズ、Boldを変更できます。

こちらも上下左右ボタンで変更可能。 

 

機能紹介:Edit Text 

f:id:ksakae1216:20190818214117p:plain

選択した要素のテキストを変更する機能です。 

 

機能紹介:Search

f:id:ksakae1216:20190818214730p:plain

要素を検索できます。

検索ボックスに検索したいスタイルなどを入力し検索します。

また、▼ボタンからそのページで使われてる要素の候補から検索することもできます。

PostgreSQLも使える無償クライアントツールTablePlus(Mac, Windows対応)

tableplus.io

 

PostgreSQL用のクライアントツールでしかもMacとなるといいクライアントツールがないんだよね〜。

 

PG Commander, PSequel, TeamSQLとそれぞれ試してきたけど不満だらけ。。。

 

PG Commanderはテーブルの絞り込みができないし、SQLの補完もない。

PSequelは絞り込み、補完はできるけど、まだまだ機能不足。

TeamSQLは唯一良かったけど、使えなくなった。。。

DB接続のクライアントツールはTeamSQLで決まり(インストールからMySQL接続まで紹介) - フリーランス チャレンジ!!

 

そこで、無償でPostgreSQL(他のDBも使えるよ)で使えて多機能ですばらしいTablePlusを紹介します。

 

WindowsでもMacでも使えるのはうれしいよね!!

 

 

ダウンロード先

ここからダウンロードできます↓↓↓

TablePlus | Modern, Native Tool for Database Management

 

対応データベース

たくさんのデータベースに対応してます。

f:id:ksakae1216:20190814180120p:plain

・PostgreSQL

・MySQL

・Amazon Redshift

・Microsoft SQL Server

・SQLite

・MariaDB

・Oracle

・Redis

・Cassandra

・Cockroach

・MongoDB(Beta)

・Vertica

 ※MongoDBはBetaと書いてなるのでもしかしてまだ正式にサポートしてないかも。

 

SSH、秘密鍵も対応

SSH、秘密鍵も対応してます。

私も仕事で使ってますが、ローカルのVirtualBox、SSH接続するサーバー、AWSどれも接続できました。

 

接続方法の紹介

先に接続してから機能を紹介しようと思います。

接続方法に興味ない方は飛ばしてください。

 

「Create new connection」をクリック 

f:id:ksakae1216:20190814181548p:plain

 

 ここから対象のDBを選択します。

f:id:ksakae1216:20190814181811p:plain

 

接続情報を入力し、「Test」ボタンを押下します。

テスト接続が成功すればフィールドがこのように緑色になるので「Connect」ボタン押下でDB接続します。

f:id:ksakae1216:20190814182752p:plain

 

はい、接続できましたね。

それではこれから機能を紹介してきます。

f:id:ksakae1216:20190814183100p:plain

 

テーブルの絞りこみ

画面左上のテキストボックで絞り込むことができます。

ちょっと変わってるのが"ka"と入力すると"kanto_chiba", "kanto_tokyo"だけになりそうだと思いますが、"kyushu_fukuoka", "kyushu_kagoshima"もそのまま表示されます。

このテキストボックスは入力した文字全てに一致するテーブルが表示されるからです。

なのでこの場合、正規表現使って"^ka"とするか"kan"まで入力すれば"kanto"のテーブルが表示されます。

f:id:ksakae1216:20190814183909p:plain

 

データの修正、テーブル構成

テーブルをクリックするとそのテーブルの内容が表示されます。

変更したいデータをクリックすると編集できるので変更してEnter。

f:id:ksakae1216:20190814184403p:plain

 

するとテーブル名の背景が黄色になるのでMacならCmd + S押下で変更が反映されます。

f:id:ksakae1216:20190814184413p:plain

 

テーブルの構成は「Structure」をクリックすると見ることができます。

もちろんここで変更することもできます。

f:id:ksakae1216:20190814184703p:plain

 

SQL補完

SQLの補完も完璧です、赤矢印のSQLをクリックするとSQLビューが開きます。

f:id:ksakae1216:20190814185137p:plain

 

"sele"と打つとこのように補完候補が表示されます。

f:id:ksakae1216:20190814185618p:plain

 

テーブル名も同様に補完されます。

f:id:ksakae1216:20190814185651p:plain

 

ビューの右下にある「Run Current」ボタン押下でSQL実行。

「Beautify」ボタンでSQL文を整形もしてくれます。地味に便利。

 

複数のDB接続

 赤矢印のコンセントアイコンをクリックすると

f:id:ksakae1216:20190814190022p:plain

 

登録してある接続先一覧が出てくるので、もう1つのMySQLを選択します。

f:id:ksakae1216:20190814190225p:plain

 

はい、このようにPostgreSQL(postgres)、MySQL(test_mysql)の2つを接続できました。

それぞれクリックすることで表示を切り替えることができます。

f:id:ksakae1216:20190814190240p:plain

 

色の変更

地味に気に入ってるんですが、接続先を表示してあるバーの色を変えることができます。

私はMySQLの色を変更しました。

デフォルト色(灰色)のPostgreSQL

f:id:ksakae1216:20190814191017p:plain

 

色を変更したMySQL

ローカル環境とStaging環境みたいなことを視覚的にもわかりやすくできるのでいいですよね。

f:id:ksakae1216:20190814191045p:plain  

データのselect文作成

 この機能もあるとまあまあ助かるんですよね。

テーブルのデータを選択し、右クリック、「SQL Insert Statement」で選択したデータのInsert文をクリップボードにコピーしてくれます。

f:id:ksakae1216:20190814191148p:plain

 

テーブル右クリックでTruncateとテーブル削除

テーブル削除はあまり使わないですがTruncateってたまに使いますよね。

SQL文打つのもそんなに大変じゃないですが、マウス操作でできるのはうれしいです。

f:id:ksakae1216:20190814191324p:plain

  

無償版の注意点

ここまでメリットを中心に紹介しましたが最後に1点だけ無償版の注意点です。

 

無償版はテーブル、接続先を2つ以上開くと「Free Trial limited 2 tabs」と表示されます。

無償版はタブ2つまでだよということです。

なのでこまめにタブを閉じて使ってください。

タブを閉じるのはMacだとCmd + Wです。

Nxチュートリアルをやってみた(Step 3 〜 12)

前回記事の続きです。

Nxチュートリアルをやってみた(Add E2E Tests) - フリーランス チャレンジ!!

 

この記事ではチュートリアルのStep3から最後まで一気に紹介します。

今までは、最初だったので1つずつ丁寧に紹介しましたが、大分慣れてきたので各Stepのやること結果をピックアップして紹介。

 

 

 

Step 3: Display Todos

nx.dev

AppComponent.tsにtodos配列を定義。

画面側にもこのtodos配列の内容を表示するよう修正し、Cypressテストを実行、見事パスします。

 

Step 4: Connect to API

nx.dev

 

AppComponentクラスにAPIにアクセスするコードを追加して、最後に画面表示です。

APIを受け取って返す処理がないので画面を表示してもコンソールには404 NotFoundが出力されます。

 

Step 5: Add Node Application Implementing API

nx.dev

 

nestアプリケーションを開発できる機能を追加。

nestを使用してAPIを作成して、コードを一部修正。

最後にAPIを起動してブラウザからURLを叩けば結果を返してくれる。

※チュートリアルは"https://localhost:3333/api/todos"となってるが本当は"http"。

  "https"だと表示できないので注意が必要。

この記事を書いた時にissueを出してhttpに変更されたのでチュートリアル通りでOK

 

Step 6: Proxy

nx.dev

 

Step5で作成したAPIのProxy設定を解説。

todos, apiをng serveで起動し画面が表示されることを確認。

APIを作成するまでは、todosはソースに直書きだったものがAPI経由で取得できるようになった。

 

Step 7: Share Code

 

nx.dev

 

todosインターフェースをフロント、バックエンド両方で定義してるのが問題なのでこのステップでインターフェースをシェアするように変更する。

インターフェース格納用のlibディレクトリをコマンドで作成し、インターフェースを定義。

その後、ng serveで画面起動して表示されることを確認。

 

Step 8: Create Libs

nx.dev

 

 UIライブラリを作成してtodosコンポーネントを作成。

 画面はそのコンポーネントの部品を使う感じ。

正直ここのチュートリアルだけだとコンポーネント部分のとこがイマイチ理解しきれない。

 

Step 9: Dep Graph

nx.dev

 

Nxの標準機能で依存関係をブラウザに表示することができます。

 

Step 10: Test Affected Projects 

nx.dev

 

"npm run affected:apps"で変更された内容を調べ、変更の影響を受ける可能性があるアプリを特定する。

 また、変更内容から影響の受ける可能性のある箇所をテストすることもできる"npm run affected:test"

あと、parallelオプションをつけるとtestをパラレルで実行してくれるのでテストがすぐ終わる。

 

Step 11: Build Affected Projects

nx.dev

 

"npm run affected:build"はtodosをビルドするがuiはビルドしない。

 

Step 12: Summary

nx.dev

 

ここまでのチュートリアルでやってきたことを振り返り

 

最後に

この記事でStep3から12まで一気にやってきました。

 

正直チュートリアルやっただけでNxを全て理解することはできませんが、少なくともNxを使えばしっかりしたテンプレートを自動的に作ってくれるのでしっかりした(?)アプリを作成することができる印象です。