公開鍵認証とは、暗号化やデジタル署名に使われる技術の一つで、公開鍵と秘密鍵という二つの鍵を使って通信相手の本人確認や暗号化を行う方法です。 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>

平成 30 年に取得したマイナカード、 何に使ってどう便利だったかをまとめる。 不便なところもまとめる。

利用したこと​

1. コンビニで証明書印刷
   • 住民票の写し
   • 所得証明書

わざわざ、市役所 (出張所) に出向き、並ぶ必要がないので便利。

2. 本人確認
   • スマホの通信契約
   • 証券会社の口座開設
   • 銀行の口座開設
   • なんとか Pay の本人確認
   • コロナワクチンの受付時の本人確認

今後はマイナンバーカードがないと本人確認は厳しいかも。 社会も性善説では通用しなくなってきてるし、仕方ないかも。 運転することはないのに、身分証明のために運転免許証を取るといったことはしなくていいのでそこは良い。多分、２割くらいはいそう。

3. 確定申告

フォームに数値を打ち込んで送信するだけだった。医療費控除の計算もできるし、便利。

4. 保険証利用

保険証を持ち歩かなくて済むのはいいが、 資格確認システムのバグで利用できなくて困ることが何回かあったので、念のため保険証を持ち歩くのがよさそう。 薬局で処方された医薬品情報がマイナポータルで確認できるのが便利。(薬のアレルギー持ちの人は特に) マイナカードを利用せず、保険証で利用したところは、 医療費の計算をしてくれるのかな？そこはちょっとわからない。

5. 転出届

3月末の混む時期に市役所 (出張所) に行って、転出届を出すのは気が滅入るが、マイナポータルを利用し転出届がオンラインで出せる。 注意しなければならないことは、転入届を忘れないこと。 (ちなみに、市役所・区役所行くより、出張所のほうが混んでないのでおすすめ。) 転入時にマイナンバーの暗証番号も再設定しなければいけないのが面倒だった。

6. スマホ電子証明書

スマホにマイナンバーの電子証明書を搭載できる。 マイナポータルにカードレスでログインできるので便利かも。

不満なところ​

1. スマホアプリの NFC スマホに電子証明書を搭載しているのに、毎回 NFC を要求される。NFC を有効にしておかなければアプリが開かないのは不便なので、改善を期待したい。

2. マイナンバーが記載されている マイナンバーカードにマイナンバーを記載することで、 紛失したときのリスクがある。とはいっても悪用は考えづらいが。クレジットカードのようにナンバーレスにしてほしい。

3. 写真がモノクロ マイナンバーカードに内蔵されている写真はモノクロ。 なぜカラーにしなかった。

4. 更新が面倒 電子証明書のセキュリティの関係で更新が 5 年だとか。 しかし、有効期間は 10 年間。 おいおい。 改善されるとかされないとからしいが。

5. カードが使えない病院 国から補助金がいくらか出ているそうなので、対応してほしい。

6. 暗証番号の種類が多い 暗証番号の種類が 4 種類もある。1 種類にしてほしいが、 セキュリティ的に難しいのだろうか。わからん。

7. 券面がダサい 無線従事者の免状を見習ってほしい。

多分、勘違いされていること​

マイナカードの的外れな批判が多いのでまとめていく。 批判する前に、仕組みを理解してほしい。

1. マイナカードから紐づけされた個人情報が抜かれる これは、一部正しい。 マイナカードそのものには住所、氏名、性別、生年月日などの基本的な個人情報しか存在しない。運転免許証よりも情報は少ないだろう。 マイナカードと紐づけされた情報を見るには、その紐づけされたサイトを開き、マイナカードから認証する必要がある。 紐づけされた情報はマイナカードと暗証番号がないとみられないわけだ。もちろん、カードに暗証番号を書いて、そのカードをなくしたりしたら、様々な個人情報が抜かれる可能性はある。この点はキャッシュカードと似てる。

2. 暗証番号が 4 桁しかなく、セキュリティが甘い セキュリティが甘いのは誤り。 パソコンで SNS へのログインを考えてみると、ID とパスワードでログインできる。 SNS では ID は簡単にわかるので、パスワードがあればログインができる。いくらパスワードが複雑だろうと、一要素認証なわけだ。 一方マイナンバーカードは、カードの所持＋暗証番号の知識という二要素認証となっている。 Windows などで、PIN コードでログインできるようになっているのも、複雑なパスワードを用いた一要素認証よりも、所持＋記憶の二要素認証のほうがセキュリティが高いと言われているからだ。

3. 保険証の紐づけの誤り これは、保険組合の紐づけミス、ヒューマンエラーである。 マイナカードはあくまでも個人認証する仕組みしかなく、マイナカードの問題ではない。 しかし、保険組合で紐づけるミスをどうにかしろというのはある。 保険証情報はマイナポータルで確認できるので、一度確認したほうが望ましい。

4. マイナカードなしで窓口 10 割負担なんてとんでもない 従来と同様、保険組合で手続きすることで返金を受けられる。 とはいっても資格証明書という本末転倒な仕組みを導入するそうだが。

Poetry のインストール​

Poetry のインストールは pip で行う。 (pip のアップグレードもついでに行う。)

python -m pip install --upgrade pip
pip install poetry

Poetry で Python プロジェクトの作成​

1. 新規で Python プロジェクトを作成する場合​

新規に Python プロジェクトを作成する場合は、 poetry new を実行する。 Python プロジェクトのひな形が生成される。

poetry new xxxxxxxx

2. 既に Python プロジェクトがある場合​

既に Python プロジェクトがある場合は、poetry init で Poetry の実行に必要な設定ファイルを追加する。

poetry init

Poetry の仮想環境に入る​

poetry shell を実行で、 Poetry の仮想環境でシェルが起動する。 Poetry を利用して追加したパッケージが使用できる。

poetry shell

Poetry にパッケージを追加​

poetry add で依存パッケージを追加できる。

poetry add xxxxxxxx

その他のよく使うコマンド​

• poetry list コマンド一覧を表示
• poetry build パッケージの作成 (.tar.gz, .whl)
• poetry install 依存パッケージのインストール
• poetry publish pypi などに作成物を公開
• poetry search パッケージの検索
• poetry run Poetry 環境でコマンドを実行
• poetry show 利用可能なパッケージを表示
• poetry update 依存パッケージのアップデートを実行

情報発信では、Twitter、Instagram がメジャーであるが、規約や仕様によって制限され自由度が小さい。 個人サイトというものに回帰してみるのもアリである。 このサイトは、W○X 等を利用していないので、宣伝や広告がなくユーザーフレンドリーである。

デザイン的なこと​

このサイトは、Jekyll というフレームワーク的なもので作られており、 テーマはすべて自作している。 ここでいうテーマは、フォントの大きさ、サイズやサイトの構造、余白等だ。 また、レスポンシブデザイン (スマホ、パソコンなどの様々なデバイスに対応するデザイン) やダークモードにも対応している。 一見シンプルに見えるが、CSS だけで、13.5 KiB もある。 これには、理由がある。 デザインを理解していない人が作るプレゼンテーション資料によくみられるが、 強調色を多用したり、虹色のグラデーションや小さい余白などの使用でダサいデザインができる。 このように、下手にデザインをするとかえってダサくなるのだ。 つまり、強調色を多用せず余白を適切に設定するなどすれば良いのだ。 それらを細かく行った結果が、膨大な量の CSS である。 このホームページがダサいという人がいれば意見してほしい。 個人的にはシンプルでムダな動作がないウェブサイトがベストだと考えている。

ホームページの設計​

このホームページは Jekyll で作られている。 Jekyll は HTML のテンプレートを書いておき、 マークダウンの内容をテンプレートと組み合わせることでウェブページの作成が楽になっている。 具体的には、通常なら HTML をページひとつひとつに書く必要があり、 変更したい場合はひとつひとつのページを変更するといった面倒なことをしなければならないが、 Jekyll を使用することで、変更が容易になっている。

GitHub Pages への配置​

このサイトは GitHub Pages を利用している。 GitHub Pages は無料でもウェブページが公開でき、さらに独自ドメインを設定することができる。 ただし、無料の場合はパブリックリポジトリのみ Pages が利用可能といった制限がある。 Jekyll の配置だが GitHub Actions を使用することで、プッシュしたときにウェブページが生成されるようになっている。 Jekyll はプッシュしただけでもページが生成されるようにできるが、workflows を使用することでプラグインの利用を可能としている。

必要な技術​

このような個人サイトの作成に必要な技術は、

• Jekyll
• HTML
• CSS / SASS
• GitHub
• JavaScript / TypeScript (必須ではない)

である。 個人サイトを作成するだけで、これだけの技術力が身につくことを考えれば、 プログラミング初心者にはまず、個人サイトを作成することを勧めたい。

使用する関数​

• byte[] Encoding.UTF8.GetBytes(string)
  string から byte[] に変換
• MD5 MD5.create()
  MD5 インスタンスを生成
• byte[] md5.ComputeHash(byte[])
  byte[] から MD5 ハッシュを生成

例​

string str2MD5(string src)
{
    byte[] srcBytes = Encoding.UTF8.GetBytes(src);
    string MD5src;
    using (MD5 md5 = MD5.Create())
    {
        byte[] MD5srcBytes = md5.ComputeHash(srcBytes);
        StringBuilder sb = new();
        for (int i = 0; i < MD5srcBytes.Length; i++)
            sb.Append(MD5srcBytes[i].ToString("x2"));
        MD5src = sb.ToString();
    }
    return MD5src;
}