Qiita Teams that are logged in
You are not logged in to any team

Log in to Qiita Team
Community
OrganizationAdvent CalendarQiitadon (β)
Service
Qiita JobsQiita ZineQiita Blog
0
Help us understand the problem. What is going on with this article?
@heppokofrontend

フロントエンドWeb開発用Windows PCのキッティング for 自分

日本語版Windows10でWeb制作するぞ~っていうときに環境を用意する際よくやってる作業のメモです。
思い出したりしたときに徐々に追記していきます。

自己責任でお願いします><

コマンドでの作業

なにはともあれ、まずはPowerShellを使った作業です。

管理者権限でPowerShellを起動する

  • スタートキー(Windowsキー)+Xキーを同時押し
  • コンテキストメニューからWindows PowerShell(管理者)(A)を選択

PowerShellの実行ポリシー変更

Set-ExecutionPolicy RemoteSigned

上記のコマンドを入力して実行します。

実行ポリシーの変更
実行ポリシーは、信頼されていないスクリプトからの保護に役立ちます。実行ポリシーを変更すると、about_Execution_Policies
のヘルプ トピック (https://go.microsoft.com/fwlink/?LinkID=135170)
で説明されているセキュリティ上の危険にさらされる可能性があります。実行ポリシーを変更しますか?
[Y] はい(Y) [A] すべて続行(A) [N] いいえ(N) [L] すべて無視(L) [S] 中断(S) [?] ヘルプ (既定値は "N"):

というのが出てくるので、Yと入力してください。

Windowsの設定を行う

# 拡張子を表示する
reg add "HKEY_CURRENT_USER\Software\Microsoft\Windows\CurrentVersion\Explorer\Advanced" /v "HideFileExt" /t REG_DWORD /d "0" /f
# 隠しファイルを表示する
reg add "HKEY_CURRENT_USER\SOFTWARE\Microsoft\Windows\CurrentVersion\Explorer\Advanced" /v "Hidden" /t REG_DWORD /d "1" /f
# ダークモードに設定
reg add "HKEY_LOCAL_MACHINE\SOFTWARE\Microsoft\Windows\CurrentVersion\Themes\Personalize" /v "AppsUseLightTheme" /t REG_DWORD /d "0" /f
reg add "HKEY_CURRENT_USER\SOFTWARE\Microsoft\Windows\CurrentVersion\Themes\Personalize" /v "AppsUseLightTheme" /t REG_DWORD /d "0" /f

Chocolateyをインストールする

下記のページにあるコマンドをコピペ、実行してインストールします。

image.png

インストールできたら以下を実行して必要なアプリをインストールします。
★~~~★部分は書き換えが必要です。

# ------------------------------------------------------------------------------
# 注意
# ------------------------------------------------------------------------------
# ★~~~★は書き換えてください

# ------------------------------------------------------------------------------
# Browsers
# ------------------------------------------------------------------------------
choco install googlechrome
choco install googlechrome.canary
choco install googlechrome.dev
choco install firefox

# ------------------------------------------------------------------------------
# Git
# ------------------------------------------------------------------------------
choco install git.install
choco install tortoisegit
# choco install sourcetree # うまくいかない

# 改行コードまわり
git config --global core.autocrlf false
git config --global core.safecrlf true
# プロフィール
git config --global user.name "★自分の名前★"
git config --global user.email "★自分のメールアドレス★"
# ファイル名まわり
git config --global core.ignorecase false
git config --global core.quotepath false
# 文字化け対応
git config --global core.pager "LESSCHARSET=utf-8 less"

# ------------------------------------------------------------------------------
# 開発環境
# ------------------------------------------------------------------------------
choco install yarn
choco install nodist # nodistをいれるときはnodejsをいれてはいけないのでご注意ください
nodist latest
npm i -g npx
# pythonが必要な人は手動でインストールするに限る
# https://qiita.com/segur/items/23f276320216c3aa7cf7

# ------------------------------------------------------------------------------
# エディタ・IDE
# ------------------------------------------------------------------------------
choco install vscode --params "/NoDesktopIcon" # 開発用
choco install sublimetext3 # ちょっとした作業用


# ------------------------------------------------------------------------------
# その他
# ------------------------------------------------------------------------------
choco install nvda # NVDAバージョン古い?
choco install filezilla # FTPツール。VS CodeのSFTPでも可
# choco install irfanview # 業務で利用する場合には、ライセンスを購入する必要があります。
# choco install lhaplus // コンテキストメニューに追加されないので手動推奨

# 必要に応じて
# choco install slack
# choco install discord

pause;

手動で行う作業

タスクバーの設定

  1. タスクバー(画面の下のバー)を右クリック
  2. コンテキストメニューから「タスクバーの設定」をクリック
  3. 「小さいタスクバーボタンを使う」と「オン」
  4. 「画面上のタスクバーの位置」から「右」を選択

インストール済みのアプリの設定

Google Chrome

Chromeを起動します。

そのときに「既定のブラウザに設定する」というダイアログが出ない場合は以下の手順で既定のアプリに設定してください。

  1. 既定のアプリを開く
    1. スタートメニュー内左側歯車ボタン(設定)
    2. アプリ
    3. 既定のアプリ
  2. 「Web ブラウザー」をGoogle Chromeに設定

ブラウザ拡張

※ブラウザのアカウント同期をしている場合は実施しない

次に以下のブラウザ拡張(Extensions)をインストールします。
★印がついているものはピン止め推奨です。

image.png

次に以下のURLにアクセスします。

chrome://extensions/shortcuts

image.png

「Super Highlight Search」を「Ctrl+Shift+F」で起動するようにします。

image.png

その他

次に、ブックマークバーを表示させます。
Ctrl+Shift+Bキーを押下してください。

※以下、ブラウザのアカウント同期をしている場合は実施しない

よく使うWebページに対して次の作業を実施します。

  1. ページを開く
  2. ctrl+Dキーを押下
  3. ダイアログ内の「名前」を空欄にする
  4. ダイアログ内の「フォルダ」から「ブックマークバー」を選択
  5. 完了をクリック

たとえば…

ほかにもイントラ系のページや業務で使う社内Webサービス、SNSや次のようなページなどなど…。
faviconで判断できる系はページ名を省略しておくとすっきりします( ˘ω˘ )

FileZilla

サイトマネージャーに登録しておくエントリーは、それぞれ次のような設定にしておきます。

  • 「同期ブラウジングを使用する」にチェック
  • 「ディレクトリの比較を有効にする」にチェック
  • 「サーバー時間調整のオフセット」をマイナス9時間にする(接続先のサーバの設定によっては不要)

image.png

ディレクトリの比較を「ファイルサイズ」に指定しておきます。

image.png

Sublime text 3

SublimeTextの日本語化手順を参考に日本語化します。

記事内の「日本語化パッケージの適用」の部分、Windowsでも次の手順で開くことができます。

image.png

必要に応じて次のようなブラウザ拡張をインストールします。

  • ConvertToUTF8
  • IMESupport
  • EditorConfig
  • Smart Delete
  • Emmet
  • OmniMarkupPreviewer
  • Monokai Extended
  • Markdown Extended
  • SublimeLinter-eslint
  • SublimeLinter-stylelint

をインストールする。

Visual Studio Code

VS Codeの設定内容が書かれたGistがどこかにあって、それで済むならSettings SyncのみでOK。
※ 参考:VSCode(Visual Studio Code)の設定を同期させる拡張機能「Setting Sync」が便利

以下、個人的に入れておいてほしいものを並べました。参考までに。。。

その他の設定は、「ファイル」→「ユーザー設定」→「設定」やコマンドパレットから「setting.json」を開いて編集ができます。

image.png

たとえば…

  • フォントはSource Han Code JPを使っています。
  • Word Wrapは「ON」にしています。
  • Auto Indentは「Advanced」にしています。

Chocolatey対象外のアプリの導入と設定

  • Sourcetreeforkを導入する
  • Lhaplusか、Macの開発者とやり取りすることがおおければCubeICEを導入する
  • WinMergeを導入する
    • インストール中に「TortoiseGitと連携する」的なオプションが出てきたら、連携するにチェックを入れる
  • PowerToysを導入する

TODO

  • コマンドでRegistry経由からの既定のアプリの設定がうまくできない
  • コマンドでRegistry経由からのタスクバーのアイコンを小さくできない

参考

0
Help us understand the problem. What is going on with this article?
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
heppokofrontend
へっぽこフロントエンドエンジニアです。 TypeScriptとかWebアクセシビリティに興味があります。

Comments

No comments
Sign up for free and join this conversation.
Sign Up
If you already have a Qiita account Login
0
Help us understand the problem. What is going on with this article?