Windows PC 関連【VS Code 以外の小ネタ】
【変換・無変換】キーで日本語・アルファベット切替
ノートPCで、備え付けのキーボードだとできないかもしれませんが、WindowsモードとMacモードなんかを切り替えられる外付けのキーボードでできました。
タスク切替を見やすく
標準カラーだと枠がみにくい、、、
マウスボタンカスタマイズ
マウスのサイドボタンに【コピペ】割り当てるのは危険？？
マウスのボタンカスタマイズに、コピペを割り当てると、ムダにミスが増える、、、
というお話、、、
タスク切替は【Windows + Tab】の方が便利かも？？
しばらくマウスサイドボタンに、
「Alt + Tab」と「Ctrl + Tab」を割り当ててましたが、
Figma、VS Code、学習の動画、、、とウインドウを切り替えるには、どうやら「Alt + Tab」より「Windowsキー + Tab」の方が使いやすそうです。
とくに、デュアルディスプレイだと、
「Alt + Tab」は、メインのモニターの方にすべてのモニターのタスクが並んでしまうけど、「Windowsキー + Tab」なら、モニターごとに別々にタスクが並ぶので選びやすいです。
必要に応じて、Chromeや VS Codeのウインドウは、「Figmaと講座動画は別タブにする、、、」など、
あえて、別々にして複数開いた方が別タスク扱いになるので選択しやすくなります。
そのかわり、マウスでタスクを選択しないといけないです。
それが嫌な人は、「Alt」と「Tab」のキーをそれぞれ別のボタンに割り当てて、「Alt」押しながら「Tab」キー何回かカチカチ、、、
で対応してください。
参考にしたブログ↓↓
［Alt］＋［Tab］キーよりも爆速なタスク切り替えショートカットキーを使いこなせ！
ホイールクリックを動画の【再生・一時停止】にすると幸せに
デイトラなんかの動画見ながらコード書いてるとき、コードエディターからカーソル全く動かさずに、こまめに動画止めながらコード書けます。
これも、デュアルディスプレイだと恩恵絶大です。
そもそも、カスタマイズボタンの多いマウスもある
ちょっと投資すると、めちゃくちゃ便利なマウスがありました。
9ボタンマウスのつもりで買ったら、7個しかボタンなかったので表記ミス？？と思ったら、それ以上に便利なマウスでした。
自分はこのマウスに、
通常時、
- ←（左キー：学習動画の5秒戻し目的）
- 動画の再生・一時停止
- アプリのサイクル=「Windowsキー + Tab」
- Hyper Shift キー（このボタンを押しながら他のボタンを押すと別の機能になる）
Hyper Shift を押した状態のボタンに、
（Hyper Shift を押しながらなので、右クリックや左クリック・ホイールスクロール上下も機能割り当てて普通に使える）
- VS Code の行選択
- VS Code の行削除
- コピー＝「Ctrl + C」
- ペースト＝「Ctrl +V」
- 検索＝「Ctrl + F」（コードの検索でほんと頻繁に使う）
- VS Code：Emmet のバランス（外側）
- Page Up/Down（ホイールスクロール上下に割り当て）
をとりあえず割り当ててみました。
5ボタンマウスなら泣く泣く削っていた、中ボタンクリックもそのまま残せてますし、間違えて押すとコードが壊れるリスクのあったコピペも Hyper Shift で使えば、押し間違えないので問題なく使えます。
Figmaのデザインカンプからまとめて取り込んだ、CSSをトリミングするのも、マウスだけで完結できます。
保存＝「Ctrl + S」も頻度高いので登録する？？取り消し＝「Ctrl + Z」も便利？？
などなど、まだ、いろいろ試して迷ってる最中ですが、工夫次第でもっと便利になりそうです。
正直、もっとボタンの数の多いマウスもあるのですが、ほんとうにゲーム目的で、遅延予防のため有線接続のものばかりでした。
あとは、口コミによるとドライバのサポートすら怪しいような中華製品とか、、、
その点こいつは、Bluetoothで、ドライバもちゃんとしてるし、ほんとに便利、、、↓
ポチップマルチモニター画面間でウインドウまるっと移動
画面大きいモニターに、ウインドウごと素早く移動させてみやすく。
生成AIは、カスタマイズして使うと一気に便利に
モニターがでかいは正義！？【デュアルモニター】はほんとに世界が変わる
自分の場合は、2024年７月現在、13.3インチと、23インチでデュアルモニターで使ってます。
13.3インチの方が、VS CodeとFigma並べてみるには小さい？？ので、27インチモニターを購入しようか迷ってます。
モニター3つ並べるのもいいですし、23インチと27インチのデュアルモニターでも、だいぶ視認性増しそう、、、
ノートPCで15インチくらいの備え付けのモニターで使ってる人も、ほとんどのノートPCで、ケーブル使えば、外付けでデュアルモニターにできます。
モニターの大きさも含めて、デュアルモニターは、誇張抜きで、ほんとうに世界が変わります。。。
僕の場合、多分、、、結局、近いうち27インチ買うと思います、、、
ポチップChrome【開発者ツール】小ネタ
まずは基本！Web制作での基本的使い方の詳しいサイト
↓で紹介してるサイトは、ほんと早い段階で見といた方がいいです。
ショートカットキー
文字サイズ変更
VS Code の方にも書きましたが、開発者ツールでも同じショートカットが使えるので、、、
設定リセット
自分の場合、開発者ツールを日本語化したのがきっかけ？？で、動作が不安定になりました。
もしかしたら、他の設定もプログラミング学習を始めた初期のころにいじってしまってたかも、、、
なので、いったん開発者ツールをデフォルトにリセット！！
簡単にできます。
表示が崩れたときの対処法
自分の環境だと、
「Live Server」と「Perfect Pixel」と「開発者ツール」、もちろん「VS Code」なども同時進行で動かしてると、負荷がでかいせいか、頻繁に表示崩れを起こします。
そんなときの対処法↓↓
これに気づくまで、キャッシュ削除しても、拡張機能とか立ち上げなおししても、「ムキィ！！直らん！！」ってなって、めちゃくちゃ時間使いました。
「Home・End・Page Up・Page Down」普通に使えるのね、、、
開発者ツール右のコードの部分でも、左のページをレスポンシブにして表示してるところでも、ふっつ～に使えます。
結構長いこと気づかなかった、、、
マウスホイールだけだと、大きく移動するとき不便なのよね、、、
レスポンシブに、特定のwidthのデバイス登録
コードを書いて、表示確認するとき、「デザインカンプ指定の特定のwidth」の表示に頻繁に切り替えるのに、いちいちwidthの数値入力せずにサクッと変更できます。
レスポンシブ表示の時に、全体を拡大縮小
「〇％」のタブ開いた下の方にある、Auto-adjust zoom 選択して％変更で、全体を拡大縮小。
これに気づく前は、レスポンシブのwidth広くすると全体が縮小表示されて見にくかった、、、
Web制作は、おっさんの視力では厳しいのか！？と、勘違いするところでした。
Figma関連
Figmaのカンプからのコーディング、最初はあえて雑に
デザインカンプの指定通り、細かくpxひろってコード書いていっても、いざ一通り作ってPerfectPixcelの画像重ねたら、めっちゃあちこちずれてます。
意外と、デザインカンプで出てくる数値はあてにならない、、、
慣れてくると、PerfectPixel重ねた状態で、開発者ツールで微調整するのがめっちゃ楽になるので、そこから数値コピペが速いです。
僕も、学習始めた最初は、
「PerfectPixelなんて、なんて費用対効果の低いムダな努力をするんだ、、、」
と勘違いしてましたが、逆にPerfectPixelのおかげで楽ができます。
SVG画像は、自分で書き換えて加工もあり
Figmaからエクスポートした画像の色が、使いたい色と違う場合なんか、
SVGでエクスポートして、その画像コードの中の「fill」を直接使いたい色に書き換えたらあっという間、、、なんですよね、、、
これに気づかず、画像編集ソフト調べたり、結構時間使った、、、
画像などのエクスポート先フォルダ選択
ブラウザ版だと、ブラウザでダウンロードしたファイル保存先の設定に依存。
ようするに、Figmaではなく、ブラウザの設定をいじる、、、
普通にFigmaの設定だけみて「できねえのかよ、、、不便だな」とぼやいてました、、、
要素の位置微調節
この記事の中でも紹介した「VS Codeの拡張機能まとめた記事」も書いてる、コーディングを効率化？快適化？することに情熱を燃やしている？方のサイト↓↓
Figmaの拡張機能もまとめてくれてます。
主にWebデザイン関連やる人にとって便利なもの？
他にもこの方のサイト、いろいろコーディング快適にするネタ詰まってるみたいなんで、のぞいてみるといいかも？です。
デスク回り環境関連
学習などの時間計測して記録
モニターの高さ
モニターの高さは「モニターの上辺が座った時の目線と同じ高さくらい」が目安らしいです。
小型のサブモニターの位置が低い状態で、前かがみで連日長時間作業してたら、がっつり腰痛になりました。
皆さんもご注意を～
腰サポート補助イス
腰痛改善に、これ↓も買ったら、予想以上にいい感じです。
腰の後ろのS字部分をバネみたいに押してくれるので、座ってて結構気持ちいい。
モニターの高さ調節とこれで、使い始めて１週間くらいしかたってませんが、だいぶ腰痛改善してきました。
キーボードはフルサイズじゃないと多分しんどい
過去に書いた記事↓で、お恥ずかしいですが、
プログラミング関連やるなら、キーボードは安物でいいので、フルサイズじゃないといろいろ使いにくいところでてきます。
テンキーや、home、endとかもほんと頻繁に使います。
ボタンのカスタマイズがごりごりできるマウス
VS Codeの行削除とか、検索、学習動画の再生・一時停止、「Windowsキー + tab」、、、などなど、
ショートカットをごりごり登録して使ってます。
CSS・JavaScript・PHP関連の小ネタまとめた記事リンク
普段、Web制作学習してて、課金しているGoogleの生成AI、Geminiにものに解説をつくってもらったのをまとめた記事↓↓
この記事がコーディングを快適にする小ネタ、なら、↓の記事はCSS・JavaScript・PHPの知識関連です。
あなたの学習の参考や、忘れかけた知識を再確認するきっかけになる？？かも？？
CSS関連の記事リンクはこちら
JavaScript・PHP関連の記事へのリンクはこちら
僕の受講中のオンラインプログラミングスクール【デイトラ】
そもそも、何を調べればいいかわからないとどうしようもない
この記事にまとめた知識は、ほぼすべて「デイトラ
」で教えてもらったり、デイトラで学習していて気になって調べたものです。
独学でやってたら、何を調べていいかがわからずに、ほんと、確実に、こんな知識は得られてないと思います。
一般的なプログラミングスクールは何十万円もしますが、デイトラは10万円前後。
僕のこのブログや【X】のように、受講生の口コミをメインに拡散していて、広告料をあまり使っていないからできる価格だそうです。
デイトラ紹介記事も、過去に書いてるので、気になった人は見てみてください↓
