JavaScript​

id="contextmenu" がメニュー本体で、id="main" がメニューを表示する対象の部分。

const contextmenu = document.getElementById('contextmenu');
const main = document.getElementById("main");
main.addEventListener('contextmenu', (e) => {
    e.preventDefault();
    contextmenu.style.left = e.pageX + 'px';
    contextmenu.style.top = e.pageY + 'px';
    contextmenu.style.display = 'block';
});
main.addEventListener('click', () => {
    contextmenu.style.display = 'none';
});

HTML​

<div id="contextmenu">
    <ul>
        <li>削除</li>
    </ul>
</div>

CSS​

#contextmenu {
    display: none;
    position: fixed;
    left: 0;
    top: 0;
    border-radius: 8px;
    background-color: #F9F9F9;
    border: solid 1px #E3E3E3;
    padding: 4px;
    width: 192px;
}

#contextmenu ul{
    padding-left: 0;
    margin: 0;
}

#contextmenu li {
    cursor: pointer;
    margin: 0;
    padding: 4.75px 0 4.75px 16px;
    border-radius: 4px;
    list-style: none;
    font-size: 14px;
}

※クリックしたときのイベントと機能は別途作成する必要がある。

依存パッケージのインストール​

• https://github.com/rbenv/ruby-build/wiki#ubuntudebianmint

sudo apt update
sudo apt install autoconf patch build-essential rustc libssl-dev libyaml-dev libreadline6-dev zlib1g-dev libgmp-dev libncurses5-dev libffi-dev libgdbm6 libgdbm-dev libdb-dev uuid-dev -y

rbenv のインストール​

# rbenv と ruby-build をインストール
curl -fsSL https://github.com/rbenv/rbenv-installer/raw/HEAD/bin/rbenv-installer | bash

# 起動時に rbenv を読み込み
echo 'eval "$($HOME/.rbenv/bin/rbenv init - bash)"' | tee -a ~/.bashrc

参考​

• https://github.com/rbenv/rbenv-installer

Ruby 3.3.0 のインストール​

source ~/.bashrc     # rbenv を初期化 (WSL 再ログインでも可)
rbenv install 3.3.0  # Ruby 3.3.0 のインストール
rbenv global 3.3.0   # Ruby 3.3.0 を規定に設定

参考​

• https://github.com/rbenv/rbenv

Arduino シリアル通信のプログラムを書く​

Windows Terminal と plink を用いたシリアル通信を試すために、 Arduino にシリアル通信のプログラムを書き込みます。

void setup() {
  Serial.begin(9600);
}

void loop() {
  if(Serial.available() <= 0) return;
  char data = Serial.read();
  if(data == '\r'){
    Serial.print("\n");
  }else{
    Serial.print(data);
  }
}

plink で Arduino とシリアル通信​

以下のコマンドで Windows Terminal から plink コマンドを実行してシリアル通信を行います。

plink -serial COM1 -sercfg 9600,8,1,N,N

関係モデル​

関係モデルと関係データベースの対応​

• 属性に順序はない
• 属性名は関係内で一意
• 属性名には必ず名前を付ける

(基本情報技術者試験平成 28 年春期午前問 26)
(基本情報技術者試験平成 31 年春期午前問 26)

関係データベース, リレーショナルデータベース (RDB, Relational DataBase)​

関係データベースは、データを 2 次元の表によって表現する。

(基本情報技術者試験平成 23 年秋期午前問 31)

スキーマ​

スキーマとは、データの性質、形式、ほかのデータとの関連などデータ定義の集合である。

(基本情報技術者試験平成 26 年秋期午前問 26)

3 層スキーマ​

3 層スキーマには、

• 外部スキーマ: 利用者からみえるもの
• 概念スキーマ: 開発者からみえるもの
• 内部スキーマ: 物理的な構造

3 層スキーマの目的は、データの物理的な格納構造を変更しても，アプリケーションプログラムに影響が及ばないようにする。

(基本情報技術者試験平成 27 年春期午前問 26)

データベース管理システム (DBMS, DataBase Management System)​

データベースを管理するソフトウェア。

(基本情報技術者試験平成 16 年春期午前問 70)

E-R 図 (Entity-Relationship Diagram)​

E-R 図は、エンティティ間の関連を示す。 エンティティとは実体のこと。

(基本情報技術者試験平成 18 年春期午前問 38)

表の設計​

主キー (Primary Key)​

表中の行を一意に識別するための列。

• 一意制約
• 非 (NOT) NULL 制約
• 先頭でなくても OK
• 複数の列と合わせて主キーとしても OK (複合キー)

(基本情報技術者試験平成 25 年秋期午前問 30)

外部キー (Foreign Key)​

他の表の主キーを参照している列。

• 参照制約 (参照一貫性が維持される制約)

(基本情報技術者試験平成 28 年春期午前問 29)

リレーションとは、主キーと外部キーを用いた表間の関連付け。

データの正規化​

データベースを構築する際に、データの重複や矛盾を排除する。

(基本情報技術者試験平成 15 年春期午前問 67)
(基本情報技術者試験平成 16 年秋期午前問 67)
(基本情報技術者試験平成 18 年秋期午前問 61)

第 1 正規化​

• 繰り返しの項目をなくす
• 計算で求められる項目をなくす

第 2 正規化​

主キーの一部で一意に決まるものを別表に移す

• 部分関数従属: 主キーの一部によって項目が一意に決定する関係
• 完全関数従属: 主キーによって項目が一意に決定する関係

第 3 正規化​

主キー以外によって決まる項目を、別表に移す

• 推移的関数従属: 主キー以外の項目によって項目が一意に決定する関係

(基本情報技術者試験平成 20 年秋期午前問 57)

トランザクション処理​

一連の処理をひとまとめにしたもの。

ACID 特性​

トランザクションの性質

(基本情報技術者試験平成 24 年秋期午前問 30)
(基本情報技術者試験平成 26 年春期午前問 29)

排他制御​

データベースの一貫性を保つためにほかのトランザクションからのアクセスを制限 (ロック)

排他制御の目的は、データの整合性を保つこと

(基本情報技術者試験平成 24 年春期午前問 33)
(基本情報技術者試験平成 28 年春期午前問 30)

共有ロック​

トランザクションがデータを参照する前にかけるロック

専有ロック​

トランザクションがデータを更新する前にかけるロック

共有ロックした後に、他のトランザクションは共有ロックすることだけが可能

ロックの粒度​

ロックの粒度を大きく (表単位など) すると、他のトランザクションの待ちが多くなり、全体のスループットが低下する。

(基本情報技術者試験平成 30 年秋期午前問 29)

表単位などロックの粒度が大きいとロックの競合が起こりやすく、 行単位などロックの粒度が小さいとメモリ使用領域が多く必要になる。

(基本情報技術者試験平成 30 年春期午前問 30)

デッドロック​

複数のトランザクションが、互いに相手の専有ロックしている資源を要求して待ち状態となり、実行できなくなること。

(基本情報技術者試験平成 16 年春期午前問 69)

デッドロックが発生した場合は、片方のトランザクションをロールバックする。

(基本情報技術者試験平成 18 年春期午前問 59)

2 相コミットメント​

一連のトランザクション処理を行う複数サイトに更新処理が確定可能かどうかを問い合わせ、すべてのサイトが確定可能である場合、更新処理を確定する方式。

(基本情報技術者試験平成 17 年春期午前問 63) (基本情報技術者試験平成 29 年春期午前問 28)

トランザクションの途中で障害が発生した場合はロールバックする

データベースの障害回復​

ロールフォワード​

フルバックアップファイルと更新後ログを用いて復旧する

ロールバック​

更新前ログを用いて復旧する

チェックポイント​

データベース更新バッファの内容をデータベースに書出す。

関係演算​

• 射影: 列を取出す
• 選択: 行を取出す
• 結合: 複数の表から一つの表を生成
• 和: 二つの表の行を取出す。同じ行はまとめる。
• 積: 共通の行を取出す
• 差: 一つの表からもう片方の表の行を除いたものを取出す

SQL​

DDL, Data Definition Language (データ定義言語)​

CREATE TABLE​

テーブルを作成する。 概念スキーマに相当。実表。

CREATE TABLE TableName(ColumnName1 Type1, ...)

CREATE VIEW​

ビューを定義する。 外部スキーマに相当。仮想表。

DML, Data Manipulation Language (データ操作言語)​

SELECT​

クエリ (問合せ) を行う。

SELECT Column, ... FROM Table, ... WHERE Conditions

• 射影

  列を取り出す操作

  Col を取り出す場合

  SELECT Col FROM Table
  

• 選択

  行を取り出す操作

  Price が 100 または 120 である行を取り出す場合

  SELECT * FROM Table WHERE Price=100 OR Price=120
  

  SELECT * FROM Table WHERE Price IN (100, 120)
  

  Price が 100 以上 200 以下である行を取り出す場合

  SELECT * FROM Table WHERE Price >= 100 AND Price <= 200
  

  SELECT * FROM Table WHERE BETWEEN 100 AND 200
  

  Name が "田" で終わる行を取り出す場合

  SELECT * FROM Table WHERE Name LIKE "%田"
  

  • %: 0 文字以上にマッチ
  • _: 1 文字以上にマッチ

結合​

• DISTINCT: 重複した行を一つにまとめる

並び替え (ORDER BY)​

昇順 (ASC)​

SELECT ... FROM ... ORDER BY ColumnName ASC

ASC は省略可。

降順 (DESC)​

SELECT ... FROM ... ORDER BY ColumnName DESC

集合関数​

グループ化 (GROUP BY)​

SELECT ... FROM ... GROUP BY ColumnName

別名 (AS)​

SUM(ColumnName) AS GOUKEI

グループの条件 (HAVING)​

GROUP BY ColumnName HAVING ...

含まれる行を抽出 (IN)​

... WHERE IN (SELECT ...)

含まれない行の場合は NOT IN

相関副問合せ (EXISTS)​

存在する場合は真

... WHERE EXISTS (SELECT ...)

データベースの活用​

データウェアハウス​

企業の様々な活動を介して得られた大量のデータを整理・統合して蓄積しておき，意思決定支援などに利用するもの。

(基本情報技術者試験平成 22 年春期午前問 33)

データマイニング​

企業が保有する顧客や市場などの膨大なデータから，有用な情報や関係を見つけ出す手法

(基本情報技術者試験平成 19 年秋期午前問 38)
(基本情報技術者試験平成 24 年春期午前問 64)
(基本情報技術者試験平成 29 年春期午前問 29)

ビッグデータ​

• SNS、動画、画像、音声などの多種多様なデータ
• 膨大なデータ容量
• リアルタイムで収集されるデータ

(基本情報技術者試験平成 29 年春期午前問 63)

オープンデータ​

原則無償で自由に二次利用可能な官民データ

公開鍵認証とは、暗号化やデジタル署名に使われる技術の一つで、公開鍵と秘密鍵という二つの鍵を使って通信相手の本人確認や暗号化を行う方法です。 SSH とは、Secure Shell の略で、ネットワーク上で安全にコマンドやファイルをやり取りするためのプロトコルです。SSH では公開鍵認証を使って、サーバーにログインすることができます。 具体的にどのように動作するかを説明します。

この記事では、数学についての言及はありません。

公開鍵と秘密鍵について​

公開鍵認証では、公開鍵と秘密鍵という二つの鍵を使います。 公開鍵は名前の通り、誰でも知っていても構わない鍵で、通信相手に送ったり、インターネット上に公開したりします。 秘密鍵は自分だけが持っている鍵で、絶対に他人に知られてはいけない鍵です。 秘密鍵は公開鍵から導くことは数学的に非常に困難なものとなっています。 この性質を利用することで、暗号化やデジタル署名を実現できています。

デジタル署名​

デジタル署名とは、データの送信者が本人であることを証明するための技術です。 以下の手順でデジタル署名を行います。

送信者​

1. 文章をハッシュ化 (ハッシュ)
2. ハッシュを秘密鍵で暗号化 (電子署名)
3. 文章と電子署名を送信

受信者​

4. 文章と電子署名を受信
5. 公開鍵で署名を復号しハッシュを取得
6. 文章をハッシュ化し、電子署名により得られたハッシュと比較 (ハッシュが同じであれば相手の送信した文章)

デジタル署名は署名を秘密鍵、検証を公開鍵で行っています。

SSH について​

SSH とは、Secure Shell の略で、ネットワーク上で安全にコマンドやファイルをやり取りするためのプロトコルです。 SSH では公開鍵認証を使って、サーバーにログインすることができます。SSH の利点は以下の通りです。

• パスワードなしでログインできるため、パスワード漏洩や総当たり攻撃などのリスクが低減 (ただし、パスワードを使用することも可能)
• データが暗号化されるため、通信内容が盗聴されたり、改ざんを防止
• ポートフォワーディングやトンネリングなどの機能を使って、ネットワークのセキュリティやアクセス制御を強化

SSH では、以下のように公開鍵認証を行います。

1. クライアントは、公開鍵と秘密鍵を生成 (ssh-keygen -t ed25519)
2. クライアントは、クライアントの公開鍵 (~/.ssh/id_ed25519.pub) を事前にサーバーに登録 (~/.ssh/authorized_keys)
3. クライアントはサーバーに接続する際に、自分の秘密鍵 (~/.ssh/id_ed25519) でデジタル署名
4. サーバーはクライアントの公開鍵 (~/.ssh/authorized_keys)でデジタル署名を検証し、正しい場合はログインを許可

以上が、公開鍵認証と SSH についてのまとめです。 公開鍵認証と SSH を使うことで、ネットワーク上で安全にコマンドやファイルをやり取りすることができます。

Grid を作成する​

5 行 3 列のグリッド​

5 行 3 列のグリッドを作成してみます。

<div id="wrap">
    <div id="elem">要素</div>
</div>

#wrap{
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-template-rows: repeat(5, 1fr);
}

1fr は等分した長さのことです。 repeat(3, 1fr) は 1fr を 3 回繰り返すのと同義で、 省略せずに書くと 1fr 1fr 1fr になります。

また、auto は、グリッド内の要素にグリッドのサイズを合わせるときに用います。

要素を配置する​

グリッドを定義した後は、要素を配置します。 要素の配置は、grid-row と grid-column を用いて行います。(ただし、grid-row-start、grid-row-end、grid-column-start、grid-column-end を使用しても可能です。)

図のように要素を 4 行 2 列目に要素を配置したいとします。

4 行目は 4 と 5 の間なので grid-row: 4 / 5; とし、 2 列目は 2 と 3 の間なので grid-column: 2 / 3; とします。

#elem{
    grid-column: 2 / 3;
    grid-row: 4 / 5;
}

列いっぱいに配置​

4 行目に列いっぱいで配置したい場合は、 列が 1 と -1 の間なので grid-column: 1 / -1 とします。(このレイアウトの場合 grid-column: 1 / 4 でもかまいませんが端なので -1 としています。)

#elem{
    grid-column: 1 / -1; /* grid-column: 1 / 4; でも可*/
    grid-row: 4 / 5;
}

span を使用した例​

span キーワードを使用すると、複数の行や列をまたがることができます。(ただし、span を使用せずとも可能です。)

2 列目と 3 列目をまたがるように配置したい場合は、grid-column: 2 / span 2; とします。

#elem{
    grid-column: 2 / span 2;
    grid-row: 4 / 5;
}

以上、グリッドについての解説でした。

USB はパソコンやスマートフォンなどの機器を接続するための規格ですが、 種類や性能が多様化しており、 どれを選べばいいのか迷ってしまうこともあるでしょう。 そこで、USB でよく聞く Type-C と USB 3 について解説し、 ケーブルの選び方についても紹介します。

Type-C とは​

Type-C とは、USBのコネクタの形状の一種です。 Type-C は従来の Type-A や Type-B と比べて小型で両面挿し可能なデザインになっており、どちら向きでも接続できる便利さが特徴です。 また、Type-C は電力供給や映像出力などの機能があるものも存在し、対応しているものであればモニターやドッキングステーションなどの周辺機器との接続ができます。 しかし、全てのケーブルが映像出力だったり、高速通信ができるわけではないので注意が必要です。 そのため、通信が遅い USB 2.0 の Type-C ケーブルも存在します。

Thunderbolt と Type-C の関係​

Thunderbolt は形状は Type-C と同じものですが、機能が異なります。 Thunderbolt は通常のデータ転送に加えて以下のことができます。

• 高速通信 (Thunderbolt 3: 40 Gbps)
• 映像出力 (DisplayPort)
• 高電流

USB 3 とは​

USB 3 とは、USB の転送速度や電力供給能力を向上させた規格です。 USB 3.0 は 最大 5 Gbps、USB 3.1 は最大 10 Gbps、USB 3.2 は最大 20 Gbps の転送速度が可能です。 また、USB 3.1 からは USB PD (Power Delivery) という技術が導入され、最大 100 W の電力供給ができるようになりました。

USB 3 の規格のややこしさ​

USB 3 はバージョンアップデートごとに、規格の名前が変更されてきた歴史から名称がややこしくなっています。 以下に、USB の規格をまとめます。 同じ行のものは同じ規格になります。

Type-C ケーブルの選び方​

USB のケーブルを選ぶときには、まず自分が接続したい機器や目的に合った規格かどうかを確認しましょう。 高速なデータ転送や高画質な映像出力をしたい場合は、USB 3.2 (USB 3.2 Gen 2x2) の Type-C ケーブルや Thunderbolt ケーブルを選ぶと良いでしょう。 また、電力供給や充電をしたい場合は、USB PD に対応した Type-C ケーブルを選ぶと良いでしょう。 ただし、対応するケーブルだけでなく、接続する機器も同じ規格に対応している必要があります。その点に注意してください。

Thunderbolt ケーブルを選ぶ​

Thunderbolt ケーブルは Type-C ケーブルの中でも高性能かつ高価格な最強のケーブルです。

怪しい製品に注意​

Thunderbolt ケーブルには、本物のケーブルとパチモンのケーブルが存在します。 簡単な見分け方ですが、雷マークがあるものは Thunderbolt のケーブルで、マークがないものや 40 と書かれているものはパチモンです。 また、Thunderbolt 「対応」とあるものもパチモンの可能性が高いため注意が必要です。

ちなみに、先月以下のケーブルを購入しました。

Type-C 変換アダプタ​

Type-C 変換アダプタが存在します。 たとえば、以下のようなものです。

これらは、Type-C ポートしかないスマホやパソコンに Type-A のデバイスを接続するために使用します。

アウトな Type-C 変換アダプタ​

Type-C メスの変換アダプタはアウトです。 たとえば、以下のようなものがあります。

• Type-C メス to Type-A オス
• Type-C メス to Type-C オス

C to A は規格違反のため、できるだけ買わないほうが望ましいです。

リモートワーク環境には電源タップ選びは重要要素の一つである。そこで、おすすめの電源タップを紹介する。

電源タップの寿命は 3 ないし 5 年と言われており、これを超えた場合は火災の発生リスクがあるので、定期的に交換しておいたほうが良い。

AC アダプターに干渉しない電源タップ​

AC アダプターを OA タップに挿すと、隣の差込口と干渉し、余ってしまうということが起こる。

現在、接続している AC アダプターは、Alexa、Nintendo Switch、サーキュレーター、無線ルーターがある。これだけあると、アダプター同士の干渉で普通の電源タップでも 6 個から 8 個口タイプのものが必要となり、持て余してしまうだろう。

そんなときにおすすめなのがエレコムの AC アダプタ用電源延長コード。

差込口が枝分かれしているので、AC アダプターと他のプラグが干渉することなく使用できる。

さらに、

• トラッキング防止機能
• 15A 125V (1500 W)

OA タップ​

次におすすめする電源タップは、エレコムのアース端子付き 3 極 4 個口の電源タップである。

ただ、このアース端子は距離的に一番端のプラグから出ているアース線に届かない可能性があるので、「2 極 + アース線」のプラグで実際に使用できるのは 3 個口分と考えて良い。(3 極プラグの場合は関係ない。)

この電源タップの仕様について以下にまとめる

• 3 極
• 4 個口
• 5 m
• 抜け止め
• 15A 125V (1500W)
• アース端子付
• 変換アダプター付
• 固定フック用の穴有り
• マグネット付

マグネットと引っ掛ける穴があり、仮固定かのうなのが良い。(ねじ止めによる固定は NG なので注意が必要)

デスク用タップ​

次に紹介するのはデスク用の電源タップ。

• 2 極
• 3 個口
• 2 m
• 抜け止め
• 15A 125V (1500W)
• スイッチ
• クランプ付き

床にある電源タップにプラグを挿す手間が省けるのが良い。

名前空間​

Microsoft.UI.Xaml.Controls

普通のボタン​

<Button Content="Button" />

絵文字入りのボタン​

<Button>
    <StackPanel Orientation="Horizontal">
        <FontIcon Glyph="&#xED25;" FontFamily="Segoe MDL2 Assets" />
        <TextBlock Text="Open" Margin="8, 0, 0, 0" />
    </StackPanel>
</Button>

強調スタイルのボタン​

<Button Style="{StaticResource AccentButtonStyle}" Content="Accent style button" />

幅いっぱいに伸ばす​

<Button Content="Button" HorizontalAlignment="Stretch" />

ボタンの無効化​

<Button IsEnabled="False" Content="Button" />

C# では ボタン.IsEnabled = 真偽値; で有効化 / 無効化が可能。

ボタンを非表示​

Visibility="Collapsed" でコンポーネントが無くなったように見える。Visibility="Visible" で表示。

<Button Name="Btn" Content="Button" Visibility="Collapsed" />

無効化されたボタンを C# で表示 / 非表示するには、以下のようにする。

/* 表示 */
Btn.Visibility = Visibility.Visible;

/* 非表示 */
Btn.Visibility = Visibility.Collapsed;

関数の呼び出し​

C#​

void Button_Click(object sender, RoutedEventArgs e)
{
    // 処理
}

XAML​

<Button Click="Button_Click" Content="Button" />

結論 <MenuFlyoutItem.Icon> を使用する​

参考: MenuFlyoutItem.Icon プロパティ

例

<MenuBar>
    <MenuBarItem Title="File" x:Uid="File">
        <MenuFlyoutItem x:Name="Open" Text="Open" x:Uid="Open">
            <MenuFlyoutItem.Icon>
                <FontIcon Glyph="&#xED25;" FontFamily="Segoe MDL2 Assets" />
            </MenuFlyoutItem.Icon>
            <MenuFlyoutItem.KeyboardAccelerators>
                <KeyboardAccelerator Modifiers="Control" Key="O"/>
            </MenuFlyoutItem.KeyboardAccelerators>