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

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

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

【VSCode】キーボードでエクスプローラーとエディタとターミナルを移動する

キーボード エクスプローラー エディタ ターミナル

会社ではIntellij、自宅ではVSCodeを使ってます。

 

やっぱり長い時間使うIDEであれば、キーボードショートカットを使いこなせば開発効率は格段にアップします。

 

エクスプローラーのファイルをマウスで選択。

エディタをマウスでクリック。

ターミナルをマウスでクリック。

 

面倒ですね。キーボードでエクスプローラー、エディタ、ターミナルを移動できればどんなに便利か。

 

今までなんとなく誤魔化してましたが、ちゃんと調べて設定できたので記事にします。

※ちなみにMacの場合です。でもWindowsでもこのやり方を参考にできると思います。

 

 

キーボードショートカットの設定方法

VScodeの設定は左下の歯車アイコンをクリックして「キーボードショートカット」を選択してください。

vscode 設定

vscode 設定

設定画面が開くので検索したいワードを入力していきます。

設定画面

設定画面

エクスプローラーの設定

キーワードは「View: Show Explorer」

表示された設定を右クリックしてキーバインドを変更してください。

私はCmd + 2にしてます。 

エクスプローラー

エクスプローラー

 

エディタの設定

キーワードは「View: Focus First Editor Group」

ここはキーバインドいつも変更します。「!editorFocus」をいつに設定します。

これはエディタ以外にフォーカスされてる時を意味します。

エディタ

エディタ

私はCmd + 1をエディタのフォーカスにキーバインドを変更しましたがかぶってる設定があったので下記を削除しました。

 

ターミナルの設定

キーワードは「Terminal: Focus Terminal」

ターミナル

ターミナル

 

めちゃくちゃ快適になりました!!

GitHub Actionをローカルで実行する方法(Mac)

Github Action act

Github Action

GitHub Actionのworkflowを書いたんだけど、確認するのがgithubへpushなどしなければいけないと確認するのがちょっと大変。

 

ということで、ローカルで実行する方法が分かったので記事にします。

 

 

GitHub Actionとは

githubにpushした時や、pull-reqした時、マージした時などのイベント時に処理を実行してくれます。

 

↓↓↓ここにたくさん書いてあるのでもっと詳しく知りたい人はこちらを見てください。

knowledge.sakura.ad.jp

 

actでローカル実行

はい、記事の最初にも書いたけど、私は今回、pushした時のworkflowを書いたんだけど、初めて書いたので失敗したんですね。

 

で、ローカルでymlファイルを修正してまたpushはちょっと、面倒です。

そこでactを使うとローカルでGitHub Actionを動かせるとのこと。

 

Mac, Windowsでのインストールと使い方は下記をご参照ください。↓↓↓

dev.classmethod.jp

 

私はMacなので下記コマンドでインストール。

gistf7f41bc3cb350a9ed202da1965b769ab

 

私はpush時のworkflowを書いたので下記コマンドを実行すると

gist51d05516a27320098ed95060cace8894

 

動かした時の様子。


Git Action local execute

 

このようにローカルで動くようになりました。

これでいちいちgit pushしなくても確認できます。

※ちなみにdockerイメージ使ってるのでdockerも起動してます。

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

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

 

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


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

 

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

 

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

 

 

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

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

要素を検索できます。

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

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