【VSCode】HTMLタグの自動閉じタグ補完・自動タグ名変更を拡張機能なしで設定する方法

1. はじめに Visual Studio Codeの拡張機能であるAuto Complete Tagが提供する機能は、Visual Studio Codeの基本設定だけで代替可能です。 この記事では、拡張機能をインストールすることなく、HTMLタグの自動閉じタグ補完機能と自動タグ名変更機能を有効にする方法を紹介します。 2. Auto Complete Tag Visual Studio Codeの拡張機能にAuto Complete Tagというものがあります。 Auto Complete TagとはAuto Close TagとAuto Rename Tagの機能を合わせたもので、この拡張機能を有効にするとHTMLタグの自動閉じタグ補完(Auto Close Tag)と自動タグ名変更(Auto Rename Tag)ができるようになります。 2-1. Auto Close Tag 開始タグの閉じ括弧を入力すると、終了タグが自動的に挿入されます。 2-2. Auto Rename Tag 一方のHTMLタグの名前を変更すると、対になるHTMLタグの名前も自動的に変更されます。 3. 設定方法 3-1. 自動閉じタグ補完(Auto Close Tag) command + ,で設定を開く Auto Closing Tagsで検索 HTML: Auto Closing Tagsにチェックを入れて設定を有効にする settings.jsonを直接編集する場合は以下を記入。 { "html.autoClosingTags": true } 3-2. 自動タグ名変更(Auto Rename Tag) command + ,で設定を開く Editor: Linked Editingで検索 Editor: Linked Editingにチェックを入れて設定を有効にする settings.jsonを直接編集する場合は以下を記入。 ...

6月 25, 2022

【Git】作業ツリー上の変更を取り消す方法

この記事ではgit addもgit commitもしていない、作業ツリー上のファイル(インデックスに登録されていないワークツリー上のファイル)の変更を取り消して元に戻す方法を紹介します。 1. 方法 $ git checkout -- <ファイル名> git checkout -- .で全てのファイルを指定 【参考】 git ローカルの変更を元に戻す方法 #Git - Qiita Git で変更を取り消して、元に戻す方法 (事例別まとめ) | WWWクリエイターズ https://docs.gitlab.com/ee/topics/git/numerous_undo_possibilities_in_git/ Git - git-checkout Documentation

6月 25, 2022

【Git】派生元ブランチの変更

この記事ではGitの派生元ブランチ(親ブランチ)の特定と変更方法を紹介します。 間違った親ブランチからブランチを作成してしまいコミットもしてしまった時などに有効です。 1. 派生元ブランチの特定方法 $ git show-branch | grep "*" | grep -v "$(git rev-parse --abbrev-ref HEAD)" | head -n 1 | awk -F'[]~^[]' '{print $2}' grep "*":*がついてる行のみ表示 grep -v "$(git rev-parse --abbrev-ref HEAD)":カレントブランチを除外 head -n 1:1行目を表示 awk -F'[]~^[]' '{print $2}’:ブランチ名のみ表示 2. 派生元ブランチの変更方法 2-1. git rebase –onto H---I---J topicB / E---F---G topicA / A---B---C---D main ↓ $ git rebase --onto main topicA topicB ↓ H'--I'--J' topicB / | E---F---G topicA |/ A---B---C---D main git rebase --onto <変更後の親ブランチ> <現在の親ブランチ> <移動するブランチ> rebaseによりコミットが改変されているため、リモートへのpushにはgit push -fが必要 2-2. git cherry-pick $ git checkout -b topicB-new master $ git cherry-pick <コミットid> 新しいブランチを作り、欲しいコミットだけをgit cherry-pickで移動させる 適用させたいコミット数が少ない場合に有効 【参考】 ...

6月 25, 2022

【Ruby 3.1】ボウリングのスコア計算プログラムを作る

OOP版はこちら↓ 【Ruby3.1】ボウリングのスコア計算プログラムをオブジェクト指向で作る - あまブログ 1. 実行環境 macOS Monterey 12.4 Ruby 3.1.0 2. ボウリングのスコア計算プログラムの要件 1ゲーム = 10フレーム 1フレーム = 2投 スペアのフレームの得点は次の1投の点を加算する。 ストライクのフレームの得点は次の2投の点を加算する。 10フレーム目は1投目がストライクもしくは2投目がスペアだった場合、3投目が投げられる。 ありえない投球数やありえない数字・記号がこない前提。 入力例:6,3,9,0,0,3,8,2,7,3,X,9,1,8,0,X,6,4,5 3. ソースコード ver1:自作→レビュー反映 ver2:ver1→他の人のコードを反映 3-1. ver1 #!/usr/bin/env ruby # frozen_string_literal: true score = ARGV[0] scores = score.split(',') shots = [] scores.each do |s| if s == 'X' shots << 10 shots << 0 else shots << s.to_i end end frames = [] shots.each_slice(2) do |s| frames << s end frames_point = [] frames.each_with_index do |frame, i| frames_point[i] = frame.sum if i < 9 if frame[0] == 10 frames_point[i] += frames[i + 1][0] frames_point[i] += if frames[i + 1][0] == 10 frames[i + 2][0] else frames[i + 1][1] end elsif frame.sum == 10 frames_point[i] += frames[i + 1][0] end end end puts frames_point.sum 3-2. ver2 #!/usr/bin/env ruby # frozen_string_literal: true shots = ARGV[0].split(',').map { |s| s == 'X' ? 10 : s.to_i } frame = [] frames = [] shots.each do |s| frame << s if frames.length < 10 if frame.length >= 2 || s == 10 frames << frame.dup frame.clear end else frames.last << s end end point = 0 (0..9).each do |n| point += frames[n].sum frames[n + 1] ||= [] frames[n + 2] ||= [] if frames[n][0] == 10 point += (frames[n + 1] + frames[n + 2]).slice(0, 2).sum elsif frames[n].sum == 10 point += frames[n + 1][0] end end puts point 4. ソースコード(ver2)の解説 4-1. 主な使用メソッド String#split Enumerable#map Array#length Array#dup Array#clear Array#last Array#slice Array#sum 4-2. 解説 4行目 shots = ARGV[0].split(',').map { |s| s == 'X' ? 10 : s.to_i } ARGV[0].split(',')で入力された文字列を,で分割して文字列の配列にする "6,3,9,0,0,3,8,2,7,3,X,9,1,8,0,X,6,4,5"が["6", "3", "9", "0", "0", "3", "8", "2", "7", "3", "X", "9", "1", "8", "0", "X", "6", "4", "5"]になる .map { |s| s == 'X' ? 10 : s.to_i }でXを数値の10に、それ以外を数値に変換する 結果、shotsには[6, 3, 9, 0, 0, 3, 8, 2, 7, 3, 10, 9, 1, 8, 0, 10, 6, 4, 5]が入る 6~18行目 frame = [] frames = [] shots.each do |s| frame << s if frames.length < 10 if frame.length >= 2 || s == 10 # frameに2投またはストライクの1投が入ったら frames << frame.dup frame.clear end else # 10フレーム目 frames.last << s end end shots[6, 3, 9, 0, 0, 3, 8, 2, 7, 3, 10, 9, 1, 8, 0, 10, 6, 4, 5]から、各フレーム毎に分割したframes[[6, 3], [9, 0], [0, 3], [8, 2], [7, 3], [10], [9, 1], [8, 0], [10], [6, 4, 5]]を作りたい ...

6月 24, 2022

【Git】プルリクエストを使った開発の流れ

この記事ではGutHubでPull Requestを使った開発の流れを紹介します。 1. 準備 まずは開発用のリポジトリを作成します。 リポジトリの作成方法には以下の2つがあります。 リポジトリを自分で作る 既存のリポジトリをcloneする 1-1. リポジトリを自分で作る リポジトリの作成方法は、以下の手順を参照してください。 【Git】リポジトリの作成 | あまブログ 1-2. 既存のリポジトリをcloneする チーム開発等で既にリポジトリが存在する場合は、以下の手順でリモートリポジトリをcloneします。 $ mkdir <ディレクトリ名> $ cd <ディレクトリのパス> $ git clone <リポジトリのURL> ※リポジトリのURLの取得方法 2. 開発の流れ 以下の流れで行います。 リモートのmainをローカルのmainに反映させる 作業ブランチを作成する ファイルの編集・追加を行う(コードを書く) ファイルの編集・追加をローカルに反映させる 作業ブランチをリモートにpushする Pull Requestを作成する フィードバックを受ける Pull Requestをマージする 2-1. リモートのmainをローカルのmainに反映させる まずはリモートのmainブランチの状態をローカルのmainブランチに反映させる。(最新のmainの状態にする) $ git checkout main $ git pull origin main 2-2. 作業ブランチを作成する $ git checkout -b <ブランチ名> main 上記はmainブランチを派生元に指定。 2-3. ファイルの編集・追加を行う(コードを書く) 作成したブランチ上でコードを書く。 2-4. ファイルの編集・追加をローカルに反映させる 作業した内容をローカルの作業ブランチに反映させる。 $ git status $ git add <編集・追加したファイル名> $ git commit -m "<コミットメッセージ>" 2-5. 作業ブランチをリモートにpushする $ git push origin <ブランチ名> この時点でリモートに作業ブランチが作成される。 ...

6月 22, 2022

【Git】リポジトリの作成

この記事ではGitのリポジトリの作成方法を紹介します。 1. リモートリポジトリの作成 まず初めに、GitHub上にリモートリポジトリを作成します。 GitHubの「New repository」からリモートリポジトリを作成。 2. ローカルリポジトリの作成 次に自分のPC上にローカルリポジトリを作成します。 2-1. ディレクトリの作成 $ mkdir <ディレクトリ名> 2-2. ファイルの作成 作成したディレクトリに移動し、任意のファイルを作成します。 $ cd <ディレクトリ名> $ echo "# test" >> README.md 2-3. ローカルリポジトリの作成 $ git init 2-4. ファイルをローカルリポジトリに反映 $ git add README.md $ git commit -m "first commit" 3. ローカルリポジトリの内容をリモートリポジトリに反映 ローカルリポジトリの作業内容を、GitHub上のリモートリポジトリに反映させます。 3-1. リモートリポジトリの登録 使用するリモートリポジトリを登録します。 $ git remote add origin https://github.com/[ユーザ名]/[リモートリポジトリ名] 3-2. ローカルリポジトリの内容をリモートリポジトリに反映 ローカルリポジトリをリモートリポジトリにpushします。 $ git push -u origin main

6月 22, 2022

【VSCode】ファイル末尾に改行を自動で挿入する設定

この記事では、Visual Studio Codeのファイル保存時に、自動で末尾に改行が挿入されるように設定する方法を紹介します。 1. 環境 VS Code バージョン 1.68.1 2. 手順 ⌘,(command + ,)で設定を開く insertFinalNewlineで検索 Files: Insert Final Newlineにチェックを入れて設定を有効にする 設定すると、settings.jsonに以下が追記される。 "files.insertFinalNewline": true ※ 上記を settings.json に直接追記しても設定可能 settings.jsonの開き方 ⇧⌘P(shift + command + P)でコマンドパレットを開く open settingsで検索 Preferences: Open Settings (JSON)を選択 【参考】 User and workspace settings

6月 21, 2022

Q&A掲示板のER図を書く

「ユーザが質問を投稿して、そこに誰かがコメントを付ける、問題が解決したらコメントの中からベストアンサーを1つ選ぶ」というシステムのER図を書く。 1. 要件 質問を投稿する コメントする ベストアンサーを選ぶ 2. ER図 または

6月 21, 2022

NginxでSSL対応サイトを作る

この記事では、Debian 11上のNginxでSSL対応サイトを作る方法を紹介します。 自己署名証明書を作成し、Nginxの設定を編集します。 Nginxの設定ファイルの詳しい解説は以下の記事を参照してください。 【Debian】NginxでVirtual Hostsを使って複数のドメインを設定する方法【Server Blocks】 | あまブログ 1. 環境 Debian GNU/Linux 11 bullseye (さくらのVPS) Nginx 1.21.6 OpenSSL 1.1.1 2. SSLの概要 まず初めに、SSLの概要を説明します。 2-1. SSLの暗号化方式 データのやりとりには共通鍵暗号を使う 共通鍵暗号で必要となる共通鍵の受け渡しに公開鍵暗号を使う 共通鍵暗号:暗号化と復号化に同じ鍵を使う 公開鍵暗号:秘密鍵で暗号化、ペアとなる公開鍵で復号化 2-2. 公開鍵証明書 SSL証明書、サーバー証明書とも呼ばれる 認証局によるデジタル署名がついたサーバーの公開鍵のこと 通信を行うサーバーが信頼できるかどうかを確認する仕組み デジタル署名を自身で行なった証明書を自己署名証明書と言う(オレオレ証明書) デジタル署名:秘密鍵で署名、ペアとなる公開鍵で検証 【公開鍵証明書発行の流れ】( 図解 X.509 証明書 #x.509 - Qiita より) 3. 手順 以下の手順で進めていきます。 公開鍵証明書の作成 Nginxの設定 また、本手順では、サーバーのホスト名をtest.comとします。 3-1. 公開鍵証明書の作成 サーバーの秘密鍵と公開鍵証明書を作成します。 まずは、opensslをインストール。 $ sudo apt install openssl 秘密鍵と公開鍵証明書を生成。(ここで生成される公開鍵証明書は自己署名証明書) $ sudo openssl req -x509 -nodes -days 365 -newkey rsa:2048 -subj /CN=test.com -keyout /etc/ssl/private/nginx.key -out /etc/ssl/certs/nginx.crt req:CSR(Certificate Signing Request:証明書署名要求)を生成するためのサブコマンド。 -x509:CSRではなく自己署名証明書を生成する。 -nodes:公開鍵証明書のパスフレーズ設定をスキップ。パスフレーズを設定するとNginxを再起動するたびに入力する必要がある。 -days:生成する公開鍵証明書の有効期限を指定。 -newkey rsa:2048:公開鍵証明書と秘密鍵を同時に生成する。rsa:2048で2048ビットのrsa鍵を指定。 -subj /CN=test.com:Common Nameにホスト名を指定。-subjオプションを指定しない場合、プロンプトが表示され入力を求められる。CN以外はテキトーな値でいい。 -keyout:生成する秘密鍵のファイル名を指定。 -out:生成する公開鍵証明書のファイル名を指定。 3-1-1. 細かくやると 先程行った秘密鍵と公開鍵証明書の生成を、「秘密鍵の生成」と「公開鍵証明書の生成」に分けて行うと以下のようになります。 ...

6月 14, 2022

さくらのVPSに設定した独自ドメインにサブドメインを設定する方法

この記事ではさくらのVPSに設定した独自ドメインでサブドメインを利用できるようにする方法を紹介します。 これにより、契約ドメインは1つで複数のサイトを扱うことができます。 例えばfoo.comの独自ドメインにbarをサブドメインに設定することで、foo.comとbar.foo.comの2つのサイトを利用できます。 前提条件 さくらのVPSを契約済み 独自ドメインを取得済み(お名前ドットコムやXserverドメインなどで作成) サブドメインを作成済み(お名前ドットコムやXserverドメインなどで作成) 独自ドメインをさくらのVPSに設定済み さくらのVPSにXserverドメインで取得した独自ドメインを設定する方法 | あまブログ 1. 設定方法 1.さくらインターネットのドメインコントロールパネルにアクセス。 2.「ネームサーバサービス」を選択 3.以下の画面で、設定済みのドメインの「ゾーン>」を選択します。(画面右側) 4.「編集」を選択 5.「レコード追加」で以下の情報を入力して「追加」を選択 「エントリ名」→サブドメイン名(barなど) 「タイプ」→別名(CNAME) 「データ」→@ DNSチェック→チェックしない TTLの指定→チェックしない 6.「保存」を選択 以上で終了です。

6月 12, 2022