【Mac】Chromeのショートカットキーまとめ

この記事ではMacユーザー向けに、Google Chromeのキーボードショートカットの中から特に使用頻度の高いものを紹介していきます。 1. タブとウィンドウのショートカット 操作 ショートカット 新しいウィンドウを開く ⌘ + n 新しいウィンドウをシークレットモードで開く ⌘ + shift + n 新しいタブを開いてそのタブに移動する ⌘ + t 閉じたタブを閉じた順序で再び開く ⌘ + shift + t タブの移動 ⌘ + option + ←または⌘ + option + → 現在のタブのページを戻る・進む ⌘ + ←または⌘ + → 現在のタブを閉じる ⌘ + w 2. Google Chrome 機能のショートカット 操作 ショートカット ページ内の文字列検索 ⌘ + f 文字列検索で一致する次の部分に移動する ⌘ + g 文字列検索で一致する前の部分に移動する ⌘ + shift + g デベロッパーツールを開く ⌘ + option + i 3. アドレスバーのショートカット 操作 ショートカット サイト名に www. と .com を追加して現在のタブで開く サイト名を入力 + control + enter アドレスバーに移動する ⌘ + l アドレスバーから予測候補を削除する shift + fn + delete 4. ウェブページのショートカット 操作 ショートカット 現在のページを再読み込みする ⌘ + r キャッシュを無視して現在のページを再読み込みする ⌘ + shift + r 現在のページの HTML ソースコードを表示する ⌘ + option + u 全画面表示モードをオンまたはオフにする ⌘ + control + f ページを 1 画面ずつ下にスクロールする space ページを 1 画面ずつ上にスクロールする shift + space 【参考】 ...

July 10, 2022

【ER図】Twitterのデータベースを設計する

この記事ではTwitterのサイトのER図の書き方を解説します。 論理設計の対象はTwitterの一部の機能に限定し、ER図はIE記法で、Draw.ioで作成しました。 1. 対象の機能 ユーザを表示する ツイートする ツイートに返信する リツイートする 引用ツイートする フォローする フォロー一覧を表示する フォロワー一覧を表示する リストにユーザーを追加する リスト一覧を表示する リストをフォローする 2. ER図 3. テーブル定義 3-1. usersテーブル ユーザーの情報を管理するテーブル username @から始まるアカウント固有の識別名(ユーザー名) name 表示名(名前) bio 自己紹介 location 場所 website ウェブサイト date_of_birth 生年月日 profile_image プロフィール画像 header_image ヘッダー画像 3-2. tweetsテーブル ユーザーのツイートを管理するテーブル user_id ツイートしたユーザーのid content ツイート文 image ツイート画像 reply_to 返信の場合、返信先のツイートのidが入る 通常のツイートの場合はnull(または0)が入る quote_tweet_id 引用ツイートの場合、引用元のツイートのidが入る 通常ツイートの場合、null(または0)が入る 3-3. retweetsテーブル リツイートしたユーザーとリツイートされたツイートの関連を表すテーブル(誰がどのツイートをリツイートしたかの情報を持つテーブル) user_id リツイートしたユーザーのid tweet_id リツイートされたツイートのid 3-4. followsテーブル フォローしたユーザーとフォローされたユーザーの関連を表すテーブル(誰をフォローして誰にフォローされているかの情報を持つテーブル) follower_id フォローという行為をしたユーザーのid(誰かをフォローしたユーザーのid = 誰かのフォロワーになるユーザーのid) followee_id フォローの対象となるユーザーのid(誰かにフォローされているユーザーのid) 3-5. listsテーブル リストの情報を管理するテーブル ...

July 7, 2022

【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を直接編集する場合は以下を記入。 ...

June 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

June 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で移動させる 適用させたいコミット数が少ない場合に有効 【参考】 ...

June 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]]を作りたい ...

June 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 <ブランチ名> この時点でリモートに作業ブランチが作成される。 ...

June 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

June 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

June 21, 2022

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

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

June 21, 2022