hi3103の備忘録

概要

• ローカル開発環境でも SSL 接続でブラウザチェックをできるようにしたい（ブラウザでの警告が出ないようにしたい）。
• mkcert を使って、ホスト側に認証局を設け、自己証明書を発行することで上記を達成する。
• 本エントリーでは下準備として必要な mkcert の導入手順を記載する。

対象パッケージ

GitHub – FiloSottile/mkcert: A simple zero-config tool to make locally trusted development certificates with any names you’d like.
https://github.com/FiloSottile/mkcert

導入手順

Windows の場合

Chocolatray からインストール可能。管理者権限で Windows PowerShell を起動して以下を実行。

1. パッケージインストール

   choco upgrade chocolatey

   choco install mkcert

2. mkcertでローカル認証局を作成

   mkcert -install

   コマンドを実行するとセキュリティ警告がでてくるので、[はい] を押下。

   

   完了すると以下の表示がでる。

   PS C:\Windows\system32> mkcert -install
   The local CA is now installed in the system trust store! ⚡️
   Note: Firefox support is not available on your platform. ℹ️

macOS の場合

Homebrew からインストール可能。Terminal から以下を実行する。

1. パッケージインストール

   brew update

   brew install mkcert

2. mkcertでローカル認証局を作成

   mkcert -install

   コマンドを実行すると、そのまま完了して以下の表示がでる。

   $ mkcert -install
   The local CA is already installed in the system trust store! 👍

備考

WSL2 環境で開発するときの注意点

• コマンド的には macOS と同じ手順になる。
• が、ブラウザの表示チェックは、 Windows OS 上のブラウザからローカル環境を参照する形。
• ということは、ローカル認証局の作成も、自己証明書の発行も、Window OS 側で操作する必要がある。
  • WSL2 上で上記を行ったとしても、ローカル認証局の確認ができないので「安全ではないアクセスです！」の警告が出てしまう。

概要

• Windows 11 で WSL2 を使って Ubuntu を利用している
• SSH公開鍵をクリップボードへコピーするのに pbcopy コマンドを叩きたくなったが、こいつは Mac で組み込まれているコマンドのため使えない
• Windows では clip コマンドで同じことができるらしい
• pbcopy と叩いたら clip が動作するよう、エイリアスを設定してみる

参考リンク

• ［clip / pbcopy・pbpaste］クリップボードにコピー | 日経クロステック（xTECH）
• WSLでpbcopyを使う – Qiita

Read More

概要

EditorConfig
https://editorconfig.org/

• EditorConfig とは、複数人で開発をするときにコーディングのスタイルを統一するためのファイル形式&プラグインのこと
• 使用するに当たっては、ネイティブでサポートされているものと、プラグインの導入が必要なものがエディタや IDE によって異なる
• Sublime Text はプラグイン＝パッケージのインストールが必要

導入するもの

sindresorhus/editorconfig-sublime: Sublime Text plugin for EditorConfig – Helps developers maintain consistent coding styles between different editors
https://github.com/sindresorhus/editorconfig-sublime

手順

1. Package Controlで「EditorConfig」を検索してインストール
2. テスト用ファイルを用意して動作チェックする

Read More

概要

• Git を扱うようになってから、CUI での操作が増えた
• open . で Finder が開くように、コマンド入力で指定したファイルを Sublime Text で開くといった動作をしたくなった
• できそうなので設定をしてみる

公式リファレンス

Command Line Interface
To use subl, the Sublime Text bin folder needs to be added to the path. For a typical installation of Sublime Text, this will be located at /Applications/Sublime Text.app/Contents/SharedSupport/bin.

パスを通してあげれば subl というコマンドが使えるようになるらしい。

Read More

概要

• 愛用していた Sublimerge Pro が死んでしまい、新PCにセットアップできなかった
• sublimerge.​com ドメイン自体がもう別の誰かに取られてるみたい
• 代替ツールを探したがうまいことみつからない
• とりあえず繋ぎとして、旧PCに残っているファイルからプラグインを復旧する

やったこと

旧PCから必要なファイルを取得

• 以下のディレクトリを開く
  • C:\Users\ユーザー名\AppData\Roaming\Sublime Text\
• 以下のファイルを保存する
  • Installed Packages
    • Sublimerge Pro.sublime-package
  • Packages
    • Sublimerge Pro（フォルダまるごと）
  • User
    • Sublimerge.sublime-license
    • Sublimerge.sublime-settings

新PCにインストール

1. Package Contol の設定ファイルを編集

   • 保存場所
     • C:\Users\ユーザー名\AppData\Roaming\Sublime Text\Packages\User
   • ファイル名
     • Package Control.sublime-settings

   • やること

     • installed_packages の配列内に Sublimerge Pro を追加する

       {
           "bootstrapped": true,
           "in_process_packages":
           [
           ],
           "installed_packages":
           [
               "ApacheConf",
               "ayu",
               "Compare Side-By-Side",
               "DiffTabs",
               "Emmet",
               "HTML-CSS-JS Prettify",
               "IMESupport",
               "Sublimerge Pro",
               "Package Control",
               "PowerShell",
               "Syntax Highlighting for Sass",
           ],
       }

2. 旧PCから保存したファイルを、同じ場所に複製

3. Sublime Text を起動

   • すでに開いている場合は、一度閉じてから開き直す（再起動）

動作チェック

• 適当なファイルを2つ表示
• Ctrl + Alt + D で Sublimerge が動作するか確認

概要

• Google Cloud Platform のお勉強をしはじめた。
• Chrome 上で Cloud Shell を使ってもいいのだが、手元で叩けたほうが便利かもと思ったので gcloud CLI を Windows 11 に導入してみる。

参照したリファレンス

• gcloud CLI をインストールする| Google Cloud CLI のドキュメント
• gcloud CLI を承認する| Google Cloud CLI のドキュメント

Read More

やること

• Windows 10 に「Windows Subsystem for Linux 2 (WSL 2)」を導入する
  • WSL2 上で利用する Linux のディストーションは Ubuntu （＝デフォルトのまま）とする
• 実用上必要な以下のセットアップをあわせて行う
  1. WSL2/Ubuntu 上で日本語を扱えるようにする
  2. WSL2/Ubuntu に Homebrew をインストールする

所要時間

30～40分

参考リファレンス

Windows Subsystem for Linux (WSL) を Windows 10 にインストールする | Microsoft Docs

Read More

Sublime Text 3 の設定エントリー一覧

1. Package Control
2. Key Bindings
   • for Mac
   • for Windows（現在のエントリー）
3. Settings

前置き

• 長年Macユーザーだった自分が、Windowsでも近い感覚で操作できるようにすることを目的にしています
• 人によってはデフォルトで十分な（わざわざ変更する必要がない）設定項目もあります
• Windows ではUS配列キーを利用しています
• Mac 版の設定エントリーは以下
  • https://hi3103.net/notes/dev/1010

設定画面の開き方

以下いずれかの操作で開ける。

• ツールバー > Preferences > Key Bindings
• Package Control > 「Prefereces: Key Bindings」を検索

Read More

目的

サイトのテスト環境を用意している VirtualBox 上の CentOS7 で ls コマンドを実行したときに、

• 背景色：黒
• ディレクトリの文字色：青

という視認性最悪の組み合わせなので、色の設定を変えたい。

Read More

SublimeLinterとは

SublimeLinter
http://www.sublimelinter.com/

SublimeText上でコードの構文チェックをリアルタイムで行えるプラグイン

手順

1. 「SublimeLinter」本体をインストール
2. 言語ごとに必要なプラグインを別途インストール

Read More